"use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { TrendingUpIcon, RocketIcon, DollarSignIcon, HeadphonesIcon, BrainCircuitIcon, ClipboardListIcon, type LucideProps, } from "lucide-react" import Image from "next/image" import { DM_Sans } from "next/font/google" const dmSans = DM_Sans({ subsets: ["latin"], weight: ["400", "500", "700"], }) // Icon mapping const iconComponents: { [key: string]: React.FC } = { TrendingUp: TrendingUpIcon, Rocket: RocketIcon, DollarSign: DollarSignIcon, Headphones: HeadphonesIcon, BrainCircuit: BrainCircuitIcon, ClipboardList: ClipboardListIcon, } interface FeatureOption { id: string title: string iconName: keyof typeof iconComponents imageUrl: string imageAlt: string } const featureOptionsData: FeatureOption[] = [ { id: "quick-brainstorm", title: "Marketing Strategy", iconName: "TrendingUp", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/footer/discord-footer-cover.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2Zvb3Rlci9kaXNjb3JkLWZvb3Rlci1jb3Zlci5wbmciLCJpYXQiOjE3NDgxMTgzOTEsImV4cCI6MTkwNTc5ODM5MX0.qo7Ie6xJFOZqA2XoFgfZL5oLd77udGNx_ch9oeq0PgU", imageAlt: "Marketing Strategy", }, { id: "crazy-8s", title: "Product Launch", iconName: "Rocket", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/herp/island-hero-cover_template.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2hlcnAvaXNsYW5kLWhlcm8tY292ZXJfdGVtcGxhdGUucG5nIiwiaWF0IjoxNzQ4MzkxMDgwLCJleHAiOjE5MDYwNzEwODB9.uCmR6hh-QhlaORlD9w63d5OkdUp0jo5dbRpGf6a4I6c", imageAlt: "Product Launch", }, { id: "four-actions", title: "Sales Strategy", iconName: "DollarSign", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/faq/solid-faq-cover.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZhcS9zb2xpZC1mYXEtY292ZXIucG5nIiwiaWF0IjoxNzQ4NTMxNTgwLCJleHAiOjE5MDYyMTE1ODB9.o1i6iJzbQ3AnnOKMTcbIuDH35JO21Tl-ZvTeSxnAD4o", imageAlt: "Sales Strategy", }, { id: "reverse-brainstorming", title: "Customer Support", iconName: "Headphones", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/features/threebento-cover.png?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV81ZDBhNTNlMy1mNGQwLTRiNjgtYTY0NS1jMjM3YzhmNGQxZWYiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZlYXR1cmVzL3RocmVlYmVudG8tY292ZXIucG5nIiwiaWF0IjoxNzQ5MDIxNDExLCJleHAiOjE5MDY3MDE0MTF9.mRIMSJAWK9csZG0w-ifdYoB1rX18oUfwGSLidRGbt2s", imageAlt: "Customer Support", }, { id: "retrospective", title: "AI Engineering", iconName: "BrainCircuit", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/features/gridy-cover_template.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZlYXR1cmVzL2dyaWR5LWNvdmVyX3RlbXBsYXRlLnBuZyIsImlhdCI6MTc0ODgxNDg1OCwiZXhwIjoxOTA2NDk0ODU4fQ.r4jzF-CLBa2PqEXay5-7b3jRsHa9koGrduzseWBysfE", imageAlt: "AI Engineering", }, { id: "roadmap-planning", title: "Product Management", iconName: "ClipboardList", imageUrl: "https://fwwyhbnhazkzcbarefpw.supabase.co/storage/v1/object/sign/component-covers/features/spaces-cover_template.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InN0b3JhZ2UtdXJsLXNpZ25pbmcta2V5XzVkMGE1M2UzLWY0ZDAtNGI2OC1hNjQ1LWMyMzdjOGY0ZDFlZiJ9.eyJ1cmwiOiJjb21wb25lbnQtY292ZXJzL2ZlYXR1cmVzL3NwYWNlcy1jb3Zlcl90ZW1wbGF0ZS5wbmciLCJpYXQiOjE3NDg4MTUwMDMsImV4cCI6MTkwNjQ5NTAwM30.D6LYsEHxC-1NLLxafC5asDzvG5K_NtfSqZOI74XFYU4", imageAlt: "Product Management", }, ] interface OptionItemProps { option: FeatureOption isActive: boolean onClick: () => void } const OptionItem: React.FC = ({ option, isActive, onClick }) => { const [isHovered, setIsHovered] = useState(false) const IconComponent = iconComponents[option.iconName] const isIconVisible = isActive || isHovered return ( setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} className="flex items-center w-full text-left py-4 pr-4 border-b border-gray-300 group focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-50 rounded-sm" aria-pressed={isActive} > {option.title} ) } export default function TabyFeatures() { const [selectedOptionId, setSelectedOptionId] = useState(featureOptionsData[0].id) const selectedOption = featureOptionsData.find((opt) => opt.id === selectedOptionId) || featureOptionsData[0] return (

Well crafted prompt templates

AI prompt templates to help you get started with your next project. Just copy and paste the prompt into your AI tool and you're good to go.

{featureOptionsData.map((option) => ( setSelectedOptionId(option.id)} /> ))}

) }

Taby Content