diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 4b745c4..7dc5c67 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -49,7 +49,9 @@ function Home({ onMount }) { variants={containerVariants} > -

Intuition Labs

+

+ Intuition Labs +

Pioneering the future of AI through intuitive design

{ entries.forEach(entry => { if (entry.isIntersecting) { - const ratio = entry.intersectionRatio; - entry.target.style.opacity = Math.min(ratio * 1.5, 1); - entry.target.style.transform = `translateY(${(1 - ratio) * 20}px)`; - - // Animate children with stagger - const children = entry.target.children; - Array.from(children).forEach((child, index) => { - child.style.transitionDelay = `${index * 100}ms`; - child.classList.add('visible'); - }); + entry.target.classList.add('visible'); + if (entry.target.dataset.parallax) { + this.setupParallaxForElement(entry.target); + } } }); }, options); - sections.forEach(section => { - section.style.opacity = '0'; - section.style.transform = 'translateY(20px)'; - section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; - observer.observe(section); + document.querySelectorAll('.section, [data-parallax]').forEach(el => { + observer.observe(el); }); } - setupParallax() { - const parallaxElements = document.querySelectorAll('[data-parallax]'); + setupParallaxForElement(element) { + const speed = element.dataset.parallax || 0.5; - window.addEventListener('scroll', () => { - const scrolled = window.pageYOffset; - - parallaxElements.forEach(element => { - const speed = element.dataset.parallax || 0.5; - const offset = scrolled * speed; - element.style.transform = `translateY(${offset}px)`; - }); - }); + const handleScroll = () => { + const scrolled = window.scrollY; + const offset = scrolled * speed; + element.style.transform = `translateY(${offset}px)`; + }; + + window.addEventListener('scroll', handleScroll); } } diff --git a/style.css b/style.css index fe7d97d..3e84787 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Syncopate:wght@700&family=Cinzel&family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap'); :root { - --font-display: system-ui, -apple-system, sans-serif; + --primary: #7A9E9F; --text: rgba(255, 255, 255, 0.9); --accent: #7A9E9F; --background: #000000; @@ -27,27 +27,74 @@ body { } .gradient-text { - background: linear-gradient(135deg, var(--primary) 0%, var(--glow) 100%); + background: linear-gradient( + 135deg, + var(--text) 0%, + var(--glow) 50%, + var(--accent) 100% + ); -webkit-background-clip: text; background-clip: text; - -webkit-text-fill-color: transparent; + color: transparent; + position: relative; +} + +.gradient-text::after { + content: attr(data-text); + position: absolute; + left: 0; + top: 0; + z-index: -1; + background: inherit; + filter: blur(25px); + opacity: 0.5; } .cta-button { + display: inline-block; padding: 1rem 2rem; - border: 1px solid var(--primary); + border: 2px solid var(--primary); border-radius: 4px; text-decoration: none; - color: white; - transition: all 0.3s ease; + color: var(--text); + font-weight: 500; + letter-spacing: 0.02em; + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + position: relative; + overflow: hidden; + z-index: 1; +} + +.cta-button::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--primary); + transform: scaleX(0); + transform-origin: right; + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + z-index: -1; +} + +.cta-button:hover::before { + transform: scaleX(1); + transform-origin: left; } .cta-button.primary { background: var(--primary); } -.cta-button.secondary { +.cta-button.primary:hover { background: transparent; + color: var(--primary); +} + +.cta-button.secondary:hover { + color: var(--background); } canvas { diff --git a/vite.config.js b/vite.config.js index 822504f..408f473 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,7 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import autoprefixer from 'autoprefixer'; +import cssnano from 'cssnano'; export default defineConfig({ base: '/', @@ -63,5 +65,13 @@ export default defineConfig({ frame-ancestors 'none'; `.replace(/\s+/g, ' ').trim() } + }, + css: { + postcss: { + plugins: [ + autoprefixer(), + cssnano({ preset: 'default' }) + ] + } } }); \ No newline at end of file