File size: 10,655 Bytes
d491dc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 | import React, { useState } from 'react';
import * as API from '../api.js';
const AuthPortal = ({ onLoginSuccess }) => {
const [loading, setLoading] = useState(false);
const handleSwiggyLogin = async (e) => {
e.preventDefault();
setLoading(true);
try {
const res = await API.fetchLoginUrl();
if (res && res.auth_url) {
localStorage.setItem('swiggy_oauth_state', res.state);
window.location.href = res.auth_url;
} else {
alert("Failed to fetch login URL");
setLoading(false);
}
} catch (err) {
console.error("Swiggy login error:", err);
alert("Failed to initiate Swiggy login");
setLoading(false);
}
};
const handleDemoLogin = async (e) => {
e.preventDefault();
setLoading(true);
try {
const response = await fetch('/api/v1/auth/demo', { method: 'POST' });
let token = "demo_jwt_token_fallback";
if (response.ok) {
const data = await response.json();
if (data.access_token) token = data.access_token;
}
localStorage.setItem('swiggy_access_token', token);
setTimeout(() => {
setLoading(false);
if (onLoginSuccess) onLoginSuccess();
}, 600);
} catch (err) {
localStorage.setItem('swiggy_access_token', "demo_jwt_token_fallback");
setTimeout(() => {
setLoading(false);
if (onLoginSuccess) onLoginSuccess();
}, 600);
}
};
return (
<div className="w-full min-h-screen bg-[#07070B] text-white relative overflow-hidden flex items-center justify-center p-6 md:p-12 font-sans">
{/* Background Starry Glow & Ambient Lighting */}
<div className="absolute inset-0 z-0 pointer-events-none">
<div className="absolute -top-32 -left-32 w-[500px] h-[500px] bg-[#FF3366] rounded-full blur-[140px] opacity-15"></div>
<div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] bg-[#6C63FF] rounded-full blur-[140px] opacity-15"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-white/[0.01] rounded-full blur-[100px] pointer-events-none"></div>
</div>
<div className="w-full max-w-7xl relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
{/* Left Section: Editorial Serif Hero Title & CTAs (7 Cols) */}
<div className="lg:col-span-7 flex flex-col items-start space-y-6">
{/* Top Pill Badge */}
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#FF3366]/10 border border-[#FF3366]/30 backdrop-blur-md">
<span className="w-2 h-2 rounded-full bg-[#FF3366] animate-pulse"></span>
<span className="text-[11px] font-bold tracking-[0.2em] text-[#FF4D6D] uppercase">
AN OPERATING SYSTEM FOR QUICK COMMERCE
</span>
</div>
{/* Giant Hero Title */}
<h1 className="text-5xl sm:text-6xl md:text-7xl font-serif tracking-tight text-white leading-[1.05]">
Hyperlocal Operations. <br />
<span className="italic font-serif text-transparent bg-clip-text bg-gradient-to-r from-[#FF3366] via-[#FF4D6D] to-[#FF758F]">
Simplified.
</span>
</h1>
{/* Subtitle Description */}
<p className="text-lg md:text-xl text-[#9A9AB0] max-w-xl font-light leading-relaxed">
Unconstrain demand, smooth ETA jitter, and triage refunds — <span className="italic text-white">all in one intelligent platform powered by Swiggy MCP.</span>
</p>
{/* Feature Quick Bar (6 Icon Grid) */}
<div className="pt-4 grid grid-cols-6 gap-3 sm:gap-4 w-full max-w-lg">
{[
{ icon: 'shopping_bag', label: 'DEMAND' },
{ icon: 'schedule', label: 'ETA TRUTH' },
{ icon: 'verified_user', label: 'REFUND' },
{ icon: 'restaurant', label: 'DINEOUT' },
{ icon: 'local_shipping', label: 'DISPATCH' },
{ icon: 'chat', label: 'MCP AGENT' }
].map((f, i) => (
<div key={i} className="flex flex-col items-center gap-2 group cursor-pointer">
<div className="w-12 h-12 rounded-2xl bg-white/[0.04] border border-white/10 group-hover:border-[#FF3366]/50 group-hover:bg-[#FF3366]/10 transition-all flex items-center justify-center shadow-lg">
<span className="material-symbols-outlined text-white/80 group-hover:text-[#FF4D6D] text-2xl transition-colors">
{f.icon}
</span>
</div>
<span className="text-[9px] font-bold tracking-[0.15em] text-[#7A7A90] group-hover:text-white transition-colors">
{f.label}
</span>
</div>
))}
</div>
{/* Primary CTA Buttons */}
<div className="pt-6 flex flex-wrap items-center gap-4 w-full">
<button
type="button"
onClick={handleSwiggyLogin}
disabled={loading}
className="px-8 py-4 bg-gradient-to-r from-[#FF3366] to-[#FF4D6D] hover:opacity-95 text-white rounded-full font-semibold text-base shadow-xl shadow-[#FF3366]/25 transition-all flex items-center gap-3 group cursor-pointer"
>
<span>{loading ? 'Connecting...' : 'Enter the flow'}</span>
<span className="material-symbols-outlined text-xl group-hover:translate-x-1 transition-transform">
arrow_forward
</span>
</button>
<button
type="button"
onClick={handleDemoLogin}
disabled={loading}
className="px-8 py-4 bg-white/[0.05] hover:bg-white/[0.12] border border-white/15 text-white rounded-full font-semibold text-base backdrop-blur-md transition-all flex items-center gap-2 cursor-pointer"
>
<span className="text-[#FF4D6D] text-lg">✦</span>
<span>Try the demo</span>
</button>
</div>
</div>
{/* Right Section: Stacked Floating Intelligence Cards (5 Cols) */}
<div className="lg:col-span-5 relative flex flex-col gap-6">
{/* Card 1: Demand Oracle Live Forecast */}
<div className="bg-[#101018]/90 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl shadow-2xl relative overflow-hidden transform hover:-translate-y-1 transition-transform">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="w-2.5 h-2.5 rounded-full bg-[#FF3366] animate-ping"></span>
<span className="text-xs font-bold tracking-widest text-[#FF4D6D] uppercase">INVENTORY ORACLE</span>
</div>
<span className="text-xs text-white/40 font-mono">LIVE TELEMETRY</span>
</div>
<div className="flex items-baseline justify-between">
<div>
<p className="text-3xl font-serif font-bold text-white">₹1,85,600</p>
<p className="text-xs text-white/50 uppercase tracking-wider mt-1">TOTAL DEMAND UNCONSTRAINED</p>
</div>
<div className="text-right">
<span className="inline-block px-3 py-1 rounded-full text-xs font-bold bg-[#FF3366]/20 text-[#FF4D6D] border border-[#FF3366]/30">
+24.28% WMAPE LIFT
</span>
</div>
</div>
<div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-emerald-400"></span>
<span className="text-white/80 font-medium">Amul Fresh Milk (1L)</span>
</div>
<span className="text-[#FF4D6D] font-mono font-bold">81% Stockout Risk (45m)</span>
</div>
</div>
{/* Card 2: Live Active Order & ETA Truth */}
<div className="bg-[#101018]/90 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl shadow-2xl relative overflow-hidden transform hover:-translate-y-1 transition-transform">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-bold text-white font-mono">Order #1024</span>
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#FF3366]/20 text-[#FF4D6D] border border-[#FF3366]/30">
In Progress
</span>
</div>
<div className="space-y-2 font-sans text-sm">
<div className="flex justify-between">
<span className="text-white/40 uppercase text-xs font-bold tracking-wider">CLIENT</span>
<span className="text-white font-semibold">Gaurav Nayak</span>
</div>
<div className="flex justify-between">
<span className="text-white/40 uppercase text-xs font-bold tracking-wider">ITEMS</span>
<span className="text-white font-semibold">1x Dum Gosht Biryani</span>
</div>
<div className="flex justify-between">
<span className="text-white/40 uppercase text-xs font-bold tracking-wider">ETA SMOOTHER</span>
<span className="text-emerald-400 font-mono font-bold">GPS Jitter Suppressed</span>
</div>
</div>
</div>
{/* Card 3: Client & Auth Profile */}
<div className="bg-[#101018]/90 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl shadow-2xl">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-[#FF3366] to-[#6C63FF] flex items-center justify-center font-bold text-lg text-white shadow-md">
GN
</div>
<div>
<h4 className="text-base font-bold text-white">Gaurav Nayak</h4>
<p className="text-xs text-white/50 font-mono">+91 98765 43210 • Patia Hub</p>
</div>
</div>
<div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs text-white/60">
<span>Swiggy OAuth 2.1 PKCE</span>
<span className="text-[#FF4D6D] font-mono font-semibold">Verified Active</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default AuthPortal;
|