diff --git a/src/App.tsx b/src/App.tsx index 4b20f8c..9958a64 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import './App.css' import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import OpenLayerMap from './components/UI/Map/OpenLayerMap'; -import Homepage from './components/UI/Homepage/homepage'; +import ArchitecturalShowcase from './components/UI/Homepage/showcase'; function App() { @@ -10,7 +10,7 @@ function App() { return ( - } /> + } /> } /> diff --git a/src/components/UI/Homepage/homepage.css b/src/components/UI/Homepage/homepage.css index f2078dd..79756cf 100644 --- a/src/components/UI/Homepage/homepage.css +++ b/src/components/UI/Homepage/homepage.css @@ -1,242 +1,721 @@ -@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap'); +/* Generated from reference image; drop into project. */ + +:root { + --color-primary: #000000; + --color-text: #333333; + --color-text-light: #666666; + --color-background: #ffffff; + --color-background-alt: #f8f9fa; + --color-accent: #007bff; + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 1.5rem; + --spacing-lg: 2rem; + --spacing-xl: 3rem; + --spacing-xxl: 4rem; + --border-radius: 8px; + --border-radius-lg: 12px; + --animation-fast: 0.2s; + --animation-medium: 0.4s; + --animation-slow: 0.8s; + --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1); + --shadow-lifted: 0 8px 24px rgba(0, 0, 0, 0.15); +} -/* Reset and Base Styles */ * { - margin: 0; - padding: 0; box-sizing: border-box; } -.body { - font-family: 'Inter', sans-serif; - background-color: white; +.showcase { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--color-text); + line-height: 1.6; + background: var(--color-background); + min-height: 100vh; } -.homepage { - position: relative; - width: 100%; - height: 100vh; - font-family: 'Inter', sans-serif; - background-color: white; -} - -/* Navigation Styles */ -.navigation { - position: fixed; +/* Header */ +.showcase__header { + position: sticky; top: 0; - left: 0; - width: 100%; - z-index: 1000; - background: transparent; - padding: 50px 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 100; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + transform: translateY(-100%); + animation: slideDown var(--animation-medium) var(--ease-smooth) 0.1s forwards; } -.nav-container { +.showcase__nav { display: flex; - justify-content: center; align-items: center; - gap: 80px; + justify-content: space-between; + padding: var(--spacing-sm) var(--spacing-lg); max-width: 1200px; margin: 0 auto; } -.nav-link { - color: white; +.showcase__logo { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-weight: 700; + font-size: 1.25rem; + color: var(--color-primary); +} + +.showcase__logo-icon { + font-size: 1rem; + transform: rotate(45deg); +} + +.showcase__nav-links { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: var(--spacing-lg); +} + +.showcase__nav-links a { text-decoration: none; - font-size: 16px; - font-weight: 400; - letter-spacing: 1.5px; - position: relative; - transition: all 0.3s ease; - text-transform: uppercase; - font-family: 'Inter', sans-serif; -} - -.nav-link:hover { - color: rgba(255, 255, 255, 0.8); -} - -.nav-link.active { - color: #ffffff; + color: var(--color-text); font-weight: 500; + position: relative; + transition: color var(--animation-fast) var(--ease-smooth); } -.nav-link.active::after { +.showcase__nav-links a::after { content: ''; position: absolute; - bottom: -8px; + bottom: -4px; left: 0; - width: 100%; + right: 0; height: 2px; - background: #ffffff; + background: var(--color-primary); + transform: scaleX(0); + transition: transform var(--animation-medium) var(--ease-bounce); } -/* Hero Section - Split Layout */ -.hero-section { - display: flex; - width: 100%; - height: 100vh; - background-color: white; +.showcase__nav-links a:hover { + color: var(--color-primary); } -/* Left Section - White background with image */ -.left-section { - width: 50%; - height: 100%; - background-color: white; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - padding: 40px; +.showcase__nav-links a:hover::after { + transform: scaleX(1); } -.image-placeholder { - width: 100%; - height: 100%; - background: #2a2a2a; - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - border-radius: 60px; -} - -.hero-img { - width: 100%; - height: 100%; - object-fit: scale-down; - display: flex; -} - -/* Right Section - Blue gradient */ -.right-section { - width: 50%; - height: 100%; - background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3d6db0 100%); - position: relative; -} - -.hero-content { - position: absolute; - bottom: 180px; - right: 80px; - text-align: left; +.showcase__contact-btn { + background: var(--color-primary); color: white; + border: none; + padding: var(--spacing-xs) var(--spacing-md); + border-radius: var(--border-radius); + cursor: pointer; + font-weight: 600; + transition: all var(--animation-fast) var(--ease-smooth); + position: relative; + overflow: hidden; } -.hero-title { - font-family: 'Playfair Display', serif; - font-size: 5.5rem; - font-weight: 400; - line-height: 0.85; - letter-spacing: 1px; +.showcase__contact-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left var(--animation-medium) var(--ease-smooth); } -.title-line { +.showcase__contact-btn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lifted); +} + +.showcase__contact-btn:hover::before { + left: 100%; +} + +/* Hero Section */ +.showcase__hero { + padding: var(--spacing-xxl) var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; + opacity: 0; + transform: translateY(30px); + animation: fadeInUp var(--animation-slow) var(--ease-smooth) 0.3s forwards; +} + +.showcase__hero-content { + max-width: 600px; +} + +.showcase__hero-title { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + line-height: 1.2; + margin: 0 0 var(--spacing-md) 0; + color: var(--color-primary); +} + +.showcase__hero-subtitle { + font-size: 1.125rem; + color: var(--color-text-light); + margin: 0 0 var(--spacing-xl) 0; + max-width: 500px; +} + +.showcase__cta-btn { + background: var(--color-primary); + color: white; + border: none; + padding: var(--spacing-md) var(--spacing-lg); + border-radius: 50px; + cursor: pointer; + font-weight: 600; + font-size: 1rem; + display: flex; + align-items: center; + gap: var(--spacing-sm); + transition: all var(--animation-medium) var(--ease-bounce); + position: relative; + overflow: hidden; +} + +.showcase__cta-arrow { + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--animation-medium) var(--ease-bounce); +} + +.showcase__cta-btn:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: var(--shadow-lifted); +} + +.showcase__cta-btn:hover .showcase__cta-arrow { + transform: translateX(4px) rotate(45deg); +} + +/* Image Section */ +.showcase__image-section { + padding: var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; +} + +.showcase__image-container { + border-radius: var(--border-radius-lg); + overflow: hidden; + box-shadow: var(--shadow-subtle); + opacity: 0; + transform: translateY(50px) scale(0.95); + animation: imageReveal var(--animation-slow) var(--ease-smooth) 0.6s forwards; +} + +.showcase__hero-image { + width: 100%; + height: auto; display: block; - color: #ffffff; - opacity: 1; - font-weight: 400; + transition: transform var(--animation-slow) var(--ease-smooth); } -.subtitle { - display: block; - color: rgba(255, 255, 255, 0.9); - margin-top: 25px; - opacity: 0.3; - font-weight: 500; +.showcase__image-container:hover .showcase__hero-image { + transform: scale(1.05); +} + +/* Purpose Section */ +.showcase__purpose { + background: var(--color-background-alt); + padding: var(--spacing-xxl) var(--spacing-lg); + margin-top: var(--spacing-xxl); +} + +.showcase__purpose-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-xxl); + align-items: start; +} + +.showcase__purpose-title { + font-size: 2.5rem; + font-weight: 700; + margin: 0 0 var(--spacing-md) 0; + color: var(--color-primary); + opacity: 0; + transform: translateX(-30px); + animation: slideInLeft var(--animation-medium) var(--ease-smooth) 0.9s forwards; +} + +.showcase__purpose-description { + color: var(--color-text-light); + margin: 0 0 var(--spacing-lg) 0; + font-size: 1.125rem; +} + +.showcase__learn-more-btn { + background: var(--color-accent); + color: white; + border: none; + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--border-radius); + cursor: pointer; + font-weight: 600; + transition: all var(--animation-fast) var(--ease-smooth); +} + +.showcase__learn-more-btn:hover { + background: #0056b3; + transform: translateY(-2px); + box-shadow: var(--shadow-subtle); +} + +.showcase__features { + display: flex; + flex-direction: column; + gap: var(--spacing-xl); +} + +.showcase__feature { + opacity: 0; + transform: translateY(30px); + animation: fadeInUp var(--animation-medium) var(--ease-smooth) forwards; +} + +.showcase__feature:nth-child(1) { + animation-delay: 1.1s; +} + +.showcase__feature:nth-child(2) { + animation-delay: 1.3s; +} + +.showcase__feature-icon { + width: 48px; + height: 48px; + background: var(--color-primary); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-bottom: var(--spacing-md); + transition: transform var(--animation-medium) var(--ease-bounce); +} + +.showcase__feature:hover .showcase__feature-icon { + transform: scale(1.1) rotate(10deg); +} + +.showcase__feature-title { + font-size: 1.25rem; + font-weight: 600; + margin: 0 0 var(--spacing-sm) 0; + color: var(--color-primary); +} + +.showcase__feature-description { + color: var(--color-text-light); + margin: 0; +} + +/* Animations */ +@keyframes slideDown { + to { + transform: translateY(0); + } +} + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes imageReveal { + to { + opacity: 1; + transform: translateY(0) scale(1); + } } /* Responsive Design */ -@media (max-width: 1200px) { - .hero-title { - font-size: 4.5rem; - } - - .nav-container { - gap: 60px; - } - - .hero-content { - bottom: 60px; - right: 60px; - } -} - @media (max-width: 768px) { - .hero-section { - flex-direction: column; + .showcase__nav { + padding: var(--spacing-sm); } - .left-section, - .right-section { - width: 100%; - height: 50%; + .showcase__nav-links { + display: none; } - .nav-container { - gap: 40px; - padding: 0 20px; + .showcase__hero { + padding: var(--spacing-lg) var(--spacing-sm); } - .nav-link { - font-size: 14px; + .showcase__hero-title { + font-size: 2.5rem; } - .hero-title { - font-size: 3.5rem; + .showcase__purpose-content { + grid-template-columns: 1fr; + gap: var(--spacing-lg); } - .hero-content { - bottom: 40px; - right: 40px; + .showcase__image-section { + padding: var(--spacing-sm); } } @media (max-width: 480px) { - .nav-container { - gap: 25px; + .showcase__logo { + font-size: 1rem; } - .nav-link { - font-size: 12px; + .showcase__hero-title { + font-size: 2rem; } - .hero-title { - font-size: 2.8rem; - } - - .hero-content { - bottom: 30px; - right: 30px; + .showcase__purpose-title { + font-size: 2rem; } } -/* Smooth transitions */ -.left-section, -.right-section { - transition: all 0.8s ease; +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } -/* Hover effects */ -.left-section:hover .hero-img { +.showcase__nav-links a:focus, +.showcase__contact-btn:focus, +.showcase__cta-btn:focus, +.showcase__learn-more-btn:focus { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +/* Loaded state trigger */ +.showcase--loaded .showcase__hero { + animation-play-state: running; +} + +.showcase--loaded .showcase__image-container { + animation-play-state: running; +} + +.showcase--loaded .showcase__purpose-title { + animation-play-state: running; +} + +.showcase--loaded .showcase__feature { + animation-play-state: running; +}title { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + line-height: 1.2; + margin: 0 0 var(--spacing-md) 0; + color: var(--color-primary); +} + +.showcase__hero-subtitle { + font-size: 1.125rem; + color: var(--color-text-light); + margin: 0 0 var(--spacing-xl) 0; + max-width: 500px; +} + +.showcase__cta-btn { + background: var(--color-primary); + color: white; + border: none; + padding: var(--spacing-md) var(--spacing-lg); + border-radius: 50px; + cursor: pointer; + font-weight: 600; + font-size: 1rem; + display: flex; + align-items: center; + gap: var(--spacing-sm); + transition: all var(--animation-medium) var(--ease-bounce); + position: relative; + overflow: hidden; +} + +.showcase__cta-arrow { + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--animation-medium) var(--ease-bounce); +} + +.showcase__cta-btn:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: var(--shadow-lifted); +} + +.showcase__cta-btn:hover .showcase__cta-arrow { + transform: translateX(4px) rotate(45deg); +} + +/* Image Section */ +.showcase__image-section { + padding: var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; +} + +.showcase__image-container { + border-radius: var(--border-radius-lg); + overflow: hidden; + box-shadow: var(--shadow-subtle); + opacity: 0; + transform: translateY(50px) scale(0.95); + animation: imageReveal var(--animation-slow) var(--ease-smooth) 0.6s forwards; +} + +.showcase__hero-image { + width: 100%; + height: auto; + display: block; + transition: transform var(--animation-slow) var(--ease-smooth); +} + +.showcase__image-container:hover .showcase__hero-image { transform: scale(1.05); - transition: transform 0.8s ease; } -/* Loading states */ -.hero-img { - transition: transform 0.8s ease; +/* Purpose Section */ +.showcase__purpose { + background: var(--color-background-alt); + padding: var(--spacing-xxl) var(--spacing-lg); + margin-top: var(--spacing-xxl); } -/* Ensure proper stacking */ -.navigation { - z-index: 1000; +.showcase__purpose-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-xxl); + align-items: start; } -.hero-section { - z-index: 1; -} \ No newline at end of file +.showcase__purpose-title { + font-size: 2.5rem; + font-weight: 700; + margin: 0 0 var(--spacing-md) 0; + color: var(--color-primary); + opacity: 0; + transform: translateX(-30px); + animation: slideInLeft var(--animation-medium) var(--ease-smooth) 0.9s forwards; +} + +.showcase__purpose-description { + color: var(--color-text-light); + margin: 0 0 var(--spacing-lg) 0; + font-size: 1.125rem; +} + +.showcase__learn-more-btn { + background: var(--color-accent); + color: white; + border: none; + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--border-radius); + cursor: pointer; + font-weight: 600; + transition: all var(--animation-fast) var(--ease-smooth); +} + +.showcase__learn-more-btn:hover { + background: #0056b3; + transform: translateY(-2px); + box-shadow: var(--shadow-subtle); +} + +.showcase__features { + display: flex; + flex-direction: column; + gap: var(--spacing-xl); +} + +.showcase__feature { + opacity: 0; + transform: translateY(30px); + animation: fadeInUp var(--animation-medium) var(--ease-smooth) forwards; +} + +.showcase__feature:nth-child(1) { + animation-delay: 1.1s; +} + +.showcase__feature:nth-child(2) { + animation-delay: 1.3s; +} + +.showcase__feature-icon { + width: 48px; + height: 48px; + background: var(--color-primary); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-bottom: var(--spacing-md); + transition: transform var(--animation-medium) var(--ease-bounce); +} + +.showcase__feature:hover .showcase__feature-icon { + transform: scale(1.1) rotate(10deg); +} + +.showcase__feature-title { + font-size: 1.25rem; + font-weight: 600; + margin: 0 0 var(--spacing-sm) 0; + color: var(--color-primary); +} + +.showcase__feature-description { + color: var(--color-text-light); + margin: 0; +} + +/* Animations */ +@keyframes slideDown { + to { + transform: translateY(0); + } +} + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes imageReveal { + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .showcase__nav { + padding: var(--spacing-sm); + } + + .showcase__nav-links { + display: none; + } + + .showcase__hero { + padding: var(--spacing-lg) var(--spacing-sm); + } + + .showcase__hero-title { + font-size: 2.5rem; + } + + .showcase__purpose-content { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } + + .showcase__image-section { + padding: var(--spacing-sm); + } +} + +@media (max-width: 480px) { + .showcase__logo { + font-size: 1rem; + } + + .showcase__hero-title { + font-size: 2rem; + } + + .showcase__purpose-title { + font-size: 2rem; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +.showcase__nav-links a:focus, +.showcase__contact-btn:focus, +.showcase__cta-btn:focus, +.showcase__learn-more-btn:focus { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +/* Loaded state trigger */ +.showcase--loaded .showcase__hero { + animation-play-state: running; +} + +.showcase--loaded .showcase__image-container { + animation-play-state: running; +} + +.showcase--loaded .showcase__purpose-title { + animation-play-state: running; +} + +.showcase--loaded .showcase__feature { + animation-play-state: running; +} diff --git a/src/components/UI/Homepage/homepage.tsx b/src/components/UI/Homepage/homepage.tsx deleted file mode 100644 index 4d38712..0000000 --- a/src/components/UI/Homepage/homepage.tsx +++ /dev/null @@ -1,307 +0,0 @@ -import React from 'react'; -import { ChevronLeft, ChevronRight } from 'lucide-react'; -import bgImage from '../../../assets/1.jpeg'; - -const LaHomeWebsite: React.FC = () => { - return ( -
- {/* Add link to Google Fonts in the head */} - - - {/* Main Container */} -
- {/* Navigation */} - - - {/* Main Content Container */} -
- {/* Content Box with Border */} -
- {/* Main Heading */} -

