From bd03682c7a93225ae6573d6b309d6243ed948cf7 Mon Sep 17 00:00:00 2001 From: Thigazhezhilan J Date: Sun, 3 May 2026 02:41:47 +0530 Subject: [PATCH] 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 --- src/App.tsx | 2 + src/components/landing/StrategiesSection.tsx | 16 +- .../landing/StrategySelectorModal.tsx | 22 +- src/lib/routes.ts | 1 + src/pages/AlphaShieldStrategy.tsx | 600 ++++++++++++++++++ 5 files changed, 626 insertions(+), 15 deletions(-) create mode 100644 src/pages/AlphaShieldStrategy.tsx diff --git a/src/App.tsx b/src/App.tsx index 15e1da88..dbc39b8c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() { + diff --git a/src/components/landing/StrategiesSection.tsx b/src/components/landing/StrategiesSection.tsx index 517cfdb4..eda8afa9 100644 --- a/src/components/landing/StrategiesSection.tsx +++ b/src/components/landing/StrategiesSection.tsx @@ -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: , - comingSoon: true, + icon: , + href: ALPHA_SHIELD_PATH, }, { title: "Flexi Momentum", @@ -154,7 +154,7 @@ export default function StrategiesSection() { ))}

- Detailed playbook is live for Golden Nifty. More strategies are coming soon. + Golden Nifty and Alpha Shield are live. Flexi Momentum coming soon.

diff --git a/src/components/landing/StrategySelectorModal.tsx b/src/components/landing/StrategySelectorModal.tsx index b5df8eb0..c51da32b 100644 --- a/src/components/landing/StrategySelectorModal.tsx +++ b/src/components/landing/StrategySelectorModal.tsx @@ -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 ( {open && ( @@ -123,11 +130,12 @@ export default function StrategySelectorModal({ open, onClose }: StrategySelecto onClick={handleSelectGolden} /> } + title="Alpha Shield" + description="High-growth midcap with intelligent gold protection." + status="Active" + cta="View Strategy" + icon={} + onClick={handleSelectAlphaShield} /> , + }, + { + label: "Review cadence", + value: "Monthly, automated", + icon: , + }, + { + label: "Expected profile", + value: "Medium risk, high growth", + icon: , + }, +]; + +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(null); + const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0, scale: 1 }); + + const handleMouseMove = (event: MouseEvent) => { + 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 ( +
+ {children} +
+ ); +} + +export default function AlphaShieldStrategy() { + const prefersReducedMotion = usePrefersReducedMotion(); + const [visibleSections, setVisibleSections] = useState(Array(SECTION_COUNT).fill(false)); + const [scrollY, setScrollY] = useState(0); + const sectionRefs = useRef>([]); + 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 ( +
+ + +
+
+
+
+
+
+ + {/* Hero */} +
(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)}`}> +
+
+
+
+
+
+ + High-growth midcap + gold protection + +

+ Alpha Shield Strategy +

+

+ Not a fixed 70/30. Allocation adapts monthly based on whether midcap is cheap or expensive relative to its 5-year price average. +

+

+ 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. +

+

+ The strategy's edge is buying more when others panic, protecting when others are greedy. +

+
+ Valuation-driven + Crash-tested + 16.9% XIRR +
+
+ + + + + Growth engine + + JuniorBees ETF — Nifty Next 50 midcap. Historically 17%+ CAGR buy-and-hold. + + + + + + + Intelligent shield + + Gold allocation expands automatically when midcap is expensive. Shrinks when it's cheap. + + +
+
+ + + + + + Strategy at a glance + + + The exact allocation formula running Alpha Shield every month. + + + +
+
+

Core assets

+
    +
  • JuniorBees ETF: Nifty Next 50 midcap exposure.
    • +
  • GoldBees ETF: Dynamic hedge that grows when midcap is expensive.
    • +
  • Monthly SIP: Automated, rule-based execution.
    • +
+
+
+

Allocation formula

+

+ Midcap% = clip(
+   70% − (Price÷SMA − 1) × 60%,
+   min 40%, max 92%
+ ) +

+

SMA = 60-month (5-year) average price

+
+
+
+
+
+ +
+
+

Valuation-aware, not forecast-dependent

+

+ No market predictions. Just price vs. 5-year average. Cheap = buy more. Expensive = protect more. +

+
+
+
+
+ +
+
+

Proven across market regimes

+

+ Outperformed in 2018 midcap crash (+4.6% edge), 2022 rate hike (+5.5% edge). Works across 5 different SMA window lengths tested. +

+
+
+
+ + +
+
+ + {/* 3 mode cards */} +
(sectionRefs.current[1] = el)} data-section-index={1} + className={`mx-auto max-w-6xl px-4 pt-10 sm:px-6 ${revealTransition} ${sectionReveal(1)}`}> +
+ + + Cheap market mode + When JuniorBees is below its 5-year SMA, markets are undervalued. Buy aggressively. + + +

Up to 92% midcap

+
    +
  • - Price-to-SMA ratio below 1.0 triggers increased equity allocation.
    • +
  • - April 2020 (COVID bottom): strategy deployed 79% into midcap — captured full recovery.
    • +
  • - Maximum midcap exposure: 92% when very cheap.
    • +
+ + + + + Expensive market mode + When JuniorBees is significantly above its 5-year SMA, protect capital in gold. + + +

Down to 40% midcap

+
    +
  • - Price-to-SMA ratio above 1.5 triggers maximum gold protection (60% gold).
    • +
  • - Jan 2018: strategy was 40% midcap before the crash — avoided major losses.
    • +
  • - Minimum midcap exposure: 40% (never goes to zero — always participates in growth).
    • +
+ + + + + Why midcap + gold? + A high-growth engine paired with an intelligent crisis hedge. + + +
    +
  • - Nifty Next 50 (JuniorBees) has historically delivered 17%+ CAGR — significantly above large cap.
    • +
  • - Gold rallies during equity stress: 2008, 2018, 2020, 2022 all showed gold protecting portfolios.
    • +
  • - Dynamic allocation captures the best of both: growth in bull markets, protection in bears.
    • +
+
+ {monitoring.map((item) => ( + + {item.icon} + {item.label}: + {item.value} + + ))} +
+ + +
+
+ + {/* Backtest comparison */} +
(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)}`}> +
+
+

