Skip to content
Snippets Groups Projects
Commit 60202258 authored by ALMAZROUEI Shamma (2021) WKIS203's avatar ALMAZROUEI Shamma (2021) WKIS203
Browse files

Build the landing page

parent ede4fc88
Branches
No related tags found
No related merge requests found
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
/> />
<title>SkillSwap - Learn & Teach, Together</title> <title>SkillSwap - Learn & Teach, Together</title>
</head> </head>
<body> <body class="antialiased">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
......
File added
File added
This diff is collapsed.
...@@ -4,7 +4,7 @@ import { Button } from './ui/button'; ...@@ -4,7 +4,7 @@ import { Button } from './ui/button';
export default function Header() { export default function Header() {
return ( return (
<header> <header>
<nav className='bg-violet-100 py-2 px-4 md:px-6 lg:px-10 flex items-center justify-between'> <nav className='bg-violet-50 py-2 px-4 md:px-6 lg:px-10 flex items-center justify-between'>
<Link to='/'> <Link to='/'>
<img <img
src='/src/assets/logo.svg' src='/src/assets/logo.svg'
......
import * as React from "react"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant,
...props
}) {
return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
}
export { Badge, badgeVariants }
...@@ -8,12 +8,14 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; ...@@ -8,12 +8,14 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App.jsx'; import App from './App.jsx';
import LoginPage from './pages/Login'; import LoginPage from './pages/Login';
import RegisterPage from './pages/Register'; import RegisterPage from './pages/Register';
import LandingPage from './pages/Landing';
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
path: '/', path: '/',
element: <App />, element: <App />,
children: [ children: [
{ path: '/', element: <LandingPage /> },
{ {
path: '/login', path: '/login',
element: <LoginPage />, element: <LoginPage />,
......
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
ArrowRight,
Palette,
Music,
Code,
Languages,
Camera,
Brush,
} from 'lucide-react';
const reviews = [
{
name: 'Shamma',
service: 'Photography',
skill: 'Guitar',
review:
'Thanks to SkillSwap, I learned to play guitar while teaching photography. It isamazing how much you can grow by helping others!',
image: '/src/assets/char-1.avif',
},
{
name: 'Tim',
service: 'Coding',
skill: 'Graphic Design',
review:
'Thanks to SkillSwap, I learned how to code while teaching graphic design. It isamazing how much you can grow by helping others!',
image: '/src/assets/char-2.avif',
},
];
export default function LandingPage() {
return (
<main className='flex flex-col min-h-screen'>
{/* Hero Section */}
<section className='relative py-20 md:py-24 overflow-hidden'>
<div className='absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]'>
<div className='absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#ede9fe,transparent)]'></div>
</div>
<div className='container px-4 md:px-6 mx-auto'>
<div className='grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]'>
<div className='flex flex-col justify-center space-y-4'>
<div className='space-y-2'>
<Badge variant='secondary' className='w-fit'>
Learn & Teach
</Badge>
<h1 className='text-3xl font-bold sm:text-5xl xl:text-6xl/none'>
Exchange Skills, <br />
Grow Together
</h1>
<p className='max-w-[600px] text-muted-foreground md:text-xl leading-relaxed'>
Connect with people who want to learn what you know, and teach
what you want to learn. The perfect match for skill exchange.
</p>
</div>
<div className='pt-5 flex flex-col gap-5 min-[400px]:flex-row'>
<Button size='lg'>
Get Started
<ArrowRight className='ml-2 h-4 w-4' />
</Button>
<Button variant='outline' size='lg'>
Explore Skills
</Button>
</div>
</div>
<div className='relative lg:order-last'>
<img
src='/src/assets/hero-illustration.svg'
alt='Skills exchange illustration'
width={600}
height={600}
className='relative z-10 object-cover'
/>
</div>
</div>
</div>
</section>
{/* How It Works Section */}
<section className='py-20 bg-muted/50'>
<div className='container px-4 md:px-6 mx-auto'>
<div className='flex flex-col items-center justify-center space-y-4 text-center'>
<div className='space-y-2'>
<h2 className='text-3xl font-bold sm:text-5xl'>
How SkillSwap Works
</h2>
<p className='max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed'>
Three simple steps to start your skill exchange journey
</p>
</div>
</div>
<div className='mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-3'>
<Card>
<CardContent className='pt-6'>
<div className='space-y-2 text-center'>
<div className='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10'>
<span className='text-xl font-bold text-primary'>1</span>
</div>
<h3 className='font-bold'>List Your Skills</h3>
<p className='text-sm text-muted-foreground'>
Share what you can teach and what you want to learn
</p>
</div>
</CardContent>
</Card>
<Card>
<CardContent className='pt-6'>
<div className='space-y-2 text-center'>
<div className='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10'>
<span className='text-xl font-bold text-primary'>2</span>
</div>
<h3 className='font-bold'>Find Your Match</h3>
<p className='text-sm text-muted-foreground'>
Connect with someone who complements your skill exchange
needs
</p>
</div>
</CardContent>
</Card>
<Card>
<CardContent className='pt-6'>
<div className='space-y-2 text-center'>
<div className='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10'>
<span className='text-xl font-bold text-primary'>3</span>
</div>
<h3 className='font-bold'>Start Learning</h3>
<p className='text-sm text-muted-foreground'>
Begin your mutual learning journey and track your progress
</p>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
{/* Popular Skills Section */}
<section className='py-20'>
<div className='container px-4 md:px-6 mx-auto'>
<div className='flex flex-col items-center justify-center space-y-4 text-center'>
<div className='space-y-2'>
<h2 className='text-3xl font-bold sm:text-5xl'>Popular Skills</h2>
<p className='max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed'>
Discover the most exchanged skills in our community
</p>
</div>
</div>
<div className='mx-auto grid max-w-5xl items-center gap-6 py-12 md:grid-cols-2 lg:grid-cols-3'>
{[
{ icon: Brush, name: 'Drawing', count: '2,845 members' },
{ icon: Music, name: 'Music', count: '2,368 members' },
{ icon: Code, name: 'Programming', count: '1,957 members' },
{ icon: Languages, name: 'Languages', count: '1,756 members' },
{ icon: Camera, name: 'Photography', count: '1,543 members' },
{ icon: Palette, name: 'Painting', count: '1,245 members' },
].map((skill, index) => (
<Card
key={index}
className='group cursor-pointer transition-colors hover:border-primary'
>
<CardContent className='p-6'>
<div className='flex items-center space-x-4'>
<div className='rounded-full bg-primary/10 p-3'>
<skill.icon className='h-6 w-6 text-primary' />
</div>
<div>
<h3 className='font-bold'>{skill.name}</h3>
<p className='text-sm text-muted-foreground'>
{skill.count}
</p>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Success Stories Section */}
<section className='py-20 bg-muted/50'>
<div className='container px-4 md:px-6 mx-auto'>
<div className='flex flex-col items-center justify-center space-y-4 text-center'>
<div className='space-y-2'>
<h2 className='text-3xl font-bold sm:text-5xl'>
Success Stories
</h2>
<p className='max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed'>
See how people are transforming their lives through skill
exchange
</p>
</div>
</div>
<div className='mx-auto grid max-w-5xl gap-6 py-12 lg:grid-cols-2'>
{reviews.map((item, index) => (
<Card key={index} className='overflow-hidden'>
<CardContent className='p-0'>
<div className='grid items-center gap-6 md:grid-cols-[1fr_200px]'>
<div className='space-y-4 p-6'>
<p className='italic text-muted-foreground'>
{item.review}
</p>
<div>
<h4 className='font-semibold'>{item.name}</h4>
<p className='text-sm text-muted-foreground'>
{item.service}{item.skill}
</p>
</div>
</div>
<img
src={item.image}
alt='Success story'
className='h-full object-cover'
/>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className='py-20'>
<div className='container px-4 md:px-6 mx-auto'>
<div className='flex flex-col items-center justify-center space-y-4 text-center'>
<div className='space-y-2'>
<h2 className='text-3xl font-bold sm:text-5xl'>
Ready to Start?
</h2>
<p className='max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed'>
Join our community of learners and teachers today
</p>
</div>
<div className='flex flex-col gap-2 min-[400px]:flex-row'>
<Button size='lg' className='min-w-[200px]'>
Start Learning
<ArrowRight className='ml-2 h-4 w-4' />
</Button>
</div>
</div>
</div>
</section>
</main>
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment