Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,7 +9,7 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { ArrowRight, CheckCircle, Rocket, Sparkles, Star, TrendingUp, Zap } from 'lucide-react';
+import { ArrowRight, CheckCircle, Rocket, Sparkles, Star, TrendingUp, Zap, Box } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -54,10 +54,14 @@ export default function LandingPage() {
             { text: "View Portfolio", href: "#testimonials" }
           ]}
           buttonAnimation="blur-reveal"
+          containerClassName="w-full lg:w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20 lg:py-24"
+          titleClassName="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight"
+          descriptionClassName="text-base sm:text-lg md:text-xl mt-4 sm:mt-6 max-w-2xl"
+          imageClassName="w-full h-auto object-cover rounded-lg"
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" className="w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20">
         <TextAbout
           tag="Who We Are"
           tagIcon={CheckCircle}
@@ -68,19 +72,22 @@ export default function LandingPage() {
             { text: "Start Your Project", href: "#contact" },
             { text: "View Our Process", href: "#features" }
           ]}
+          containerClassName="w-full max-w-6xl mx-auto"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-snug md:leading-tight"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-3 sm:gap-4 mt-6 sm:mt-8 md:mt-10"
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="features" data-section="features" className="w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20">
         <FeatureCardTwentySix
           title="Immersive 3D & Interactive Excellence"
