feat: gold headings, glass header, fixed glow positioning
- SectionHeading: gold text instead of gradient-text - Hero h1: gold, subtitle: white/80 - Header: pure backdrop-blur-xl glass, no bg color - Section glow: fixed top:0, original size 600x400 - Section padding: py-20 sm:py-28 - Markup: headings/bold text-neutral-900 dark:text-white
This commit is contained in:
@@ -52,7 +52,7 @@
|
|||||||
/* ===== Layout ===== */
|
/* ===== Layout ===== */
|
||||||
|
|
||||||
.section-padding {
|
.section-padding {
|
||||||
@apply py-24 sm:py-36;
|
@apply py-20 sm:py-28;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-container {
|
.section-container {
|
||||||
@@ -68,17 +68,17 @@
|
|||||||
.section-glow::before {
|
.section-glow::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40px;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: min(800px, 100%);
|
width: min(600px, 100%);
|
||||||
height: 500px;
|
height: 400px;
|
||||||
background: radial-gradient(ellipse, rgba(201, 169, 110, 0.12), transparent 70%);
|
background: radial-gradient(ellipse, rgba(201, 169, 110, 0.12), transparent 70%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:is(.dark) .section-glow::before {
|
:is(.dark) .section-glow::before {
|
||||||
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 169, 110, 0.07), transparent 70%);
|
background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Glass Card ===== */
|
/* ===== Glass Card ===== */
|
||||||
|
|||||||
@@ -186,11 +186,11 @@ export function Hero({ data: hero }: HeroProps) {
|
|||||||
</div>
|
</div>
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
<h1 className="hero-title font-display text-4xl font-bold tracking-tight text-white sm:text-6xl lg:text-8xl">
|
<h1 className="hero-title font-display text-4xl font-bold tracking-tight text-gold sm:text-6xl lg:text-8xl">
|
||||||
{hero.headline}
|
{hero.headline}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="hero-subtitle mx-auto mt-5 max-w-xl text-lg text-gold-light/90 sm:mt-8 sm:text-2xl">
|
<p className="hero-subtitle mx-auto mt-5 max-w-xl text-lg text-white/80 sm:mt-8 sm:text-2xl">
|
||||||
{hero.subheadline}
|
{hero.subheadline}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export function SectionHeading({ children, className = "", centered = false }: S
|
|||||||
return (
|
return (
|
||||||
<div className={centered ? "text-center" : ""}>
|
<div className={centered ? "text-center" : ""}>
|
||||||
<h2
|
<h2
|
||||||
className={`font-display text-4xl font-bold uppercase tracking-wider sm:text-5xl lg:text-7xl text-neutral-900 dark:text-white ${className}`}
|
className={`font-display text-4xl font-bold uppercase tracking-wider sm:text-5xl lg:text-7xl text-gold ${className}`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
Reference in New Issue
Block a user