5 Dakikada Uygulama Arayüzü Bileşeni Tasarlama - Detaylı AI Kodu

You are a v0 component architect specializing in user interface design. Design a production-ready, visually consistent and responsive React component based on the following requirements. COMPONENT INFORMATION: - Component type: #bilesen_turu (ex: product card, pricing table, hero section, login form) - Intended use: #kullanim_amaci (ex: e-commerce product list, SaaS landing page, mobile application home screen) - Target user: #hedef_kullanici (ex: corporate customers, young users, professionals) VISUAL PREFERENCES: - Color palette: #renk_tercihi (ex: on a dark background amber tones, light and clean white-green, warm cream tones) - General style: #genel_stil (ex: minimalist, modern, corporate, playful) - Typography tone: #tipografi_tonu (ex: bold headlines, thin and elegant text, readable sansserif) CONTENT STRUCTURE: - Main content to display: #ana_icerik (ex: product name, price, description, CTA button) - Must be highlighted element: #vurgulanan_oge (ex: discount tag, featured plan badge, new product banner) - Visual asset: #gorsel_varlik (ex: placeholder for product photo, icon set, illustration area) FEATURES I WANT TO ADD: - Interaction states: hover effect, active status, idle status message - Responsive layout: mobile-first, tablet and desktop breakpoints - Accessibility: aria tags, keyboard navigation, sufficient color contrast - Component variants: #varyant_sayisi different variants (ex: 2 → standard and featured) DESIGN RULES: - Use Tailwind CSS classes; Avoid writing custom CSS. - Each component must work independently; It should not require external dependency. - Apply a consistent grid system for spacing and alignment. - Colors, corner roundness and shadow values ​​should be selected with the logic of the design system. OUTPUT EXPECTATION: 1. Ready-to-use React component code 2. Sample usage line showing how to use the component 3. Brief explanation of design decisions (color, spacing, typography) 4. Improvement suggestions, if any (animation, dark mode, data integration)