flying cars added

app/components/flyingCars.tsx

@@ -1,74 +1,112 @@
-/*
 "use client"
 
 import { useEffect, useState, useRef, PropsWithChildren } from 'react';
-import car from "@/public/car.svg"
+import futureCarOne from "@/public/cars/flyingCar.svg"
+import futureCarTwo from "@/public/cars/flyingCar-1.svg"
+import futureCarThree from "@/public/cars/flyingCar-2.svg"
 import { gsap } from "gsap";
+import { useGSAP } from "@gsap/react";
 import Image from 'next/image'
 
-const widthSize = () => {
-  const [currentWidth, setWidth] = useState({ width: 0 });
+function WidthSize () {
+  const [currentWidth, setWidth] = useState({ width: window.innerWidth });
+  const prevWidthRef = useRef(currentWidth.width);
 
   useEffect(() => {
     function handleResize() {
-      setWidth({
-        width: window.innerWidth,
+      const newWidth = window.innerWidth;
+      setWidth(prev => {
+        prevWidthRef.current = prev.width;
+        return { width: newWidth };
       });
     }
 
     handleResize();
     window.addEventListener('resize', handleResize);
-
-    return window.removeEventListener('resize', handleResize);
   }, []);
 
-  return currentWidth;
+  return { ...currentWidth, oldWidth: prevWidthRef.current };
 };
 
 type Props = {
   speed: number,
-  rotation?: number,
-  movement?: number,
-  margin?: number
+  src: string,
+  hover: number[][],
+  scaleX?: number,
+  endpoint?: number,
+  left?: number,
+  right?: number
 }
 
 function FlyCar(props: PropsWithChildren<Props>) {
+  const { width, oldWidth } = WidthSize();
+  const container = useRef(null);
   const carRef = useRef(null);
-  const { width } = widthSize();
+  const hoverRef = useRef(null);
 
-  
-  useEffect(() => {
+  useGSAP(() => {
     gsap.to(carRef.current, {
-      x: props.movement || width + 200,
+      x: props.endpoint || width + 210,
       duration: props.speed,
       ease: "none",
       repeat: -1,
       yoyo: true,
       onRepeat: function() {
-        const currentScaleX = gsap.getProperty(carRef.current, "scaleX");
+        const currentScaleX = gsap.getProperty(carRef.current, "scaleX") as number;
         const newScaleX = currentScaleX === 1 ? -1 : 1;
         gsap.set(carRef.current, { scaleX: newScaleX });
       }
+    });
+
+    if (width !== oldWidth) {
+      gsap.set(carRef.current, { x: props.endpoint || width + 225 });
     }
-    );
-  }, [width]);
-  
+
+    gsap.to(hoverRef.current, {
+      y: 4,
+      duration: 2,
+      opacity: 1,
+      ease: "none",
+      repeat: -1,
+      yoyo: true,
+    });
+
+  }, {scope: container});
+
   return (
-    <Image src={car} alt="" ref={carRef} width={200} className="mt-8"
-      style={{ transform: `scaleX(${props.rotation || 1})`, marginLeft: props.margin || -195 }}>
-    </Image>
+    <div
+    ref={carRef}
+    className="relative mt-[3.5rem] md:mt-[5rem] w-[13rem] h-[auto]"
+    style={{
+      transform: `scaleX(${props.scaleX || 1})`,
+      right: props.right,
+      left: props.left
+    }}>
+    <Image src={props.src} alt="" className="w-[13rem] h-[auto]"/>
+    <div className="flex flex-row opacity-0" ref={hoverRef}>
+      {props.hover.map((margin: number[]) => (
+        <svg className="mt-1 w-[2rem] h-[auto] fill-[#5ccbe5]" viewBox="0 0 40 12"
+        style={{
+          marginLeft: margin[0],
+          transform: `rotate(${margin[1]}deg)`
+        }}>
+          <rect y="0" width="40" height="4" rx="1.98" ry="1.98"/>
+          <rect x="10" y="8" width="20" height="4" rx="1.98" ry="1.98"/>
+          </svg>
+        ))}
+      </div>
+    </div>
   );
 }
 
 export default function flyingCars() {
-  const { width } = widthSize();
+  const { width } = WidthSize();
 
   return (
-    <div className="absolute overflow-hidden">
-      <FlyCar speed={16}/>
-      <FlyCar speed={18} rotation={-1} movement={-(width + 185)} margin={width - 20} />
-      <FlyCar speed={14}/>
+    <div className="absolute overflow-hidden h-[32rem] w-[98vw]">
+      <FlyCar src={futureCarOne} speed={16} right={210} hover={[[50], [50]]}/>
+      <FlyCar src={futureCarTwo} speed={18} left={width} hover={[[25, 5], [100]]} scaleX={-1} endpoint={-(width + 210)} />
+      <FlyCar src={futureCarThree} speed={14} right={210} hover={[[9, 3], [45, 3], [45, 3]]}/>
     </div>
   )
-}
-*/
+}

app/landing/Hero.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import Logo from "./Logo";
+import FlyingCars from "../components/flyingCars"
 import Link from "next/link";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 
@@ -25,6 +26,7 @@ export default function Hero() {
 
   return (
     <div className="min-h-[80vh]">
+      <FlyingCars />
       <div className="flex flex-col items-center justify-center p-8 pt-0">
         <Logo />
         <h1

app/register/page.tsx

@@ -23,7 +23,7 @@ export default function Register() {
     <>
       <NavBar />
       <div className="flex h-[80vh] items-center justify-center border-0">
-        <Card className="bg-ocean-400 rounded-2xl rounded-xl border-none">
+        <Card className="bg-ocean-400 rounded-2xl border-none">
           <CardHeader>
             <CardTitle>Register</CardTitle>
             <CardDescription>

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@auth/prisma-adapter": "^1.4.0",
     "@aws-sdk/client-ses": "^3.515.0",
+    "@gsap/react": "^2.1.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@prisma/client": "^5.9.1",
@@ -24,6 +25,7 @@
     "@vercel/blob": "^0.22.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.5",
+    "gsap": "^3.12.5",
     "hamburger-react": "^2.5.0",
     "next": "14.1.0",
     "next-auth": "^4.24.6",