Spaces:
Running
Running
File size: 2,090 Bytes
90723a6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React from 'react'
import { Outlet, Link } from 'react-router-dom'
export default function AppLayout() {
return (
<div className="min-h-screen display-gradient">
<header className="flex items-center justify-between px-8 py-6">
<Link to="/" className="flex items-center gap-2">
<span className="text-3xl font-extrabold tracking-tight" style={{fontFamily:'Montserrat'}}>hector</span>
<span className="w-2 h-2 rounded-sm bg-[var(--color-primary)] block"></span>
</Link>
</header>
<main className="px-8">
<Hero />
<div className="mt-12">
<Outlet />
</div>
</main>
<footer className="px-8 py-10 text-xs text-white/50 text-center">© 2025 EU Job Scraper</footer>
</div>
)
}
function Hero() {
return (
<section className="relative isolate grid grid-cols-12 items-center rounded-[2.5rem] overflow-hidden bg-gradient-to-br from-[#141922] to-[#0f141c] border border-white/10">
<div className="col-span-12 md:col-span-6 px-10 py-16">
<p className="text-[16px] text-white/70">unleash a new era of</p>
<h1 className="mt-2 text-[56px] leading-[1.05] font-extrabold" style={{fontFamily:'Montserrat'}}>automation</h1>
<p className="mt-6 text-white/70 max-w-xl">EU Job Scraper aggregates vacancies across Europe into one searchable platform.</p>
<div className="mt-8 flex items-center gap-4">
<Link to="/" className="px-5 py-3 rounded-xl bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary)] text-black font-semibold">Explore jobs</Link>
</div>
</div>
<div className="col-span-12 md:col-span-6 relative py-16">
<div className="absolute inset-0 opacity-30 blur-3xl pointer-events-none" aria-hidden="true"></div>
<div className="mx-10 glass p-6">
<div className="h-64 rounded-xl bg-[radial-gradient(circle_at_70%_30%,#6d28d9_0%,transparent_60%),radial-gradient(circle_at_30%_70%,#a855f7_0%,transparent_55%)]"></div>
</div>
</div>
</section>
)
}
|