feat: flowing gold side lines + pure glass header
- DecorativeLines: SVG flowing bezier curves on both sides, gold gradient with fade at top/bottom, desktop only (xl+), starts after hero section - Header: pure backdrop-blur-xl glass with no bg color overlay, subtle border-white/8% bottom line - Removed old straight CSS lines from body
This commit is contained in:
@@ -26,36 +26,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ===== Decorative side lines (desktop only) ===== */
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
body::before,
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
rgba(201, 169, 110, 0.15) 15%,
|
||||
rgba(201, 169, 110, 0.25) 50%,
|
||||
rgba(201, 169, 110, 0.15) 85%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
body::before {
|
||||
left: clamp(16px, 3vw, 48px);
|
||||
}
|
||||
|
||||
body::after {
|
||||
right: clamp(16px, 3vw, 48px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Selection ===== */
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import { FAQ } from "@/components/sections/FAQ";
|
||||
import { Contact } from "@/components/sections/Contact";
|
||||
import { BackToTop } from "@/components/ui/BackToTop";
|
||||
import { FloatingContact } from "@/components/ui/FloatingContact";
|
||||
import { DecorativeLines } from "@/components/ui/DecorativeLines";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import { ClientShell } from "@/components/layout/ClientShell";
|
||||
@@ -29,6 +30,8 @@ export default function HomePage() {
|
||||
<Header />
|
||||
<main id="main-content">
|
||||
{content?.hero && <Hero data={content.hero} />}
|
||||
<div className="relative">
|
||||
<DecorativeLines />
|
||||
{content?.about && (
|
||||
<About
|
||||
data={content.about}
|
||||
@@ -48,6 +51,7 @@ export default function HomePage() {
|
||||
{content?.news && <News data={content.news} />}
|
||||
{content?.faq && <FAQ data={content.faq} />}
|
||||
{content?.contact && <Contact data={content.contact} />}
|
||||
</div>
|
||||
<BackToTop />
|
||||
<FloatingContact />
|
||||
</main>
|
||||
|
||||
@@ -126,7 +126,7 @@ export function Header() {
|
||||
<header
|
||||
className={`fixed top-0 z-50 w-full transition-all duration-500 ${
|
||||
scrolled || menuOpen
|
||||
? "bg-white/60 backdrop-blur-xl border-b border-neutral-200/30 dark:bg-black/40 dark:border-white/[0.06]"
|
||||
? "backdrop-blur-xl border-b border-white/[0.08]"
|
||||
: "bg-transparent"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Decorative flowing gold lines on both sides of the page.
|
||||
* Desktop only (hidden below xl). Positioned absolute within a wrapper.
|
||||
*/
|
||||
export function DecorativeLines() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden hidden xl:block" aria-hidden="true">
|
||||
{/* Left line */}
|
||||
<svg
|
||||
className="absolute left-[2vw] top-0 h-full w-16"
|
||||
viewBox="0 0 60 2000"
|
||||
preserveAspectRatio="none"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M30 0 C45 120, 15 250, 35 400 S10 550, 30 700 S50 850, 25 1000 S5 1150, 35 1300 S55 1450, 30 1600 S10 1750, 30 2000"
|
||||
stroke="url(#goldGradientL)"
|
||||
strokeWidth="0.8"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="goldGradientL" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="rgb(201,169,110)" stopOpacity="0" />
|
||||
<stop offset="10%" stopColor="rgb(201,169,110)" stopOpacity="0.15" />
|
||||
<stop offset="50%" stopColor="rgb(201,169,110)" stopOpacity="0.25" />
|
||||
<stop offset="90%" stopColor="rgb(201,169,110)" stopOpacity="0.15" />
|
||||
<stop offset="100%" stopColor="rgb(201,169,110)" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
{/* Right line */}
|
||||
<svg
|
||||
className="absolute right-[2vw] top-0 h-full w-16"
|
||||
viewBox="0 0 60 2000"
|
||||
preserveAspectRatio="none"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M30 0 C10 150, 50 300, 25 450 S45 600, 30 750 S5 900, 35 1050 S55 1200, 25 1400 S10 1550, 30 1700 S50 1850, 30 2000"
|
||||
stroke="url(#goldGradientR)"
|
||||
strokeWidth="0.8"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="goldGradientR" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="rgb(201,169,110)" stopOpacity="0" />
|
||||
<stop offset="10%" stopColor="rgb(201,169,110)" stopOpacity="0.15" />
|
||||
<stop offset="50%" stopColor="rgb(201,169,110)" stopOpacity="0.25" />
|
||||
<stop offset="90%" stopColor="rgb(201,169,110)" stopOpacity="0.15" />
|
||||
<stop offset="100%" stopColor="rgb(201,169,110)" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user