diff --git a/public/apple_emojis/bust-in-silhouette.png b/public/apple_emojis/bust-in-silhouette.png new file mode 100644 index 0000000000..40607d093a Binary files /dev/null and b/public/apple_emojis/bust-in-silhouette.png differ diff --git a/public/apple_emojis/compass.png b/public/apple_emojis/compass.png new file mode 100644 index 0000000000..e182becd9b Binary files /dev/null and b/public/apple_emojis/compass.png differ diff --git a/public/apple_emojis/people-with-bunny-ears.png b/public/apple_emojis/people-with-bunny-ears.png new file mode 100644 index 0000000000..d1d62261ba Binary files /dev/null and b/public/apple_emojis/people-with-bunny-ears.png differ diff --git a/public/apple_emojis/sparkles.png b/public/apple_emojis/sparkles.png new file mode 100644 index 0000000000..532afeea06 Binary files /dev/null and b/public/apple_emojis/sparkles.png differ diff --git a/public/apple_emojis/speech-balloon.png b/public/apple_emojis/speech-balloon.png new file mode 100644 index 0000000000..4fca65a66e Binary files /dev/null and b/public/apple_emojis/speech-balloon.png differ diff --git a/public/apple_emojis/star.png b/public/apple_emojis/star.png new file mode 100644 index 0000000000..04196162d3 Binary files /dev/null and b/public/apple_emojis/star.png differ diff --git a/public/apple_emojis/technologist.png b/public/apple_emojis/technologist.png new file mode 100644 index 0000000000..fb9f2f4739 Binary files /dev/null and b/public/apple_emojis/technologist.png differ diff --git a/public/apple_emojis/unlocked.png b/public/apple_emojis/unlocked.png new file mode 100644 index 0000000000..3ef4ff6f32 Binary files /dev/null and b/public/apple_emojis/unlocked.png differ diff --git a/src/app/(marketing)/create-profile/_components/Benefits.tsx b/src/app/(marketing)/create-profile/_components/Benefits.tsx index e9c2fd4a92..923d5c957a 100644 --- a/src/app/(marketing)/create-profile/_components/Benefits.tsx +++ b/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

- {BENEFITS.map(({ title, description, isAvailable }) => ( + {BENEFITS.map(({ title, description, isAvailable, image }) => ( { { "bg-muted": !isAvailable } )} > - # +

{title}

diff --git a/src/app/(marketing)/create-profile/constants.ts b/src/app/(marketing)/create-profile/constants.ts index a2f9fe6a8d..97d0c0bda3 100644 --- a/src/app/(marketing)/create-profile/constants.ts +++ b/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 }[]