Update src/app/page.tsx

src/app/page.tsx

@@ -1,199 +1,93 @@
 "use client";
 
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import FooterBase from "@/components/sections/footer/FooterBase";
-import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
-import FaqDouble from "@/components/sections/faq/FaqDouble";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, Brain, Sparkles, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye } from "lucide-react";
 
-export default function AIAgentsTemplatePage() {
+export default function Home() {
-    const navItems = [
+  const navItems = [
-        { name: "Features", id: "features" },
+    { name: "Services", id: "services" },
-        { name: "Pricing", id: "pricing" },
+    { name: "Contact", id: "contact" },
-        { name: "Docs", id: "docs" },
+  ];
-        { name: "Contact", id: "contact" },
-    ];
 
-    const features: FeatureCard[] = [
+  const services = [
-        {
+    {
-            bentoComponent: "3d-task-list",            title: "Agent Tasks",            items: [
+      id: "1",      title: "Website Design",      subtitle: "Stunning visual experiences",      category: "Design",      value: "Custom layouts"},
-                { icon: Search, label: "Research competitors", time: "2m ago" },
+    {
-                { icon: FileText, label: "Analyze market data", time: "5m ago" },
+      id: "2",      title: "Landing Pages",      subtitle: "Optimized for conversion",      category: "Marketing",      value: "High conversion"},
-                { icon: CheckCircle, label: "Generate report", time: "8m ago" },
+    {
-                { icon: Send, label: "Send to stakeholders", time: "10m ago" },
+      id: "3",      title: "Lead Generation Systems",      subtitle: "Capture more inquiries",      category: "Growth",      value: "Automated"},
-            ],
+    {
-            description: "Agents break down complex goals into manageable tasks and execute them autonomously."},
+      id: "4",      title: "AI Chat Integration",      subtitle: "24/7 engagement",      category: "AI",      value: "Smart support"},
-        {
+  ];
-            bentoComponent: "chat",            aiIcon: Bot,
-            userIcon: User,
-            exchanges: [
-                { userMessage: "Summarize our Q4 sales data", aiResponse: "Q4 revenue was $2.4M, up 23% from Q3. Top performer: Enterprise tier." },
-                { userMessage: "What about customer retention?", aiResponse: "Retention rate improved to 94%, with churn down 12% quarter-over-quarter." },
-            ],
-            placeholder: "Ask your agent anything...",            title: "Natural Conversations",            description: "Interact with your agents through natural language. They understand context and intent."},
-        {
-            bentoComponent: "3d-card-grid",            items: [
-                { name: "Code", icon: Code },
-                { name: "Data", icon: Database },
-                { name: "Workflow", icon: Workflow },
-                { name: "Config", icon: Settings },
-            ],
-            centerIcon: Brain,
-            title: "Tool Integration",            description: "Connect agents to your existing tools and let them take action across your entire stack."},
-    ];
 
-    const testimonials = [
+  const footerColumns = [
-        { id: "1", name: "Sarah Chen", handle: "CTO at DataFlow", testimonial: "AgentFlow cut our data processing time by 80%.", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg" },
+    { title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
-        { id: "2", name: "Marcus Rodriguez", handle: "VP Engineering at ScaleUp", testimonial: "We deployed 50 agents in production within a week.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-work_23-2149362876.jpg" },
+    { title: "Company", items: [{ label: "Email: kjwebstudio@outlook.com", href: "mailto:kjwebstudio@outlook.com" }] },
-        { id: "3", name: "Emily Watson", handle: "Head of AI at TechCorp", testimonial: "The tool integration is seamless.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-working-laptop-smiling-while-sitting-sidewalk-cafe_231208-12079.jpg" },
+  ];
-    ];
 
-    const pricingPlans = [
+  return (
-        { id: "starter", price: "$29/mo", name: "Starter", buttons: [{ text: "Get Started", href: "#" }], features: ["3 active agents", "5,000 runs/month", "Basic integrations"] },
+    <ThemeProvider
-        { id: "pro", price: "$99/mo", name: "Professional", buttons: [{ text: "Get Started", href: "#" }], features: ["15 active agents", "50,000 runs/month", "All integrations"] },
+      defaultButtonVariant="icon-arrow"
-        { id: "business", badge: "Most Popular", price: "$299/mo", name: "Business", buttons: [{ text: "Get Started", href: "#" }], features: ["50 active agents", "250,000 runs/month", "Custom integrations"] },
+      defaultTextAnimation="background-highlight"
-    ];
+      borderRadius="rounded"
-
+      contentWidth="medium"
-    const faqs = [
+      sizing="medium"
-        { id: "1", title: "What are AI agents?", content: "Autonomous software that plans and executes tasks." },
+      background="none"
-        { id: "2", title: "How do I start?", content: "You can get your first agent running in under 15 minutes." },
+      cardStyle="gradient-bordered"
-    ];
+      primaryButtonStyle="gradient"
-
+      secondaryButtonStyle="layered"
-    const footerColumns = [
+      headingFontWeight="semibold"
-        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+    >
-        { title: "Support", items: [{ label: "Contact", href: "#contact" }] },
+      <NavbarStyleFullscreen
-    ];
+        navItems={navItems}
-
+        brandName="KJWebStudio"
-    return (
+        bottomLeftText="Web Solutions"
-        <ThemeProvider
+        bottomRightText="kjwebstudio@outlook.com"
-            defaultButtonVariant="icon-arrow"
+      />
-            defaultTextAnimation="background-highlight"
+      <div id="hero">
-            borderRadius="rounded"
+        <HeroBillboardGallery
-            contentWidth="medium"
+          title="Websites that turn visitors into customers"
-            sizing="medium"
+          description="We help local businesses grow by crafting high-performance websites that capture leads and drive results. Fast turnaround • Mobile-first • Built for results."
-            background="none"
+          background={{ variant: "canvas-reveal" }}
-            cardStyle="gradient-bordered"
+          buttons={[{ text: "Request a Website", href: "#contact" }, { text: "View Work", href: "#services" }]}
-            primaryButtonStyle="gradient"
+          mediaItems={[
-            secondaryButtonStyle="layered"
+            { imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg", imageAlt: "Coding" },
-            headingFontWeight="semibold"
+            { imageSrc: "http://img.b2bpic.net/free-photo/top-view-workspace-with-smartphone-laptop_23-2148784013.jpg", imageAlt: "Workspace" },
-        >
+            { imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-working-with-data-laptop_23-2149372559.jpg", imageAlt: "Data" }
-            <NavbarStyleFullscreen
+          ]}
-                navItems={navItems}
+          mediaAnimation="blur-reveal"
-                brandName="KJWebStudio"
+        />
-                bottomLeftText="Expert Web Solutions"
+      </div>
-                bottomRightText="kjwebstudio@outlook.com"
+      <div id="services">
-            />
+        <FeatureCardTwentyEight
-            <HeroBillboardDashboard
+          title="Our Services"
-                background={{ variant: "canvas-reveal" }}
+          description="Specialized digital solutions designed to help your business reach its goals."
-                tag="Web Development Partner"
+          features={services}
-                tagIcon={Code}
+          animationType="slide-up"
-                title="Professional Web Solutions Built for Growth"
+          textboxLayout="default"
-                description="We build high-performance, custom websites tailored to your business needs."
+          useInvertedBackground={false}
-                buttons={[{ text: "Let's Connect", href: "#contact" }]}
+        />
-                dashboard={{
+      </div>
-                    title: "Project Management",                    logoIcon: Code,
+      <div id="contact">
-                    imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-with-curly-dark-hair-blowing-his-cheeks_273609-14064.jpg",                    stats: [
+        <ContactSplit
-                        { title: "Projects", values: [10, 25, 40], description: "Successful deployments" },
+          tag="Let's Connect"
-                        { title: "Support", values: [5, 10, 15], description: "Active clients" },
+          title="Ready to start your project?"
-                        { title: "Uptime", values: [99, 99, 100], valueSuffix: "%", description: "Average uptime" },
+          description="Reach out to us at kjwebstudio@outlook.com and let's turn your ideas into a high-converting website."
-                    ],
+          imageSrc="http://img.b2bpic.net/free-photo/cheerful-business-woman-using-laptop-office_1262-14064.jpg"
-                    listTitle: "Recent Activity",                    listItems: [
+          background={{ variant: "canvas-reveal" }}
-                        { icon: CheckCircle, title: "New Client Onboarding", status: "Complete" },
+          useInvertedBackground={false}
-                        { icon: Zap, title: "Site Optimization", status: "Running" },
+          onSubmit={(email) => console.log("Form submitted with email:", email)}
-                    ],
+        />
-                }}
+      </div>
-            />
+      <FooterBase
-            <div id="features">
+        logoText="KJWebStudio"
-                <FeatureBento
+        columns={footerColumns}
-                    features={features}
+        copyrightText="© 2025 KJWebStudio"
-                    animationType="slide-up"
+      />
-                    tag="Services"
+    </ThemeProvider>
-                    tagIcon={Settings}
+  );
-                    title="End-to-End Web Services"
+}
-                    description="Comprehensive solutions for every stage of your online presence."
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                />
-            </div>
-            <FeatureHoverPattern
-                animationType="slide-up"
-                tag="Quality First"
-                tagIcon={Shield}
-                title="Why Partner With Us?"
-                description="Expertise that scales with your business goals."
-                textboxLayout="default"
-                useInvertedBackground={false}
-                features={[
-                    { icon: Code, title: "Modern Tech Stack", description: "Fast, secure, and modern frameworks." },
-                    { icon: Database, title: "Scalable Design", description: "Architecture built to grow with you." },
-                ]}
-            />
-            <MetricSplitMediaAbout
-                tag="About Us"
-                tagIcon={User}
-                title="Your Vision, Our Implementation"
-                description="At KJWebStudio, we bridge the gap between creative ideas and technical execution. Our focus is on building user-centric, high-converting digital experiences that reflect your brand identity perfectly."
-                metrics={[{ value: "100%", title: "Satisfaction" }, { value: "24/7", title: "Reliable" }]}
-                imageSrc="http://img.b2bpic.net/free-photo/computer-screens-desk-empty-software-it-agency-office-computers-background-running-programming-code-data-algorithms-neural-network-servers-cloud-computing-data-room_482257-33530.jpg"
-                mediaAnimation="slide-up"
-                metricsAnimation="slide-up"
-                useInvertedBackground={false}
-            />
-            <TestimonialCardSix
-                testimonials={testimonials}
-                animationType="slide-up"
-                tag="Reviews"
-                tagIcon={Star}
-                title="What Our Clients Say"
-                description="Hear from businesses we have helped grow online."
-                textboxLayout="default"
-                useInvertedBackground={false}
-            />
-            <div id="pricing">
-                <PricingCardThree
-                    plans={pricingPlans}
-                    animationType="slide-up"
-                    tag="Pricing"
-                    tagIcon={CreditCard}
-                    title="Transparent Pricing Packages"
-                    description="Clear packages for predictable web development outcomes."
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                />
-            </div>
-            <FaqDouble
-                faqs={faqs}
-                tag="FAQs"
-                tagIcon={HelpCircle}
-                title="Common Questions"
-                description="Quick answers to help you get started."
-                textboxLayout="default"
-                faqsAnimation="slide-up"
-                useInvertedBackground={false}
-            />
-            <div id="contact">
-                <ContactCTA
-                    tag="Get in Touch"
-                    tagIcon={Mail}
-                    title="Have a Project in Mind?"
-                    description="Ready to build your next digital asset? Contact us at kjwebstudio@outlook.com or send a message below to start your project journey."
-                    buttons={[{ text: "Email Us", href: "mailto:kjwebstudio@outlook.com" }]}
-                    background={{ variant: "canvas-reveal" }}
-                    useInvertedBackground={false}
-                />
-            </div>
-            <FooterBaseCard
-                logoText="KJWebStudio"
-                columns={footerColumns}
-                copyrightText="© 2025 KJWebStudio. All rights reserved."
-            />
-        </ThemeProvider>
-    );
-}