diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..bb8d8ae --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,278 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Separator } from "@/components/ui/separator"; +import { + ArrowRight, Clock, BookOpen, TrendingUp, Mail, Tag +} from "lucide-react"; +import { useSaasMutation } from "@/hooks/use-tygarun"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const featuredArticle = { + title: "The Future of Web Development: What Comes After the JavaScript Era", + excerpt: "Exploring the emerging paradigms, languages, and frameworks that may reshape how we build for the web in the next decade.", + category: "Technology", + author: "Sarah Chen", + date: "Mar 15, 2025", + readTime: "8 min read", + gradient: "from-emerald-400 via-teal-500 to-emerald-700", + slug: "future-of-web-development", +}; + +const latestArticles = [ + { id: 1, title: "Understanding React Server Components in Production", excerpt: "A practical guide to adopting RSC in existing React applications without a full rewrite.", category: "Technology", author: "Sarah Chen", date: "Mar 12, 2025", gradient: "from-amber-200 to-orange-300", slug: "react-server-components" }, + { id: 2, title: "Building Design Systems That Scale", excerpt: "Lessons learned from building a design system used across 12 product teams.", category: "Design", author: "Marcus Rivera", date: "Mar 10, 2025", gradient: "from-emerald-200 to-teal-300", slug: "design-systems-at-scale" }, + { id: 3, title: "Growth Strategies for Early-Stage Startups", excerpt: "How three founders went from zero to product-market fit in under 18 months.", category: "Business", author: "Aisha Patel", date: "Mar 8, 2025", gradient: "from-stone-200 to-stone-400", slug: "startup-growth-strategies" }, + { id: 4, title: "TypeScript Best Practices for Large Codebases", excerpt: "Type-safe patterns and architectural decisions that pay off at scale.", category: "Technology", author: "James Liu", date: "Mar 6, 2025", gradient: "from-amber-100 to-amber-300", slug: "typescript-best-practices" }, + { id: 5, title: "The Remote Worker's Guide to Deep Focus", excerpt: "Strategies for maintaining productivity and avoiding burnout while working from home.", category: "Lifestyle", author: "Elena Torres", date: "Mar 4, 2025", gradient: "from-emerald-100 to-emerald-300", slug: "remote-work-productivity" }, + { id: 6, title: "Accessible UI Patterns Every Developer Should Know", excerpt: "Common accessibility mistakes and how to build inclusive interfaces by default.", category: "Design", author: "David Kim", date: "Mar 2, 2025", gradient: "from-stone-100 to-amber-200", slug: "accessible-ui-patterns" }, +]; + +const categories = [ + { name: "Technology", count: 42 }, + { name: "Design", count: 28 }, + { name: "Business", count: 19 }, + { name: "Lifestyle", count: 15 }, +]; + +const tags = [ + "React", "TypeScript", "CSS", "Node.js", "Figma", "Tailwind", + "Next.js", "AI", "UX", "Startup", "Remote Work", "Productivity", +]; + +const categoryColors: Record = { + Technology: "bg-emerald-100 text-emerald-700", + Design: "bg-amber-100 text-amber-700", + Business: "bg-stone-200 text-stone-700", + Lifestyle: "bg-teal-100 text-teal-700", +}; + +export default function IndexPage() { + const [email, setEmail] = useState(""); + const [subscribed, setSubscribed] = useState(false); + const { mutate: subscribeNewsletter } = useSaasMutation("email", "/send/newsletter-confirm"); + + const handleSubscribe = async (e) => { + e.preventDefault(); + if (!email) return; + try { + await subscribeNewsletter({ email, list: "newsletter" }); + setSubscribed(true); + toast.success("Subscribed! Check your inbox."); + } catch { + toast.error("Something went wrong. Please try again."); + } + }; + + return ( +
+
+ + {/* ── FEATURED HERO ── */} +
+
+ +
+
+
+
+
+
+
+ + {featuredArticle.category} + +
+

+ {featuredArticle.title} +

+

+ {featuredArticle.excerpt} +

+
+ + + {featuredArticle.author.split(" ").map(n => n[0]).join("")} + + +
+

{featuredArticle.author}

+

{featuredArticle.date} · {featuredArticle.readTime}

+
+ +
+
+
+ +
+
+ + {/* ── LATEST ARTICLES + SIDEBAR ── */} +
+
+
+
+

Latest Articles

+

Fresh perspectives on technology, design, and culture

+
+ + View All + +
+ +
+ {/* Articles Grid */} +
+
+ {latestArticles.map((article) => ( + + +
+
+
+ + {article.category} + +
+ +

+ {article.title} +

+

{article.excerpt}

+
+ {article.date} + + 5 min read +
+
+
+
+ {article.author.split(" ").map(n => n[0]).join("")} +
+ {article.author} +
+ + Read More + +
+ + + + ))} +
+ +
+ +
+
+ + {/* Sidebar */} +
+ {/* Categories */} + + +

+ Categories +

+
    + {categories.map((cat) => ( +
  • + + {cat.name} + {cat.count} + +
    • + ))} +
+ + + + {/* Tags Cloud */} + + +

+ Popular Tags +

+
+ {tags.map((tag) => ( + + {tag} + + ))} +
+ + + + {/* Newsletter */} + + +

+ Stay in the Loop +

+

Get the best articles delivered to your inbox every week. No spam, ever.

+

Join 12,000+ readers

+ {subscribed ? ( +

Thanks for subscribing! Check your inbox.

+ ) : ( +
+ setEmail(e.target.value)} + className="bg-white/20 border-white/30 text-white placeholder:text-emerald-200 focus-visible:ring-white" + /> + +
+ )} +
    +
  • • Weekly insights
    • +
  • • No spam
    • +
  • • Unsubscribe anytime
    • +
+ + + + {/* Trending */} + + +

+ Trending +

+
    + {latestArticles.slice(0, 3).map((article, i) => ( +
  • + + 0{i + 1} +
    +

    {article.title}

    +

    {article.date}

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