bender/f557840b-6a17-4730-899c-a5f4f9ba2693
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4_1782021656081 into main

Browse Source 
Merge version_4_1782021656081 into main
This commit was merged in pull request #3.
This commit is contained in:
bender
2026-06-21 06:02:57 +00:00
parent 8d7e15ae41 b2a4aa640f
commit 31f2806334
3 changed files with 68 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.tsx
View File

@@ -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

4
src/pages/HomePage.tsx
View File

@@ -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 />
</>
);
}

64
src/pages/HomePage/sections/SkincareBackground.tsx Normal file
View File

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