Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -14,6 +14,7 @@ import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import { Briefcase, Building, Facebook, Home, Instagram, Leaf, Linkedin, Twitter, Users } from "lucide-react";
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 
 export default function LandingPage() {
   return (
@@ -35,6 +36,8 @@ export default function LandingPage() {
       navItems={[
         {
           name: "Home",          id: "#home"},
+        {
+          name: "Dynamic Experience",          id: "#dynamic-experience"},
         {
           name: "About",          id: "#about"},
         {
@@ -62,7 +65,7 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroSplitDualMedia
       background={{
-        variant: "downward-rays-animated"}}
+        variant: "canvas-reveal"}}
       title="Transform Your Space with SmartGlass & PDLC Films"
       description="Experience instant privacy, enhanced energy efficiency, and dynamic control over light. Our cutting-edge SmartGlass and PDLC films bring innovation to your home or office."
       tag="Innovative | Adaptive | Intelligent"
@@ -74,9 +77,9 @@ export default function LandingPage() {
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/urban-scene-skyline-morning-view-metropolis-concept_53876-16154.jpg",          imageAlt: "Modern office with smart glass showing transparent and opaque states"},
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/examples/transparent-smart-glass-office.jpg",          imageAlt: "Modern office with smart glass in a transparent state"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-scanning-palm-virtual-interface-screen_53876-97059.jpg",          imageAlt: "Hand touching a smart glass panel, illustrating interaction"}
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/examples/opaque-smart-glass-office.jpg",          imageAlt: "Modern office with smart glass in an opaque state"}
       ]}
       mediaAnimation="slide-up"
       rating={5}
@@ -84,6 +87,18 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="dynamic-experience" data-section="dynamic-experience">
+      <HeroBillboardScroll
+      title="Step Inside the Future of Glass"
+      description="Experience dynamic privacy and brilliant displays with our SmartGlass technology. Scroll to explore the possibilities within any space."
+      imageSrc="http://img.b2bpic.net/free-photo/clean-interior-minimalist-architecture-detail_23-2149021647.jpg"
+      imageAlt="Interior room with smart glass panels"
+      background={{ variant: "canvas-reveal" }}
+      buttons={[{ text: "Discover SmartGlass", href: "#products" }]
+      }
+    />
+  </div>
+
   <div id="about" data-section="about">
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
@@ -108,9 +123,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          tag: "Privacy on Demand",          title: "Instant Privacy Control",          subtitle: "Switch from transparent to opaque instantly.",          description: "With a flick of a switch or a tap on your device, our smartglass and PDLC films provide immediate privacy, transforming open spaces into secluded environments.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-building-facade-with-vertical-panels-reflective-surfaces_23-2152032141.jpg",          imageAlt: "Smartglass providing instant privacy in a modern home"},
+          tag: "Privacy on Demand",          title: "Instant Privacy Control",          subtitle: "Switch from transparent to opaque instantly.",          description: "With a flick of a switch or a tap on your device, our smartglass and PDLC films provide immediate privacy, transforming open spaces into secluded environments.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/examples/privacy-smart-glass-transition.jpg",          imageAlt: "Smartglass transitioning to provide instant privacy"},
         {
-          tag: "Energy Smart",          title: "Enhanced Energy Efficiency",          subtitle: "Reduce heating and cooling costs.",          description: "By blocking UV and IR rays, SmartGlass helps maintain optimal indoor temperatures, leading to significant energy savings and a reduced carbon footprint.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-office-working-environment-project-close-up_23-2148894118.jpg",          imageAlt: "Energy efficient building with smartglass facade"},
+          tag: "Energy Smart",          title: "Enhanced Energy Efficiency",          subtitle: "Reduce heating and cooling costs.",          description: "By blocking UV and IR rays, SmartGlass helps maintain optimal indoor temperatures, leading to significant energy savings and a reduced carbon footprint.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/examples/energy-efficient-smart-glass.jpg",          imageAlt: "Energy efficient building with smartglass facade showing heat reflection"},
         {
           tag: "Dynamic Displays",          title: "Projection & Whiteboard Capabilities",          subtitle: "Convert surfaces into interactive screens.",          description: "Our films double as high-definition projection screens or whiteboards, perfect for presentations, advertising, or creative collaboration in any setting.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884885.jpg",          imageAlt: "Smartglass panel used as a projection screen in a retail environment"},
       ]}
@@ -121,7 +136,7 @@ export default function LandingPage() {
 
   <div id="products" data-section="products">
       <ProductCardFour
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
@@ -147,7 +162,7 @@ export default function LandingPage() {
 
   <div id="pricing" data-section="pricing">
       <PricingCardFive
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
@@ -195,7 +210,7 @@ export default function LandingPage() {
       ]}
       title="Impact & Achievements"
       description="Our commitment to innovation and customer satisfaction is reflected in our tangible results."
-      animationType="slide-up"
+      animationType="depth-3d"
     />
   </div>
 

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #ffffff;
   --card: #f9f9f9;
   --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);