From 8e0b2e05cef15c5126d25976f5ceee3d77a6b57f Mon Sep 17 00:00:00 2001
From: admirsaheta <admirxsaheta@gmail.com>
Date: Sat, 27 Dec 2025 01:47:35 +0100
Subject: [PATCH 1/6] fix:re-render(brand-compliance-component)

---
 .../feature-blocks/brand-compliance.tsx       | 451 +++++++++++++-----
 1 file changed, 319 insertions(+), 132 deletions(-)

diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index b79a8fa717..dc7616fec7 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -1,145 +1,332 @@
-import { Icons } from '@onlook/ui/icons';
-import { ColorSwatchGroup } from '../color-swatch-group';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+"use client";
 
-function ParallaxContainer({ children, speed = 0.1 }: { children: React.ReactNode, speed?: number }) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [transform, setTransform] = useState(0);
-    const ticking = useRef(false);
+import React, { useRef } from "react";
+import { motion, useScroll, useSpring, useTransform } from "motion/react";
 
-    const updateTransform = useCallback(() => {
-        if (!containerRef.current) return;
-        
-        const rect = containerRef.current.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        
-        // Calculate how far the element is from the center of the viewport
-        const distanceFromCenter = rect.top + rect.height / 2 - viewportHeight / 2;
-        
-        // Apply transform based on distance from center
-        setTransform(distanceFromCenter * speed);
-        
-        ticking.current = false;
-    }, [speed]);
+import { Icons } from "@onlook/ui/icons";
 
