'use client'; import React from 'react'; import * as Accordion from '@radix-ui/react-accordion'; import { RiAddLine, RiSubtractLine } from '@remixicon/react'; import * as CompactButton from './components/ui/compact-button'; import { cn } from './utils/cn'; type AccordionSectionProps = { value: string; title: string; steps: string[]; isLast?: boolean; }; const AccordionSection = ({ value, title, steps, isLast = false, }: AccordionSectionProps) => (

{title}

{steps} ); const SignUpAccordion = () => { const sections: AccordionSectionProps[] = [ { value: 'web', title: 'Web Browser', steps: [ 'Go to our website', 'Click on Sign Up button', 'Choose your target language', 'Complete registration', ], }, { value: 'mobile', title: 'Mobile App', steps: [ 'Download the app from the App Store or Google Play.', 'Open the app and tap Sign up.', 'Choose your target language and current proficiency level.', 'Select a subscription plan.', 'Sign in with your Apple or Google account.', ], }, { value: 'tablet', title: 'Tablet Devices', steps: [ 'Download tablet version', 'Install the app', 'Follow registration steps', ], }, { value: 'tv', title: 'Smart TV', steps: [ 'Open Smart TV app store', 'Search for our app', 'Install and launch', ], }, ]; return (

How to sign up for the app?

Follow the steps for your preferred device below.

{sections.map((section, index) => ( ))}

); }; const Divider = ({ className }: { className?: string }) => { return (

); }; const AccordionItem = ({ children, value, isLast, }: { children: React.ReactNode; value: string; isLast: boolean; }) => ( {children} {!isLast && } ); const AccordionTrigger = ({ children }: { children: React.ReactNode }) => { return (

(

)} /> (

)} />

{children} ); }; const AccordionContent = ({ children }: { children: React.ReactNode }) => { return (

{index + 1}
{step}

); }; export default SignUpAccordion;