feat: add emoji images

src/app/(marketing)/create-profile/_components/Benefits.tsx

@@ -1,5 +1,6 @@
 import { Card } from "@/components/ui/Card"
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 import { BENEFITS } from "../constants"
 
 export const Benefits = () => {
@@ -12,7 +13,7 @@ export const Benefits = () => {
         All passes provide the same benefits
       </p>
       <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
-        {BENEFITS.map(({ title, description, isAvailable }) => (
+        {BENEFITS.map(({ title, description, isAvailable, image }) => (
           <Card
             className={cn(
               "flex items-center gap-4 border-2 border-transparent p-5",
@@ -34,7 +35,7 @@ export const Benefits = () => {
                 { "bg-muted": !isAvailable }
               )}
             >
-              #
+              <Image src={image} alt="" width={28} height={28} />
             </div>
             <div className="space-y-1">
               <h3 className="font-semibold">{title}</h3>

src/app/(marketing)/create-profile/constants.ts

@@ -1,3 +1,13 @@
+import { StaticImageData } from "next/image"
+import bustInSilhouette from "/public/apple_emojis/bust-in-silhouette.png"
+import compass from "/public/apple_emojis/compass.png"
+import peopleWithBunnyEars from "/public/apple_emojis/people-with-bunny-ears.png"
+import sparkles from "/public/apple_emojis/sparkles.png"
+import speechBalloon from "/public/apple_emojis/speech-balloon.png"
+import star from "/public/apple_emojis/star.png"
+import technologist from "/public/apple_emojis/technologist.png"
+import unlocked from "/public/apple_emojis/unlocked.png"
+
 export const SUBSCRIPTIONS = [
   {
     title: "Single Pass",
@@ -30,49 +40,58 @@ export const BENEFITS = [
     title: "Launch your Guild Profile",
     description: "Your onchain profile with achievements and XP level ",
     isAvailable: true,
+    image: star,
   },
   {
     title: "Unlock exclusive rewards",
     description: "Pass holders can access unique and one-off rewards from guilds",
     isAvailable: true,
+    image: bustInSilhouette,
   },
   {
     title: "Get early access to Guild features",
     description: "Be the first to unlock and experience our newest features",
     isAvailable: true,
+    image: unlocked,
   },
   {
     title: "Priority support",
     description:
       "Get help within hours — even our CEO is answering priority tickets",
     isAvailable: true,
+    image: speechBalloon,
   },
   {
     title: "Manage your personal Guild",
     description:
       "Special access to gamified features to help creators engage their audience",
     isAvailable: false,
+    image: technologist,
   },
   {
     title: "Alpha Explorer",
     description:
       "Unlock secret guilds and earn exclusive rewards before they become popular",
     isAvailable: false,
+    image: compass,
   },
   {
     title: "Be part of Gold community",
     description:
       "Shape Guild's future — your ideas drive what we build and when we build it",
     isAvailable: false,
+    image: peopleWithBunnyEars,
   },
   {
     title: "Very top secret stuff",
     description:
       "There are things we can't tell you just yet — you'll have to see them for yourself",
     isAvailable: false,
+    image: sparkles,
   },
 ] as const satisfies {
   title: string
   description: string
   isAvailable: boolean
+  image: StaticImageData
 }[]