import { useState, useEffect, useRef } from "react";
const features = [
{
year: "\u0968\u0966\u0968\u096b",
title: "\u0906\u091c\u091a\u0947 AI \u0938\u094d\u092e\u093e\u0930\u094d\u091f\u092b\u094b\u0928",
icon: "\ud83d\udcf1",
color: "#60a5fa",
glow: "rgba(96,165,250,0.3)",
points: [
"ChatGPT, Gemini, Claude \u0938\u093e\u0930\u0916\u0947 AI \u0905\u0938\u093f\u0938\u094d\u091f\u0902\u091f \u092c\u093f\u0932\u094d\u091f-\u0907\u0928",
"\u092b\u094b\u091f\u094b\u0924 \u091a\u0947\u0939\u0930\u093e \u0913\u0933\u0916\u0923\u0947, \u0935\u0938\u094d\u0924\u0942 \u0913\u0933\u0916\u0923\u0947",
"\u0930\u093f\u0905\u0932-\u091f\u093e\u0907\u092e \u092d\u093e\u0937\u093e\u0902\u0924\u0930 \u0935 \u0906\u0935\u093e\u091c \u0913\u0933\u0916",
"AI \u0915\u0945\u092e\u0947\u0930\u093e \u2014 \u0938\u094d\u0935\u0924\u0903\u091a \u092b\u094b\u091f\u094b \u0938\u0941\u0927\u093e\u0930\u0924\u094b",
],
},
{
year: "\u0968\u0966\u0968\u096d",
title: "\u092a\u094d\u0930\u0917\u0924 \u0911\u0928-\u0921\u093f\u0935\u094d\u0939\u093e\u0907\u0938 AI",
icon: "\ud83e\udde0",
color: "#a78bfa",
glow: "rgba(167,139,250,0.3)",
points: [
"\u0907\u0902\u091f\u0930\u0928\u0947\u091f\u0936\u093f\u0935\u093e\u092f \u0938\u0902\u092a\u0942\u0930\u094d\u0923 AI \u0915\u093e\u092e \u0915\u0930\u0947\u0932",
"\u0924\u0941\u092e\u091a\u0940 \u0938\u0935\u092f \u0936\u093f\u0915\u0942\u0928 \u0935\u0948\u092f\u0915\u094d\u0924\u093f\u0915 AI \u092c\u0928\u0947\u0932",
"\u0938\u094d\u0935\u093e\u0938\u094d\u0925\u094d\u092f \u0928\u093f\u0930\u0940\u0915\u094d\u0937\u0923 \u2014 \u0930\u0915\u094d\u0924\u093e\u0924\u0940\u0932 \u0938\u093e\u0916\u0930, \u0911\u0915\u094d\u0938\u093f\u091c\u0928",
"AI \u0926\u094d\u0935\u093e\u0930\u0947 \u0938\u093e\u092f\u092c\u0930 \u0939\u0932\u094d\u0932\u0947 \u0930\u094b\u0916\u0923\u0947",
],
},
{
year: "\u0968\u0966\u0968\u096f",
title: "\u0938\u0902\u0935\u0947\u0926\u0928\u0936\u0940\u0932 AI \u0938\u093e\u0925\u0940\u0926\u093e\u0930",
icon: "\ud83e\udd1d",
color: "#34d399",
glow: "rgba(52,211,153,0.3)",
points: [
"\u092d\u093e\u0935\u0928\u093e \u0938\u092e\u091c\u0942\u0928 \u0918\u0947\u0923\u093e\u0930\u093e AI \u2014 '\u0924\u0941\u092e\u094d\u0939\u0940 \u0925\u0915\u0932\u0947\u0932\u0947 \u0926\u093f\u0938\u0924\u093e'",
"AR \u091a\u0937\u094d\u092e\u094d\u092f\u093e\u0938\u093e\u0930\u0916\u0947 holographic UI",
"\u092e\u0947\u0902\u0926\u0942-\u092b\u094b\u0928 \u0907\u0902\u091f\u0930\u092b\u0947\u0938 (BCI) \u092a\u094d\u0930\u093e\u092f\u094b\u0917\u093f\u0915 \u091f\u092a\u094d\u092a\u093e",
"AI \u0921\u0949\u0915\u094d\u091f\u0930 \u2014 \u0932\u0915\u094d\u0937\u0923\u0947 \u0938\u093e\u0902\u0917\u093e\u0932, \u0928\u093f\u0926\u093e\u0928 \u092e\u093f\u0933\u0947\u0932",
],
},
{
year: "\u0968\u0966\u0969\u0968+",
title: "\u092d\u0935\u093f\u0937\u094d\u092f\u093e\u091a\u093e \u092b\u094b\u0928",
icon: "\u2728",
color: "#f59e0b",
glow: "rgba(245,158,11,0.3)",
points: [
"\u092b\u094b\u0928 \u0939\u093e \u0938\u094d\u0935\u0924\u0902\u0924\u094d\u0930 AI \u090f\u091c\u0902\u091f \u0905\u0938\u0947\u0932",
"\u0935\u093f\u091a\u093e\u0930 \u0915\u0930\u0924\u093e\u091a AI \u0938\u092e\u091c\u0947\u0932 (Neural Link)",
"\u092b\u094b\u0932\u094d\u0921\u0947\u092c\u0932 + \u0939\u094b\u0932\u094b\u0917\u094d\u0930\u093e\u092b\u093f\u0915 \u0938\u094d\u0915\u094d\u0930\u0940\u0928",
"AGI-\u0938\u094d\u0924\u0930\u093e\u0935\u0930\u0940\u0932 \u0935\u0948\u092f\u0915\u094d\u0924\u093f\u0915 AI \u0938\u093e\u0925\u0940\u0926\u093e\u0930",
],
},
];
const stats = [
{ label: "\u091c\u093e\u0917\u0924\u093f\u0915 AI \u092b\u094b\u0928 \u092c\u093e\u091c\u093e\u0930", value: "$\u0968\u0966\u0966 \u0905\u092c\u094d\u091c", sub: "\u0968\u0966\u0968\u096e \u092a\u0930\u094d\u092f\u0902\u0924" },
{ label: "AI \u091a\u093f\u092a \u0935\u0947\u0917 \u0935\u093e\u0922", value: "\u0967\u0966x", sub: "\u0926\u0930 \u0968 \u0935\u0930\u094d\u0937\u093e\u0902\u0928\u0940" },
{ label: "\u0911\u0928-\u0921\u093f\u0935\u094d\u0939\u093e\u0907\u0938 AI \u092e\u0949\u0921\u0947\u0932", value: "\u096d\u0966%", sub: "\u0968\u0966\u0968\u096d \u092a\u0930\u094d\u092f\u0902\u0924 \u092b\u094b\u0928\u092e\u0927\u094d\u092f\u0947" },
{ label: "\u092d\u093e\u0930\u0924\u093e\u0924\u0940\u0932 AI \u092f\u0941\u091c\u0930", value: "\u096b\u0966 \u0915\u094b\u091f\u0940+", sub: "\u0968\u0966\u0968\u096e \u092a\u0930\u094d\u092f\u0902\u0924 \u0905\u092a\u0947\u0915\u094d\u0937\u093f\u0924" },
];
export default function AISmartphoneFuture() {
const [activeCard, setActiveCard] = useState(0);
const [visible, setVisible] = useState(false);
const [statVisible, setStatVisible] = useState(false);
const timelineRef = useRef(null);
useEffect(() => {
setTimeout(() => setVisible(true), 100);
setTimeout(() => setStatVisible(true), 600);
}, []);
return (
{/* Hero */}
{/* Phone icon with orbiting elements */}
{/* Stats Row */}
\ud83d\udcf1
{["\ud83e\udd16", "\u26a1", "\ud83e\uddec"].map((e, i) => (
{e}
))}
\u092d\u0935\u093f\u0937\u094d\u092f\u093e\u091a\u0940 \u091d\u0932\u0915
AI \u0938\u094d\u092e\u093e\u0930\u094d\u091f\u092b\u094b\u0928\u091a\u0947 \u092d\u0935\u093f\u0937\u094d\u092f
\u0968\u0966\u0968\u096b \u0924\u0947 \u0968\u0966\u0969\u0968 \u2014 \u0915\u0938\u0947 \u092c\u0926\u0932\u0923\u093e\u0930 \u0906\u092a\u0932\u093e \u092b\u094b\u0928, \u0906\u092a\u0932\u0947 \u091c\u0940\u0935\u0928?
{["#TechFuture", "#AIPhone", "#\u0921\u093f\u091c\u093f\u091f\u0932\u092d\u093e\u0930\u0924", "#SmartAI"].map(tag => (
{tag}
))}
{stats.map((s, i) => (
))}
{/* Timeline Tabs */}
{s.value}
{s.label}
{s.sub}
{features.map((f, i) => (
))}
{/* Active Card */}
{features.map((f, i) => i === activeCard && (
{/* Scan line effect */}
{f.icon}
\u091f\u092a\u094d\u092a\u093e \u2014 {f.year}
{f.title}
{f.points.map((p, pi) => (
Comments
Post a Comment