first commit
This commit is contained in:
commit
6e354ba041
109 changed files with 12110 additions and 0 deletions
164
frontend/src/components/Hero.tsx
Normal file
164
frontend/src/components/Hero.tsx
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
import { Link } from 'react-router-dom'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Users, FileText, Handshake, Shield } from 'lucide-react'
|
||||
import { logos } from '../data/brandAssets'
|
||||
import { stats } from '../data/landingData'
|
||||
|
||||
const statIcons = {
|
||||
Users,
|
||||
FileText,
|
||||
Handshake,
|
||||
Shield,
|
||||
}
|
||||
|
||||
function DashboardPreview() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="overflow-hidden rounded-2xl border border-silos-cream-dark bg-white shadow-2xl">
|
||||
<div className="flex">
|
||||
{/* Sidebar */}
|
||||
<div className="w-44 shrink-0 bg-silos-brown p-4">
|
||||
<img src={logos.white} alt="Silos" className="mb-6 h-6 w-auto" />
|
||||
<nav className="space-y-1">
|
||||
{['Home', 'Spaces', 'Pages', 'Boards', 'Whiteboards'].map((item, i) => (
|
||||
<div
|
||||
key={item}
|
||||
className={`rounded-lg px-3 py-2 text-xs ${
|
||||
i === 0
|
||||
? 'bg-white/15 font-medium text-white'
|
||||
: 'text-white/60'
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 p-5">
|
||||
<p className="text-sm font-semibold text-silos-text">Welcome back, Alex</p>
|
||||
<p className="mt-0.5 text-xs text-silos-muted">Here's what's happening in your workspace</p>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<div className="rounded-lg border border-silos-cream-dark p-3">
|
||||
<p className="text-xs font-medium text-silos-text">Recent Pages</p>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{['Q4 Planning', 'API Docs', 'Team Handbook'].map((page) => (
|
||||
<div key={page} className="flex items-center gap-2">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-silos-tan" />
|
||||
<span className="text-[10px] text-silos-muted">{page}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-silos-cream-dark p-3">
|
||||
<p className="text-xs font-medium text-silos-text">Team Activity</p>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{['Sarah edited Roadmap', 'Mike added comment'].map((act) => (
|
||||
<div key={act} className="text-[10px] text-silos-muted">{act}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-silos-cream-dark p-3">
|
||||
<p className="text-xs font-medium text-silos-text">My Tasks</p>
|
||||
<div className="mt-2 flex gap-2">
|
||||
{['To Do', 'In Progress', 'Done'].map((col, i) => (
|
||||
<div key={col} className="flex-1">
|
||||
<p className="text-[9px] font-medium text-silos-muted">{col}</p>
|
||||
<div className={`mt-1 h-8 rounded ${i === 1 ? 'bg-silos-tan/20' : 'bg-silos-cream'}`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-silos-cream-dark p-3">
|
||||
<p className="text-xs font-medium text-silos-text">Pinned Spaces</p>
|
||||
<div className="mt-2 flex gap-1.5">
|
||||
{['Engineering', 'Design', 'Product'].map((space) => (
|
||||
<span
|
||||
key={space}
|
||||
className="rounded-full bg-silos-cream px-2 py-0.5 text-[9px] text-silos-muted"
|
||||
>
|
||||
{space}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-4 -right-4 -z-10 h-full w-full rounded-2xl bg-silos-tan/20" />
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-silos-cream px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
|
||||
<div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="font-display text-4xl font-bold leading-tight text-silos-text sm:text-5xl lg:text-[3.25rem]">
|
||||
Your knowledge.
|
||||
<br />
|
||||
Your team.
|
||||
<br />
|
||||
One place.
|
||||
</h1>
|
||||
<p className="mt-6 max-w-lg text-lg leading-relaxed text-silos-muted">
|
||||
Silos is the connected workspace where teams create, organize and share
|
||||
knowledge effortlessly.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-4">
|
||||
<Link
|
||||
to="/login"
|
||||
className="rounded-full bg-silos-brown px-8 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:bg-silos-brown-dark hover:shadow-xl"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<a
|
||||
href="#features"
|
||||
className="rounded-full border-2 border-silos-brown px-8 py-3 text-sm font-semibold text-silos-brown transition-all hover:bg-silos-brown hover:text-white"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-2 gap-6 sm:grid-cols-4">
|
||||
{stats.map((stat, i) => {
|
||||
const Icon = statIcons[stat.icon as keyof typeof statIcons]
|
||||
return (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
|
||||
className="flex flex-col items-center text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<Icon className="mb-2 h-5 w-5 text-silos-tan" />
|
||||
<span className="text-sm font-semibold text-silos-text">{stat.label}</span>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<DashboardPreview />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue