Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -7,112 +7,40 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function Page() {
-  const navItems = [
+  const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
-    { name: 'Home', id: '/' },
-    { name: 'About', id: '/about' },
-    { name: 'Contact', id: '/contact' }
-  ];
   
   return (
-    <ThemeProvider 
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-      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">
         <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Webild" />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboard 
+        <HeroBillboard title="Transform Your Digital Presence" description="Modern, scalable, and beautifully designed web solutions for the next generation of brands." background={{ variant: 'animated-grid' }} />
-          title="Transform Your Digital Presence" 
-          description="Modern, scalable, and beautifully designed web solutions for the next generation of brands." 
-          background={{ variant: 'animated-grid' }} 
-        />
       </div>
       <div id="social-proof" data-section="social-proof">
-        <SocialProofOne 
+        <SocialProofOne names={['Company A', 'Company B', 'Company C']} title="Trusted by industry leaders" description="Joining forces with the best to build tomorrow." textboxLayout="default" useInvertedBackground={false} />
-          names={['Company A', 'Company B', 'Company C']} 
-          title="Trusted by industry leaders" 
-          description="Joining forces with the best to build tomorrow." 
-          textboxLayout="default" 
-          useInvertedBackground={false} 
-        />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardMedia 
+        <FeatureCardMedia animationType="slide-up" title="Core Capabilities" description="Powerful features designed to scale your business." textboxLayout="default" useInvertedBackground={false} features={[{ id: '1', title: 'High Performance', description: 'Optimized for speed and SEO efficiency.', tag: 'Performance' }, { id: '2', title: 'Scalable Architecture', description: 'Built to grow alongside your user base.', tag: 'Scalability' }]} />
-          animationType="slide-up" 
-          title="Core Capabilities" 
-          description="Powerful features designed to scale your business." 
-          textboxLayout="default" 
-          useInvertedBackground={false} 
-          features={[
-            { id: '1', title: 'High Performance', description: 'Optimized for speed and SEO efficiency.', tag: 'Performance' }, 
-            { id: '2', title: 'Scalable Architecture', description: 'Built to grow alongside your user base.', tag: 'Scalability' }
-          ]} 
-        />
       </div>
       <div id="process" data-section="process">
-        <FeatureCardMedia 
+        <FeatureCardMedia animationType="slide-up" title="Our Process" description="How we turn ideas into reality." textboxLayout="default" useInvertedBackground={false} features={[{ id: 'p1', title: 'Strategic Planning', description: 'We align our goals with your vision.', tag: 'Phase 1' }, { id: 'p2', title: 'Agile Execution', description: 'Iterative development for maximum efficiency.', tag: 'Phase 2' }]} />
-          animationType="slide-up" 
-          title="Our Process" 
-          description="How we turn ideas into reality." 
-          textboxLayout="default" 
-          useInvertedBackground={false} 
-          features={[
-            { id: 'p1', title: 'Strategic Planning', description: 'We align our goals with your vision.', tag: 'Phase 1' }, 
-            { id: 'p2', title: 'Agile Execution', description: 'Iterative development for maximum efficiency.', tag: 'Phase 2' }
-          ]} 
-        />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardFive 
+        <TestimonialCardFive title="Client Success Stories" description="See what our partners say about working with us." textboxLayout="default" useInvertedBackground={false} testimonials={[{ id: 't1', name: 'John Doe', date: 'Jan 2025', title: 'Founder, Startup Inc', quote: 'An incredible team that delivered beyond expectations.', tag: 'Client', avatarSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&h=200&auto=format&fit=crop' }]} />
-          title="Client Success Stories" 
-          description="See what our partners say about working with us." 
-          textboxLayout="default" 
-          useInvertedBackground={false} 
-          testimonials={[
-            { id: 't1', name: 'John Doe', date: 'Jan 2025', title: 'Founder, Startup Inc', quote: "An incredible team that delivered beyond expectations.", tag: 'Client', avatarSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&h=200&auto=format&fit=crop' }
-          ]} 
-        />
       </div>
       <div id="pricing" data-section="pricing">
-        <PricingCardFive 
+        <PricingCardFive title="Pricing" description="Simple, transparent pricing plans." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} plans={[{ id: 'basic', tag: 'Start', price: '$49', period: '/mo', description: 'Essential tools for small teams.', button: { text: 'Get Started' }, featuresTitle: 'Includes:', features: ['Feature 1', 'Feature 2'] }, { id: 'pro', tag: 'Growth', price: '$99', period: '/mo', description: 'Advanced features for scaling.', button: { text: 'Go Pro' }, featuresTitle: 'Includes:', features: ['All Basic features', 'Priority Support'] }]} />
-          title="Pricing" 
-          description="Simple, transparent pricing plans." 
-          animationType="slide-up" 
-          textboxLayout="default" 
-          useInvertedBackground={false} 
-          plans={[
-            { id: 'basic', tag: 'Start', price: '$49', period: '/mo', description: 'Essential tools for small teams.', button: { text: 'Get Started' }, featuresTitle: 'Includes:', features: ['Feature 1', 'Feature 2'] }, 
-            { id: 'pro', tag: 'Growth', price: '$99', period: '/mo', description: 'Advanced features for scaling.', button: { text: 'Go Pro' }, featuresTitle: 'Includes:', features: ['All Basic features', 'Priority Support'] }
-          ]} 
-        />
       </div>
       <div id="contact" data-section="contact">
-        <ContactText 
+        <ContactCenter tag="Connect" title="Get in touch" description="Have a project in mind? We'd love to hear from you." background={{ variant: 'plain' }} useInvertedBackground={false} />
-          text="Ready to transform your brand identity? Let's build something exceptional together." 
-          background={{ variant: 'radial-gradient' }} 
-          buttons={[{ text: 'Start Project', href: '#contact' }]} 
-          useInvertedBackground={false} 
-        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterMedia 
+        <FooterBase logoText="Webild" columns={[{ title: 'Navigation', items: [{ label: 'Home', href: '/' }, { label: 'About', href: '/about' }] }]} />
-          logoText="Webild" 
-          columns={[{ title: 'Navigation', items: [{ label: 'Home', href: '/' }, { label: 'About', href: '/about' }] }]} 
-          imageSrc="https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=800&auto=format&fit=crop" 
-        />
       </div>
     </ThemeProvider>
   );