Initial commit

src/app/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  Layers,
+  Paintbrush,
+  Database,
+  FileCode,
+  Zap,
+  ArrowRight
+} from 'lucide-react';
+import  {Button } from "@/components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+
+const features = [
+  {
+    icon: Layers,
+    title: 'Next.js 16 + App Router',
+    description: 'Server components, layouts, and the latest React features'
+  },
+  {
+    icon: Paintbrush,
+    title:'Tailwind CSS + shadcn/ui',
+    description: 'Utility-first CSS framework with pre-designed components'
+  },
+  {
+    icon: Database,
+    title: 'Zustand + TanStack Query',
+    description: 'State management and data fetching solutions'
+  },
+  {
+    icon: FileCode,
+    title: 'React Hook Form + Zod',
+    description: 'Form handling and validation with TypeScript support'
+  },
+  {
+    icon: Zap,
+    title: 'Framer Motion + Lucide Icons',
+    description: 'Animation library and icon set for React'
+  },
+  {
+    icon: ArrowRight,
+    title: 'Axios + Interceptors',
+    description: 'HTTP client with request and response interceptors'
+  },
+];
+
+const containerVariants = {
+  hidden : { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+
+export default function Home() {
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      {/* Hero */}
+      <motion.section
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="text-center mb-20"
+      >
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+          Welcome to Idea Guru
+        </h1>
+        <p className="mt-4 mx-auto max-w-2xl text-lg text-muted-foreground">
+          A Next.js starter template with a curated tech stack
+        </p>
+        <div className="mt-8 flex items-center justify-center gap-4">
+          <Button size="lg">
+            Get Started
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+          <Button variant="outline" size="lg">
+            View on GitHub
+          </Button>
+        </div>
+      </motion.section>
+
+      {/* Features */}
+      <motion.section
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        {features.map((feature, index) => (
+          <motion.div key={index} variants={itemVariants}>
+            <Card className="h-full transition-shadow hover:shadow-md">
+              <CardHeader>
+                <feature.icon className="text-primary mb-2 h-8 w-8" />
+                <CardTitle className="text-lg">{feature.title}</CardTitle>
+                <CardDescription>{feature.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </motion.div>
+        ))}
+      </motion.section>
+    </div>
+  );
+}