Multistep Onboarding Flow (AIO)

1'use client';
2 
3import { Testimonials } from '@/components/ui/testimonials';
4 
5const QUOTES = [
6  {
7    quote:
8      'This has completely reshaped how our team thinks about onboarding. The flow is intuitive, the defaults feel right, and our activation numbers jumped within the very first week of rolling it out.',
9    cite: 'Maya Chen, CTO',
10  },
11  {
12    quote:
13      'Adopting it saved our small engineering team months of work. The primitives are flexible enough to fit our brand, secure enough for our enterprise customers, and the team behind it actually listens to feedback and ships fixes fast.',
14    cite: 'Jordan Whitfield, Head of Engineering',
15  },
16  {
17    quote:
18      "We rebuilt our entire signup experience in an afternoon. It's easily the best developer experience we've had all year.",
19    cite: 'Priya Anand, Co-founder',
20  },
21];
22 
23export default function WelcomeLayout({ children }: { children: React.ReactNode }) {
24  return (
25    <div className='grid flex-1 grid-cols-1 lg:grid-cols-2'>
26      <main className='mx-auto flex w-full max-w-lg flex-1 flex-col'>
27        <div className='flex-1 px-4 py-16 lg:px-12'>
28          <header className='mb-16 flex items-center justify-center'>
29            <svg
30              fill='none'
31              viewBox='0 0 136 26'
32              className='h-7 w-auto'
33              xmlns='http://www.w3.org/2000/svg'
34              role='img'
35              aria-label='Acme'
36            >
37              <g clipPath='url(#acme-logo-clip)'>
38                <path
39                  fill='currentColor'
40// … truncated