Few sections added on homepage

app/(root)/layout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Metadata } from 'next';
 import Navbar from '@/components/custom/Navbar';
+import Footer from '@/components/custom/Footer';
 
 export const metadata: Metadata = {
     title: "ML4E - Machine Learning for Everyone",
@@ -12,6 +13,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <main>
             <Navbar />
             {children}
+            <Footer />
         </main>
     )
 }

app/(root)/page.tsx

@@ -1,3 +1,5 @@
+import CtaSection from "@/components/custom/CtaSection";
+import FeaturesSection from "@/components/custom/FeaturesSection";
 import HeroSection from "@/components/custom/HeroSection";
 import PartnersLogoSection from "@/components/custom/PartnersLogoSection";
 
@@ -6,6 +8,8 @@ export default function Home() {
     <main>
       <HeroSection />
       <PartnersLogoSection />
+      <FeaturesSection />
+      <CtaSection />
     </main>
   );
 }

components/custom/CtaSection.tsx

@@ -0,0 +1,20 @@
+import { BackgroundLines } from "../ui/background-lines";
+import { Button } from "@/components/ui/button";
+
+export default function CtaSection() {
+  return (
+    <div className="max-w-7xl min-h-fit relative mx-auto">
+
+    <BackgroundLines className="flex items-center justify-center w-full flex-col px-4">
+      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
+        Start exploring today! <br /> What will you discover?
+      </h2>
+      <Button size="lg" variant="secondary" className="mt-8">
+        Get started for free
+      </Button>
+    </BackgroundLines>
+    </div>
+  );
+}
+
+

components/custom/FeaturesSection.tsx

