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:
2026-04-12 15:58:58 +03:00
parent a00fdaa760
commit b738976111
4 changed files with 62 additions and 31 deletions
-30
View File
@@ -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 ===== */
+4
View File
@@ -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>
+1 -1
View File
@@ -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"
}`}
>
+57
View File
@@ -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>
);
}