Update src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Playfair_Display, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'AMAN Renovations | Amsterdam',
+  title: 'Welcome to Our Platform',
-  description: 'Premium home renovations and craftsmanship in Amsterdam.',
+  description: 'Empowering your business with cutting-edge technology.',
   openGraph: {
     "siteName": "AMAN Klussenbedrijf",
     "type": "website"

src/app/page.tsx

@@ -1,126 +1,120 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import TextAbout from '@/components/sections/about/TextAbout';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactText from '@/components/sections/contact/ContactText';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { ArrowRight, Shield, Zap, Target, Star, Globe } from 'lucide-react';
+import { ArrowRight, Shield, Zap, Target, Star, CheckCircle } from 'lucide-react';
 
-const navItems = [
+const navItems = [{ name: "Home", id: "/" }];
-  { name: "Home", id: "/" },
-  { name: "About", id: "/about" },
-  { name: "Contact", id: "/contact" }
-];
 
 export default function Page() {
   return (
-    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+        <NavbarStyleApple navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardGallery 
+        <HeroSplitKpi 
-          title="Welcome to Webild"
+            title="Welcome to Our Platform" 
-          description="Next-generation digital experiences"
+            description="Empowering your business with cutting-edge technology and seamless integration." 
-          background={{ variant: "animated-grid" }}
+            background={{ variant: 'plain' }} 
-          mediaItems={[
+            kpis={[{ value: "10K+", label: "Active Users" }, { value: "99.9%", label: "Uptime" }, { value: "24/7", label: "Support" }]} 
-            { imageSrc: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" },
+            enableKpiAnimation={true} 
-            { imageSrc: "https://images.unsplash.com/photo-1614850523459-c2f4c699c52e" },
+            mediaAnimation="slide-up" 
-            { imageSrc: "https://images.unsplash.com/photo-1620121692029-d088224ddc74" }
-          ]}
-          mediaAnimation="blur-reveal"
         />
       </div>
       <div id="about" data-section="about">
-        <TextAbout title="About Our Vision" useInvertedBackground={false} />
+        <InlineImageSplitTextAbout 
+            heading={[{ type: 'text', content: "Innovating for the future" }]} 
+            useInvertedBackground={false} 
+        />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardTwentySix 
+        <FeatureHoverPattern 
-          title="Our Services"
+            title="Our Services" 
-          description="Tailored solutions for your business growth."
+            description="Comprehensive solutions for your growth." 
-          textboxLayout="default"
+            animationType="slide-up" 
-          useInvertedBackground={false}
+            textboxLayout="default" 
-          features={[
+            useInvertedBackground={false} 
-            { title: "Strategy", description: "Planning your success", buttonIcon: Target },
+            features={[
-            { title: "Development", description: "Building the future", buttonIcon: Zap },
+                { icon: Shield, title: "Secure Infrastructure", description: "Top-tier protection for your data." },
-            { title: "Design", description: "Crafting experiences", buttonIcon: Star },
+                { icon: Zap, title: "High Performance", description: "Lightning fast processing speeds." },
-            { title: "Security", description: "Keeping you safe", buttonIcon: Shield }
+                { icon: Target, title: "Goal Focused", description: "Strategy-driven development." }
-          ]}
+            ]} 
         />
       </div>
       <div id="portfolio" data-section="portfolio">
-        <ProductCardFour 
+        <ProductCardOne 
-          gridVariant="bento-grid"
+            title="Our Work" 
-          animationType="blur-reveal"
+            description="See our latest projects and deliverables." 
-          textboxLayout="default"
+            gridVariant="three-columns-all-equal-width" 
-          useInvertedBackground={false}
+            animationType="slide-up" 
-          title="Portfolio"
+            textboxLayout="default" 
-          description="Our selected creative work."
+            useInvertedBackground={false} 
-          products={[
+            products={[
-            { id: "p1", name: "Web Design", price: "$500", variant: "Standard", imageSrc: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" },
+                { id: "1", name: "Product A", price: "$99", imageSrc: "/placeholder.jpg" },
-            { id: "p2", name: "Logo Design", price: "$200", variant: "Premium", imageSrc: "https://images.unsplash.com/photo-1614850523459-c2f4c699c52e" },
+                { id: "2", name: "Product B", price: "$199", imageSrc: "/placeholder.jpg" },
-            { id: "p3", name: "Full Stack", price: "$1000", variant: "Enterprise", imageSrc: "https://images.unsplash.com/photo-1620121692029-d088224ddc74" }
+                { id: "3", name: "Product C", price: "$299", imageSrc: "/placeholder.jpg" }
-          ]}
+            ]} 
         />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix 
+        <TestimonialCardTwelve 
-          title="Client Feedback"
+            cardTitle="Client Feedback" 
-          animationType="blur-reveal"
+            cardTag="Reviews" 
-          textboxLayout="default"
+            cardAnimation="slide-up" 
-          useInvertedBackground={false}
+            useInvertedBackground={false} 
-          description="What our clients say about us."
+            testimonials={[
-          testimonials={[
+                { id: "1", name: "Jane Doe", imageSrc: "/avatar1.jpg" },
-            { id: "1", name: "Alex", handle: "@alex", testimonial: "Excellent work!", icon: Globe },
+                { id: "2", name: "John Smith", imageSrc: "/avatar2.jpg" }
-            { id: "2", name: "Sam", handle: "@sam", testimonial: "Highly recommended.", icon: Star }
+            ]} 
-          ]}
         />
       </div>
       <div id="process" data-section="process">
-        <MetricCardEleven 
+        <MetricCardSeven 
-          title="Our Process"
+            title="Our Process" 
-          animationType="blur-reveal"
+            description="Our workflow follows a clear, efficient path." 
-          description="Efficient workflow for top results."
+            animationType="slide-up" 
-          useInvertedBackground={false}
+            textboxLayout="default" 
-          metrics={[
+            useInvertedBackground={false} 
-            { id: "1", value: "100%", title: "Quality", description: "Guaranteed", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71" },
+            metrics={[
-            { id: "2", value: "24/7", title: "Support", description: "Always here", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71" }
+                { id: "1", value: "1", title: "Discovery", items: ["Research", "Strategy"] },
-          ]}
+                { id: "2", value: "2", title: "Development", items: ["Coding", "Testing"] }
+            ]} 
         />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitText 
+        <FaqDouble 
-          faqsAnimation="blur-reveal"
+            title="Frequently Asked Questions" 
-          sideTitle="Questions"
+            description="Answers to common questions about our services." 
-          useInvertedBackground={false}
+            faqsAnimation="slide-up" 
-          faqs={[
+            textboxLayout="default" 
-            { id: "1", title: "What do you do?", content: "Everything digital." },
+            useInvertedBackground={false} 
-            { id: "2", title: "How to contact?", content: "Via the form below." }
+            faqs={[
-          ]}
+                { id: "1", title: "How do I start?", content: "Contact our team today." },
+                { id: "2", title: "Is it secure?", content: "Yes, we use industry-leading encryption." }
+            ]} 
         />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplit 
+        <ContactText 
-          tag="Contact"
+            text="Get in touch with our team." 
-          title="Get in touch"
+            background={{ variant: 'plain' }} 
-          description="Let us build something great together."
+            useInvertedBackground={false} 
-          useInvertedBackground={false}
-          background={{ variant: "plain" }}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseCard 
+        <FooterSimple 
-          logoText="Webild"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} 
-          columns={[
+            bottomLeftText="© 2024 Webild" 
-            { title: "Links", items: [{ label: "Home", href: "/" }] }
+            bottomRightText="All rights reserved." 
-          ]}
         />
       </div>
     </ThemeProvider>