initial dev

This commit is contained in:
Emre
2025-10-10 23:03:48 +03:00
parent 43682f9fbe
commit f450d61ccf
14 changed files with 327 additions and 361 deletions

View File

@@ -33,7 +33,7 @@ export const Header = () => {
transition={{ duration: 0.6, ease: 'easeOut' }}
className={cn(
'fixed inset-x-0 top-0 z-50 transition-all duration-500',
isScrolled ? 'bg-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
isScrolled ? 'bg-mist/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
)}
>
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
@@ -101,7 +101,7 @@ export const Header = () => {
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -16 }}
transition={{ duration: 0.25, ease: 'easeOut' }}
className="border-t border-slate-100 bg-white/95 px-6 py-4 shadow-lg md:hidden"
className="border-t border-slate-100 bg-mist/95 px-6 py-4 shadow-lg md:hidden"
>
<div className="mx-auto flex max-w-6xl flex-col gap-4">
{navItems.map(({ label, to }) => (

View File

@@ -1,24 +1,33 @@
import { type ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import { Header } from './Header';
import { Footer } from './Footer';
import { ScrollToTop } from './ScrollToTop';
import { cn } from '../../lib/cn';
type LayoutProps = {
children: ReactNode;
};
export const Layout = ({ children }: LayoutProps) => {
const { pathname } = useLocation();
const isHome = pathname === '/';
return (
<div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
<div className={cn('relative min-h-screen bg-mist text-ink', !isHome && 'overflow-hidden')}>
<ScrollToTop />
{/* Decorative gradient blurs */}
<div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
<div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
<div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
<Header />
<main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
<Footer />
<main
className={cn(
'relative z-10',
isHome
? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
: 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32',
)}
>
{children}
</main>
{!isHome && <Footer />}
</div>
);
};