@@ -0,0 +1,62 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function FeaturesSection() {
+  const features = [
+    {
+      number: "01",
+      title: "Interactive Tutorials",
+      description:
+        "Master machine learning concepts with our engaging, hands-on tutorials. Progress at your own pace and build a solid foundation in AI and ML.",
+      bgColor: "bg-orange-50",
+    },
+    {
+      number: "02",
+      title: "Collaborative Projects",
+      description:
+        "Work on real-world ML projects with peers. Share ideas, code, and insights in our collaborative environment designed for learning and growth.",
+      bgColor: "bg-green-50",
+    },
+    {
+      number: "03",
+      title: "Community",
+      description:
+        "Connect with a global community of ML enthusiasts. Share knowledge, ask questions, and stay updated with the latest trends in machine learning.",
+      bgColor: "bg-purple-50",
+    },
+  ];
+
+  return (
+    <section className="py-16 px-4 md:py-24">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <div className="text-pink-600 mb-2">Advantages</div>
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+            Empowering Tools for Machine Learning Enthusiasts
+          </h2>
+          <p className="text-muted-foreground max-w-3xl mx-auto">
+            Unlock the potential of machine learning with cutting-edge features
+            tailored to simplify workflows, foster collaboration, and accelerate
+            your learning journey from data to deployment.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {features.map((feature, index) => (
+            <Card key={index} className={`border-none ${feature.bgColor}`}>
+              <CardContent className="p-6">
+                <div className="text-xl font-semibold mb-4">
+                  {feature.number}
+                </div>
+                <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+                <p className="text-muted-foreground">{feature.description}</p>
+
+                {/* Placeholder for feature-specific UI */}
+                <div className="mt-6 h-48 bg-white/50 rounded-lg"></div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/custom/Footer.tsx

@@ -0,0 +1,187 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Instagram, Linkedin, Youtube, Twitter } from "lucide-react";
+import NewsletterSection from "./NewsLetterSection";
+
+export default function Footer() {
+  return (
+    <footer className="relative w-full px-3">
+      <div className="bg-background py-12 md:py-16 lg:py-20">
+        <div className="container mx-auto px-4">
+          {/* Newsletter Section */}
+          <NewsletterSection />
+
+          {/* Footer Grid */}
+          <div className="max-w-7xl mx-auto mt-5 md:mt-10">
+          <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,auto] gap-8 md:gap-24">
+              {/* Company Info */}
+              <div className="space-y-4">
+                <div className="flex items-center jus gap-2">
+                  <Image
+                    src="/logo.png"
+                    alt="logo"
+                    width={40}
+                    height={40}
+                    className="rounded"
+                  />
+                  <span className="font-bold text-xl">ML4E</span>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-muted-foreground max-w-md">
+                    Learn and master machine learning effortlessly with a
+                    comprehensive platform designed for collaboration and growth
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <h3 className="font-semibold">Contact:</h3>
+                  <div className="space-y-1">
+                    <Link
+                      href="mailto:[email protected]"
+                      className="block text-muted-foreground hover:text-foreground"
+                    >
+                      [email protected]
+                    </Link>
+                  </div>
+                </div>
+
+                <div className="flex gap-4 pt-4">
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <Instagram className="h-5 w-5" />
+                    <span className="sr-only">Instagram</span>
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <Twitter className="h-5 w-5" />
+                    <span className="sr-only">Twitter</span>
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <Linkedin className="h-5 w-5" />
+                    <span className="sr-only">LinkedIn</span>
+                  </Link>
+                  <Link
+                    href="#"
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <Youtube className="h-5 w-5" />
+                    <span className="sr-only">YouTube</span>
+                  </Link>
+                </div>
+              </div>
+
+              {/* Sitemap Column */}
+              <div>
+                <h3 className="font-semibold mb-4">Sitemap</h3>
+                <ul className="space-y-2">
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Home
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Features
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Project
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Pricing
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+
+              {/* Company Column */}
+              <div>
+                <h3 className="font-semibold mb-4">Company</h3>
+                <ul className="space-y-2">
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      About Us
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Careers
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Contact Us
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="#"
+                      className="text-muted-foreground hover:text-foreground"
+                    >
+                      Blog
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Bar */}
+          <div className="pt-8 mt-8 border-t">
+            <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+              <p className="text-sm text-muted-foreground">
+                © 2024 ML4E. All rights reserved.
+              </p>
+              <div className="flex gap-4 text-sm">
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  Privacy Policy
+                </Link>
+                <Link
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  Terms of Service
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/custom/HeroSection.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"
 
 export default function HeroSection() {
   return (
-    <div className="relative max-w-7xl bg-gray-100 mx-3 md:mx-5 lg:mx-auto mt-20 rounded-t-xl">
+    <div className="relative max-w-7xl bg-gray-100 mx-3 md:mx-5 lg:mx-auto mt-20 rounded-xl">
       <div className="px-4 sm:px-6 lg:px-8 pt-28 pb-16 text-center">
         <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight sm:text-7xl">
           <span className="block">
@@ -64,12 +64,6 @@ export default function HeroSection() {
             />
           </div>
         </div>
-
-         {/* Blur Effect */}
-         <div
-            className="absolute inset-x-0 -top-16 h-32 w-full bg-gradient-to-t from-gray-100 via-gray-100/80 to-transparent blur-3xl"
-            aria-hidden="true"
-          ></div>
       </div>
 
 

components/custom/NewsLetterSection.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useState } from "react"
+
+export default function NewsletterSection() {
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setStatus('loading')
+
+    try {
+      // Here you would typically call your newsletter subscription API
+      await new Promise(resolve => setTimeout(resolve, 1000)) // Simulate API call
+      setStatus('success')
+      setEmail('')
+    } catch (error) {
+      setStatus('error')
+    }
+  }
+
+  return (
+    <section className="py-12 px-4">
+      <div className="max-w-6xl mx-auto bg-gray-100/50 p-8 rounded-lg">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <div className="space-y-2">
+            <h2 className="text-2xl font-semibold">Join our newsletter</h2>
+            <p className="text-muted-foreground">
+              Get updates from us weekly about project management
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="flex gap-3 w-full md:w-auto">
+            <Input
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="max-w-sm"
+            />
+            <Button 
+              type="submit" 
+              className="bg-[#CBE432] text-black hover:bg-[#CBE432]/90"
+              disabled={status === 'loading'}
+            >
+              Subscribe
+            </Button>
+          </form>
+        </div>
+
+        {status === 'success' && (
+          <p className="mt-2 text-sm text-green-600">
+            Thanks for subscribing!
+          </p>
+        )}
+        {status === 'error' && (
+          <p className="mt-2 text-sm text-red-600">
+            Something went wrong. Please try again.
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}
+