116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
} |