feat: landing page v2

src/components/Feature/Feature.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Badge } from 'react-daisyui';
 
 type FeatureProps = {
   title: string;
@@ -8,11 +7,9 @@ type FeatureProps = {
 
 const Feature = ({ title, children }: FeatureProps) => {
   return (
-    <div className="text-center">
-      <Badge className="font-bold text-sm" color="primary" size="lg">
-        {title}
-      </Badge>
-      <div className="mt-2 text-sm">{children}</div>
+    <div className="cursor-pointer py-5 px-4 rounded border border-transparent bg-zinc-100 transition-all hover:bg-white hover:border-zinc-200 hover:shadow hover:rotate-1">
+      <div className="font-semibold">{title}</div>
+      <div className="text-gray-500 text-sm font-light">{children}</div>
     </div>
   );
 };

src/components/Footer/Footer.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { Footer as DaisyFooter } from 'react-daisyui';
+
+const Footer = () => {
+  return (
+    <DaisyFooter className="relative p-10 bg-neutral text-neutral-content">
+      <div>
+        {/* LOGO HERE */}
+        <p>
+          Easy Menu
+          <br />© Copyright 2024 | Easy Menu
+        </p>
+      </div>
+      <div>
+        <DaisyFooter.Title>Services</DaisyFooter.Title>
+        <Link href="/builder">Builder</Link>
+      </div>
+    </DaisyFooter>
+  );
+};
+
+export default Footer;

src/components/LandingPage/EmailSignup.tsx

@@ -0,0 +1,30 @@
+import { Button, Input } from 'react-daisyui';
+
+const EmailSignup = () => {
+  return (
+    <section id="email">
+      <div className="px-4 lg:px-6 max-w-[72rem] mx-auto">
+        <div className="flex flex-col items-center gap-8">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <h2 className="text-3xl sm:text-4xl font-bold">
+              Stay Updated with Easy Menu
+            </h2>
+            <p className="text-sm sm:text-base text-gray-400 font-light max-w-sm lg:max-w-lg">
+              Join our community for news, insights, and special promotions.
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-4">
+            <Input
+              type="email"
+              className="w-80"
+              placeholder="Your Email Address"
+            />
+            <Button color="primary">Subscribe</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EmailSignup;

src/components/LandingPage/FeatureList.tsx

@@ -0,0 +1,47 @@
+import Feature from '@/components/Feature/Feature';
+
+const FeatureList = () => {
+  return (
+    <section id="features" className="bg-zinc-50 w-full">
+      <div className="py-12 lg:py-20 px-4 lg:px-6 max-w-[72rem] mx-auto">
+        <div className="flex flex-col items-center gap-8">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <h2 className="text-3xl sm:text-4xl font-bold">
+              Get to know our features
+            </h2>
+            <p className="text-sm sm:text-base text-gray-400 font-light max-w-sm lg:max-w-lg">
+              Discover the tools that make Easy Menu the ultimate solution for
+              professional, customizable pricing lists.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-rows-2 content-center gap-4 lg:gap-6">
+            <Feature title="Easy to Use">
+              <p>Intuitive interface for </p>
+              <p>quick and easy list creation.</p>
+            </Feature>
+            <Feature title="Simple Design">
+              <p>Clean, user-friendly design.</p>
+            </Feature>
+            <Feature title="Alpha Version">
+              <p>Early access with the latest</p>
+              <p>features and updates.</p>
+            </Feature>
+            <Feature title="Multi Categories">
+              <p>Categorize items for better organization.</p>
+            </Feature>
+            <Feature title="Manage Items">
+              <p>Easily add, edit, delete </p>
+              <p>and organize your items.</p>
+            </Feature>
+            <Feature title="Export as PDF">
+              <p>Generate high-quality PDFs.</p>
+              <p>Ready for print or sharing.</p>
+            </Feature>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureList;

src/components/LandingPage/Hero.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Badge, Button } from 'react-daisyui';
+
+const Hero = () => {
+  return (
+    <section
+      id="hero"
+      className="flex flex-col items-center gap-16 text-center">
+      <div className="flex flex-col justify-center items-center gap-8 max-w-lg lg:max-w-2xl">
+        <Badge
+          className="font-bold text-sm text-white"
+          size="lg"
+          color="primary">
+          Alpha now Available!
+        </Badge>
+        <div className="flex flex-col items-center gap-4">
+          <h1 className="text-4xl sm:text-5xl font-bold">
+            Pricing Lists made <span className="text-primary">simple.</span>
+          </h1>
+          <p className="text-sm sm:text-base max-w-sm lg:max-w-lg text-gray-400 font-light">
+            Effortlessly create simple, customizable PDF pricing lists for your
+            business. Perfect for restaurants, cafes, and more!
+          </p>
+        </div>
+        <Link href="/builder">
+          <Button className="text-white" color="primary">
+            Create Now
+          </Button>
+        </Link>
+      </div>
+      <div className="relative flex justify-center mx-auto px-4 max-w-[72rem] before:content-[''] before:opacity-20 before:blur-3xl before:bg-zinc-900 before:z-1 before:absolute before:w-96 before:h-96 before:-top-12 before:rounded-full">
+        <Image
+          className="shadow-xl rounded-lg z-10"
+          src="/images/Easy-Menu_Alpha.jpeg"
+          alt="Application"
+          quality={100}
+          priority
+          width={1104}
+          height={620}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/Navbar/Navbar.tsx

@@ -10,7 +10,7 @@ import { FiBell, FiMenu } from 'react-icons/fi';
 
 const Navbar = () => {
   return (
-    <DaisyNavbar className="bg-neutral text-neutral-content">
+    <DaisyNavbar className="bg-neutral text-neutral-content shadow-lg">
       <DaisyNavbar.Start>
         <Dropdown>
           <Button tag="label" color="ghost" shape="circle" tabIndex={0}>

src/pages/index.tsx

@@ -1,80 +1,22 @@
-import Feature from '@/components/Feature/Feature';
 import Navbar from '@/components/Navbar/Navbar';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Badge, Button, Hero, Stack } from 'react-daisyui';
+
+import Hero from '@/components/LandingPage/Hero';
+import FeatureList from '@/components/LandingPage/FeatureList';
+import EmailSignup from '@/components/LandingPage/EmailSignup';
+import Footer from '@/components/Footer/Footer';
 
 const Home = () => {
   return (
     <div className="flex flex-col h-screen">
       <Navbar />
-      <main className="flex flex-col items-center overflow-y-auto gap-8 py-8">
-        <Hero>
-          <Hero.Content className="text-center">
-            <div className="flex flex-col items-center gap-6 max-w-xl">
-              <Badge
-                className="font-bold text-sm text-white"
-                size="lg"
-                color="primary">
-                Alpha is now Available
-              </Badge>
-              <div className="flex flex-col items-center gap-4">
-                <h1 className="text-5xl font-bold">
-                  Pricing Lists made{' '}
-                  <span className="text-primary">simple.</span>
-                </h1>
-                <p className="max-w-md">
-                  Effortlessly create simple, customizable PDF pricing lists for
-                  your business. Perfect for restaurants, cafes, and more!
-                </p>
-              </div>
-              <Link href="/builder">
-                <Button color="primary">Create Now</Button>
-              </Link>
-            </div>
-          </Hero.Content>
-        </Hero>
-        <div className="flex flex-col items-center justify-center rounded-2xl bg-neutral-300 shadow-md w-[880px] h-[560px]">
-          <Stack>
-            <div className="grid w-[818px] h-[498px] rounded shadow-md bg-base-200 text-primary-content place-content-center">
-              <Image
-                className="rounded"
-                src="/images/Easy-Menu_Alpha.jpeg"
-                alt="Application"
-                quality={100}
-                priority
-                fill
-              />
-            </div>
-            <div className="grid w-[820px] h-[500px] rounded shadow-md bg-base-200 text-accent-content place-content-center" />
-            <div className="grid w-[820px] h-[500px] rounded shadow-md bg-base-200 text-secondary-content place-content-center" />
-          </Stack>
-        </div>
-        <div className="grid grid-cols-3 grid-rows-2 content-center gap-y-12 gap-x-4 mt-12">
-          <Feature title="Easy to Use">
-            <p>Intuitive interface for </p>
-            <p>quick and easy list creation.</p>
-          </Feature>
-          <Feature title="Simple Design">
-            <p>Clean, user-friendly design.</p>
-          </Feature>
-          <Feature title="Alpha Version">
-            <p>Early access with the latest</p>
-            <p>features and updates.</p>
-          </Feature>
-          <Feature title="Multi Categories">
-            <p>Categorize items for better organization.</p>
-          </Feature>
-          <Feature title="Manage Items">
-            <p>Easily add, edit, delete </p>
-            <p>and organize your items.</p>
-          </Feature>
-          <Feature title="Export as PDF">
-            <p>Generate high-quality PDFs.</p>
-            <p>Ready for print or sharing.</p>
-          </Feature>
-        </div>
-      </main>
+      <div className="flex flex-col items-center overflow-y-auto overflow-x-hidden gap-24">
+        <main className="flex flex-col items-center gap-24 w-full pt-8">
+          <Hero />
+          <FeatureList />
+          <EmailSignup />
+        </main>
+        <Footer />
+      </div>
     </div>
   );
 };