74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import Lenis from '@studio-freight/lenis';
|
|
import gsap from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
|
|
import Navbar from './components/Navbar';
|
|
import Hero from './components/Hero';
|
|
import Mission from './components/Mission';
|
|
import Services from './components/Services';
|
|
import Process from './components/Process';
|
|
import Features from './components/Features';
|
|
import Blog from './components/Blog';
|
|
import Contact from './components/Contact';
|
|
import Footer from './components/Footer';
|
|
import BackToTop from './components/BackToTop';
|
|
|
|
// Register GSAP plugins globally
|
|
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
|
|
|
|
// Grain Overlay Component
|
|
const GrainOverlay = () => (
|
|
<div className="fixed inset-0 w-full h-full pointer-events-none z-50 opacity-50 dark:opacity-100 bg-grain mix-blend-overlay"></div>
|
|
);
|
|
|
|
export default function App() {
|
|
useEffect(() => {
|
|
// Initialize Lenis for smooth scrolling
|
|
const lenis = new Lenis({
|
|
duration: 1.2,
|
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
|
direction: 'vertical',
|
|
gestureDirection: 'vertical',
|
|
smooth: true,
|
|
smoothTouch: false,
|
|
touchMultiplier: 2,
|
|
} as any);
|
|
|
|
// Synchronize Lenis with GSAP ScrollTrigger
|
|
lenis.on('scroll', ScrollTrigger.update);
|
|
|
|
const ticker = (time: number) => {
|
|
lenis.raf(time * 1000);
|
|
};
|
|
|
|
// Use GSAP ticker for smoother animation loop integration
|
|
gsap.ticker.add(ticker);
|
|
|
|
// Disable lag smoothing to prevent jumps
|
|
gsap.ticker.lagSmoothing(0);
|
|
|
|
return () => {
|
|
gsap.ticker.remove(ticker);
|
|
lenis.destroy();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full min-h-screen bg-background-light dark:bg-background-dark">
|
|
<GrainOverlay />
|
|
<Navbar />
|
|
<main>
|
|
<Hero />
|
|
<Mission />
|
|
<Services />
|
|
<Process />
|
|
<Features />
|
|
<Blog />
|
|
<Contact />
|
|
</main>
|
|
<Footer />
|
|
<BackToTop />
|
|
</div>
|
|
);
|
|
} |