Version 2 of Cinematic Agency Portfolio

Version 2 of Cinematic Agency Portfolio 2/App.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import Lenis from 'lenis';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { Navbar } from './components/Navbar';
+import { Hero } from './components/Hero';
+import { Features } from './components/Features';
+import { VisualSection } from './components/VisualSection';
+import { ProductCarousel } from './components/ProductCarousel';
+import { Footer } from './components/Footer';
+import { CallToAction } from './components/CallToAction';
+
+// Register GSAP plugin globally
+gsap.registerPlugin(ScrollTrigger);
+
+const App: React.FC = () => {
+  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,
+    });
+
+    // Expose lenis to window for Navbar access
+    (window as any).lenis = lenis;
+
+    // Connect Lenis to GSAP ScrollTrigger
+    lenis.on('scroll', ScrollTrigger.update);
+
+    // GSAP ticker sync
+    gsap.ticker.add((time) => {
+      lenis.raf(time * 1000);
+    });
+
+    gsap.ticker.lagSmoothing(0);
+
+    return () => {
+      lenis.destroy();
+      (window as any).lenis = null;
+      gsap.ticker.remove((time) => lenis.raf(time * 1000));
+    };
+  }, []);
+
+  return (
+    <div className="relative min-h-screen w-full flex flex-col">
+      <Navbar />
+      <main className="flex-1">
+        <Hero />
+        <VisualSection 
+          id="about"
+          title="Engineered for Performance"
+          description="We build digital experiences that are not only visually stunning but also technically flawless. Every frame is calculated, every interaction is intentional."
+          alignment="left"
+          image="https://picsum.photos/1920/1080?grayscale&blur=2"
+        />
+        <ProductCarousel id="work" />
+        <Features id="services" />
+        <VisualSection 
+          title="Global Infrastructure"
+          description="Our systems scale effortlessly across the globe. Low latency, high availability, and edge-computed rendering ensure your message reaches everyone, instantly."
+          alignment="right"
+          image="https://picsum.photos/1920/1080?grayscale"
+        />
+        <CallToAction id="contact" />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default App;

Version 2 of Cinematic Agency Portfolio 2/components/CallToAction.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+import gsap from 'gsap';
+
+interface CallToActionProps {
+    id?: string;
+}
+
+export const CallToAction: React.FC<CallToActionProps> = ({ id }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLHeadingElement>(null);
+
+  useEffect(() => {
+    // Reveal animation
+    gsap.fromTo(textRef.current,
+      { y: 100, opacity: 0 },
+      {
+        y: 0,
+        opacity: 1,
+        duration: 1.5,
+        ease: 'power4.out',
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: 'top 75%',
+        }
+      }
+    );
+  }, []);
+
+  return (
+    <section id={id} ref={containerRef} className="py-48 px-6 flex justify-center items-center bg-zinc-950 border-t border-white/5 relative overflow-hidden scroll-mt-20">
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-indigo-950/20 pointer-events-none" />
+
+      <div className="text-center max-w-4xl relative z-10">
+        <h2 ref={textRef} className="text-5xl md:text-8xl font-bold tracking-tighter mb-10">
+          Ready to disrupt?
+        </h2>
+        <button className="px-10 py-5 bg-white text-black text-xl font-bold rounded-full hover:bg-zinc-200 hover:scale-105 transition-all duration-300">
+          Get in Touch
+        </button>
+      </div>
+    </section>
+  );
+};

