Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -41,46 +41,56 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}>
-        <HeroBillboardTestimonial
+        <div style={{
-          title="Full-Stack Developer & Creative Technologist"
+          position: 'relative',
-          description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
+          transform: 'translateZ(0)',
-          tag="Welcome to my portfolio"
+          willChange: 'transform'
-          tagIcon={Code2}
+        }}>
-          tagAnimation="slide-up"
+          <HeroBillboardTestimonial
-          background={{ variant: "plain" }}
+            title="Full-Stack Developer & Creative Technologist"
-          useInvertedBackground={false}
+            description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
+            tag="Welcome to my portfolio"
-          imageAlt="Professional coder at work"
+            tagIcon={Code2}
-          mediaAnimation="blur-reveal"
+            tagAnimation="slide-up"
-          buttons={[
+            background={{ variant: "plain" }}
-            { text: "View My Work", href: "projects" },
+            useInvertedBackground={false}
-            { text: "Contact Me", href: "contact" }
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
-          ]}
+            imageAlt="Professional coder at work"
-          buttonAnimation="slide-up"
+            mediaAnimation="blur-reveal"
-          testimonials={[
+            buttons={[
-            {
+              { text: "View My Work", href: "projects" },
-              name: "Sarah Chen",              handle: "CTO, TechVenture",              testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.",              rating: 5,
+              { text: "Contact Me", href: "contact" }
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1",              imageAlt: "Sarah Chen"
+            ]}
-            },
+            buttonAnimation="slide-up"
-            {
+            testimonials={[
-              name: "Marcus Johnson",              handle: "Product Lead, Innovate Inc",              testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.",              rating: 5,
+              {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1",              imageAlt: "Marcus Johnson"
+                name: "Sarah Chen",                handle: "CTO, TechVenture",                testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.",                rating: 5,
-            },
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1",                imageAlt: "Sarah Chen"
-            {
+              },
-              name: "Elena Rodriguez",              handle: "Founder, DesignStudio",              testimonial: "Perfect collaboration between design and development. The results exceeded expectations.",              rating: 5,
+              {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1",              imageAlt: "Elena Rodriguez"
+                name: "Marcus Johnson",                handle: "Product Lead, Innovate Inc",                testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.",                rating: 5,
-            },
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1",                imageAlt: "Marcus Johnson"
-            {
+              },
-              name: "David Park",              handle: "CEO, CloudTech Solutions",              testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.",              rating: 5,
+              {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1",              imageAlt: "David Park"
+                name: "Elena Rodriguez",                handle: "Founder, DesignStudio",                testimonial: "Perfect collaboration between design and development. The results exceeded expectations.",                rating: 5,
-            }
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1",                imageAlt: "Elena Rodriguez"
-          ]}
+              },
-          testimonialRotationInterval={4000}
+              {
-        />
+                name: "David Park",                handle: "CEO, CloudTech Solutions",                testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.",                rating: 5,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1",                imageAlt: "David Park"
+              }
+            ]}
+            testimonialRotationInterval={4000}
+          />
+        </div>
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" style={{
+        position: 'relative',
+        transform: 'translateZ(20px)',
+        willChange: 'transform'
+      }}>
         <TextSplitAbout
           title="About Me"
           description={[
@@ -95,7 +105,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="projects" data-section="projects">
+      <div id="projects" data-section="projects" style={{
+        position: 'relative',
+        transform: 'translateZ(40px)',
+        willChange: 'transform'
+      }}>
         <FeatureCardEight
           features={[
             {
@@ -125,7 +139,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="metrics" data-section="metrics" style={{
+        position: 'relative',
+        transform: 'translateZ(60px)',
+        willChange: 'transform'
+      }}>
         <MetricCardEleven
           metrics={[
             {
@@ -152,7 +170,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="team" data-section="team">
+      <div id="team" data-section="team" style={{
+        position: 'relative',
+        transform: 'translateZ(80px)',
+        willChange: 'transform'
+      }}>
         <TeamCardOne
           members={[
             {
@@ -180,7 +202,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" style={{
+        position: 'relative',
+        transform: 'translateZ(100px)',
+        willChange: 'transform'
+      }}>
         <TestimonialCardOne
           testimonials={[
             {
@@ -220,7 +246,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="faq" data-section="faq">
+      <div id="faq" data-section="faq" style={{
+        position: 'relative',
+        transform: 'translateZ(120px)',
+        willChange: 'transform'
+      }}>
         <FaqSplitMedia
           faqs={[
             {
@@ -258,7 +288,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" style={{
+        position: 'relative',
+        transform: 'translateZ(140px)',
+        willChange: 'transform'
+      }}>
         <ContactText
           text="Ready to start your next project or discuss how I can help? Let's connect and create something amazing together."
           animationType="entrance-slide"
@@ -271,7 +305,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" style={{
+        position: 'relative',
+        transform: 'translateZ(160px)',
+        willChange: 'transform'
+      }}>
         <FooterBaseReveal
           columns={[
             {
@@ -299,6 +337,33 @@ export default function LandingPage() {
           copyrightText="© 2025 DevPortfolio. Crafted with code and creativity."
         />
       </div>
+
+      <style>{`
+        @keyframes parallaxScroll {
+          0% {
+            opacity: 0;
+            transform: translateZ(-100px) rotateX(10deg);
+          }
+          100% {
+            opacity: 1;
+            transform: translateZ(0) rotateX(0deg);
+          }
+        }
+
+        html {
+          scroll-behavior: smooth;
+        }
+
+        body {
+          overflow-x: hidden;
+        }
+
+        [data-section] {
+          animation: parallaxScroll 0.8s ease-out forwards;
+          animation-timeline: view();
+          animation-range: entry 0% cover 30%;
+        }
+      `}</style>
     </ThemeProvider>
   );
 }