Merge pull request #19 from sinatra-pod/mutuajoseph/landing-page

Feat: Added the landing page.
sinatra-pod · Mar 2, 2023 · 19f8576 · 19f8576
2 parents 69dac19 + 1b811e0
commit 19f8576
Show file tree

Hide file tree

Showing 5 changed files with 295 additions and 13 deletions.
diff --git a/src/components/Films/FilmDetail.tsx b/src/components/Films/FilmDetail.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+const FilmDetail = ({ film }: any) => {
+  return (
+    <div className="w-[25%]">
+      <div>
+        <img
+          src="https://images.unsplash.com/photo-1579935110464-fcd041be62d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fHN0YXIlMjB3YXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60"
+          alt="single film"
+        />
+      </div>
+
+      <div className="my-2 space-y-4">
+        <h3 className="font-semibold text-xl">{film.title}</h3>
+        <p className="font-extralight">{film.description}</p>
+        <button className="relative w-[40%] inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-red-900 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200">
+          <span className="relative w-[100%] px-5 py-5 transition-all ease-in duration-75 bg-black rounded-md group-hover:bg-opacity-0">
+            Outlined
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FilmDetail;
diff --git a/src/components/Films/FilmsList.tsx b/src/components/Films/FilmsList.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import FilmDetail from "./FilmDetail";
+
+const FilmsList = ({films}: any) => {
+  return (
+    <div className="flex justify-start gap-8 flex-wrap">
+      {films ? (
+        films.map((film: any, index: number) => <FilmDetail key={index} film={film} />)
+      ) : (
+        <>No films to load</>
+      )}
+    </div>
+  );
+};
+
+export default FilmsList;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Footer = () => {
+  return (
+    <footer className="text-white p-8">
+      <div className="sm:flex sm:items-center sm:justify-between container mx-auto">
+        <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+          © 2023{" "}
+          <Link to="https://flowbite.com/" className="hover:underline">
+            Flowbite™
+          </Link>
+          . All Rights Reserved.
+        </span>
+        <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+          <Link
+            to="#"
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="sr-only">Facebook page</span>
+          </Link>
+          <Link
+            to="#"
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="sr-only">Instagram page</span>
+          </Link>
+          <Link
+            to="#"
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+            </svg>
+            <span className="sr-only">Twitter page</span>
+          </Link>
+          <Link
+            to="#"
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="sr-only">GitHub account</span>
+          </Link>
+          <Link
+            to="#"
+            className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="sr-only">Dribbbel account</span>
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { FaUserCircle } from "react-icons/fa";
+import Logo from "../images/starwarslogo.png";
+
+const Navbar = () => {
+  return (
+    <div className="w-full">
+      <div className="text-white flex justify-between items-center container mx-auto">
+        <div>
+          <img src={Logo} alt="Starwars Logo" />
+        </div>
+        <div className="flex gap-12 font-extralight text-lg">
+          <div>Home</div>
+          <div>People</div>
+          <div>Vehicles</div>
+          <div>Planets</div>
+        </div>
+        <div className="">
+          <FaUserCircle className="text-4xl" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
@@ -1,23 +1,129 @@
 import React from "react";
-import useHeader from "../hooks/useHeader";
-import {getUser} from "../utils/authData";
-import {useNavigate} from "react-router-dom";
+import { getUser } from "../utils/authData";
+import { useNavigate } from "react-router-dom";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import FilmsList from "../components/Films/FilmsList";
+
+const films = [
+  {
+    id: 1,
+    title: "Starwars welcome to galaxy",
+    description:
+      "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,",
+  },
+  {
+    id: 2,
+    title: "Starwars welcome to galaxy",
+    description:
+      "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,",
+  },
+  {
+    id: 3,
+    title: "Starwars welcome to galaxy",
+    description:
+      "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,",
+  },
+];
 
 function Home() {
+  const navigate = useNavigate();
+  if (!getUser()) navigate("/login");
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 text-white mt-4">
+        <section className="flex">
+          <div className="w-[50%] px-20 py-2 space-y-10">
+            <div className="flex justify-between">
+              <div>
+                <h3 className="font-semibold text-xl">Story By</h3>
+                <p className="font-extralight text-lg mt-2">John Doe</p>
+                <p className="font-extralight text-lg">John Doe</p>
+                <p className="font-extralight text-lg">John Doe</p>
+              </div>
+              <div>
+                <h3 className="font-semibold text-xl">Directed By</h3>
+                <p className="font-extralight text-lg mt-2">John Doe</p>
+                <p className="font-extralight text-lg">John Doe</p>
+              </div>
+              <div>
+                <h3 className="font-semibold text-xl">Music</h3>
+                <p className="font-extralight text-lg mt-2">John Doe</p>
+              </div>
+            </div>
+            <div className="space-y-8">
+              <h1 className="text-6xl font-semibold uppercase">
+                May the force be with you
+              </h1>
+              <p className="font-extralight">
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet,
+                non?
+              </p>
+              <div className="flex gap-4">
+                <button
+                  type="button"
+                  className="focus:outline-none w-[40%] text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-5 mr-2 mb-2"
+                >
+                  Filled
+                </button>
 
-    const navigate = useNavigate()
-    if (!getUser()) navigate('/login')
+                <button className="relative w-[40%] inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-red-900 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200">
+                  <span className="relative w-[100%] px-5 py-5 transition-all ease-in duration-75 bg-black rounded-md group-hover:bg-opacity-0">
+                    Outlined
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="w-[50%]">
+            <img
+              className="w-full"
+              src="https://images.unsplash.com/photo-1546561892-65bf811416b9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHN0YXIlMjB3YXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60"
+              alt="starwars"
+            />
+          </div>
+        </section>
 
-  // extract the header from the hook
-  // Header extracted will be used to determine the current page
+        <section className="flex gap-4 px-20 py-20">
+          <div className="w-[30%]">
+            <img
+              className=""
+              src="https://images.unsplash.com/photo-1586136194012-35ceaddbd773?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
+              alt=""
+            />
+          </div>
+          <div className="w-[70%]">
+            <h2 className="text-3xl font-semibold uppercase my-4">Star Wars</h2>
 
-  // extract the header from the hook
-  // Header extracted will be used to determine the current page
-  const { header } = useHeader("Home");
+            <div className="space-y-8">
+            <p className="font-extralight text-lg">
+              "Star Wars" is a space opera franchise created by George Lucas
+              that revolves around a group of rebels fighting against an evil
+              empire. The franchise includes multiple films, books, comics, and
+              other media. The original "Star Wars" trilogy, released in the
+              late 1970s and early 1980s, tells the story of Luke Skywalker and
+              his journey to become a Jedi and defeat the Empire.
+            </p>
+            <p className="font-extralight text-lg">
+              In the prequel trilogy, the backstory of Darth Vader is explored.
+              The prequels follow Jedi Knight Qui-Gon Jinn and his apprentice
+              Obi-Wan Kenobi as they encounter a young Anakin Skywalker, who
+              eventually becomes Darth Vader. The prequels show the Republic's
+              downfall and the rise of the Empire.
+            </p>
+            </div>
+          </div>
+        </section>
 
-  return (
-    <div className="text-red-400 text-4xl flex justify-center items-center h-[100vh] text-center">
-      This the {header} Page
+        <section className="px-20 py-4">
+          <h2 className="text-red-900 font-semibold text-lg my-2 uppercase">All Films</h2>
+          <h4 className="uppercase font-extralight"><span className="font-semibold">Latest</span> Seasons</h4>
+          <FilmsList films={films} />
+        </section>
+      </main>
+      <Footer />
     </div>
   );
 }