Add Alpha Shield as Strategy 2 (JuniorBees + GoldBees dynamic allocation)
Replaces Bluechip Growth with Alpha Shield strategy across landing page, strategy selector modal, and dedicated strategy page. Adds route /strategies/alpha-shield. Targets 15-18% XIRR via 60-month SMA valuation tilt on Nifty Next 50 midcap ETF with GoldBees as downside hedge. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thigazhezhilan J
parent
98894617e2
commit
bd03682c7a
@ -8,6 +8,7 @@ import Home from "@/pages/Home";
|
||||
import PortfolioPage from "@/pages/Portfolio";
|
||||
import PaperPortfolio from "@/pages/PaperPortfolio";
|
||||
import GoldenNiftyStrategy from "@/pages/GoldenNiftyStrategy";
|
||||
import AlphaShieldStrategy from "@/pages/AlphaShieldStrategy";
|
||||
import ZerodhaCallback from "@/pages/ZerodhaCallback";
|
||||
import AdminPage from "@/pages/admin/AdminPage";
|
||||
import About from "@/pages/About";
|
||||
@ -28,6 +29,7 @@ function Router() {
|
||||
<Route path="/portfolio" component={PortfolioPage} />
|
||||
<Route path="/portfolio/paper" component={PaperPortfolio} />
|
||||
<Route path="/strategies/golden-nifty" component={GoldenNiftyStrategy} />
|
||||
<Route path="/strategies/alpha-shield" component={AlphaShieldStrategy} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/blog" component={Blog} />
|
||||
<Route path="/learn-more" component={LearnMore} />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import StrategyCard from "./StrategyCard";
|
||||
import { TrendingUp, Shield, Sparkles } from "lucide-react";
|
||||
import { GOLDEN_NIFTY_PATH } from "@/lib/routes";
|
||||
import { TrendingUp, Zap, Sparkles } from "lucide-react";
|
||||
import { GOLDEN_NIFTY_PATH, ALPHA_SHIELD_PATH } from "@/lib/routes";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const strategies = [
|
||||
@ -14,12 +14,12 @@ const strategies = [
|
||||
href: GOLDEN_NIFTY_PATH,
|
||||
},
|
||||
{
|
||||
title: "Bluechip Growth",
|
||||
description: "Focused on large-cap leaders with proven track records and consistent dividend yields.",
|
||||
returnRange: "13-18% p.a.",
|
||||
title: "Alpha Shield",
|
||||
description: "High-growth midcap investing with intelligent gold protection. Allocates dynamically based on market valuation — more midcap when cheap, more gold when expensive.",
|
||||
returnRange: "15-18% p.a.",
|
||||
riskLevel: "Medium" as const,
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
comingSoon: true,
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
href: ALPHA_SHIELD_PATH,
|
||||
},
|
||||
{
|
||||
title: "Flexi Momentum",
|
||||
@ -154,7 +154,7 @@ export default function StrategiesSection() {
|
||||
))}
|
||||
</motion.div>
|
||||
<p className="text-center text-sm text-muted-foreground mt-8">
|
||||
Detailed playbook is live for Golden Nifty. More strategies are coming soon.
|
||||
Golden Nifty and Alpha Shield are live. Flexi Momentum coming soon.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useLocation } from "wouter";
|
||||
import { Sparkles, Shield, TrendingUp } from "lucide-react";
|
||||
import { Sparkles, Zap, TrendingUp } from "lucide-react";
|
||||
import StrategyCard from "./StrategySelectorCard";
|
||||
import { GOLDEN_NIFTY_PATH } from "@/lib/routes";
|
||||
import { GOLDEN_NIFTY_PATH, ALPHA_SHIELD_PATH } from "@/lib/routes";
|
||||
|
||||
type StrategySelectorModalProps = {
|
||||
open: boolean;
|
||||
@ -63,6 +63,13 @@ export default function StrategySelectorModal({ open, onClose }: StrategySelecto
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleSelectAlphaShield = () => {
|
||||
onClose();
|
||||
window.setTimeout(() => {
|
||||
navigate(ALPHA_SHIELD_PATH);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
@ -123,11 +130,12 @@ export default function StrategySelectorModal({ open, onClose }: StrategySelecto
|
||||
onClick={handleSelectGolden}
|
||||
/>
|
||||
<StrategyCard
|
||||
title="Bluechip Growth"
|
||||
description="Large-cap leaders with dividend focus."
|
||||
status="Coming Soon"
|
||||
disabled
|
||||
icon={<Shield className="h-5 w-5" />}
|
||||
title="Alpha Shield"
|
||||
description="High-growth midcap with intelligent gold protection."
|
||||
status="Active"
|
||||
cta="View Strategy"
|
||||
icon={<Zap className="h-5 w-5" />}
|
||||
onClick={handleSelectAlphaShield}
|
||||
/>
|
||||
<StrategyCard
|
||||
title="Flexi Momentum"
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export const GOLDEN_NIFTY_PATH = "/strategies/golden-nifty";
|
||||
export const ALPHA_SHIELD_PATH = "/strategies/alpha-shield";
|
||||
|
||||
600
src/pages/AlphaShieldStrategy.tsx
Normal file
600
src/pages/AlphaShieldStrategy.tsx
Normal file
@ -0,0 +1,600 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { CSSProperties, ReactNode, MouseEvent } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import Footer from "@/components/landing/Footer";
|
||||
import Navigation from "@/components/landing/Navigation";
|
||||
import PageEnter from "@/components/ui/page-enter";
|
||||
import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
CalendarClock,
|
||||
ShieldCheck,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
|
||||
const guardrails = [
|
||||
{
|
||||
title: "Valuation-driven protection",
|
||||
description:
|
||||
"When JuniorBees is significantly above its 5-year average price, the strategy automatically reduces midcap and increases gold — protecting against overvalued markets.",
|
||||
},
|
||||
{
|
||||
title: "Automatic recovery positioning",
|
||||
description:
|
||||
"When midcap is cheap (below its long-term trend), the strategy pushes equity allocation up to 92% — capturing maximum upside after corrections.",
|
||||
},
|
||||
{
|
||||
title: "Gold as intelligent hedge",
|
||||
description:
|
||||
"Gold is not a fixed allocation. It dynamically expands to protect capital when midcap markets are expensive and contracts when opportunities arise.",
|
||||
},
|
||||
];
|
||||
|
||||
const executionSteps = [
|
||||
{
|
||||
title: "Fetch current JuniorBees price",
|
||||
detail:
|
||||
"Live market price of JuniorBees ETF (Nifty Next 50 Midcap) is fetched each SIP cycle.",
|
||||
},
|
||||
{
|
||||
title: "Compute 60-month SMA",
|
||||
detail:
|
||||
"5-year simple moving average of JuniorBees price acts as the fair value reference. Price above SMA = expensive; below SMA = cheap.",
|
||||
},
|
||||
{
|
||||
title: "Calculate dynamic allocation",
|
||||
detail:
|
||||
"Formula: Midcap% = clip(70% − (Price÷5yr SMA − 1) × 60%, 40%, 92%). Gold takes the remainder.",
|
||||
},
|
||||
{
|
||||
title: "Execute SIP with computed weights",
|
||||
detail:
|
||||
"New SIP capital is deployed into JuniorBees and GoldBees in exact proportions. No manual intervention needed.",
|
||||
},
|
||||
];
|
||||
|
||||
const monitoring = [
|
||||
{
|
||||
label: "Valuation signal",
|
||||
value: "60-month SMA of JuniorBees",
|
||||
icon: <Activity className="w-4 h-4" />,
|
||||
},
|
||||
{
|
||||
label: "Review cadence",
|
||||
value: "Monthly, automated",
|
||||
icon: <CalendarClock className="w-4 h-4" />,
|
||||
},
|
||||
{
|
||||
label: "Expected profile",
|
||||
value: "Medium risk, high growth",
|
||||
icon: <BarChart3 className="w-4 h-4" />,
|
||||
},
|
||||
];
|
||||
|
||||
const comparisonStats = [
|
||||
{
|
||||
title: "12-year backtested XIRR",
|
||||
ours: { value: "16.9%", detail: "Jan 2014 → May 2026 (SIP)" },
|
||||
benchmark: { value: "15.6%", detail: "Static 70/30 Midcap+Gold" },
|
||||
note: "Dynamic allocation beats static by 1.3% p.a. with lower drawdown.",
|
||||
},
|
||||
{
|
||||
title: "Max drawdown (SIP portfolio)",
|
||||
ours: { value: "-10.1%", detail: "Dynamic allocation" },
|
||||
benchmark: { value: "-15.5%", detail: "Static 70/30" },
|
||||
note: "35% less drawdown than static allocation — gold protection works.",
|
||||
},
|
||||
{
|
||||
title: "Worst crash performance",
|
||||
ours: { value: "+4.6%", detail: "2018 Midcap crash XIRR advantage" },
|
||||
benchmark: { value: "baseline", detail: "Static 70/30 in same period" },
|
||||
note: "Outperformed during the worst midcap crash (2018-2020).",
|
||||
},
|
||||
];
|
||||
|
||||
const allocationExamples = [
|
||||
{ date: "Jan 2018", ratio: "1.66x", midcap: "40%", gold: "60%", state: "Very Expensive", note: "Protected before 2018 crash ✓" },
|
||||
{ date: "Apr 2020", ratio: "0.85x", midcap: "79%", gold: "21%", state: "Cheap", note: "Bought aggressively at COVID bottom ✓" },
|
||||
{ date: "Jan 2024", ratio: "1.54x", midcap: "40%", gold: "60%", state: "Expensive", note: "Currently in protection mode" },
|
||||
];
|
||||
|
||||
const SECTION_COUNT = 6;
|
||||
|
||||
function usePrefersReducedMotion() {
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const update = () => setPrefersReducedMotion(mq.matches);
|
||||
update();
|
||||
if (mq.addEventListener) {
|
||||
mq.addEventListener("change", update);
|
||||
return () => mq.removeEventListener("change", update);
|
||||
}
|
||||
mq.addListener(update);
|
||||
return () => mq.removeListener(update);
|
||||
}, []);
|
||||
return prefersReducedMotion;
|
||||
}
|
||||
|
||||
type TiltCardProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
wrapperClassName?: string;
|
||||
wrapperStyle?: CSSProperties;
|
||||
cardStyle?: CSSProperties;
|
||||
prefersReducedMotion: boolean;
|
||||
};
|
||||
|
||||
function TiltCard({ children, className, wrapperClassName, wrapperStyle, cardStyle, prefersReducedMotion }: TiltCardProps) {
|
||||
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0, scale: 1 });
|
||||
|
||||
const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {
|
||||
if (prefersReducedMotion || !wrapperRef.current) return;
|
||||
const rect = wrapperRef.current.getBoundingClientRect();
|
||||
const x = (event.clientX - rect.left) / rect.width - 0.5;
|
||||
const y = (event.clientY - rect.top) / rect.height - 0.5;
|
||||
setTransform({ rotateX: y * -8, rotateY: x * 8, scale: 1.02 });
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (prefersReducedMotion) return;
|
||||
setTransform({ rotateX: 0, rotateY: 0, scale: 1 });
|
||||
};
|
||||
|
||||
const tiltStyle = prefersReducedMotion ? cardStyle : {
|
||||
...cardStyle,
|
||||
transform: `perspective(900px) rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg) scale(${transform.scale})`,
|
||||
transition: "transform 0.12s ease-out",
|
||||
willChange: "transform",
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
|
||||
<Card className={className} style={tiltStyle}>{children}</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AlphaShieldStrategy() {
|
||||
const prefersReducedMotion = usePrefersReducedMotion();
|
||||
const [visibleSections, setVisibleSections] = useState<boolean[]>(Array(SECTION_COUNT).fill(false));
|
||||
const [scrollY, setScrollY] = useState(0);
|
||||
const sectionRefs = useRef<Array<HTMLElement | null>>([]);
|
||||
const revealTransition = prefersReducedMotion ? "" : "transition-all duration-700";
|
||||
const cardHover = prefersReducedMotion ? "" : "hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10";
|
||||
const panelHover = prefersReducedMotion ? "" : "transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10";
|
||||
const isSectionVisible = (index: number) => Boolean(visibleSections[index]);
|
||||
const sectionReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6";
|
||||
const cardReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4";
|
||||
const parallaxOffset = prefersReducedMotion ? 0 : Math.min(scrollY * 0.3, 240);
|
||||
|
||||
useEffect(() => {
|
||||
if (prefersReducedMotion) { setVisibleSections(Array(SECTION_COUNT).fill(true)); return; }
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
setVisibleSections((prev) => {
|
||||
const next = prev.length ? [...prev] : Array(SECTION_COUNT).fill(false);
|
||||
entries.forEach((entry) => {
|
||||
const index = Number(entry.target.getAttribute("data-section-index"));
|
||||
if (entry.isIntersecting && Number.isFinite(index)) next[index] = true;
|
||||
});
|
||||
return next;
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
sectionRefs.current.forEach((s) => s && observer.observe(s));
|
||||
return () => observer.disconnect();
|
||||
}, [prefersReducedMotion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (prefersReducedMotion) { setScrollY(0); return; }
|
||||
let rafId: number | null = null;
|
||||
const handleScroll = () => {
|
||||
if (rafId !== null) return;
|
||||
rafId = window.requestAnimationFrame(() => { setScrollY(window.scrollY); rafId = null; });
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
return () => { window.removeEventListener("scroll", handleScroll); if (rafId !== null) window.cancelAnimationFrame(rafId); };
|
||||
}, [prefersReducedMotion]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen text-foreground">
|
||||
<Navigation />
|
||||
<PageEnter>
|
||||
<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" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
|
||||
<div className="absolute top-10 right-[12%] h-96 w-96 rounded-full bg-chart-2/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
|
||||
<div className="absolute top-52 left-[65%] h-64 w-64 rounded-full bg-chart-3/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<section ref={(el) => (sectionRefs.current[0] = el)} data-section-index={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="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">
|
||||
High-growth midcap + gold protection
|
||||
</Badge>
|
||||
<h1 className="max-w-2xl text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
|
||||
Alpha Shield Strategy
|
||||
</h1>
|
||||
<p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
|
||||
Not a fixed 70/30. Allocation adapts monthly based on whether midcap is cheap or expensive relative to its 5-year price average.
|
||||
</p>
|
||||
<p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
|
||||
Targets 15–18% XIRR by riding midcap growth aggressively when it's cheap, and shielding your capital in gold when it's expensive. Backtested over 12+ years with 16.9% XIRR and only -10.1% max drawdown.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The strategy's edge is buying more when others panic, protecting when others are greedy.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">Valuation-driven</Badge>
|
||||
<Badge variant="secondary" className="bg-chart-1/15 text-chart-1 border-0">Crash-tested</Badge>
|
||||
<Badge variant="secondary" className="bg-chart-3/15 text-chart-3 border-0">16.9% XIRR</Badge>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<TrendingUp className="w-4 h-4 text-chart-2" />
|
||||
Growth engine
|
||||
</CardTitle>
|
||||
<CardDescription>JuniorBees ETF — Nifty Next 50 midcap. Historically 17%+ CAGR buy-and-hold.</CardDescription>
|
||||
</CardHeader>
|
||||
</TiltCard>
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<ShieldCheck className="w-4 h-4 text-chart-1" />
|
||||
Intelligent shield
|
||||
</CardTitle>
|
||||
<CardDescription>Gold allocation expands automatically when midcap is expensive. Shrinks when it's cheap.</CardDescription>
|
||||
</CardHeader>
|
||||
</TiltCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-primary" />
|
||||
Strategy at a glance
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
The exact allocation formula running Alpha Shield every month.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<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 assets</p>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li><span className="text-foreground font-semibold">JuniorBees ETF:</span> Nifty Next 50 midcap exposure.</li>
|
||||
<li><span className="text-foreground font-semibold">GoldBees ETF:</span> Dynamic hedge that grows when midcap is expensive.</li>
|
||||
<li><span className="text-foreground font-semibold">Monthly SIP:</span> Automated, rule-based execution.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
|
||||
<p className="text-sm text-muted-foreground mb-1">Allocation formula</p>
|
||||
<p className="text-sm font-mono bg-background/80 p-2 rounded border border-border/40 text-foreground">
|
||||
Midcap% = clip(<br/>
|
||||
70% − (Price÷SMA − 1) × 60%,<br/>
|
||||
min 40%, max 92%<br/>
|
||||
)
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-2">SMA = 60-month (5-year) average price</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
|
||||
<Workflow className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">Valuation-aware, not forecast-dependent</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
No market predictions. Just price vs. 5-year average. Cheap = buy more. Expensive = protect more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-chart-2/10 text-chart-2 flex items-center justify-center">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">Proven across market regimes</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Outperformed in 2018 midcap crash (+4.6% edge), 2022 rate hike (+5.5% edge). Works across 5 different SMA window lengths tested.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3 mode cards */}
|
||||
<section ref={(el) => (sectionRefs.current[1] = el)} data-section-index={1}
|
||||
className={`mx-auto max-w-6xl px-4 pt-10 sm:px-6 ${revealTransition} ${sectionReveal(1)}`}>
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle>Cheap market mode</CardTitle>
|
||||
<CardDescription>When JuniorBees is below its 5-year SMA, markets are undervalued. Buy aggressively.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-2xl font-semibold text-chart-2 sm:text-3xl">Up to 92% midcap</p>
|
||||
<ul className="text-muted-foreground space-y-2 text-sm">
|
||||
<li>- Price-to-SMA ratio below 1.0 triggers increased equity allocation.</li>
|
||||
<li>- April 2020 (COVID bottom): strategy deployed 79% into midcap — captured full recovery.</li>
|
||||
<li>- Maximum midcap exposure: 92% when very cheap.</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle>Expensive market mode</CardTitle>
|
||||
<CardDescription>When JuniorBees is significantly above its 5-year SMA, protect capital in gold.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-2xl font-semibold text-chart-1 sm:text-3xl">Down to 40% midcap</p>
|
||||
<ul className="text-muted-foreground space-y-2 text-sm">
|
||||
<li>- Price-to-SMA ratio above 1.5 triggers maximum gold protection (60% gold).</li>
|
||||
<li>- Jan 2018: strategy was 40% midcap before the crash — avoided major losses.</li>
|
||||
<li>- Minimum midcap exposure: 40% (never goes to zero — always participates in growth).</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle>Why midcap + gold?</CardTitle>
|
||||
<CardDescription>A high-growth engine paired with an intelligent crisis hedge.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<ul className="text-muted-foreground space-y-2 text-sm">
|
||||
<li>- Nifty Next 50 (JuniorBees) has historically delivered 17%+ CAGR — significantly above large cap.</li>
|
||||
<li>- Gold rallies during equity stress: 2008, 2018, 2020, 2022 all showed gold protecting portfolios.</li>
|
||||
<li>- Dynamic allocation captures the best of both: growth in bull markets, protection in bears.</li>
|
||||
</ul>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{monitoring.map((item) => (
|
||||
<Badge key={item.label} variant="secondary"
|
||||
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>
|
||||
<span className="text-muted-foreground">{item.value}</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Backtest comparison */}
|
||||
<section ref={(el) => (sectionRefs.current[2] = el)} data-section-index={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">
|
||||
<h3 className="text-2xl font-semibold">How it holds up — 12 years of data</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Backtested from Jan 2014 to May 2026 with Rs 10,000/month SIP. Dynamic vs. static 70/30 allocation.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{comparisonStats.map((stat, index) => (
|
||||
<TiltCard key={stat.title} prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle className="text-lg">{stat.title}</CardTitle>
|
||||
<CardDescription>{stat.note}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-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">Alpha Shield</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">Dynamic wins</Badge>
|
||||
</div>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">Benchmark</p>
|
||||
<p className="text-xl font-semibold text-muted-foreground sm:text-2xl">{stat.benchmark.value}</p>
|
||||
<p className="text-xs text-muted-foreground">{stat.benchmark.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Real allocation examples */}
|
||||
<section ref={(el) => (sectionRefs.current[3] = el)} data-section-index={3}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(3)}`}>
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle>Real allocation examples</CardTitle>
|
||||
<CardDescription>How the strategy actually allocated at key market moments.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border/40">
|
||||
<th className="text-left py-2 text-muted-foreground font-medium">Date</th>
|
||||
<th className="text-right py-2 text-muted-foreground font-medium">Midcap</th>
|
||||
<th className="text-right py-2 text-muted-foreground font-medium">Gold</th>
|
||||
<th className="text-left py-2 pl-3 text-muted-foreground font-medium">Outcome</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allocationExamples.map((ex) => (
|
||||
<tr key={ex.date} className="border-b border-border/20">
|
||||
<td className="py-3 font-medium">{ex.date}</td>
|
||||
<td className="py-3 text-right text-chart-2 font-semibold">{ex.midcap}</td>
|
||||
<td className="py-3 text-right text-chart-1 font-semibold">{ex.gold}</td>
|
||||
<td className="py-3 pl-3 text-muted-foreground text-xs">{ex.note}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Price-to-SMA ratio drives allocation. The strategy correctly positioned itself before the 2018 crash and at the 2020 COVID bottom.
|
||||
</p>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
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>
|
||||
<CardTitle>Execution checklist</CardTitle>
|
||||
<CardDescription>Exactly what happens every SIP cycle — fully automated.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
{executionSteps.map((step, index) => (
|
||||
<div key={step.title} className="flex gap-4">
|
||||
<div className="flex-none">
|
||||
<div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold">
|
||||
{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold">{step.title}</p>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">{step.detail}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Guardrails */}
|
||||
<section ref={(el) => (sectionRefs.current[4] = el)} data-section-index={4}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(4)}`}>
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(4)} ${cardHover}`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
|
||||
<CardHeader>
|
||||
<CardTitle>Built-in guardrails</CardTitle>
|
||||
<CardDescription>Why this strategy is fundamentally sound, not just backtested.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 md:grid-cols-3">
|
||||
{guardrails.map((item) => (
|
||||
<div key={item.title} 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">
|
||||
<ShieldCheck className="w-4 h-4 text-chart-1" />
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section ref={(el) => (sectionRefs.current[5] = el)} data-section-index={5}
|
||||
className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(5)}`}>
|
||||
<TiltCard prefersReducedMotion={prefersReducedMotion}
|
||||
className="bg-card/80 backdrop-blur-sm border-card-border"
|
||||
wrapperClassName={`${revealTransition} ${cardReveal(5)} ${cardHover}`}
|
||||
wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
|
||||
<CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle>Ready to activate Alpha Shield?</CardTitle>
|
||||
<CardDescription>Connect your Zerodha account and start your first SIP in under 2 minutes.</CardDescription>
|
||||
</div>
|
||||
<Button variant="secondary" className="rounded-lg group w-full sm:w-fit" asChild>
|
||||
<a href="/" className="flex items-center gap-2">
|
||||
Back to Home
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<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">
|
||||
<Zap className="w-4 h-4 text-primary" />
|
||||
Who is this for?
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Investors with 5+ year horizon who want higher growth than Nifty SIP but don't want to actively manage a portfolio.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Activity className="w-4 h-4 text-chart-2" />
|
||||
Risk level
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Medium. Midcap is more volatile than large cap, but gold protection and dynamic allocation significantly reduce drawdowns vs. 100% midcap.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<BarChart3 className="w-4 h-4 text-chart-3" />
|
||||
Minimum SIP
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Rs 5,000/month recommended. JuniorBees and GoldBees are both highly liquid NSE ETFs with tight spreads.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</TiltCard>
|
||||
</section>
|
||||
</main>
|
||||
</PageEnter>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user