- Find your
- dream house -

- - {/* Project Info Grid */} -
-
-
- Client -
-
- Arlington Schools -
-
- -
-
- Location -
-
- Japan -
-
- -
-
- Year -
-
- May, 2022 -
-
-
- - {/* Bottom Section */} -
- {/* Description */} -
-

- You have the vision for a stunning digital
- experience. More tips with your design and
- engineering team through bring about it. -

- -
- - {/* Navigation Arrows */} -
- - - -
-
-
-
-
-
- ); -}; - -export default LaHomeWebsite; \ No newline at end of file diff --git a/src/components/UI/Homepage/showcase.tsx b/src/components/UI/Homepage/showcase.tsx new file mode 100644 index 0000000..532a0f0 --- /dev/null +++ b/src/components/UI/Homepage/showcase.tsx @@ -0,0 +1,572 @@ +import React, { useEffect, useState } from 'react'; + +const ArchitecturalShowcase: React.FC = () => { + const [isLoaded, setIsLoaded] = useState(false); + const [heroVisible, setHeroVisible] = useState(false); + const [imageVisible, setImageVisible] = useState(false); + const [purposeVisible, setPurposeVisible] = useState(false); + + useEffect(() => { + document.body.style.margin = '0'; + document.body.style.padding = '0'; + document.body.style.overflow = 'hidden'; + + const timer1 = setTimeout(() => setIsLoaded(true), 200); + const timer2 = setTimeout(() => setHeroVisible(true), 600); + const timer3 = setTimeout(() => setImageVisible(true), 1200); + const timer4 = setTimeout(() => setPurposeVisible(true), 1800); + const timer5 = setTimeout(() => { + document.body.style.overflow = 'auto'; + }, 2000); + + return () => { + clearTimeout(timer1); + clearTimeout(timer2); + clearTimeout(timer3); + clearTimeout(timer4); + clearTimeout(timer5); + }; + }, []); + + const globalStyles = ` + body, html, #root { + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; + + + } + `; + + const styles = { + showcase: { + fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + minHeight: '100vh', + backgroundColor: '#fafafa', + margin: 0, + padding: 0, + border: 'none', + outline: 'none', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateY(0) scale(1)' : 'translateY(50px) scale(0.95)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + + header: { + position: 'fixed' as const, + top: 0, + left: 0, + right: 0, + zIndex: 1000, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px)', + borderBottom: '1px solid rgba(0, 0, 0, 0.08)', + transform: isLoaded ? 'translateY(0)' : 'translateY(-100px)', + transition: 'all 0.8s cubic-bezier(0.34, 1.26, 0.64, 1)', + transitionDelay: '0.3s', + }, + + nav: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '1rem 2rem', + maxWidth: '1400px', + margin: '0 auto', + }, + + logo: { + display: 'flex', + alignItems: 'center', + gap: '0.5rem', + fontSize: '1.5rem', + fontWeight: 600, + color: '#1a1a1a', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateX(0) rotate(0deg)' : 'translateX(-30px) rotate(-10deg)', + transition: 'all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)', + transitionDelay: '0.5s', + }, + + logoIcon: { + fontSize: '1.2rem', + animation: isLoaded ? 'pulse 2s infinite' : 'none', + }, + + navLinks: { + display: 'flex', + listStyle: 'none', + margin: 0, + padding: 0, + gap: '2rem', + }, + + navLink: { + color: '#4a4a4a', + textDecoration: 'none', + fontSize: '0.95rem', + fontWeight: 400, + transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + cursor: 'pointer', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateY(0)' : 'translateY(-20px)', + transitionDelay: '0.7s', + }, + + contactBtn: { + backgroundColor: '#1a1a1a', + color: 'white', + border: 'none', + padding: '0.75rem 1.5rem', + borderRadius: '50px', + fontSize: '0.9rem', + fontWeight: 500, + cursor: 'pointer', + transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + fontFamily: 'inherit', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateX(0) scale(1)' : 'translateX(30px) scale(0.8)', + transitionDelay: '0.8s', + }, + + hero: { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + minHeight: '100vh', + textAlign: 'center' as const, + padding: '0 2rem', + paddingTop: '80px', + }, + + heroContent: { + maxWidth: '800px', + margin: '0 auto', + }, + + heroTitle: { + fontSize: 'clamp(2.5rem, 5vw, 4rem)', + fontWeight: 300, + lineHeight: 1.2, + color: '#1a1a1a', + margin: '0 0 1.5rem 0', + letterSpacing: '-0.02em', + }, + + heroSubtitle: { + fontSize: 'clamp(1.1rem, 2vw, 1.3rem)', + color: '#6a6a6a', + lineHeight: 1.6, + margin: '0 0 2.5rem 0', + fontWeight: 400, + maxWidth: '600px', + }, + + ctaBtn: { + display: 'inline-flex', + alignItems: 'center', + gap: '0.75rem', + backgroundColor: '#1a1a1a', + color: 'white', + border: 'none', + padding: '1rem 2rem', + borderRadius: '50px', + fontSize: '1rem', + fontWeight: 500, + cursor: 'pointer', + transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)', + fontFamily: 'inherit', + boxShadow: '0 4px 20px rgba(26, 26, 26, 0.15)', + }, + + ctaArrow: { + fontSize: '1.2rem', + transition: 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + + imageSection: { + padding: '4rem 2rem', + backgroundColor: '#ffffff', + opacity: imageVisible ? 1 : 0, + transform: imageVisible ? 'translateY(0)' : 'translateY(80px)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + + imageContainer: { + maxWidth: '1200px', + margin: '0 auto', + borderRadius: '20px', + overflow: 'hidden', + boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1)', + transform: imageVisible ? 'scale(1) rotateX(0deg)' : 'scale(0.9) rotateX(10deg)', + transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + transitionDelay: '0.2s', + }, + + heroImage: { + width: '100%', + height: 'auto', + display: 'block', + transition: 'transform 0.6s ease', + }, + + purpose: { + padding: '6rem 2rem', + backgroundColor: '#fafafa', + opacity: purposeVisible ? 1 : 0, + transform: purposeVisible ? 'translateY(0)' : 'translateY(60px)', + transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + textAlign: 'center' as const, + }, + + purposeContent: { + maxWidth: '1200px', + margin: '0 auto', + }, + + purposeTitle: { + fontSize: 'clamp(2rem, 4vw, 2.5rem)', + fontWeight: 300, + color: '#1a1a1a', + margin: '0 0 1.5rem 0', + letterSpacing: '-0.01em', + }, + + purposeDescription: { + fontSize: '1.1rem', + color: '#6a6a6a', + lineHeight: 1.6, + margin: '0', + maxWidth: '800px', + }, + + servicesSection: { + padding: '8rem 2rem', + backgroundColor: '#fffff', + position: 'relative' as const, + }, + + servicesContainer: { + maxWidth: '1400px', + margin: '0 auto', + position: 'relative' as const, + }, + + servicesHeader: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: '4rem', + position: 'relative' as const, + }, + + + servicesTitle: { + fontSize: 'clamp(2.5rem, 5vw, 4rem)', + fontWeight: 400, + color: '#666', + lineHeight: 1.2, + margin: 0, + textAlign: 'center' as const, + flex: 1, + letterSpacing: '-0.01em', + }, + + viewAllBtn: { + backgroundColor: 'transparent', + border: 'none', + fontSize: '0.9rem', + color: '#666', + fontWeight: 500, + cursor: 'pointer', + textDecoration: 'underline', + fontFamily: 'inherit', + position: 'absolute' as const, + top: 0, + right: 0, + }, + + servicesGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + gap: '2rem', + marginTop: '2rem', + }, + + serviceCard: { + backgroundColor: 'transparent', + padding: 60, + position: 'relative' as const, + }, + + serviceTitle: { + fontSize: 'clamp(1.8rem, 3vw, 2.5rem)', + fontWeight: 400, + color: '#666', + lineHeight: 1.2, + margin: 0, + letterSpacing: '-0.01em', + minHeight: '120px', + }, + + + serviceDescription: { + fontSize: '1rem', + color: '#666', + lineHeight: 1.6, + margin: '0 0 2rem 0', + flex: 1, + }, + + }; + + const handleNavLinkHover = (e: React.MouseEvent) => { + e.currentTarget.style.color = '#1a1a1a'; + }; + + const handleNavLinkLeave = (e: React.MouseEvent) => { + e.currentTarget.style.color = '#4a4a4a'; + }; + + const handleContactBtnHover = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#333333'; + e.currentTarget.style.transform = 'translateY(-2px)'; + e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 26, 26, 0.25)'; + }; + + const handleContactBtnLeave = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#1a1a1a'; + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = 'none'; + }; + + const handleCtaBtnHover = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#333333'; + e.currentTarget.style.transform = 'translateY(-3px)'; + e.currentTarget.style.boxShadow = '0 8px 30px rgba(26, 26, 26, 0.25)'; + const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement; + if (arrow) arrow.style.transform = 'translateX(5px)'; + }; + + const handleCtaBtnLeave = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#1a1a1a'; + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = '0 4px 20px rgba(26, 26, 26, 0.15)'; + const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement; + if (arrow) arrow.style.transform = 'translateX(0)'; + }; + + const handleImageHover = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'scale(1.05)'; + }; + + const handleImageLeave = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'scale(1)'; + }; + + return ( + <> +