quantfortune/SUP_GoldBees_Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Golden Nifty strategy page alignment

Browse Source
This commit is contained in:
Thigazhezhilan J 2026-04-02 00:13:07 +05:30
parent e183f9ddce
commit 71a99b7b0a
1 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/pages/GoldenNiftyStrategy.tsx
View File

@ -282,7 +282,7 @@ export default function GoldenNiftyStrategy() {
<div className="min-h-screen text-foreground"> <div className="min-h-screen text-foreground">
<Navigation /> <Navigation />
<PageEnter> <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 inset-0 pointer-events-none">
<div <div
className="absolute -top-32 left-[8%] h-80 w-80 rounded-full bg-primary/10 blur-3xl" 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 <section
ref={(el) => (sectionRefs.current[0] = el)} ref={(el) => (sectionRefs.current[0] = el)}
data-section-index={0} 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 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 -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 className="absolute right-[-80px] bottom-10 w-80 h-80 rounded-full bg-chart-2/10 blur-3xl" />
</div> </div>
<div className="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"> <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-6"> <div className="space-y-5 sm:space-y-6">
<Badge className="w-fit bg-primary/15 text-primary border-primary/30"> <Badge className="w-fit bg-primary/15 text-primary border-primary/30">
Hybrid equity + gold Hybrid equity + gold
</Badge> </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 Golden Nifty Strategy
</h1> </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. Not a fixed 60/40. Allocation adapts monthly based on market regime and relative valuation.
</p> </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, 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. gold counters stress, and monthly flows are steered by rules instead of gut feel.
</p> </p>
@ -336,11 +336,11 @@ export default function GoldenNiftyStrategy() {
Low drift Low drift
</Badge> </Badge>
</div> </div>
<div className="flex flex-wrap gap-4"> <div className="grid gap-4 sm:grid-cols-2">
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
> >
<CardHeader className="pb-2"> <CardHeader className="pb-2">
@ -353,8 +353,8 @@ export default function GoldenNiftyStrategy() {
</TiltCard> </TiltCard>
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
> >
<CardHeader className="pb-2"> <CardHeader className="pb-2">
@ -370,8 +370,8 @@ export default function GoldenNiftyStrategy() {
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/70 backdrop-blur-sm border-card-border" className="h-full bg-card/70 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "300ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "300ms" }}
> >
<CardHeader> <CardHeader>
@ -384,7 +384,7 @@ export default function GoldenNiftyStrategy() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <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}`}> <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> <p className="text-sm text-muted-foreground mb-1">Core structure</p>
<ul className="text-sm text-muted-foreground space-y-1"> <ul className="text-sm text-muted-foreground space-y-1">
@ -439,13 +439,13 @@ export default function GoldenNiftyStrategy() {
<section <section
ref={(el) => (sectionRefs.current[1] = el)} ref={(el) => (sectionRefs.current[1] = el)}
data-section-index={1} 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 <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
> >
<CardHeader> <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> <CardDescription>When equity trends are healthy, the strategy allows equity exposure to rise within defined risk limits.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <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"> <ul className="text-muted-foreground space-y-2 text-sm">
<li>- Equity range: roughly 55–75%, with gold flexing as the counterweight.</li> <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> <li>- New SIP flows lean into equity first, staying inside guardrails.</li>
@ -463,8 +463,8 @@ export default function GoldenNiftyStrategy() {
</TiltCard> </TiltCard>
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
> >
<CardHeader> <CardHeader>
@ -472,7 +472,7 @@ export default function GoldenNiftyStrategy() {
<CardDescription>When trends weaken, new capital is defensively allocated without forced selling.</CardDescription> <CardDescription>When trends weaken, new capital is defensively allocated without forced selling.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <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"> <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>- 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> <li>- New SIP money routes defensively; existing holdings are adjusted gradually.</li>
@ -482,8 +482,8 @@ export default function GoldenNiftyStrategy() {
</TiltCard> </TiltCard>
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "350ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "350ms" }}
> >
<CardHeader> <CardHeader>
@ -501,7 +501,7 @@ export default function GoldenNiftyStrategy() {
<Badge <Badge
key={item.label} key={item.label}
variant="secondary" 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} {item.icon}
<span className="font-medium">{item.label}:</span> <span className="font-medium">{item.label}:</span>
@ -517,7 +517,7 @@ export default function GoldenNiftyStrategy() {
<section <section
ref={(el) => (sectionRefs.current[2] = el)} ref={(el) => (sectionRefs.current[2] = el)}
data-section-index={2} 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-6">
<div className="flex flex-col gap-2"> <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. No gold-only comparisons. Just our adaptive SIP vs a plain Nifty SIP across drawdowns, rolling pain points, and overall returns.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-4"> <div className="grid gap-4 md:grid-cols-3">
{comparisonStats.map((stat, index) => ( {comparisonStats.map((stat, index) => (
<TiltCard <TiltCard
key={stat.title} key={stat.title}
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: `${150 + index * 120}ms` }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: `${150 + index * 120}ms` }}
> >
<CardHeader> <CardHeader>
@ -540,10 +540,10 @@ export default function GoldenNiftyStrategy() {
<CardDescription>{stat.note}</CardDescription> <CardDescription>{stat.note}</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <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> <div>
<p className="text-xs uppercase tracking-wide text-muted-foreground">Our strategy</p> <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> <p className="text-xs text-muted-foreground">{stat.ours.detail}</p>
</div> </div>
<Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0"> <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 className="flex items-start justify-between gap-3">
<div> <div>
<p className="text-xs uppercase tracking-wide text-muted-foreground">Nifty SIP</p> <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> <p className="text-xs text-muted-foreground">{stat.nifty.detail}</p>
</div> </div>
</div> </div>
@ -567,13 +567,13 @@ export default function GoldenNiftyStrategy() {
<section <section
ref={(el) => (sectionRefs.current[3] = el)} ref={(el) => (sectionRefs.current[3] = el)}
data-section-index={3} 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 <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}
> >
<CardHeader> <CardHeader>
@ -604,8 +604,8 @@ export default function GoldenNiftyStrategy() {
<TiltCard <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
className="bg-card/80 backdrop-blur-sm border-card-border" className="h-full bg-card/80 backdrop-blur-sm border-card-border"
wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover}`} wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }} wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}
> >
<CardHeader> <CardHeader>
@ -643,7 +643,7 @@ export default function GoldenNiftyStrategy() {
<section <section
ref={(el) => (sectionRefs.current[4] = el)} ref={(el) => (sectionRefs.current[4] = el)}
data-section-index={4} 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 <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
@ -655,7 +655,7 @@ export default function GoldenNiftyStrategy() {
<CardTitle>Why this isn't a DIY strategy</CardTitle> <CardTitle>Why this isn't a DIY strategy</CardTitle>
<CardDescription>Clients pay for discipline, not a tutorial.</CardDescription> <CardDescription>Clients pay for discipline, not a tutorial.</CardDescription>
</CardHeader> </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}`}> <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"> <p className="font-semibold flex items-center gap-2">
<Workflow className="w-4 h-4 text-primary" /> <Workflow className="w-4 h-4 text-primary" />
@ -690,7 +690,7 @@ export default function GoldenNiftyStrategy() {
<section <section
ref={(el) => (sectionRefs.current[5] = el)} ref={(el) => (sectionRefs.current[5] = el)}
data-section-index={5} 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 <TiltCard
prefersReducedMotion={prefersReducedMotion} prefersReducedMotion={prefersReducedMotion}
@ -707,7 +707,7 @@ export default function GoldenNiftyStrategy() {
</div> </div>
<Button <Button
variant="secondary" variant="secondary"
className="rounded-lg group" className="rounded-lg group w-full sm:w-fit"
asChild asChild
> >
<a href="/" className="flex items-center gap-2"> <a href="/" className="flex items-center gap-2">
@ -716,7 +716,7 @@ export default function GoldenNiftyStrategy() {
</a> </a>
</Button> </Button>
</CardHeader> </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}`}> <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"> <p className="font-semibold flex items-center gap-2">
<Sparkles className="w-4 h-4 text-primary" /> <Sparkles className="w-4 h-4 text-primary" />