Version 2 of Cinematic Agency Portfolio 2/components/Features.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { SectionWrapper } from './SectionWrapper';
+import { Cpu, Globe, Zap, Shield } from 'lucide-react';
+
+interface FeaturesProps {
+    id?: string;
+}
+
+const featureList = [
+  {
+    icon: <Cpu className="w-8 h-8" />,
+    title: "AI-Driven Core",
+    desc: "Our systems leverage the latest in neural processing to optimize user pathways in real-time."
+  },
+  {
+    icon: <Globe className="w-8 h-8" />,
+    title: "Global CDN",
+    desc: "Content delivered from the edge, ensuring millisecond latency regardless of user location."
+  },
+  {
+    icon: <Zap className="w-8 h-8" />,
+    title: "Instant State",
+    desc: "Optimistic UI updates and predictive pre-fetching make the interface feel instant."
+  },
+  {
+    icon: <Shield className="w-8 h-8" />,
+    title: "Enterprise Security",
+    desc: "Bank-grade encryption and compliance standards built into every layer of the stack."
+  }
+];
+
+export const Features: React.FC<FeaturesProps> = ({ id }) => {
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!gridRef.current) return;
+
+    const cards = gridRef.current.children;
+
+    gsap.fromTo(cards, 
+      { opacity: 0, y: 40 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 1,
+        stagger: 0.2,
+        ease: 'power3.out',
+        scrollTrigger: {
+          trigger: gridRef.current,
+          start: 'top 80%',
+        }
+      }
+    );
+  }, []);
+
+  return (
+    <section id={id} className="py-32 px-6 md:px-12 bg-black/50 scroll-mt-20">
+      <div className="max-w-7xl mx-auto">
+        <SectionWrapper className="mb-20">
+          <h2 className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
+            Technical Superiority
+          </h2>
+          <div className="h-1 w-24 bg-indigo-500" />
+        </SectionWrapper>
+
+        <div ref={gridRef} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {featureList.map((f, i) => (
+            <div key={i} className="group p-8 border border-white/10 bg-white/5 hover:bg-white/10 transition-colors duration-500 rounded-2xl">
+              <div className="mb-6 text-indigo-400 group-hover:text-indigo-300 transition-colors">
+                {f.icon}
+              </div>
+              <h3 className="text-xl font-semibold mb-3">{f.title}</h3>
+              <p className="text-zinc-400 leading-relaxed text-sm">
+                {f.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

Version 2 of Cinematic Agency Portfolio 2/components/Footer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className="py-12 px-6 border-t border-white/10 bg-black text-zinc-500 text-sm">
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+        <div className="flex gap-2 items-center">
+          <div className="h-6 w-6 bg-zinc-800 rounded-full" />
+          <span className="font-semibold text-zinc-300">AGENCY</span>
+        </div>
+
+        <div className="flex gap-8">
+          <a href="#" className="hover:text-white transition-colors">Twitter</a>
+          <a href="#" className="hover:text-white transition-colors">LinkedIn</a>
+          <a href="#" className="hover:text-white transition-colors">Instagram</a>
+        </div>
+
+        <div>
+          &copy; {new Date().getFullYear()} Cinematic Agency. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+};

Version 2 of Cinematic Agency Portfolio 2/components/Hero.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ArrowDown } from 'lucide-react';
+
+export const Hero: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const subRef = useRef<HTMLParagraphElement>(null);
+  const badgeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const tl = gsap.timeline();
+
+    tl.fromTo(
+      badgeRef.current,
+      { opacity: 0, y: 20 },
+      { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out', delay: 0.2 }
+    )
+    .fromTo(
+      headingRef.current,
+      { opacity: 0, y: 60 },
+      { opacity: 1, y: 0, duration: 1.2, ease: 'power3.out' },
+      "-=0.4"
+    )
+    .fromTo(
+      subRef.current,
+      { opacity: 0, y: 40 },
+      { opacity: 1, y: 0, duration: 1, ease: 'power3.out' },
+      "-=0.8"
+    );
+
+  }, []);
+
+  return (
+    <section 
+      ref={containerRef} 
+      className="relative min-h-screen flex flex-col items-center justify-center px-4 overflow-hidden pt-20"
+    >
+      {/* Background Gradients */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-indigo-900/20 rounded-full blur-[120px] -z-10" />
+      <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-blue-900/10 rounded-full blur-[100px] -z-10" />
+
+      <div ref={badgeRef} className="mb-8 px-4 py-1.5 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm">
+        <span className="text-sm font-medium tracking-wide text-indigo-300 uppercase">Next Generation Agency</span>
+      </div>
+
+      <h1 
+        ref={headingRef} 
+        className="text-[12vw] md:text-[8rem] leading-[0.9] font-bold text-center tracking-tighter mix-blend-difference text-white max-w-5xl mx-auto"
+      >
+        ELEVATE <br /> REALITY
+      </h1>
+
+      <p 
+        ref={subRef} 
+        className="mt-8 text-xl md:text-2xl text-zinc-400 max-w-2xl text-center leading-relaxed font-light"
+      >
+        We craft digital experiences that blur the line between the virtual and the tangible. Precision engineering meets cinematic design.
+      </p>
+
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-50">
+        <ArrowDown className="w-6 h-6 text-white" />
+      </div>
+    </section>
+  );
+};