diff --git a/src/components/Members.tsx b/src/components/Members.tsx
index d34964a..43cd92f 100644
--- a/src/components/Members.tsx
+++ b/src/components/Members.tsx
@@ -3,19 +3,12 @@ import 'swiper/css'
 import 'swiper/css/navigation'
 
 import { Loader } from 'lucide-react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { Swiper as SwiperType } from 'swiper'
 import { Autoplay } from 'swiper/modules'
-import {
-  Swiper,
-  type SwiperProps,
-  SwiperRef,
-  SwiperSlide,
-  useSwiper,
-} from 'swiper/react'
+import { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react'
 
+import { Card } from '@/components/ui/focus-cards'
 import { SECTION_IDS } from '@/constants'
 import { supabase } from '@/lib/supabase/client'
 
@@ -26,20 +19,20 @@ const swiperConfig: SwiperProps = {
   loop: true,
   navigation: false,
   autoplay: {
-    delay: 1500,
+    delay: 1400,
     disableOnInteraction: false,
     pauseOnMouseEnter: true,
   },
 
   breakpoints: {
     768: {
-      slidesPerView: 2.4,
+      slidesPerView: 2.2,
     },
     1024: {
-      slidesPerView: 3.7,
+      slidesPerView: 3.2,
     },
     1280: {
-      slidesPerView: 5.3,
+      slidesPerView: 4.8,
     },
   },
 }
@@ -60,6 +53,7 @@ export interface Member {
 const Members = () => {
   const [members, setMembers] = useState<Member[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [hovered, setHovered] = useState<number | null>(null)
 
   useEffect(() => {
     const fetchMembers = async () => {
@@ -73,7 +67,16 @@ const Members = () => {
   }, [])
 
   return (
-    <div id={SECTION_IDS.OUR_TEAM}>
+    <div
+      id={SECTION_IDS.OUR_TEAM}
+      className={`
+        my-10
+
+        lg:my-20
+
+        md:my-16
+      `}
+    >
       <h2
         className={`
           text-center font-bebas-neue text-4xl uppercase
@@ -106,34 +109,20 @@ const Members = () => {
             md:mt-8
           `}
         >
-          {members.map((m) => (
+          {members.map((m, _index) => (
             <SwiperSlide key={m.id}>
-              <Link href={`/members/${m.id}`}>
-                <div
-                  className={`
-                    relative h-80 w-full overflow-hidden rounded-lg
-
-                    md:h-96
-                  `}
-                >
-                  <Image
-                    src={
-                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdBWB76EZKUgHdARYa-XNyIzoiJiUiyKiFrg&s'
-                    }
-                    className="object-cover object-center"
-                    alt=""
-                    sizes="auto"
-                    fill
-                  />
-                </div>
-                <div className="my-4">
-                  <p className="font-bebas-neue text-2xl leading-none">
-                    {m.name}
-                  </p>
-                  <p className="font-pp-neue-montreal text-lg leading-none">
-                    {m.role}
-                  </p>
-                </div>
+              <Link href={`/members/${m.id}`} className="relative">
+                <Card
+                  key={m.id}
+                  card={{
+                    src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdBWB76EZKUgHdARYa-XNyIzoiJiUiyKiFrg&s',
+                    title: m.name,
+                  }}
+                  role={m.role}
+                  index={_index}
+                  hovered={hovered}
+                  setHovered={setHovered}
+                />
               </Link>
             </SwiperSlide>
           ))}
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 1b4c44b..baebd9b 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,7 +1,132 @@
+import { HeroParallax } from '@/components/ui/hero-parallax'
 import { SECTION_IDS } from '@/constants'
 
+export const products = [
+  {
+    title: 'Moonbeam',
+    link: 'https://gomoonbeam.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
+  },
+  {
+    title: 'Moonbeam',
+    link: 'https://gomoonbeam.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
+  },
+  {
+    title: 'Moonbeam',
+    link: 'https://gomoonbeam.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
+  },
+  {
+    title: 'Moonbeam',
+    link: 'https://gomoonbeam.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
+  },
+  {
+    title: 'Moonbeam',
+    link: 'https://gomoonbeam.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
+  },
+  {
+    title: 'Cursor',
+    link: 'https://cursor.so',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/cursor.png',
+  },
+  {
+    title: 'Rogue',
+    link: 'https://userogue.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/rogue.png',
+  },
+
+  {
+    title: 'Editorially',
+    link: 'https://editorially.org',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/editorially.png',
+  },
+  {
+    title: 'Editrix AI',
+    link: 'https://editrix.ai',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/editrix.png',
+  },
+  {
+    title: 'Pixel Perfect',
+    link: 'https://app.pixelperfect.quest',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/pixelperfect.png',
+  },
+
+  {
+    title: 'Algochurn',
+    link: 'https://algochurn.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/algochurn.png',
+  },
+  {
+    title: 'Aceternity UI',
+    link: 'https://ui.aceternity.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/aceternityui.png',
+  },
+  {
+    title: 'Tailwind Master Kit',
+    link: 'https://tailwindmasterkit.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/tailwindmasterkit.png',
+  },
+  {
+    title: 'SmartBridge',
+    link: 'https://smartbridgetech.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/smartbridge.png',
+  },
+  {
+    title: 'Renderwork Studio',
+    link: 'https://renderwork.studio',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/renderwork.png',
+  },
+
+  {
+    title: 'Creme Digital',
+    link: 'https://cremedigital.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/cremedigital.png',
+  },
+  {
+    title: 'Golden Bells Academy',
+    link: 'https://goldenbellsacademy.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/goldenbellsacademy.png',
+  },
+  {
+    title: 'Invoker Labs',
+    link: 'https://invoker.lol',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/invoker.png',
+  },
+  {
+    title: 'E Free Invoice',
+    link: 'https://efreeinvoice.com',
+    thumbnail:
+      'https://aceternity.com/images/products/thumbnails/new/efreeinvoice.png',
+  },
+]
+
 const Projects = () => {
-  return <div id={SECTION_IDS.PROJECTS}>Projects</div>
+  return (
+    <div id={SECTION_IDS.PROJECTS}>
+      <HeroParallax products={products} />
+    </div>
+  )
 }
 
 export default Projects
diff --git a/src/components/ui/focus-cards.tsx b/src/components/ui/focus-cards.tsx
new file mode 100644
index 0000000..9cf901e
--- /dev/null
+++ b/src/components/ui/focus-cards.tsx
@@ -0,0 +1,84 @@
+'use client'
+import Image from 'next/image'
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export const Card = React.memo(
+  ({
+    role,
+    card,
+    index,
+    hovered,
+    setHovered,
+  }: {
+    card: {
+      title: string
+      src: string
+    }
+    role: string
+    index: number
+    hovered: number | null
+    setHovered: React.Dispatch<React.SetStateAction<number | null>>
+  }) => (
+    <div
+      onMouseEnter={() => setHovered(index)}
+      onMouseLeave={() => setHovered(null)}
+      className={cn(
+        `
+          relative h-80 w-full overflow-hidden rounded-lg bg-gray-100
+          transition-all duration-300 ease-out
+
+          dark:bg-neutral-900
+
+          md:h-96
+        `,
+        hovered !== null && hovered !== index && 'blur-sm scale-[0.98]',
+      )}
+    >
+      <Image
+        src={card.src}
+        alt={card.title}
+        fill
+        className="absolute inset-0 object-cover"
+      />
+      <div
+        className={cn(
+          `
+            absolute inset-0 flex items-end bg-black/50 px-4 py-8
+            transition-opacity duration-300
+          `,
+          hovered === index ? 'opacity-100' : 'opacity-0',
+        )}
+      >
+        <div>
+          <p
+            className={`
+              bg-gradient-to-b from-neutral-50 to-neutral-200 bg-clip-text
+              font-bebas-neue text-xl font-medium text-transparent
+
+              md:text-3xl
+            `}
+          >
+            {card.title}
+          </p>
+          <p
+            className={`
+              bg-gradient-to-b from-neutral-50 to-neutral-200 bg-clip-text
+              font-bebas-neue text-lg text-transparent
+            `}
+          >
+            {role}
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+)
+
+Card.displayName = 'Card'
+
+type Card = {
+  title: string
+  src: string
+}
diff --git a/src/components/ui/hero-parallax.tsx b/src/components/ui/hero-parallax.tsx
new file mode 100644
index 0000000..c264724
--- /dev/null
+++ b/src/components/ui/hero-parallax.tsx
@@ -0,0 +1,211 @@
+'use client'
+
+import {
+  motion,
+  type MotionValue,
+  useScroll,
+  useSpring,
+  useTransform,
+} from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+export const HeroParallax = ({
+  products,
+}: {
+  products: {
+    title: string
+    link: string
+    thumbnail: string
+  }[]
+}) => {
+  const firstRow = products.slice(0, 5)
+  const secondRow = products.slice(5, 10)
+  const thirdRow = products.slice(10, 15)
+  const ref = React.useRef(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start start', 'end start'],
+  })
+
+  const springConfig = { stiffness: 300, damping: 30, bounce: 100 }
+
+  const translateX = useSpring(
+    useTransform(scrollYProgress, [0, 1], [0, 1000]),
+    springConfig,
+  )
+  const translateXReverse = useSpring(
+    useTransform(scrollYProgress, [0, 1], [0, -1000]),
+    springConfig,
+  )
+  const rotateX = useSpring(
+    useTransform(scrollYProgress, [0, 0.2], [15, 0]),
+    springConfig,
+  )
+  const opacity = useSpring(
+    useTransform(scrollYProgress, [0, 0.2], [0.2, 1]),
+    springConfig,
+  )
+  const rotateZ = useSpring(
+    useTransform(scrollYProgress, [0, 0.2], [20, 0]),
+    springConfig,
+  )
+  const translateY = useSpring(
+    useTransform(scrollYProgress, [0, 0.2], [-700, 500]),
+    springConfig,
+  )
+  return (
+    <div
+      ref={ref}
+      className={`
+        relative flex h-[300vh] flex-col self-auto overflow-hidden py-0
+        antialiased
+
+        [perspective:1000px]
+
+        [transform-style:preserve-3d]
+      `}
+    >
+      <Header />
+      <motion.div
+        style={{
+          rotateX,
+          rotateZ,
+          translateY,
+          opacity,
+        }}
+      >
+        <motion.div
+          className={`
+          mb-20 flex flex-row-reverse space-x-20 space-x-reverse
+        `}
+        >
+          {firstRow.map((product) => (
+            <ProductCard
+              product={product}
+              translate={translateX}
+              key={product.title}
+            />
+          ))}
+        </motion.div>
+        <motion.div className="mb-20 flex flex-row space-x-20">
+          {secondRow.map((product) => (
+            <ProductCard
+              product={product}
+              translate={translateXReverse}
+              key={product.title}
+            />
+          ))}
+        </motion.div>
+        <motion.div className="flex flex-row-reverse space-x-20 space-x-reverse">
+          {thirdRow.map((product) => (
+            <ProductCard
+              product={product}
+              translate={translateX}
+              key={product.title}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+    </div>
+  )
+}
+
+export const Header = () => {
+  return (
+    <div
+      className={`
+      relative left-0 top-0 mx-auto w-full max-w-7xl px-4 py-20
+
+      md:py-40
+    `}
+    >
+      <h2
+        className={`
+        font-bebas-neue text-3xl font-bold
+
+        dark:text-white
+
+        md:text-8xl
+      `}
+      >
+        our projects
+      </h2>
+      <p
+        className={`
+        mt-8 max-w-2xl font-pp-neue-montreal text-base
+
+        dark:text-neutral-200
+
+        md:text-xl
+      `}
+      >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi ab
+        similique cum eos iure inventore incidunt iste repudiandae ratione
+        aperiam voluptates sed ullam provident beatae, laudantium distinctio
+        itaque vitae doloremque.
+      </p>
+    </div>
+  )
+}
+
+export const ProductCard = ({
+  product,
+  translate,
+}: {
+  product: {
+    title: string
+    link: string
+    thumbnail: string
+  }
+  translate: MotionValue<number>
+}) => {
+  return (
+    <motion.div
+      style={{
+        x: translate,
+      }}
+      whileHover={{
+        y: -20,
+      }}
+      key={product.title}
+      className="group/product relative h-96 w-[30rem] shrink-0"
+    >
+      <Link
+        href={product.link}
+        className={`
+          block
+
+          group-hover/product:shadow-2xl
+        `}
+      >
+        <Image
+          src={product.thumbnail}
+          height="600"
+          width="600"
+          className={`
+            absolute inset-0 size-full rounded-lg object-cover object-left-top
+          `}
+          alt={product.title}
+        />
+      </Link>
+      <div
+        className={`
+        pointer-events-none absolute inset-0 size-full bg-black opacity-0
+
+        group-hover/product:opacity-80
+      `}
+      ></div>
+      <h2
+        className={`
+        absolute bottom-4 left-4 text-white opacity-0
+
+        group-hover/product:opacity-100
+      `}
+      >
+        {product.title}
+      </h2>
+    </motion.div>
+  )
+}