From 12f25c87f230374f49a530df98e884c9691fbfca Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Mon, 26 Jan 2026 13:23:37 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 530 +++++++++++++++++++++++------------------------
 1 file changed, 263 insertions(+), 267 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cd2bed2..30843ea 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,280 +1,276 @@
-"use client"
+"use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import SplitAbout from "@/components/sections/about/SplitAbout";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
-import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Zap, Target, Award, Users, Video, Edit3, Smartphone, TrendingUp, Star, Shield, CheckCircle, Play } from "lucide-react";
+import React, { useState, useEffect, useRef } from 'react';
+import { ChevronRight, ArrowRight, Star, Users, Zap, Shield, Globe, Sparkles } from 'lucide-react';
+
+const LandingPage = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const heroRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+
+    if (heroRef.current) {
+      observer.observe(heroRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  const features = [
+    {
+      icon: Zap,
+      title: "Lightning Fast",      description: "Optimized for speed and performance"
+    },
+    {
+      icon: Shield,
+      title: "Secure",      description: "Enterprise-grade security built-in"
+    },
+    {
+      icon: Globe,
+      title: "Global Scale",      description: "Works anywhere, anytime"
+    },
+    {
+      icon: Users,
+      title: "Team Collaboration",      description: "Built for teams of all sizes"
+    }
+  ];
+
+  const testimonials = [
+    {
+      name: "Sarah Johnson",      role: "CEO, TechCorp",      content: "This platform has transformed how we work. Incredible results!",      avatar: "/images/avatar1.jpg"
+    },
+    {
+      name: "Mike Chen",      role: "CTO, StartupXYZ",      content: "The best investment we've made for our team's productivity.",      avatar: "/images/avatar2.jpg"
+    },
+    {
+      name: "Emma Wilson",      role: "Product Manager, InnovateCo",      content: "Game-changing technology that delivers on its promises.",      avatar: "/images/avatar3.jpg"
+    }
+  ];
+
+  const stats = [
+    { number: "10K+", label: "Active Users" },
+    { number: "99.9%", label: "Uptime" },
+    { number: "24/7", label: "Support" },
+    { number: "50+", label: "Countries" }
+  ];
 
-export default function PeakCreationsPage() {
   return (
-    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="soft"
-      contentWidth="medium"
-      sizing="large"
-      background="circleGradient"
-      cardStyle="elevated"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Projektid", id: "projects" },
-            { name: "Teenused", id: "services" },
-            { name: "Hinnakiri", id: "pricing" },
-            { name: "Küsimused", id: "faq" }
-          ]}
-          brandName="Peak Creations"
-          button={{ text: "Broneeri kõne", href: "#contact" }}
-        />
-      </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Navigation */}
+      <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center space-x-2">
+              <Sparkles className="h-8 w-8 text-blue-600" />
+              <span className="text-xl font-bold text-gray-900">WebILD</span>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#features" className="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
+              <a href="#pricing" className="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
+              <a href="#about" className="text-gray-600 hover:text-blue-600 transition-colors">About</a>
+              <a href="#contact" className="text-gray-600 hover:text-blue-600 transition-colors">Contact</a>
+            </div>
 
-      <div id="hero" data-section="hero">
-        <HeroBillboard
-          title="Silmapaistvalt head lühivideod, mis tõstavad lati uutesse kõrgustesse"
-          description="Ainulaadsed lahendused Eestis - maailmatasemel lühivideod, muljetavaldavad maketid ja sotsiaalmeedia bränding"
-          background={{ variant: "sparkles-gradient" }}
-          tag="Uus! Esimene nädal on täiesti tasuta!"
-          tagIcon={Star}
-          buttons={[
-            { text: "Broneeri kõne", href: "#contact" },
-            { text: "Vaata töid", href: "#projects" }
-          ]}
-          imageSrc="https://peak-q6u8.vercel.app/images/logoimage.png"
-          imageAlt="Peak Creations videoproduktsioon"
-        />
-      </div>
+            <div className="flex items-center space-x-4">
+              <button className="text-gray-600 hover:text-blue-600 transition-colors">Sign In</button>
+              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                Get Started
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
 
-      <div id="about" data-section="about">
-        <SplitAbout
-          title="Meie teenused"
-          description="Pakume täielikku lühivideo tootmist ja sotsiaalmeedia brändingut, mis aitab teie brändi silma paista."
-          textboxLayout="default"
-          useInvertedBackground="invertDefault"
-          bulletPoints={[
-            {
-              title: "Lühivideod",              description: "Kaasaegsed ja atraktiivsed lühivideod kõikidele sotsiaalmeedia platvormidele",              icon: Video
-            },
-            {
-              title: "Professionaalne montaazh",              description: "Maailmatasemel monteermine ja kvaliteetsed animatsioonid",              icon: Edit3
-            },
-            {
-              title: "Sotsiaalmeedia bränding",              description: "Täielik sotsiaalmeedia haldus ja sisuplaanide loomine",              icon: Smartphone
-            }
-          ]}
-          imageSrc="https://peak-q6u8.vercel.app/shapes/graphic.png"
-          imageAlt="Peak Creations teenused"
-          imagePosition="right"
-        />
-      </div>
+      {/* Hero Section */}
+      <section ref={heroRef} className="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center">
+            <div className={`transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+              <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+                Build Amazing
+                <span className="text-blue-600 block">Digital Experiences</span>
+              </h1>
+              <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
+                The most powerful platform for creating, managing, and scaling your digital products.
+                Join thousands of companies already using WebILD.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2">
+                  <span>Start Free Trial</span>
+                  <ArrowRight className="h-5 w-5" />
+                </button>
+                <button className="border-2 border-gray-300 text-gray-700 px-8 py-3 rounded-lg text-lg font-semibold hover:border-blue-600 hover:text-blue-600 transition-all duration-300">
+                  Watch Demo
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-      <div id="features" data-section="features">
-        <FeatureCardOne
-          title="Miks valida lühivideod?"
-          description="Lühivideod on tõhus viis vaatajate tähelepanu püüdmiseks ja sõnumi kiireks edastamiseks."
-          textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          useInvertedBackground="noInvert"
-          features={[
-            {
-              title: "Kiire mõju ja tähelepanu",              description: "Lühivideod püüavad vaatajate tähelepanu kiiremini kui pikemad videod. 60% tarbijatest eelistab brändide lühivideoid.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/lightning.png",              imageAlt: "Kiire mõju"
-            },
-            {
-              title: "Efektiivne investeering",              description: "Lühivideod on kiiremad ja odavamad toota, pakkudes samal ajal kõrgemat ROI-d ja laiemat vaatajaskondi.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/coins2.png",              imageAlt: "Efektiivne investeering"
-            },
-            {
-              title: "Brändi teadlikkuse tõstmine",              description: "Kiire ja tõhus viis uute vaatajateni jõudmiseks, luues emotsionaalseid sidemeid ja tõstes brändi tuntust.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/target2.png",              imageAlt: "Brändi teadlikkus"
-            }
-          ]}
-        />
-      </div>
+      {/* Stats Section */}
+      <section className="py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">{stat.number}</div>
+                <div className="text-gray-600">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="Mida meie kliendid arvavad"
-          description="Kuulake, mida meie rahulolev kliendid meie töö kohta arvavad."
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="invertDefault"
-          testimonials={[
-            {
-              id: "1",              name: "Moritz Thomas",              role: "Siemenste",              testimonial: "Peak tegi meie uue videode puhul erakordset tööd. Alates algusest lõpuni ületasid nad kõik ootused.",              icon: Star
-            },
-            {
-              id: "2",              name: "Matthew Tent",              role: "UCLA",              testimonial: "Olen väga rahul saadud tulemusega! Kommunikatsioon oli suurepärane ja protsess kiire.",              icon: Award
-            },
-            {
-              id: "3",              name: "Vishal Air",              role: "Sente AI",              testimonial: "Väga rahul tulemusega! Soovitan animatsioonidega loovate lühivideote jaoks.",              icon: CheckCircle
-            }
-          ]}
-        />
-      </div>
+      {/* Features Section */}
+      <section id="features" className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+              Powerful Features for Modern Teams
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Everything you need to build, deploy, and scale your applications with confidence.
+            </p>
+          </div>
 
-      <div id="projects" data-section="projects">
-        <ProductCardOne
-          title="Tehtud tööd"
-          description="Kollektsioon meie esiletõstetud lühivideodest ja projektidest."
-          textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          useInvertedBackground="noInvert"
-          products={[
-            {
-              id: "1",              name: "Podcast montaazh",              price: "Vaata",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Podcast montaazh näide"
-            },
-            {
-              id: "2",              name: "Marketing video",              price: "Vaata",              imageSrc: "/placeholders/placeholder2.webp",              imageAlt: "Marketing video näide"
-            },
-            {
-              id: "3",              name: "Sotsiaalmeedia sisu",              price: "Vaata",              imageSrc: "/placeholders/placeholder3.webp",              imageAlt: "Sotsiaalmeedia sisu näide"
-            }
-          ]}
-        />
-      </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => {
+              const IconComponent = feature.icon;
+              return (
+                <div key={index} className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+                  <div className="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                    <IconComponent className="h-6 w-6 text-blue-600" />
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{feature.title}</h3>
+                  <p className="text-gray-600">{feature.description}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
 
-      <div id="services" data-section="services">
-        <FeatureCardTwelve
-          title="Meie teenused"
-          description="Valige endale sobiv teenuste pakett meie pakkumiste seast."
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="invertDefault"
-          features={[
-            {
-              id: "luhivideod",              label: "Lühivideod",              title: "Professionaalsed lühivideod kõikidele platvormidele",              items: [
-                "TikTok, Instagram, Facebook optimeeritud",                "Montaazh ja heliefektid",                "Subtiitrid ja animatsioonid",                "Kiire täitmisaeg"
-              ],
-              buttons: [
-                { text: "Saa pakkumine", href: "#contact" }
-              ]
-            },
-            {
-              id: "branding",              label: "Bränding",              title: "Täielik sotsiaalmeedia bränding ja haldus",              items: [
-                "Sisuplaan ja ideede genereerimine",                "Postitamine ja jälgijatega suhtlemine",                "Igakuine raport ja analüüs",                "Professionaalne visuaalse identiteedi loomine"
-              ],
-              buttons: [
-                { text: "Broneeri kõne", href: "#contact" }
-              ]
-            }
-          ]}
-        />
-      </div>
+      {/* Testimonials Section */}
+      <section className="py-20 bg-blue-600">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+              What Our Customers Say
+            </h2>
+            <p className="text-xl text-blue-100 max-w-3xl mx-auto">
+              Don't just take our word for it. Here's what industry leaders have to say about WebILD.
+            </p>
+          </div>
 
-      <div id="pricing" data-section="pricing">
-        <PricingCardTwo
-          title="Hinnakiri"
-          description: "Valige endale sobiv pakett. Esimene nädal on täiesti tasuta!"
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="noInvert"
-          plans={[
-            {
-              id: "luhivideomeister",              badge: "Populaarne",              badgeIcon: Star,
-              price: "2999€/kuu",              subtitle: "Ideaalne valik uudisteportaalidele, podcastidele ja YouTuberitele",              buttons: [
-                { text: "Alusta kohe", href: "#contact" },
-                { text: "Saa rohkem infot", href: "#faq" }
-              ],
-              features: [
-                "6-10x lühivideot, oleneb vajadusest",                "Sisuplaan ja ideede genereerimine",                "Monteerimine ja postitamine",                "Sotsiaalmeedia bränding ja haldus",                "Igakuine raport ja põhjalik analüüs"
-              ]
-            },
-            {
-              id: "custom",              badge: "Paindlik",              badgeIcon: Shield,
-              price: "Kokkuleppe järgi",              subtitle: "Personaalne pakett teie vajadustele",              buttons: [
-                { text: "Broneeri kõne", href: "#contact" },
-                { text: "Küsi pakkumist", href: "#contact" }
-              ],
-              features: [
-                "Personaalne lahendus",                "Paindlik teenuste valik",                "Individuaalne hinnapoliitika",                "Primaarne klienditugi",                "Kohandatud töövoog"
-              ]
-            }
-          ]}
-        />
-      </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <div key={index} className="bg-white p-6 rounded-xl shadow-lg">
+                <div className="flex items-center mb-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
+                  ))}
+                </div>
+                <p className="text-gray-700 mb-6 italic">"{testimonial.content}"</p>
+                <div className="flex items-center">
+                  <img 
+                    src={testimonial.avatar} 
+                    alt={testimonial.name}
+                    className="w-12 h-12 rounded-full mr-4"
+                    onError={(e) => {
+                      e.currentTarget.src = '/images/default-avatar.png';
+                    }}
+                  />
+                  <div>
+                    <div className="font-semibold text-gray-900">{testimonial.name}</div>
+                    <div className="text-gray-600 text-sm">{testimonial.role}</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
-      <div id="faq" data-section="faq">
-        <FaqBase
-          title="Korduma kippuvad küsimused"
-          description="Leiate vastused kõige tavalisematele küsimustele meie teenuste kohta."
-          textboxLayout="default"
-          useInvertedBackground="invertDefault"
-          faqs={[
-            {
-              id: "1",              title: "Kes me oleme?",              content: "Oleme Peak Creations, kaks noort, kes loovad lühivideoid, tuues Eestisse rahvusvaheliselt tunnustatud montaažistiile. Spetsialiseerume TikToki turundusele, kasvatades jälgijaskondi ja kogudes tuhandeid meeldimisi."
-            },
-            {
-              id: "2",              title: "Kellele sobivad Peak Creationsi teenused?",              content: "Meie teenused sobivad ideaalselt nii ettevõtetele (poed, restoranid, pangad jne) kui ka eraisikutele, nagu poliitikud, näitlejad, sportlased, kinnisvaramaaklerid ja teised."
-            },
-            {
-              id: "3",              title: "Miks on lühivideod vajalikud minu brändi jaoks?",              content: "Tänapäeva infoühiskonnas, kus inimeste tähelepanuvõime on lühike, on lühivideod (15 sekundit kuni minut) ideaalsed sõnumi kiireks edastamiseks ja vaatajate tähelepanu hoidmiseks. Need videod suudavad kiiresti luua emotsionaalse sideme vaatajaga."
-            },
-            {
-              id: "4",              title: "Milline on tööprotsess ja kui suur on minu ajakulu?",              content: "Teie ajakulu on minimaalne. Tööprotsess algab videokõnega, kus tutvustame end ja oma teenuseid. Seejärel paneme koos paika plaani ja valime sobiva paketi. Edasine töö toimub meie poolt, nii et teie panus on väga väike."
-            },
-            {
-              id: "5",              title: "Mida tähendab 'esimene nädal on täiesti tasuta'?",              content: "Esimesel nädalal saad kõiki teenuseid tasuta proovida. Pärast seda saad valida endale sobiva paketi."
-            },
-            {
-              id: "6",              title: "Mis platvormidele postitate videod?",              content: "Loome sisu kõigile teie soovitud sotsiaalmeedia platvormidele, olgu selleks TikTok, Instagram, Facebook, YouTube, LinkedIn või Twitter."
-            }
-          ]}
-        />
-      </div>
+      {/* CTA Section */}
+      <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+            Ready to Get Started?
+          </h2>
+          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+            Join thousands of companies that trust WebILD to power their digital transformation.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="bg-white text-blue-600 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
+              Start Free Trial
+            </button>
+            <button className="border-2 border-white text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-white hover:text-blue-600 transition-all duration-300">
+              Contact Sales
+            </button>
+          </div>
+        </div>
+      </section>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Broneeri kõne"
-          tagIcon={Play}
-          title="Alustame koostööd"
-          description="Videokõne, kus tutvustame end ja oma teenuseid. Ei leidnud sobivat? Ära muretse, loome Teile personaalse paketi."
-          useInvertedBackground="noInvert"
-          inputPlaceholder="Sisesta oma e-mail"
-          buttonText="Broneeri kõne"
-          termsText="Klikkides 'Broneeri kõne' nõustute meie tingimuste ja privaatsuspoliitikaga."
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          logoText="Peak Creations"
-          copyrightText="© 2025 | Peak Creations"
-          columns={[
-            {
-              title: "Teenused",              items: [
-                { label: "Lühivideod", href: "#services" },
-                { label: "Montaazh", href: "#services" },
-                { label: "Bränding", href: "#services" }
-              ]
-            },
-            {
-              title: "Ettevõte",              items: [
-                { label: "Meist", href: "#about" },
-                { label: "Projektid", href: "#projects" },
-                { label: "Kontakt", href: "#contact" }
-              ]
-            },
-            {
-              title: "Tugi",              items: [
-                { label: "KKK", href: "#faq" },
-                { label: "Hinnakiri", href: "#pricing" }
-              ]
-            }
-          ]}
-        />
-      </div>
-    </ThemeProvider>
+      {/* Footer */}
+      <footer className="bg-gray-900 py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-4 gap-8">
+            <div>
+              <div className="flex items-center space-x-2 mb-4">
+                <Sparkles className="h-8 w-8 text-blue-400" />
+                <span className="text-xl font-bold text-white">WebILD</span>
+              </div>
+              <p className="text-gray-400">
+                Building the future of digital experiences, one component at a time.
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-4">Product</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Features</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-4">Company</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">About</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Blog</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-4">Support</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Help Center</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact</a></li>
+                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Status</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="border-t border-gray-800 mt-8 pt-8 text-center">
+            <p className="text-gray-400">
+              © 2024 WebILD. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
   );
-}
+};
+
+export default LandingPage;
\ No newline at end of file