Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -62,7 +62,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 +74,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}
@@ -108,9 +108,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 +121,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 +147,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 +195,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>
 
@@ -306,4 +306,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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);