Working frontend interface with supabse storage

This commit is contained in:
Harivansh Rathi 2024-12-05 17:05:20 -05:00
parent ae239a2849
commit 1eb339623c
19 changed files with 1150 additions and 422 deletions

View file

@ -1,69 +1,53 @@
import React from 'react';
import { ArrowRight, Brain, Sparkles, Users } from 'lucide-react';
import { ArrowRight, Brain, Sparkles, Users, BookOpen } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '../components/ui/Button';
import { Header } from '../components/layout/Header';
function Home() {
return (
<div>
<Header />
<main>
<section className="bg-muted/50 px-4 py-20">
<div className="mx-auto max-w-7xl text-center">
<h1 className="text-5xl font-bold tracking-tight">
Your AI Study Buddy
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
Get instant help with your coursework using advanced AI. Upload your materials,
ask questions, and receive detailed explanations.
</p>
<div className="mt-10">
<Link to="/auth/signup">
<Button size="lg" className="gap-2">
Get Started <ArrowRight className="h-5 w-5" />
</Button>
</Link>
</div>
</div>
</section>
<div className="flex h-screen flex-col overflow-hidden">
<header className="border-b bg-background">
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
<Link to="/" className="flex items-center gap-2 text-xl font-bold">
<BookOpen className="h-6 w-6 text-foreground" />
<span>StudyAI</span>
</Link>
<nav className="flex items-center gap-4">
<Link to="/auth/login">
<Button variant="ghost">Log in</Button>
</Link>
<Link to="/auth/signup">
<Button>Sign up</Button>
</Link>
</nav>
</div>
</header>
<section className="py-20">
<div className="mx-auto max-w-7xl px-4">
<h2 className="text-center text-3xl font-bold">Why Choose StudyAI?</h2>
<div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
{[
{
icon: Brain,
title: 'Smart Learning',
description:
'Our AI understands your questions and provides detailed, accurate answers.',
},
{
icon: Sparkles,
title: 'Instant Help',
description:
'Get immediate assistance with your coursework, available 24/7.',
},
{
icon: Users,
title: 'Personalized Experience',
description:
'The more you use StudyAI, the better it understands your learning style.',
},
].map((feature) => (
<div
key={feature.title}
className="rounded-xl border bg-card p-6 text-center shadow-sm"
>
<feature.icon className="mx-auto h-12 w-12 text-primary" />
<h3 className="mt-4 text-xl font-semibold">{feature.title}</h3>
<p className="mt-2 text-muted-foreground">{feature.description}</p>
</div>
))}
<main className="flex-1 overflow-y-auto">
<div className="container mx-auto px-4">
<section className="py-20">
<div className="text-center">
<h1 className="text-4xl font-bold sm:text-6xl">
Learn Smarter with AI
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
Enhance your learning experience with personalized AI assistance.
Ask questions, get instant feedback, and track your progress.
</p>
<div className="mt-10 flex justify-center gap-4">
<Link to="/auth/signup">
<Button size="lg">Get Started</Button>
</Link>
<Link to="/auth/login">
<Button variant="outline" size="lg">
Learn More
</Button>
</Link>
</div>
</div>
</div>
</section>
</section>
</div>
</main>
</div>
);