-          description="Discover the capabilities that set us apart in the digital design landscape. Each feature represents our commitment to innovation, responsiveness, and stunning visual impact."
+          description="Discover the capabilities that set us apart in the digital design landscape. Each feature represents our commitment to innovation, responsiveness, and stunning visual impact. Our optimized 3D asset loading ensures responsive performance across all devices."
           tag="Our Expertise"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           features={[
             {
-              title: "Immersive 3D Design",              description: "WebGL-based 3D visualizations and interactive model viewers that create unforgettable brand experiences. Perfect for showcasing products, concepts, and technical solutions in innovative ways.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/a-vibrant-digital-interface-showing-an-i-1773339957140-03a57379.png",              imageAlt: "Immersive 3D Design Workspace",              buttonIcon: ArrowRight,
+              title: "Immersive 3D Design",              description: "WebGL-based 3D visualizations and interactive model viewers that create unforgettable brand experiences. Perfect for showcasing products, concepts, and technical solutions in innovative ways. Optimized for responsive loading and performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/a-vibrant-digital-interface-showing-an-i-1773339957140-03a57379.png",              imageAlt: "Immersive 3D Design Workspace",              buttonIcon: ArrowRight,
               buttonHref: "#contact"
             },
             {
@@ -107,10 +114,13 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           buttonAnimation="blur-reveal"
+          containerClassName="w-full max-w-6xl mx-auto"
+          cardClassName="group relative overflow-hidden rounded-lg hover:shadow-lg transition-shadow duration-300 h-full"
+          cardTitleClassName="text-2xl sm:text-3xl md:text-4xl font-bold"
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="metrics" data-section="metrics" className="w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20">
         <MetricCardSeven
           title="Proven Excellence & Results"
           description="Our track record speaks to our commitment to delivering stunning, high-performance digital experiences that drive real business results."
@@ -134,10 +144,13 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
+          containerClassName="w-full max-w-6xl mx-auto"
+          cardClassName="group relative p-6 sm:p-8 rounded-lg hover:scale-105 transition-transform duration-300 h-full"
+          valueClassName="text-4xl sm:text-5xl md:text-6xl font-bold text-primary-cta"
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" className="w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20">
         <TestimonialCardTen
           title="Trusted by Industry Leaders"
           description="Discover what forward-thinking companies say about their experience partnering with us for transformative digital experiences."
@@ -146,36 +159,39 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",              title: "Revolutionary 3D Product Showcase",              quote: "HEXON transformed how we present our drone technology. The 3D animations are stunning, and our engagement metrics have increased by 340%. Their team truly understands immersive design.",              name: "Sarah Chen",              role: "VP Product Innovation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339956932-a108e800.png?_wi=1",              imageAlt: "Sarah Chen"
+              id: "1",              title: "Revolutionary Drone Service Showcase",              quote: "HEXON transformed how we present our drone delivery services. The 3D animations showcase our capabilities perfectly, and our engagement metrics increased by 340%. Their immersive design truly sets us apart from competitors.",              name: "Sarah Chen",              role: "VP Product Innovation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339956932-a108e800.png?_wi=1",              imageAlt: "Sarah Chen"
             },
             {
-              id: "2",              title: "Game-Changing Interactive Experience",              quote: "The scroll-triggered animations and responsive design exceeded our expectations. Our website now runs at 60fps across all devices, and client demos have never looked better. Exceptional technical execution.",              name: "Marcus Rodriguez",              role: "CTO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957497-389f0f5a.png?_wi=1",              imageAlt: "Marcus Rodriguez"
+              id: "2",              title: "Game-Changing Drone Operations Experience",              quote: "The interactive 3D drone visualization and responsive design exceeded our expectations. Our agricultural drone service website now runs at 60fps across all devices. Client demos of our drone capabilities have never looked better.",              name: "Marcus Rodriguez",              role: "CTO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957497-389f0f5a.png?_wi=1",              imageAlt: "Marcus Rodriguez"
             },
             {
-              id: "3",              title: "Immersive Design Excellence",              quote: "Working with HEXON was a game-changer for our creative direction. Their 3D design expertise and attention to user engagement detail is unmatched. Our conversion rate improved by 280% after the redesign.",              name: "Elena Vasquez",              role: "Creative Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339959792-23ebc46b.png",              imageAlt: "Elena Vasquez"
+              id: "3",              title: "Immersive Drone Technology Showcase",              quote: "Working with HEXON was a game-changer for showcasing our industrial drone solutions. Their 3D design expertise perfectly represents our cutting-edge technology. Our conversion rate improved by 280% after the redesign.",              name: "Elena Vasquez",              role: "Creative Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339959792-23ebc46b.png",              imageAlt: "Elena Vasquez"
             },
             {
-              id: "4",              title: "Premium Digital Presence",              quote: "HEXON delivered a digital experience that perfectly represents our brand's innovation and premium positioning. The attention to performance optimization while maintaining visual excellence is remarkable.",              name: "David Okafor",              role: "Founder & CEO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957474-f7d8abfa.png",              imageAlt: "David Okafor"
+              id: "4",              title: "Premium Drone Service Presence",              quote: "HEXON delivered a digital experience that perfectly represents our premium drone service brand. The interactive 3D model controls let clients explore our drone capabilities in real-time. Performance optimization is remarkable.",              name: "David Okafor",              role: "Founder & CEO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957474-f7d8abfa.png",              imageAlt: "David Okafor"
             },
             {
-              id: "5",              title: "Technical Excellence Meets Design",              quote: "We've worked with many agencies, but none combine technical sophistication with creative brilliance like HEXON. The WebGL optimization ensures smooth performance while delivering jaw-dropping visuals.",              name: "Lisa Park",              role: "Product Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339956932-a108e800.png?_wi=2",              imageAlt: "Lisa Park"
+              id: "5",              title: "Advanced Drone Visualization Expertise",              quote: "We've worked with many agencies for our drone service marketing, but none combine technical sophistication with creative brilliance like HEXON. The WebGL optimization ensures smooth performance while delivering stunning 3D drone visuals.",              name: "Lisa Park",              role: "Product Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339956932-a108e800.png?_wi=2",              imageAlt: "Lisa Park"
             },
             {
-              id: "6",              title: "Beyond Expectations",              quote: "From concept to launch, HEXON demonstrated unparalleled professionalism and technical mastery. Their 3D drone animations actually made our stakeholder meetings more engaging. Highly recommended.",              name: "James Mitchell",              role: "Chief Marketing Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957497-389f0f5a.png?_wi=2",              imageAlt: "James Mitchell"
+              id: "6",              title: "Beyond Expectations for Drone Services",              quote: "From concept to launch, HEXON demonstrated unparalleled professionalism with our drone service portfolio. Their 6-arm drone animations actually made our stakeholder meetings more engaging. Interactive hover effects enhance client engagement.",              name: "James Mitchell",              role: "Chief Marketing Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar9az3wAhv54wO6dxoL5ll0QKW/professional-headshot-portrait-of-a-conf-1773339957497-389f0f5a.png?_wi=2",              imageAlt: "James Mitchell"
             }
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
+          containerClassName="w-full max-w-6xl mx-auto"
+          quoteCardClassName="group p-6 sm:p-8 rounded-lg hover:translate-y-(-2) transition-transform duration-300 cursor-pointer"
+          quoteClassName="text-base sm:text-lg leading-relaxed"
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" className="w-full px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20">
         <ContactCTA
           tag="Ready to Transform?"
           tagIcon={Rocket}
           tagAnimation="slide-up"
           title="Let's Build Something Extraordinary Together"
-          description="Your vision deserves a digital experience that stands out. Contact our team today to discuss how we can create an immersive, high-performance website that captivates your audience and drives real results."
+          description="Your drone service needs a digital experience that stands out. Contact our team to discuss how we can create an immersive, interactive website with optimized 3D drone visualizations that captivates clients and drives service inquiries."
           buttons={[
             { text: "Start Your Project", href: "https://hexon-frontend.onrender.com/contact" },
             { text: "Schedule a Consultation", href: "https://hexon-frontend.onrender.com/consultation" }
@@ -183,10 +199,15 @@ export default function LandingPage() {
           buttonAnimation="blur-reveal"
           background={{ variant: "canvas-reveal" }}
           useInvertedBackground={false}
+          containerClassName="w-full max-w-4xl mx-auto"
+          contentClassName="p-8 sm:p-12 md:p-16 rounded-lg text-center"
+          titleClassName="text-2xl sm:text-3xl md:text-5xl font-bold mb-4 sm:mb-6"
+          descriptionClassName="text-base sm:text-lg md:text-xl mb-8 max-w-2xl mx-auto"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center"
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="w-full">
         <FooterBaseCard
           logoText="HEXON"
           columns={[
@@ -195,7 +216,8 @@ export default function LandingPage() {
                 { label: "3D Design", href: "#features" },
                 { label: "Animation Services", href: "#features" },
                 { label: "Web Development", href: "#features" },
-                { label: "WebGL Solutions", href: "#features" }
+                { label: "WebGL Solutions", href: "#features" },
+                { label: "3D Asset Optimization", href: "#features" }
               ]
             },
             {
@@ -224,8 +246,10 @@ export default function LandingPage() {
             }
           ]}
           copyrightText="© 2025 HEXON | Immersive 3D Design & Technology. All rights reserved."
+          containerClassName="w-full px-4 sm:px-6 lg:px-8"
+          columnsClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-6"
         />
       </div>
     </ThemeProvider>
   );
-}
+}