Add Montserrat font to Tailwind config and clean up unused comments in Home component
This commit is contained in:
@ -34,17 +34,14 @@ export default function Home() {
|
||||
const currentScrollY = window.scrollY;
|
||||
setIsScrolled(currentScrollY > 100);
|
||||
|
||||
// Always hide menu when at the very top
|
||||
if (currentScrollY === 0) {
|
||||
setIsMenuVisible(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show menu when scrolling up and past initial threshold
|
||||
if (currentScrollY < lastScrollY.current && currentScrollY > 100) {
|
||||
setIsMenuVisible(true);
|
||||
}
|
||||
// Hide menu when scrolling down
|
||||
else if (currentScrollY > lastScrollY.current) {
|
||||
setIsMenuVisible(false);
|
||||
}
|
||||
@ -53,7 +50,7 @@ export default function Home() {
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', updateScroll);
|
||||
updateScroll(); // Initial check
|
||||
updateScroll();
|
||||
|
||||
return () => window.removeEventListener('scroll', updateScroll);
|
||||
}, []);
|
||||
@ -87,7 +84,6 @@ export default function Home() {
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
|
||||
>
|
||||
{/* Skip Link */}
|
||||
<a
|
||||
href="#main-content"
|
||||
className={`
|
||||
@ -98,7 +94,6 @@ export default function Home() {
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{/* Menu Bar */}
|
||||
<header>
|
||||
<motion.nav
|
||||
className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-md border-b border-white/10"
|
||||
@ -158,14 +153,11 @@ export default function Home() {
|
||||
</motion.nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<div id="main-content" tabIndex={-1}>
|
||||
{/* Hero Section */}
|
||||
<section
|
||||
className="relative h-[100svh] bg-black overflow-hidden"
|
||||
aria-label="Hero section"
|
||||
>
|
||||
{/* Background Image */}
|
||||
<motion.div
|
||||
className="absolute inset-0 w-full md:w-[80%] left-0 md:left-[-15%]"
|
||||
initial={{ opacity: 0, scale: 1.1 }}
|
||||
@ -173,7 +165,6 @@ export default function Home() {
|
||||
transition={{ duration: 1.4, ease: [0.32, 0.72, 0, 1], delay: 0.3 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Mobile Image */}
|
||||
<div className="relative w-full h-full md:hidden">
|
||||
<Image
|
||||
src="/images/hero-background.jpg"
|
||||
@ -194,7 +185,6 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Desktop Image */}
|
||||
<div className="relative w-full h-full hidden md:block">
|
||||
<Image
|
||||
src="/images/hero-background.jpg"
|
||||
@ -216,11 +206,9 @@ export default function Home() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="absolute inset-0 flex items-center md:justify-start">
|
||||
<div className="w-full md:w-[80%] px-6 sm:px-8 md:pl-[25%] md:pr-0 lg:pl-[50%]">
|
||||
<div className="relative">
|
||||
{/* Main Title */}
|
||||
<motion.div
|
||||
className="relative z-20 text-center md:text-left"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -253,7 +241,6 @@ export default function Home() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom Content */}
|
||||
<motion.div
|
||||
className="mt-8 md:mt-12 mix-blend-difference"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -276,7 +263,6 @@ export default function Home() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Mobile Categories */}
|
||||
<motion.div
|
||||
className="mt-8 text-center md:hidden"
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
@ -291,7 +277,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator/To Top Button */}
|
||||
<motion.div
|
||||
className="fixed bottom-6 md:bottom-8 right-6 md:right-8 z-50"
|
||||
initial={{ opacity: 0 }}
|
||||
@ -306,7 +291,6 @@ export default function Home() {
|
||||
aria-label="Scroll to top"
|
||||
tabIndex={0}
|
||||
>
|
||||
{/* Background */}
|
||||
<motion.div
|
||||
className="absolute right-0 bg-black/50 backdrop-blur-md rounded-full"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
@ -321,7 +305,6 @@ export default function Home() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Scroll Text and Line */}
|
||||
<motion.div
|
||||
className="flex items-center gap-2 px-3"
|
||||
animate={{
|
||||
@ -336,7 +319,6 @@ export default function Home() {
|
||||
<div className="w-[40px] md:w-[50px] h-px bg-white/60 origin-right mix-blend-difference" />
|
||||
</motion.div>
|
||||
|
||||
{/* Arrow Up */}
|
||||
<motion.div
|
||||
className="absolute right-0 flex items-center justify-center w-10 h-10"
|
||||
initial={{ opacity: 0 }}
|
||||
@ -367,11 +349,9 @@ export default function Home() {
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Details Section */}
|
||||
<section id="about" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black border-t border-white/10">
|
||||
<div className="container mx-auto px-4 sm:px-6 md:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 lg:gap-24 max-w-7xl mx-auto">
|
||||
{/* Left Column - About */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@ -400,7 +380,6 @@ export default function Home() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Column - Measurements */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@ -457,7 +436,6 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories Section */}
|
||||
<section className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white">
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`,
|
||||
@ -480,7 +458,6 @@ export default function Home() {
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-5xl mx-auto">
|
||||
{/* Commercial */}
|
||||
<motion.div
|
||||
className="text-center space-y-4"
|
||||
>
|
||||
@ -495,7 +472,6 @@ export default function Home() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Fitness */}
|
||||
<motion.div
|
||||
className="text-center space-y-4"
|
||||
>
|
||||
@ -511,7 +487,6 @@ export default function Home() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Editorial */}
|
||||
<motion.div
|
||||
className="text-center space-y-4"
|
||||
>
|
||||
@ -529,7 +504,6 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Portfolio Section */}
|
||||
<section id="portfolio" className="relative py-16 sm:py-20 md:py-24 lg:py-32 bg-white">
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px)`,
|
||||
@ -586,7 +560,6 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section id="contact" className="py-16 sm:py-20 md:py-24 lg:py-32 bg-black">
|
||||
<div className="container mx-auto px-4 sm:px-6 md:px-8">
|
||||
<motion.div
|
||||
@ -697,7 +670,6 @@ export default function Home() {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer
|
||||
className="py-8 bg-black border-t border-white/10"
|
||||
role="contentinfo"
|
||||
|
||||
@ -55,6 +55,7 @@ export default {
|
||||
fontFamily: {
|
||||
prompt:['Prompt', 'sans-serif'],
|
||||
playfair: ['Playfair Display', 'serif'],
|
||||
montserrat: ['Montserrat', 'sans-serif']
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
|
||||
Reference in New Issue
Block a user