Show case section

src/App.jsx

@@ -5,15 +5,16 @@ import Hero from './components/Hero.jsx'
 import Productviewer from './components/Productviewer.jsx'
 import gsap from 'gsap'
 import {ScrollTrigger} from 'gsap/all'
+import Showcase from './components/Showcase.jsx'
 gsap.registerPlugin(ScrollTrigger);
 
 const App = () => {
   return (
  <main>
-  <NavBar/>
+  <NavBar/>1
   <Hero/>
   <Productviewer/>
-
+  <Showcase/>
  </main>
   )
 }

src/components/NavBar.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { navlinks } from '../constants'
+import { navLinks } from '../constants'
 
 
 
@@ -11,7 +11,7 @@ const Navbar = () => {
         <nav>
             <img src="./logo.svg" alt="Apple logo" />
             <ul>
-                {navlinks.map(({lable}) => (
+                {navLinks.map(({lable}) => (
                     <li key={lable}>
                         <a href={lable}>{lable}</a>
                     </li>

src/components/Showcase.jsx

@@ -0,0 +1,76 @@
+import {useMediaQuery} from "react-responsive";
+import {useGSAP} from "@gsap/react";
+import gsap from 'gsap';
+
+const Showcase = () => {
+    const isTablet = useMediaQuery({ query: '(max-width: 1024px)'});
+
+    useGSAP(() => {
+        if(!isTablet) {
+            const timeline = gsap.timeline({
+                scrollTrigger: {
+                    trigger: '#showcase',
+                    start: 'top top',
+                    end: 'bottom top',
+                    scrub: true,
+                    pin: true,
+                }
+            });
+
+            timeline
+                .to('.mask img', {
+                    transform: 'scale(1.1)'
+                }).to('.content', { opacity: 1, y: 0, ease: 'power1.in' });
+        }
+    }, [isTablet])
+
+    return (
+        <section id="showcase">
+            <div className="media">
+                <video src="/videos/game.mp4" loop muted autoPlay playsInline />
+                <div className="mask">
+                    <img src="/mask-logo.svg" />
+                </div>
+            </div>
+
+            <div className="content">
+                <div className="wrapper">
+                    <div className="lg:max-w-md">
+                        <h2>Rocket Chip</h2>
+
+                        <div className="space-y-5 mt-7 pe-10">
+                            <p>
+                                Introducing {" "}
+                                <span className="text-white">
+                                    M4, the next generation of Apple silicon
+                                </span>
+                                . M4 powers
+                            </p>
+                            <p>
+                                It drives Apple Intelligence on iPad Pro, so you can write, create, and accomplish more with ease. All in a design that’s unbelievably thin, light, and powerful.
+                            </p>
+                            <p>
+                                A brand-new display engine delivers breathtaking precision, color accuracy, and brightness. And a next-gen GPU with hardware-accelerated ray tracing brings console-level graphics to your fingertips.
+                            </p>
+                            <p className="text-primary">Learn more about Apple Intelligence</p>
+                        </div>
+                    </div>
+
+                    <div className="max-w-3xs space-y-14">
+                        <div className="space-y-2">
+                            <p>Up to</p>
+                            <h3>4x faster</h3>
+                            <p>pro rendering performance than M2</p>
+                        </div>
+                        <div className="space-y-2">
+                            <p>Up to</p>
+                            <h3>1.5x faster</h3>
+                            <p>CPU performance than M2</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+export default Showcase

src/constants/index.js

@@ -7,6 +7,7 @@ const navLinks = [
     { label: "AirPods" },
 ];
 
+
 const noChangeParts = [
     "Object_84",
     "Object_37",