Fix Golden Nifty strategy page alignment
This commit is contained in:
Thigazhezhilan J
parent
e183f9ddce
commit
71a99b7b0a
@ -282,7 +282,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<div className="min-h-screen text-foreground">
|
||||
<Navigation />
|
||||
<PageEnter>
|
||||
<main className="relative overflow-hidden pt-24 pb-24">
|
||||
<main className="relative overflow-x-hidden overflow-y-visible pt-20 pb-20 sm:pt-24 sm:pb-24">
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute -top-32 left-[8%] h-80 w-80 rounded-full bg-primary/10 blur-3xl"
|
||||
@ -300,25 +300,25 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[0] = el)}
|
||||
data-section-index={0}
|
||||
className={`relative px-6 py-16 overflow-hidden ${revealTransition} ${sectionReveal(0)}`}
|
||||
className={`relative overflow-hidden px-4 py-12 sm:px-6 sm:py-16 ${revealTransition} ${sectionReveal(0)}`}
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute -left-10 top-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl" />
|
||||
<div className="absolute right-[-80px] bottom-10 w-80 h-80 rounded-full bg-chart-2/10 blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
|
||||
<div className="space-y-6">
|
||||
<div className="relative z-10 mx-auto grid max-w-6xl gap-8 lg:grid-cols-2 lg:items-start lg:gap-12">
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
<Badge className="w-fit bg-primary/15 text-primary border-primary/30">
|
||||
Hybrid equity + gold
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-5xl font-bold leading-tight">
|
||||
<h1 className="max-w-2xl text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
|
||||
Golden Nifty Strategy
|
||||
</h1>
|
||||
<p className="text-base text-muted-foreground">
|
||||
<p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
|
||||
Not a fixed 60/40. Allocation adapts monthly based on market regime and relative valuation.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
<p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
|
||||
A disciplined system that keeps you invested through cycles without decision fatigue. Equity drives growth,
|
||||
gold counters stress, and monthly flows are steered by rules instead of gut feel.
|
||||
</p>
|
||||
@ -336,11 +336,11 @@ export default function GoldenNiftyStrategy() {
|
||||
Low drift
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
@ -353,8 +353,8 @@ export default function GoldenNiftyStrategy() {
|
||||
</TiltCard>
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
@ -370,8 +370,8 @@ export default function GoldenNiftyStrategy() {
|
||||
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/70 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`}
|
||||
className="h-full bg-card/70 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "300ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -384,7 +384,7 @@ export default function GoldenNiftyStrategy() {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
|
||||
<p className="text-sm text-muted-foreground mb-1">Core structure</p>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
@ -439,13 +439,13 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[1] = el)}
|
||||
data-section-index={1}
|
||||
className={`px-6 pt-10 max-w-6xl mx-auto ${revealTransition} ${sectionReveal(1)}`}
|
||||
className={`mx-auto max-w-6xl px-4 pt-10 sm:px-6 ${revealTransition} ${sectionReveal(1)}`}
|
||||
>
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -453,7 +453,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<CardDescription>When equity trends are healthy, the strategy allows equity exposure to rise within defined risk limits.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-3xl font-semibold text-chart-2">Equity leans higher</p>
|
||||
<p className="text-2xl font-semibold text-chart-2 sm:text-3xl">Equity leans higher</p>
|
||||
<ul className="text-muted-foreground space-y-2 text-sm">
|
||||
<li>- Equity range: roughly 55–75%, with gold flexing as the counterweight.</li>
|
||||
<li>- New SIP flows lean into equity first, staying inside guardrails.</li>
|
||||
@ -463,8 +463,8 @@ export default function GoldenNiftyStrategy() {
|
||||
</TiltCard>
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -472,7 +472,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<CardDescription>When trends weaken, new capital is defensively allocated without forced selling.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-3xl font-semibold text-chart-1">Defense steps up</p>
|
||||
<p className="text-2xl font-semibold text-chart-1 sm:text-3xl">Defense steps up</p>
|
||||
<ul className="text-muted-foreground space-y-2 text-sm">
|
||||
<li>- Equity tilts down toward the lower band; gold sleeve scales up automatically.</li>
|
||||
<li>- New SIP money routes defensively; existing holdings are adjusted gradually.</li>
|
||||
@ -482,8 +482,8 @@ export default function GoldenNiftyStrategy() {
|
||||
</TiltCard>
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "350ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -501,7 +501,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<Badge
|
||||
key={item.label}
|
||||
variant="secondary"
|
||||
className="bg-background/80 border-border/60 text-foreground flex items-center gap-2"
|
||||
className="flex items-center gap-2 border-border/60 bg-background/80 text-foreground whitespace-normal"
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium">{item.label}:</span>
|
||||
@ -517,7 +517,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[2] = el)}
|
||||
data-section-index={2}
|
||||
className={`px-6 pt-16 max-w-6xl mx-auto ${revealTransition} ${sectionReveal(2)}`}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(2)}`}
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
@ -526,13 +526,13 @@ export default function GoldenNiftyStrategy() {
|
||||
No gold-only comparisons. Just our adaptive SIP vs a plain Nifty SIP across drawdowns, rolling pain points, and overall returns.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{comparisonStats.map((stat, index) => (
|
||||
<TiltCard
|
||||
key={stat.title}
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: `${150 + index * 120}ms` }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -540,10 +540,10 @@ export default function GoldenNiftyStrategy() {
|
||||
<CardDescription>{stat.note}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">Our strategy</p>
|
||||
<p className="text-2xl font-semibold text-chart-2">{stat.ours.value}</p>
|
||||
<p className="text-xl font-semibold text-chart-2 sm:text-2xl">{stat.ours.value}</p>
|
||||
<p className="text-xs text-muted-foreground">{stat.ours.detail}</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">
|
||||
@ -553,7 +553,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">Nifty SIP</p>
|
||||
<p className="text-2xl font-semibold text-muted-foreground">{stat.nifty.value}</p>
|
||||
<p className="text-xl font-semibold text-muted-foreground sm:text-2xl">{stat.nifty.value}</p>
|
||||
<p className="text-xs text-muted-foreground">{stat.nifty.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -567,13 +567,13 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[3] = el)}
|
||||
data-section-index={3}
|
||||
className={`px-6 pt-16 max-w-6xl mx-auto ${revealTransition} ${sectionReveal(3)}`}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(3)}`}
|
||||
>
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -604,8 +604,8 @@ export default function GoldenNiftyStrategy() {
|
||||
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover}`}
|
||||
className="h-full bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
|
||||
>
|
||||
<CardHeader>
|
||||
@ -643,7 +643,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[4] = el)}
|
||||
data-section-index={4}
|
||||
className={`px-6 pt-16 max-w-6xl mx-auto ${revealTransition} ${sectionReveal(4)}`}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(4)}`}
|
||||
>
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
@ -655,7 +655,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<CardTitle>Why this isn't a DIY strategy</CardTitle>
|
||||
<CardDescription>Clients pay for discipline, not a tutorial.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid md:grid-cols-3 gap-6">
|
||||
<CardContent className="grid gap-6 md:grid-cols-3">
|
||||
<div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
|
||||
<p className="font-semibold flex items-center gap-2">
|
||||
<Workflow className="w-4 h-4 text-primary" />
|
||||
@ -690,7 +690,7 @@ export default function GoldenNiftyStrategy() {
|
||||
<section
|
||||
ref={(el) => (sectionRefs.current[5] = el)}
|
||||
data-section-index={5}
|
||||
className={`px-6 pt-16 max-w-6xl mx-auto ${revealTransition} ${sectionReveal(5)}`}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(5)}`}
|
||||
>
|
||||
<TiltCard
|
||||
prefersReducedMotion={prefersReducedMotion}
|
||||
@ -707,7 +707,7 @@ export default function GoldenNiftyStrategy() {
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="rounded-lg group"
|
||||
className="rounded-lg group w-full sm:w-fit"
|
||||
asChild
|
||||
>
|
||||
<a href="/" className="flex items-center gap-2">
|
||||
@ -716,7 +716,7 @@ export default function GoldenNiftyStrategy() {
|
||||
</a>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="grid md:grid-cols-3 gap-6">
|
||||
<CardContent className="grid gap-6 md:grid-cols-3">
|
||||
<div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
|
||||
<p className="font-semibold flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-primary" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user