| import { Outlet } from "react-router-dom"; | |
| import { MarketingHeader } from "@/components/marketing/MarketingHeader"; | |
| import { MarketingFooter } from "@/components/marketing/MarketingFooter"; | |
| import { motion } from "framer-motion"; | |
| import { useState, useEffect } from "react"; | |
| export default function PublicLayout() { | |
| const [scrolled, setScrolled] = useState(false); | |
| useEffect(() => { | |
| const handleScroll = () => setScrolled(window.scrollY > 50); | |
| window.addEventListener("scroll", handleScroll); | |
| return () => window.removeEventListener("scroll", handleScroll); | |
| }, []); | |
| return ( | |
| <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-hidden transition-colors duration-300"> | |
| {/* Decorative background elements */} | |
| <div className="absolute top-0 left-1/4 -z-10 w-[600px] h-[600px] bg-indigo-500/10 blur-[150px] rounded-full mix-blend-multiply dark:mix-blend-screen pointer-events-none" /> | |
| <div className="absolute bottom-0 right-1/4 -z-10 w-[600px] h-[600px] bg-purple-500/10 blur-[150px] rounded-full mix-blend-multiply dark:mix-blend-screen pointer-events-none" /> | |
| <MarketingHeader scrolled={scrolled} /> | |
| <main className="flex-1 relative z-10"> | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5, ease: "easeOut" }} | |
| className="h-full" | |
| > | |
| <Outlet /> | |
| </motion.div> | |
| </main> | |
| <MarketingFooter /> | |
| </div> | |
| ); | |
| } | |
Xet Storage Details
- Size:
- 1.57 kB
- Xet hash:
- 94ae5377670b3d74c2a3efb1780d2509cc0c387bcf57db2ae679518bdf1052f2
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.