-    useEffect(() => {
-        const handleScroll = () => {
-            if (!ticking.current) {
-                window.requestAnimationFrame(() => {
-                    updateTransform();
-                });
-                ticking.current = true;
-            }
-        };
+import { ColorSwatchGroup } from "../color-swatch-group";
 
-        // Use passive scroll listener for better performance
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        updateTransform(); // Initial calculation
+interface ParallaxContainerProps {
+  children: React.ReactNode;
+  speed?: number;
+  className?: string;
+}
 
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [updateTransform]);
+function ParallaxContainer({
+  children,
+  speed = 0.1,
+  className,
+}: ParallaxContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    return (
-        <div 
-            ref={containerRef}
-            style={{ 
-                transform: `translate3d(0, ${transform}px, 0)`,
-                transition: 'transform 0.1s cubic-bezier(0.4, 0, 0.2, 1)',
-                willChange: 'transform',
-                backfaceVisibility: 'hidden',
-                perspective: '1000px'
-            }}
-        >
-            {children}
-        </div>
-    );
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"],
+  });
+
+  // Map scroll progress (0 to 1) to transform values
+  // When scroll is 0 (element entering from bottom), we want positive offset (pushed down)
+  // When scroll is 1 (element exiting at top), we want negative offset (pulled up)
+  // The multiplier 2000 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
+  const yRange = useTransform(
+    scrollYProgress,
+    [0, 1],
+    [500 * speed, -500 * speed]
+  );
+
+  const y = useSpring(yRange, {
+    stiffness: 100,
+    damping: 30,
+    mass: 0.1,
+  });
+
+  return (
+    <div ref={containerRef} className={className}>
+      <motion.div style={{ y }} className="h-full w-full will-change-transform">
+        {children}
+      </motion.div>
+    </div>
+  );
 }
 
 export function BrandComplianceBlock() {
-    return (
-        <div className="flex flex-col gap-4">
-            <div className="w-full h-100 bg-background-onlook/80 rounded-lg mb-6 relative overflow-hidden">
-                <ParallaxContainer speed={0.04}>
-                    <div className="w-60 h-100 rounded-xl overflow-hidden absolute left-1/14 top-7 flex flex-col items-center justify-start bg-black/85 backdrop-blur-2xl border-[0.5px] border-foreground-primary/20">
-                        <p className="text-foreground-primary text-regular font-light w-full text-left px-3 py-2 border-b-[0.5px] border-foreground-primary/20">Brand Colors</p>
-                        <div className="w-full h-full overflow-y-auto px-3 py-2 flex flex-col gap-2">
-                            <ColorSwatchGroup label="Slate" colorClasses={[
-                                "bg-slate-50","bg-slate-100","bg-slate-200","bg-slate-300","bg-slate-400","bg-slate-500",
-                                "bg-slate-500","bg-slate-600","bg-slate-700","bg-slate-800","bg-slate-900","bg-slate-900"
-                            ]} />
-                            <ColorSwatchGroup label="Gray" colorClasses={[
-                                "bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500",
-                                "bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900","bg-gray-900"
-                            ]} />
-                            <ColorSwatchGroup label="Zinc" colorClasses={[
-                                "bg-zinc-50","bg-zinc-100","bg-zinc-200","bg-zinc-300","bg-zinc-400","bg-zinc-500",
-                                "bg-zinc-500","bg-zinc-600","bg-zinc-700","bg-zinc-800","bg-zinc-900","bg-zinc-900"
-                            ]} />
-                            <ColorSwatchGroup label="Orange" colorClasses={[
-                                "bg-orange-50","bg-orange-100","bg-orange-200","bg-orange-300","bg-orange-400","bg-orange-500",
-                                "bg-orange-500","bg-orange-600","bg-orange-700","bg-orange-800","bg-orange-900","bg-orange-900"
-                            ]} />
-                            <ColorSwatchGroup label="Amber" colorClasses={[
-                                "bg-amber-50","bg-amber-100","bg-amber-200","bg-amber-300","bg-amber-400","bg-amber-500",
-                                "bg-amber-500","bg-amber-600","bg-amber-700","bg-amber-800","bg-amber-900","bg-amber-900"
-                            ]} />
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="bg-background-onlook/80 relative mb-6 h-100 w-full overflow-hidden rounded-lg">
+        <ParallaxContainer speed={0.08} className="absolute inset-0">
+          <div className="border-foreground-primary/20 absolute top-7 left-1/14 flex h-100 w-60 flex-col items-center justify-start overflow-hidden rounded-xl border-[0.5px] bg-black/85 backdrop-blur-2xl">
+            <p className="text-foreground-primary text-regular border-foreground-primary/20 w-full border-b-[0.5px] px-3 py-2 text-left font-light">
+              Brand Colors
+            </p>
+            <div className="flex h-full w-full flex-col gap-2 overflow-y-auto px-3 py-2">
+              <ColorSwatchGroup
+                label="Slate"
+                colorClasses={[
+                  "bg-slate-50",
+                  "bg-slate-100",
+                  "bg-slate-200",
+                  "bg-slate-300",
+                  "bg-slate-400",
+                  "bg-slate-500",
+                  "bg-slate-500",
+                  "bg-slate-600",
+                  "bg-slate-700",
+                  "bg-slate-800",
+                  "bg-slate-900",
+                  "bg-slate-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Gray"
+                colorClasses={[
+                  "bg-gray-50",
+                  "bg-gray-100",
+                  "bg-gray-200",
+                  "bg-gray-300",
+                  "bg-gray-400",
+                  "bg-gray-500",
+                  "bg-gray-500",
+                  "bg-gray-600",
+                  "bg-gray-700",
+                  "bg-gray-800",
+                  "bg-gray-900",
+                  "bg-gray-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Zinc"
+                colorClasses={[
+                  "bg-zinc-50",
+                  "bg-zinc-100",
+                  "bg-zinc-200",
+                  "bg-zinc-300",
+                  "bg-zinc-400",
+                  "bg-zinc-500",
+                  "bg-zinc-500",
+                  "bg-zinc-600",
+                  "bg-zinc-700",
+                  "bg-zinc-800",
+                  "bg-zinc-900",
+                  "bg-zinc-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Orange"
+                colorClasses={[
+                  "bg-orange-50",
+                  "bg-orange-100",
+                  "bg-orange-200",
+                  "bg-orange-300",
+                  "bg-orange-400",
+                  "bg-orange-500",
+                  "bg-orange-500",
+                  "bg-orange-600",
+                  "bg-orange-700",
+                  "bg-orange-800",
+                  "bg-orange-900",
+                  "bg-orange-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Amber"
+                colorClasses={[
+                  "bg-amber-50",
+                  "bg-amber-100",
+                  "bg-amber-200",
+                  "bg-amber-300",
+                  "bg-amber-400",
+                  "bg-amber-500",
+                  "bg-amber-500",
+                  "bg-amber-600",
+                  "bg-amber-700",
+                  "bg-amber-800",
+                  "bg-amber-900",
+                  "bg-amber-900",
+                ]}
+              />
 
-                            <ColorSwatchGroup label="Lime" colorClasses={[
-                                "bg-lime-50","bg-lime-100","bg-lime-200","bg-lime-300","bg-lime-400","bg-lime-500",
-                                "bg-lime-500","bg-lime-600","bg-lime-700","bg-lime-800","bg-lime-900","bg-lime-900"
-                            ]} />
-                            <ColorSwatchGroup label="Green" colorClasses={[
-                                "bg-green-50","bg-green-100","bg-green-200","bg-green-300","bg-green-400","bg-green-500",
-                                "bg-green-500","bg-green-600","bg-green-700","bg-green-800","bg-green-900","bg-green-900"
-                            ]} />
-                        </div>
-                    </div>
-                </ParallaxContainer>
-                <ParallaxContainer speed={-0.04}>
-                    <div className="w-60 h-100 rounded-xl overflow-hidden absolute right-1/14 top-20 flex flex-col items-center justify-start bg-black/50 backdrop-blur-2xl border-[0.5px] border-foreground-primary/20">
-                        <p className="text-foreground-primary text-regular font-light w-full text-left px-3 py-2 border-b-[0.5px] border-foreground-primary/20">Brand Colors</p>
-                        <div className="w-full h-full overflow-y-auto px-3 py-2 flex flex-col gap-2">
-                            <ColorSwatchGroup label="Cyan" colorClasses={[
-                                "bg-cyan-50","bg-cyan-100","bg-cyan-200","bg-cyan-300","bg-cyan-400","bg-cyan-500",
-                                "bg-cyan-500","bg-cyan-600","bg-cyan-700","bg-cyan-800","bg-cyan-900","bg-cyan-900"
-                            ]} />
-                            <ColorSwatchGroup label="Blue" colorClasses={[
-                                "bg-blue-50","bg-blue-100","bg-blue-200","bg-blue-300","bg-blue-400","bg-blue-500",
-                                "bg-blue-500","bg-blue-600","bg-blue-700","bg-blue-800","bg-blue-900","bg-blue-900"
-                            ]} />
-                            <ColorSwatchGroup label="Indigo" colorClasses={[
-                                "bg-indigo-50","bg-indigo-100","bg-indigo-200","bg-indigo-300","bg-indigo-400","bg-indigo-500",
-                                "bg-indigo-500","bg-indigo-600","bg-indigo-700","bg-indigo-800","bg-indigo-900","bg-indigo-900"
-                            ]} />
-                            <ColorSwatchGroup label="Violet" colorClasses={[
-                                "bg-violet-50","bg-violet-100","bg-violet-200","bg-violet-300","bg-violet-400","bg-violet-500",
-                                "bg-violet-500","bg-violet-600","bg-violet-700","bg-violet-800","bg-violet-900","bg-violet-900"
-                            ]} />
-                            <ColorSwatchGroup label="Purple" colorClasses={[
-                                "bg-purple-50","bg-purple-100","bg-purple-200","bg-purple-300","bg-purple-400","bg-purple-500",
-                                "bg-purple-500","bg-purple-600","bg-purple-700","bg-purple-800","bg-purple-900","bg-purple-900"
-                            ]} />
-                            <ColorSwatchGroup label="Pink" colorClasses={[
-                                "bg-pink-50","bg-pink-100","bg-pink-200","bg-pink-300","bg-pink-400","bg-pink-500",
-                                "bg-pink-500","bg-pink-600","bg-pink-700","bg-pink-800","bg-pink-900","bg-pink-900"
-                            ]} />
-                            <ColorSwatchGroup label="Rose" colorClasses={[
-                                "bg-rose-50","bg-rose-100","bg-rose-200","bg-rose-300","bg-rose-400","bg-rose-500",
-                                "bg-rose-500","bg-rose-600","bg-rose-700","bg-rose-800","bg-rose-900","bg-rose-900"
-                            ]} />
-                        </div>
-                    </div>
-                </ParallaxContainer>
+              <ColorSwatchGroup
+                label="Lime"
+                colorClasses={[
+                  "bg-lime-50",
+                  "bg-lime-100",
+                  "bg-lime-200",
+                  "bg-lime-300",
+                  "bg-lime-400",
+                  "bg-lime-500",
+                  "bg-lime-500",
+                  "bg-lime-600",
+                  "bg-lime-700",
+                  "bg-lime-800",
+                  "bg-lime-900",
+                  "bg-lime-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Green"
+                colorClasses={[
+                  "bg-green-50",
+                  "bg-green-100",
+                  "bg-green-200",
+                  "bg-green-300",
+                  "bg-green-400",
+                  "bg-green-500",
+                  "bg-green-500",
+                  "bg-green-600",
+                  "bg-green-700",
+                  "bg-green-800",
+                  "bg-green-900",
+                  "bg-green-900",
+                ]}
+              />
             </div>
-            <div className="flex flex-row items-start gap-8 w-full">
-                {/* Icon + Title */}
-                <div className="flex flex-col items-start w-1/2">
-                    <div className="mb-2"><Icons.Brand className="w-6 h-6 text-foreground-primary" /></div>
-                    <span className="text-foreground-primary text-largePlus font-light">Brand compliance</span>
-                </div>
-                {/* Description */}
-                <p className="text-foreground-secondary text-regular text-balance w-1/2">Make your fonts, colors, and styles all speak the same language.</p>
+          </div>
+        </ParallaxContainer>
+        <ParallaxContainer speed={-0.08} className="absolute inset-0">
+          <div className="border-foreground-primary/20 absolute top-20 right-1/14 flex h-100 w-60 flex-col items-center justify-start overflow-hidden rounded-xl border-[0.5px] bg-black/50 backdrop-blur-2xl">
+            <p className="text-foreground-primary text-regular border-foreground-primary/20 w-full border-b-[0.5px] px-3 py-2 text-left font-light">
+              Brand Colors
+            </p>
+            <div className="flex h-full w-full flex-col gap-2 overflow-y-auto px-3 py-2">
+              <ColorSwatchGroup
+                label="Cyan"
+                colorClasses={[
+                  "bg-cyan-50",
+                  "bg-cyan-100",
+                  "bg-cyan-200",
+                  "bg-cyan-300",
+                  "bg-cyan-400",
+                  "bg-cyan-500",
+                  "bg-cyan-500",
+                  "bg-cyan-600",
+                  "bg-cyan-700",
+                  "bg-cyan-800",
+                  "bg-cyan-900",
+                  "bg-cyan-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Blue"
+                colorClasses={[
+                  "bg-blue-50",
+                  "bg-blue-100",
+                  "bg-blue-200",
+                  "bg-blue-300",
+                  "bg-blue-400",
+                  "bg-blue-500",
+                  "bg-blue-500",
+                  "bg-blue-600",
+                  "bg-blue-700",
+                  "bg-blue-800",
+                  "bg-blue-900",
+                  "bg-blue-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Indigo"
+                colorClasses={[
+                  "bg-indigo-50",
+                  "bg-indigo-100",
+                  "bg-indigo-200",
+                  "bg-indigo-300",
+                  "bg-indigo-400",
+                  "bg-indigo-500",
+                  "bg-indigo-500",
+                  "bg-indigo-600",
+                  "bg-indigo-700",
+                  "bg-indigo-800",
+                  "bg-indigo-900",
+                  "bg-indigo-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Violet"
+                colorClasses={[
+                  "bg-violet-50",
+                  "bg-violet-100",
+                  "bg-violet-200",
+                  "bg-violet-300",
+                  "bg-violet-400",
+                  "bg-violet-500",
+                  "bg-violet-500",
+                  "bg-violet-600",
+                  "bg-violet-700",
+                  "bg-violet-800",
+                  "bg-violet-900",
+                  "bg-violet-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Purple"
+                colorClasses={[
+                  "bg-purple-50",
+                  "bg-purple-100",
+                  "bg-purple-200",
+                  "bg-purple-300",
+                  "bg-purple-400",
+                  "bg-purple-500",
+                  "bg-purple-500",
+                  "bg-purple-600",
+                  "bg-purple-700",
+                  "bg-purple-800",
+                  "bg-purple-900",
+                  "bg-purple-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Pink"
+                colorClasses={[
+                  "bg-pink-50",
+                  "bg-pink-100",
+                  "bg-pink-200",
+                  "bg-pink-300",
+                  "bg-pink-400",
+                  "bg-pink-500",
+                  "bg-pink-500",
+                  "bg-pink-600",
+                  "bg-pink-700",
+                  "bg-pink-800",
+                  "bg-pink-900",
+                  "bg-pink-900",
+                ]}
+              />
+              <ColorSwatchGroup
+                label="Rose"
+                colorClasses={[
+                  "bg-rose-50",
+                  "bg-rose-100",
+                  "bg-rose-200",
+                  "bg-rose-300",
+                  "bg-rose-400",
+                  "bg-rose-500",
+                  "bg-rose-500",
+                  "bg-rose-600",
+                  "bg-rose-700",
+                  "bg-rose-800",
+                  "bg-rose-900",
+                  "bg-rose-900",
+                ]}
+              />
             </div>
+          </div>
+        </ParallaxContainer>
+      </div>
+      <div className="flex w-full flex-row items-start gap-8">
+        {/* Icon + Title */}
+        <div className="flex w-1/2 flex-col items-start">
+          <div className="mb-2">
+            <Icons.Brand className="text-foreground-primary h-6 w-6" />
+          </div>
+          <span className="text-foreground-primary text-largePlus font-light">
+            Brand compliance
+          </span>
         </div>
-    );
-} 
\ No newline at end of file
+        {/* Description */}
+        <p className="text-foreground-secondary text-regular w-1/2 text-balance">
+          Make your fonts, colors, and styles all speak the same language.
+        </p>
+      </div>
+    </div>
+  );
+}

From e88dab72e07910ed2ed1da1b87a9146fbbfed693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Admir=20=C5=A0aheta?=
 <81534875+admirsaheta@users.noreply.github.com>
Date: Sat, 27 Dec 2025 22:30:16 +0100
Subject: [PATCH 2/6] Update
 apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
---
 .../landing-page/feature-blocks/brand-compliance.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index dc7616fec7..68a3ca99e1 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -28,7 +28,7 @@ function ParallaxContainer({
   // Map scroll progress (0 to 1) to transform values
   // When scroll is 0 (element entering from bottom), we want positive offset (pushed down)
   // When scroll is 1 (element exiting at top), we want negative offset (pulled up)
-  // The multiplier 2000 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
+  // The multiplier 500 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
   const yRange = useTransform(
     scrollYProgress,
     [0, 1],

From 49653b8b027022cf9edace623b425841870a14d5 Mon Sep 17 00:00:00 2001
From: admirsaheta <admirxsaheta@gmail.com>
Date: Sun, 28 Dec 2025 14:38:02 +0100
Subject: [PATCH 3/6] coderabbit:suggestions(fixes)

---
 .../feature-blocks/brand-compliance.tsx       | 50 ++++++++-----------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index 68a3ca99e1..76f57fe2ee 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -19,6 +19,10 @@ function ParallaxContainer({
   className,
 }: ParallaxContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const prefersReducedMotion =
+    typeof window !== "undefined"
+      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      : false;
 
   const { scrollYProgress } = useScroll({
     target: containerRef,
@@ -28,11 +32,11 @@ function ParallaxContainer({
   // Map scroll progress (0 to 1) to transform values
   // When scroll is 0 (element entering from bottom), we want positive offset (pushed down)
   // When scroll is 1 (element exiting at top), we want negative offset (pulled up)
-  // The multiplier 500 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
+  // The multiplier 2000 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
   const yRange = useTransform(
     scrollYProgress,
     [0, 1],
-    [500 * speed, -500 * speed]
+    prefersReducedMotion ? [0, 0] : [500 * speed, -500 * speed]
   );
 
   const y = useSpring(yRange, {
@@ -69,12 +73,11 @@ export function BrandComplianceBlock() {
                   "bg-slate-300",
                   "bg-slate-400",
                   "bg-slate-500",
-                  "bg-slate-500",
                   "bg-slate-600",
                   "bg-slate-700",
                   "bg-slate-800",
                   "bg-slate-900",
-                  "bg-slate-900",
+                  "bg-slate-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -86,12 +89,11 @@ export function BrandComplianceBlock() {
                   "bg-gray-300",
                   "bg-gray-400",
                   "bg-gray-500",
-                  "bg-gray-500",
                   "bg-gray-600",
                   "bg-gray-700",
                   "bg-gray-800",
                   "bg-gray-900",
-                  "bg-gray-900",
+                  "bg-gray-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -103,12 +105,11 @@ export function BrandComplianceBlock() {
                   "bg-zinc-300",
                   "bg-zinc-400",
                   "bg-zinc-500",
-                  "bg-zinc-500",
                   "bg-zinc-600",
                   "bg-zinc-700",
                   "bg-zinc-800",
                   "bg-zinc-900",
-                  "bg-zinc-900",
+                  "bg-zinc-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -120,12 +121,11 @@ export function BrandComplianceBlock() {
                   "bg-orange-300",
                   "bg-orange-400",
                   "bg-orange-500",
-                  "bg-orange-500",
                   "bg-orange-600",
                   "bg-orange-700",
                   "bg-orange-800",
                   "bg-orange-900",
-                  "bg-orange-900",
+                  "bg-orange-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -137,12 +137,11 @@ export function BrandComplianceBlock() {
                   "bg-amber-300",
                   "bg-amber-400",
                   "bg-amber-500",
-                  "bg-amber-500",
                   "bg-amber-600",
                   "bg-amber-700",
                   "bg-amber-800",
                   "bg-amber-900",
-                  "bg-amber-900",
+                  "bg-amber-950",
                 ]}
               />
 
@@ -155,12 +154,11 @@ export function BrandComplianceBlock() {
                   "bg-lime-300",
                   "bg-lime-400",
                   "bg-lime-500",
-                  "bg-lime-500",
                   "bg-lime-600",
                   "bg-lime-700",
                   "bg-lime-800",
                   "bg-lime-900",
-                  "bg-lime-900",
+                  "bg-lime-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -172,12 +170,11 @@ export function BrandComplianceBlock() {
                   "bg-green-300",
                   "bg-green-400",
                   "bg-green-500",
-                  "bg-green-500",
                   "bg-green-600",
                   "bg-green-700",
                   "bg-green-800",
                   "bg-green-900",
-                  "bg-green-900",
+                  "bg-green-950",
                 ]}
               />
             </div>
@@ -198,12 +195,11 @@ export function BrandComplianceBlock() {
                   "bg-cyan-300",
                   "bg-cyan-400",
                   "bg-cyan-500",
-                  "bg-cyan-500",
                   "bg-cyan-600",
                   "bg-cyan-700",
                   "bg-cyan-800",
                   "bg-cyan-900",
-                  "bg-cyan-900",
+                  "bg-cyan-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -215,12 +211,11 @@ export function BrandComplianceBlock() {
                   "bg-blue-300",
                   "bg-blue-400",
                   "bg-blue-500",
-                  "bg-blue-500",
                   "bg-blue-600",
                   "bg-blue-700",
                   "bg-blue-800",
                   "bg-blue-900",
-                  "bg-blue-900",
+                  "bg-blue-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -232,12 +227,11 @@ export function BrandComplianceBlock() {
                   "bg-indigo-300",
                   "bg-indigo-400",
                   "bg-indigo-500",
-                  "bg-indigo-500",
                   "bg-indigo-600",
                   "bg-indigo-700",
                   "bg-indigo-800",
                   "bg-indigo-900",
-                  "bg-indigo-900",
+                  "bg-indigo-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -249,12 +243,11 @@ export function BrandComplianceBlock() {
                   "bg-violet-300",
                   "bg-violet-400",
                   "bg-violet-500",
-                  "bg-violet-500",
                   "bg-violet-600",
                   "bg-violet-700",
                   "bg-violet-800",
                   "bg-violet-900",
-                  "bg-violet-900",
+                  "bg-violet-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -266,12 +259,11 @@ export function BrandComplianceBlock() {
                   "bg-purple-300",
                   "bg-purple-400",
                   "bg-purple-500",
-                  "bg-purple-500",
                   "bg-purple-600",
                   "bg-purple-700",
                   "bg-purple-800",
                   "bg-purple-900",
-                  "bg-purple-900",
+                  "bg-purple-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -283,12 +275,11 @@ export function BrandComplianceBlock() {
                   "bg-pink-300",
                   "bg-pink-400",
                   "bg-pink-500",
-                  "bg-pink-500",
                   "bg-pink-600",
                   "bg-pink-700",
                   "bg-pink-800",
                   "bg-pink-900",
-                  "bg-pink-900",
+                  "bg-pink-950",
                 ]}
               />
               <ColorSwatchGroup
@@ -300,12 +291,11 @@ export function BrandComplianceBlock() {
                   "bg-rose-300",
                   "bg-rose-400",
                   "bg-rose-500",
-                  "bg-rose-500",
                   "bg-rose-600",
                   "bg-rose-700",
                   "bg-rose-800",
                   "bg-rose-900",
-                  "bg-rose-900",
+                  "bg-rose-950",
                 ]}
               />
             </div>

From 414556dc3c882203107d1a7f9840ff53466ac21a Mon Sep 17 00:00:00 2001
From: admirsaheta <admirxsaheta@gmail.com>
Date: Sun, 28 Dec 2025 14:42:40 +0100
Subject: [PATCH 4/6] coderabbit:suggestions(fixes)

---
 .../landing-page/feature-blocks/brand-compliance.tsx       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index 76f57fe2ee..5ee5c4ca12 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useRef } from "react";
-import { motion, useScroll, useSpring, useTransform } from "motion/react";
+import { motion, useReducedMotion, useScroll, useSpring, useTransform } from "motion/react";
 
 import { Icons } from "@onlook/ui/icons";
 
@@ -19,10 +19,7 @@ function ParallaxContainer({
   className,
 }: ParallaxContainerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const prefersReducedMotion =
-    typeof window !== "undefined"
-      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      : false;
+  const prefersReducedMotion = useReducedMotion();
 
   const { scrollYProgress } = useScroll({
     target: containerRef,

From 0ed061385d172503c7682f9f2bff9d64fa0f0610 Mon Sep 17 00:00:00 2001
From: admirsaheta <admirxsaheta@gmail.com>
Date: Tue, 30 Dec 2025 23:13:17 +0100
Subject: [PATCH 5/6] fix:coderabbit(comment)

---
 .../landing-page/feature-blocks/brand-compliance.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index 5ee5c4ca12..037e1d6dca 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -29,7 +29,7 @@ function ParallaxContainer({
   // Map scroll progress (0 to 1) to transform values
   // When scroll is 0 (element entering from bottom), we want positive offset (pushed down)
   // When scroll is 1 (element exiting at top), we want negative offset (pulled up)
-  // The multiplier 2000 is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
+  // The multiplier is an approximation of the viewport height + element height range to match previous 'distanceFromCenter' logic roughly
   const yRange = useTransform(
     scrollYProgress,
     [0, 1],

From 4b9ca4e5aabc6a442ec81caebad38c4cf1004ed2 Mon Sep 17 00:00:00 2001
From: admirsaheta <admirxsaheta@gmail.com>
Date: Tue, 30 Dec 2025 23:24:03 +0100
Subject: [PATCH 6/6] satisfy:coderabbit

---
 apps/web/client/messages/en.d.json.ts                |  5 +++++
 apps/web/client/messages/en.json                     |  5 +++++
 apps/web/client/messages/es.json                     |  5 +++++
 apps/web/client/messages/ja.json                     |  5 +++++
 apps/web/client/messages/ko.json                     |  5 +++++
 apps/web/client/messages/zh.json                     |  5 +++++
 .../landing-page/feature-blocks/brand-compliance.tsx | 12 ++++++++----
 7 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/apps/web/client/messages/en.d.json.ts b/apps/web/client/messages/en.d.json.ts
index 7a11f37db2..8c94399ddb 100644
--- a/apps/web/client/messages/en.d.json.ts
+++ b/apps/web/client/messages/en.d.json.ts
@@ -366,6 +366,11 @@ declare const messages: {
             "reportIssue": "Report Issue",
             "shortcuts": "Shortcuts"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 };
 export default messages;
\ No newline at end of file
diff --git a/apps/web/client/messages/en.json b/apps/web/client/messages/en.json
index 5907b83fbe..975a17c711 100644
--- a/apps/web/client/messages/en.json
+++ b/apps/web/client/messages/en.json
@@ -363,5 +363,10 @@
             "reportIssue": "Report Issue",
             "shortcuts": "Shortcuts"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 }
\ No newline at end of file
diff --git a/apps/web/client/messages/es.json b/apps/web/client/messages/es.json
index 42d673bb2d..455c6915a4 100644
--- a/apps/web/client/messages/es.json
+++ b/apps/web/client/messages/es.json
@@ -363,5 +363,10 @@
             "reportIssue": "Reportar Problema",
             "shortcuts": "Atajos"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 }
\ No newline at end of file
diff --git a/apps/web/client/messages/ja.json b/apps/web/client/messages/ja.json
index 9ead62a3a8..d4819e1a43 100644
--- a/apps/web/client/messages/ja.json
+++ b/apps/web/client/messages/ja.json
@@ -363,5 +363,10 @@
             "reportIssue": "問題を報告",
             "shortcuts": "ショートカット"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 }
\ No newline at end of file
diff --git a/apps/web/client/messages/ko.json b/apps/web/client/messages/ko.json
index 535c850bd7..0a0fc1f8ef 100644
--- a/apps/web/client/messages/ko.json
+++ b/apps/web/client/messages/ko.json
@@ -363,5 +363,10 @@
             "reportIssue": "오류 신고하기",
             "shortcuts": "단축키"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 }
\ No newline at end of file
diff --git a/apps/web/client/messages/zh.json b/apps/web/client/messages/zh.json
index 7e4063cac5..ed532449ba 100644
--- a/apps/web/client/messages/zh.json
+++ b/apps/web/client/messages/zh.json
@@ -363,5 +363,10 @@
             "reportIssue": "报告问题",
             "shortcuts": "快捷键"
         }
+    },
+    "BrandComplianceBlock": {
+        "brandColors": "Brand Colors",
+        "title": "Brand compliance",
+        "description": "Make your fonts, colors, and styles all speak the same language."
     }
 }
\ No newline at end of file
diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
index 037e1d6dca..359aad8278 100644
--- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
+++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useRef } from "react";
+import { useTranslations } from "next-intl";
+import { transKeys } from "@/i18n/keys";
 import { motion, useReducedMotion, useScroll, useSpring, useTransform } from "motion/react";
 
 import { Icons } from "@onlook/ui/icons";
@@ -52,13 +54,15 @@ function ParallaxContainer({
 }
 
 export function BrandComplianceBlock() {
+  const t = useTranslations();
+
   return (
     <div className="flex flex-col gap-4">
       <div className="bg-background-onlook/80 relative mb-6 h-100 w-full overflow-hidden rounded-lg">
         <ParallaxContainer speed={0.08} className="absolute inset-0">
           <div className="border-foreground-primary/20 absolute top-7 left-1/14 flex h-100 w-60 flex-col items-center justify-start overflow-hidden rounded-xl border-[0.5px] bg-black/85 backdrop-blur-2xl">
             <p className="text-foreground-primary text-regular border-foreground-primary/20 w-full border-b-[0.5px] px-3 py-2 text-left font-light">
-              Brand Colors
+              {t(transKeys.BrandComplianceBlock.brandColors)}
             </p>
             <div className="flex h-full w-full flex-col gap-2 overflow-y-auto px-3 py-2">
               <ColorSwatchGroup
@@ -180,7 +184,7 @@ export function BrandComplianceBlock() {
         <ParallaxContainer speed={-0.08} className="absolute inset-0">
           <div className="border-foreground-primary/20 absolute top-20 right-1/14 flex h-100 w-60 flex-col items-center justify-start overflow-hidden rounded-xl border-[0.5px] bg-black/50 backdrop-blur-2xl">
             <p className="text-foreground-primary text-regular border-foreground-primary/20 w-full border-b-[0.5px] px-3 py-2 text-left font-light">
-              Brand Colors
+              {t(transKeys.BrandComplianceBlock.brandColors)}
             </p>
             <div className="flex h-full w-full flex-col gap-2 overflow-y-auto px-3 py-2">
               <ColorSwatchGroup
@@ -306,12 +310,12 @@ export function BrandComplianceBlock() {
             <Icons.Brand className="text-foreground-primary h-6 w-6" />
           </div>
           <span className="text-foreground-primary text-largePlus font-light">
-            Brand compliance
+            {t(transKeys.BrandComplianceBlock.title)}
           </span>
         </div>
         {/* Description */}
         <p className="text-foreground-secondary text-regular w-1/2 text-balance">
-          Make your fonts, colors, and styles all speak the same language.
+          {t(transKeys.BrandComplianceBlock.description)}
         </p>
       </div>
     </div>