a

app/components/sticky.tsx

@@ -22,7 +22,7 @@ export function Sticky({
   start?: number;
   end?: number | string;
   target?: string;
-  snap:
+  snap?:
     | number
     | number[]
     | "labels"

app/footer.tsx

@@ -6,7 +6,10 @@ import { useEffect } from "react";
 export const Footer = () => {
   return (
     <>
-      <footer className="h-screen relative z-0 w-full flex flex-col justify-between dark bg-black text-white">
+      <footer
+        data-cursor="-inverse"
+        className="h-screen relative z-0 w-full flex flex-col justify-between dark bg-black text-white"
+      >
         <div className="container font-display flex flex-col mt-12 justify-center h-full items-center">
           <h2 className="text-4xl text-center sm:text-5xl font-medium">
             Have a project in mind?

app/globals.css

@@ -51,8 +51,9 @@ span[data-scroll] {
   }
 }
 
+
 @keyframes scroll {
   0% {  transform: scaleY(0%) scaleX(0%); }
   50% { transform: scaleY(100%); }
   100% {  transform: scaleY(0%) scaleX(0%); }
-}
+}

app/layout.tsx

@@ -6,6 +6,7 @@ import Nav from "./nav";
 import { Footer } from "./footer";
 import { LenisProvider } from "./lenis";
 import Preloader from "./preloader";
+import "./cursor.css";
 
 const inter = localFont({
   src: [

app/page.tsx

@@ -3,14 +3,16 @@ import Image from "next/image";
 import Logo from "./components/logo";
 import { Hero } from "./hero";
 import { Teto } from "./teto";
-import Works from "./works";
-import Method from "./method";
+import Works from "./works/works";
 
 export default function Home() {
   return (
     <main>
       <Hero />
-      <div className="py-32 w-full bg-black dark text-white flex flex-wrap gap-8 justify-between">
+      <div
+        data-cursor="-inverse"
+        className="py-32 w-full bg-black dark text-white flex flex-wrap gap-8 justify-between"
+      >
         <div className=" container grid  sm:grid-cols-[2.5fr_3fr_0.5fr] justify-between">
           <h2 className="text-sm mb-8 sm:text-xl font-medium font-display">
             WHO WE ARE
@@ -40,16 +42,14 @@ export default function Home() {
 
       <Works />
       <div className="py-20 container h-screen">
-        <h2 className="text-3xl font-display font-bold ">Specialties</h2>
-        <ul className="xl:text-8xl font-medium [&>*:hover]:text-red-500 [&>*]:text-gray-12 [&>*]:transition font-display space-y-4 mt-8">
+        <h2 className="text-3xl font-display font-bold ">Services we offer</h2>
+        <ul className="xl:text-5xl font-medium [&>*:hover]:text-red-500 [&>*]:text-gray-12 [&>*]:transition font-display space-y-4 mt-8">
           <li>UI design</li>
           <li>Full-stack development</li>
           <li>Branding</li>
           <li>Product design</li>
         </ul>
       </div>
-
-    <Method />
     </main>
   );
 }

app/preloader.tsx

@@ -7,12 +7,21 @@ import { SplitText } from "@/lib/splitText.js";
 
 let resolver: (v?: any) => void;
 
+export let cursor: any;
+
+import MouseFollower from "mouse-follower";
+
 export const promise = new Promise((resolve) => {
   resolver = resolve;
 });
 
 const Loader = () => {
   useEffect(() => {
+    MouseFollower.registerGSAP(gsap);
+
+    cursor = new MouseFollower({
+      speed: 0.3,
+    });
     // const pageAccessedByReload =
     //   (window.performance.navigation &&
     //     window.performance.navigation.type === 1) ||

app/works/project.tsx

@@ -0,0 +1,41 @@
+"use client";
+import Image from "next/image";
+import { useEffect } from "react";
+import { cursor } from "../preloader";
+import Link from "next/link";
+
+export const Project = ({
+  img,
+  name,
+  desc,
+  type,
+  slug,
+}: {
+  img: string;
+  name: string;
+  desc: string;
+  type: string;
+  slug: string;
+}) => {
+  return (
+    <Link
+      href={`/projects/${slug}`}
+      className="relative project-overview"
+      data-cursor-text="↗"
+    >
+      <Image
+        alt=""
+        className="rounded-lg"
+        src={img}
+        width={1000}
+        height={500}
+      />
+
+      <div className="text-2xl mt-4 font-semibold font-display">
+        {name}{" "}
+        <span className="text-gray-11 font-normal text-lg">- {type}</span>
+      </div>
+      <div className="text-gray-11 mt-1">{desc}</div>
+    </Link>
+  );
+};

app/works.tsx → app/works/works.tsx

@@ -1,4 +1,7 @@
 import Image from "next/image";
+import Link from "next/link";
+import { Project } from "./project";
+
 const ProjectDetails = () => {
   return (
     <div className="grid grid-cols-[1.4fr_1fr] gap-12">
@@ -41,50 +44,29 @@ const ProjectDetails = () => {
   );
 };
 
-const Project = ({
-  img,
-  name,
-  desc,
-  type,
-}: {
-  img: string;
-  name: string;
-  desc: string;
-  type: string;
-}) => {
-  return (
-    <div className="relative">
-      <Image
-        alt=""
-        className="rounded-lg"
-        src={img}
-        width={1000}
-        height={500}
-      />
-
-      <div className="text-2xl mt-4 font-semibold font-display">
-        {name}{" "}
-        <span className="text-gray-11 font-normal text-lg">- {type}</span>
-      </div>
-      <div className="text-gray-11 mt-1">{desc}</div>
-    </div>
-  );
-};
-
 const Works = () => {
   return (
     <div className="container py-32">
-      <h2 className="font-display text-3xl font-semibold text-center">
-        RECENT WORKS ↓
-      </h2>
-
+      <div className="flex items-end  sm:px-6 py-4 flex-wrap gap-8 justify-between">
+        <h2 className="font-display text-3xl sm:text-5xl font-semibold text-center">
+          RECENT WORKS <span className="hidden sm:inline-block">↓</span>
+        </h2>
+        <div className=" text-xl text-center">
+          <Link
+            href=""
+            className="hover:underline decoration-gray-11 underline-offset-8"
+          >
+            See more &rarr;
+          </Link>
+        </div>
+      </div>
       <div className="mt-8 grid sm:grid-cols-2 gap-8">
         <Project
           name="Devbench"
           desc="Developer forum"
           type="Website"
           img={"/devbench.png"}
-        />{" "}
+        />
         <Project
           name="Vignette"
           type="Website"

package.json

@@ -25,6 +25,7 @@
     "gsap": "^3.12.3",
     "leva": "^0.9.35",
     "lucide-react": "^0.295.0",
+    "mouse-follower": "^1.1.2",
     "next": "14.0.4",
     "prop-types": "^15.8.1",
     "react": "^18",