initial dev
This commit is contained in:
@@ -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 }) => (
|
||||
|
@@ -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>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user