diff --git a/packages/frontend/src/app/page.tsx b/packages/frontend/src/app/page.tsx index 8cd2c6c..97027df 100644 --- a/packages/frontend/src/app/page.tsx +++ b/packages/frontend/src/app/page.tsx @@ -2,6 +2,7 @@ import { motion, Variants, useScroll, useTransform } from "framer-motion"; import Link from "next/link"; +import { useState, useEffect } from "react"; import { ChevronRight, Code2, Cpu, Globe2, GitBranch, Terminal, Shield, Sparkles, Check, Play } from "lucide-react"; import { Button } from "@/components/ui/button"; import { InteractiveGrid } from "@/components/InteractiveGrid"; @@ -57,25 +58,288 @@ const containerVariants: Variants = { } }; +const AnimatedTerminal = () => { + const [step, setStep] = useState(0); + const [typedText, setTypedText] = useState(""); + const fullText = "autodev init --repo https://github.com/org/core-backend"; + + useEffect(() => { + let timeout: NodeJS.Timeout; + + if (step === 0) { + setTypedText(""); + let i = 0; + const typeChar = () => { + if (i <= fullText.length) { + setTypedText(fullText.substring(0, i)); + i++; + timeout = setTimeout(typeChar, 40); // typing speed + } else { + timeout = setTimeout(() => { + setStep(1); + }, 400); // Wait bit after finish typing + } + }; + timeout = setTimeout(typeChar, 800); + return () => clearTimeout(timeout); + } + + // Normal sequence execution + if (step > 0 && step < 6) { + const delays = [0, 800, 600, 800, 600, 3000]; // delays for steps 1-5, and reset at 6 + timeout = setTimeout(() => { + setStep(step >= 5 ? 0 : step + 1); + }, delays[step]); + return () => clearTimeout(timeout); + } + + }, [step]); + + return ( +
+
+
+ $ {step === 0 ? typedText : fullText} + {step === 0 && } +
+ + {step >= 1 && ( + + ✓ Repository cloned successfully (432 files). + + )} + + {step >= 2 && ( + + Scanning for architectural patterns... + + )} + + {step >= 3 && ( + + ✓ Detected Next.js frontend, Express backend, PostgreSQL database. + + )} + + {step >= 4 && ( + + ✓ Building interactive system graph... done. + + )} + + {step >= 5 && ( + + Generating multilingual walkthroughs (Hindi, Tamil, English)... + + + )} +
+
+ ); +}; + +const AnimatedCodeReview = () => { + const [step, setStep] = useState(0); + + useEffect(() => { + const sequence = [ + { delay: 1500, step: 1 }, + { delay: 2000, step: 2 }, + { delay: 1000, step: 3 }, + { delay: 4000, step: 0 } + ]; + let timeout: NodeJS.Timeout; + const runSequence = (idx: number) => { + timeout = setTimeout(() => { + setStep(sequence[idx].step); + if (idx + 1 < sequence.length) runSequence(idx + 1); + }, sequence[idx].delay); + }; + runSequence(0); + return () => clearTimeout(timeout); + }, [step === 0]); + + return ( +
+
+
+ src/services/payment.ts + {step >= 3 && ( + 1 Issue + )} +
+
+ +
+
- const result = stripe.charges.create(data);
+ + {step >= 2 ? ( + + + const result = await stripe.charges.create(data); + + ) : step === 1 ? ( +
+
+ AutoDev AI Reviewing... +
+ ) :
} + + {step < 2 && ( + + )} +
+ +
+ {step >= 3 && ( + +
+ +
+
+

+ Missing Async Context Error +

+

This Stripe API call returns a Promise. Standard project convention dictates that all external API calls must be awaited to prevent unhandled promise rejections downstream.

+
+ + )} +
+
+ ); +}; + +const AnimatedQA = () => { + const [step, setStep] = useState(0); + + useEffect(() => { + const sequence = [ + { delay: 1500, step: 1 }, + { delay: 1500, step: 2 }, + { delay: 3000, step: 3 }, + { delay: 5000, step: 0 } + ]; + let timeout: NodeJS.Timeout; + const runSequence = (idx: number) => { + timeout = setTimeout(() => { + setStep(sequence[idx].step); + if (idx + 1 < sequence.length) runSequence(idx + 1); + }, sequence[idx].delay); + }; + runSequence(0); + return () => clearTimeout(timeout); + }, [step === 0]); + + return ( +
+
+ {step >= 1 && ( + +
+ How does the authentication middleware work here? (कृपया हिंदी में समझाएं) +
+ + )} + + {step === 2 && ( + +
+ + + +
+ + )} + + {step >= 3 && ( + +
+

ज़रूर!

+

इस प्रोजेक्ट में, ऑथेंटिकेशन src/middleware/auth.ts में संभाला गया है।

+
    +
  1. यह रिक्वेस्ट हेडर से JWT टोकन निकालता है।
    2. +
  2. jsonwebtoken लाइब्रेरी का उपयोग करके टोकन को वेरीफाई करता है।
    3. +
  3. अगर टोकन सही है, तो यह यूज़र डेटा को req.user में डाल देता है ताकि आगे इस्तेमाल हो सके।
    4. +
+
+ + )} +
+ +
+
+ {step === 0 ? ( + <> + Ask a question + + ) : "Ask a question..."} +
+ +
+
+ ); +}; + export default function HomePage() { const { scrollYProgress } = useScroll(); const heroY = useTransform(scrollYProgress, [0, 0.2], ["0%", "30%"]); const heroOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]); + useEffect(() => { + // Disable browser's default scroll restoration to avoid jumpiness on reload + if ("scrollRestoration" in history) { + history.scrollRestoration = "manual"; + } + + // Force to top immediately on mount + window.scrollTo(0, 0); + + // Some browsers need a short delay to override their built-in restoration + const id = requestAnimationFrame(() => { + window.scrollTo(0, 0); + }); + + return () => cancelAnimationFrame(id); + }, []); + return (
{/* ─── NAVIGATION ─── */}