Merge pull request #3 from Weminal-labs/member-page-mapping

update: project section

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>
           ))}

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

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
+}