How it holds up — 12 years of data

+

+ Backtested from Jan 2014 to May 2026 with Rs 10,000/month SIP. Dynamic vs. static 70/30 allocation. +

+
+
+ {comparisonStats.map((stat, index) => ( + + + {stat.title} + {stat.note} + + +
+
+

Alpha Shield

+

{stat.ours.value}

+

{stat.ours.detail}

+
+ Dynamic wins +
+
+
+

Benchmark

+

{stat.benchmark.value}

+

{stat.benchmark.detail}

+
+
+ + + ))} +
+
+
+ + {/* Real allocation examples */} +
(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)}`}> +
+ + + Real allocation examples + How the strategy actually allocated at key market moments. + + +
+ + + + + + + + + + + {allocationExamples.map((ex) => ( + + + + + + + ))} + +
DateMidcapGoldOutcome
{ex.date}{ex.midcap}{ex.gold}{ex.note}
+
+

+ Price-to-SMA ratio drives allocation. The strategy correctly positioned itself before the 2018 crash and at the 2020 COVID bottom. +

+ + + + + + Execution checklist + Exactly what happens every SIP cycle — fully automated. + + + {executionSteps.map((step, index) => ( +
+
+
+ {index + 1} +
+
+
+

{step.title}

+

{step.detail}

+
+
+ ))} + + +
+
+ + {/* Guardrails */} +
(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)}`}> + + + Built-in guardrails + Why this strategy is fundamentally sound, not just backtested. + + + {guardrails.map((item) => ( +
+

+ + {item.title} +

+

{item.description}

+
+ ))} + + +
+ + {/* CTA */} +
(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)}`}> + + +
+ Ready to activate Alpha Shield? + Connect your Zerodha account and start your first SIP in under 2 minutes. +
+ + + +
+

+ + Who is this for? +

+

+ Investors with 5+ year horizon who want higher growth than Nifty SIP but don't want to actively manage a portfolio. +

+
+
+

+ + Risk level +

+

+ Medium. Midcap is more volatile than large cap, but gold protection and dynamic allocation significantly reduce drawdowns vs. 100% midcap. +

+
+
+

+ + Minimum SIP +

+

+ Rs 5,000/month recommended. JuniorBees and GoldBees are both highly liquid NSE ETFs with tight spreads. +

+
+ + +
+
+ +
+ ); +}