From b2a4aa640fde57086ec11b28751b2686356eb7cf Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 06:02:17 +0000
Subject: [PATCH] Bob AI: Add 3D scrolling skincare background and disable
 default sit

---
 src/components/Layout.tsx                     |  2 +-
 src/pages/HomePage.tsx                        |  4 +-
 .../HomePage/sections/SkincareBackground.tsx  | 64 +++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/HomePage/sections/SkincareBackground.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ecd1125..d7ebc7c 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -38,7 +38,7 @@ export default function Layout() {
 ];
 
   return (
-    <StyleProvider buttonVariant="magnetic" siteBackground="floatingGradient" heroBackground="none">
+    <StyleProvider buttonVariant="magnetic" siteBackground="none" heroBackground="none">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarCentered
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 59f09d8..aed869c 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -13,7 +13,8 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import SkincareBackgroundSection from './HomePage/sections/SkincareBackground';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -31,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
   <FaqSection />
 
   <ContactSection />
+          <SkincareBackgroundSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/SkincareBackground.tsx b/src/pages/HomePage/sections/SkincareBackground.tsx
new file mode 100644
index 0000000..bccf527
--- /dev/null
+++ b/src/pages/HomePage/sections/SkincareBackground.tsx
@@ -0,0 +1,64 @@
+import { motion, useScroll, useTransform } from "motion/react";
+
+export default function SkincareBackground() {
+  const { scrollYProgress } = useScroll();
+  
+  const y1 = useTransform(scrollYProgress, [0, 1], ["0%", "-150%"]);
+  const rotate1 = useTransform(scrollYProgress, [0, 1], [0, 120]);
+  
+  const y2 = useTransform(scrollYProgress, [0, 1], ["0%", "150%"]);
+  const rotate2 = useTransform(scrollYProgress, [0, 1], [0, -120]);
+
+  const y3 = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
+  const x3 = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  const rotate3 = useTransform(scrollYProgress, [0, 1], [-20, 90]);
+
+  return (
+    <div data-webild-section="skincare-background" className="fixed inset-0 -z-10 overflow-hidden pointer-events-none bg-background">
+      <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-primary-cta/10 rounded-full blur-[128px]" />
+      <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-primary-cta/5 rounded-full blur-[128px]" />
+
+      <motion.div 
+        style={{ y: y1, rotate: rotate1 }}
+        className="absolute top-[10%] left-[5%] w-[400px] h-[400px] opacity-30 mix-blend-screen"
+      >
+        <div 
+          className="w-full h-full bg-no-repeat bg-center bg-contain"
+          style={{ 
+            backgroundImage: 'url(https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&q=80&w=800)',
+            maskImage: 'radial-gradient(circle, black 40%, transparent 70%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 40%, transparent 70%)'
+          }}
+        />
+      </motion.div>
+
+      <motion.div 
+        style={{ y: y2, rotate: rotate2 }}
+        className="absolute top-[40%] right-[5%] w-[500px] h-[500px] opacity-20 mix-blend-screen"
+      >
+        <div 
+          className="w-full h-full bg-no-repeat bg-center bg-contain"
+          style={{ 
+            backgroundImage: 'url(https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?auto=format&fit=crop&q=80&w=800)',
+            maskImage: 'radial-gradient(circle, black 40%, transparent 70%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 40%, transparent 70%)'
+          }}
+        />
+      </motion.div>
+
+      <motion.div 
+        style={{ x: x3, y: y3, rotate: rotate3 }}
+        className="absolute bottom-[10%] left-[30%] w-[450px] h-[450px] opacity-25 mix-blend-screen"
+      >
+        <div 
+          className="w-full h-full bg-no-repeat bg-center bg-contain"
+          style={{ 
+            backgroundImage: 'url(https://images.unsplash.com/photo-1615397323754-06584c502120?auto=format&fit=crop&q=80&w=800)',
+            maskImage: 'radial-gradient(circle, black 40%, transparent 70%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 40%, transparent 70%)'
+          }}
+        />
+      </motion.div>
+    </div>
+  );
+}
\ No newline at end of file