<div class="flex items-center gap-4">
            <div class="avatar avatar-sm"><span class="avatar-fallback">SM</span></div>
            <div class="avatar"><span class="avatar-fallback">MD</span></div>
            <div class="avatar avatar-lg"><span class="avatar-fallback">LG</span></div>
            <div class="avatar avatar-xl"><span class="avatar-fallback">XL</span></div>
        </div>

<div class="flex flex-wrap gap-2">
            <span class="badge badge-default">Default</span>
            <span class="badge badge-secondary">Secondary</span>
            <span class="badge badge-outline">Outline</span>
            <span class="badge badge-destructive">Destructive</span>
            <span class="badge badge-success">Success</span>
            <span class="badge badge-warning">Warning</span>
        </div>

<div class="flex flex-wrap gap-3">
            <button class="btn">Primary</button>
            <button class="btn btn-outline">Outline</button>
        </div>

<div x-data="dropdown()" class="relative inline-block" @click.outside="close()">
            <button @click="toggle()" class="btn btn-outline">Open Menu</button>
            <div class="dropdown-menu mt-2" :class="{ 'open': open }">
                <a href="#" class="dropdown-item">Profile</a>
                <a href="#" class="dropdown-item">Settings</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Logout</a>
            </div>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label" for="ds-input">Email</label>
            <input type="email" id="ds-input" class="input" placeholder="Enter email" />
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label" for="ds-input-err">Username</label>
            <input type="text" id="ds-input-err" class="input input-error" value="ab" />
            <p class="text-sm text-destructive">Must be at least 3 characters.</p>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label">Company Website</label>
            <div class="mt-2 flex">
                <div class="flex shrink-0 items-center rounded-l-md bg-muted px-3 text-sm text-muted-foreground border border-r-0 border-border">https://</div>
                <input type="text" placeholder="www.example.com" class="input rounded-l-none" />
            </div>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label">Price</label>
            <div class="flex items-center rounded-md bg-card px-3 border border-border focus-within:ring-2 focus-within:ring-ring">
                <span class="shrink-0 text-sm text-muted-foreground select-none">$</span>
                <input type="text" placeholder="0.00" class="block min-w-0 grow py-1.5 px-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none bg-transparent" />
                <span class="shrink-0 text-sm text-muted-foreground select-none">USD</span>
            </div>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label">Email</label>
            <div class="grid grid-cols-1">
                <input type="email" placeholder="[email protected]" class="input col-start-1 row-start-1 pl-10" />
                <svg viewBox="0 0 16 16" fill="currentColor" class="pointer-events-none col-start-1 row-start-1 ml-3 size-4 self-center text-muted-foreground">
                    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                </svg>
            </div>
        </div>

<div class="grid gap-2" style="max-width: 400px;">
            <label class="label">Search</label>
            <div class="flex">
                <div class="grid grow grid-cols-1 -mr-px">
                    <input type="text" placeholder="Search..." class="input rounded-r-none col-start-1 row-start-1 pl-10" />
                    <svg viewBox="0 0 16 16" fill="currentColor" class="pointer-events-none col-start-1 row-start-1 ml-3 size-4 self-center text-muted-foreground">
                        <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
                    </svg>
                </div>
                <button type="button" class="btn rounded-l-none">Search</button>
            </div>
        </div>

<div style="max-width: 300px;">
            <div class="rounded-md bg-card px-3 pt-2.5 pb-1.5 border border-border focus-within:ring-2 focus-within:ring-ring">
                <label class="block text-xs font-medium text-foreground">Name</label>
                <input type="text" placeholder="Jane Smith" class="block w-full text-sm text-foreground placeholder:text-muted-foreground focus:outline-none bg-transparent py-1" />
            </div>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label" for="ds-textarea">Message</label>
            <textarea id="ds-textarea" class="textarea" placeholder="Type your message..."></textarea>
        </div>

<div class="flex items-start space-x-4" style="max-width: 500px;">
            <div class="avatar avatar-lg"><span class="avatar-fallback">JD</span></div>
            <div class="min-w-0 flex-1">
                <form action="#" class="relative">
                    <div class="rounded-lg bg-card border border-border focus-within:ring-2 focus-within:ring-ring">
                        <label for="ta-actions" class="sr-only">Add your comment</label>
                        <textarea id="ta-actions" rows="3" placeholder="Add your comment..." class="block w-full resize-none bg-transparent px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"></textarea>
                        <div aria-hidden="true" class="py-2">
                            <div class="py-px"><div class="h-9"></div></div>
                        </div>
                    </div>
                    <div class="absolute inset-x-0 bottom-0 flex justify-between py-2 pr-2 pl-3">
                        <div class="flex items-center">
                            <button type="button" class="-m-2.5 flex size-10 items-center justify-center rounded-full text-muted-foreground hover:text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                    <path d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" fill-rule="evenodd" />
                                </svg>
                                <span class="sr-only">Attach a file</span>
                            </button>
                        </div>
                        <button type="submit" class="btn btn-sm">Post</button>
                    </div>
                </form>
            </div>
        </div>

<div class="flex items-start space-x-4" style="max-width: 500px;">
            <div class="avatar avatar-lg"><span class="avatar-fallback">JD</span></div>
            <div class="min-w-0 flex-1">
                <form action="#">
                    <div class="border-b border-border pb-px focus-within:border-b-2 focus-within:border-primary focus-within:pb-0">
                        <label for="ta-underline" class="sr-only">Add your comment</label>
                        <textarea id="ta-underline" rows="3" placeholder="Add your comment..." class="block w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"></textarea>
                    </div>
                    <div class="flex justify-between pt-2">
                        <button type="button" class="-m-2 inline-flex size-10 items-center justify-center rounded-full text-muted-foreground hover:text-foreground">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6">
                                <path d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span class="sr-only">Attach a file</span>
                        </button>
                        <button type="submit" class="btn btn-sm">Post</button>
                    </div>
                </form>
            </div>
        </div>

<div class="grid gap-2" style="max-width: 300px;">
            <label class="label" for="ds-select">Framework</label>
            <select id="ds-select" class="select">
                <option value="">Select a framework</option>
                <option value="next">Next.js</option>
                <option value="remix">Remix</option>
                <option value="astro">Astro</option>
            </select>
        </div>

<div class="space-y-3">
            <div class="flex items-center gap-2">
                <input type="checkbox" id="ds-check1" class="checkbox" checked />
                <label class="label" for="ds-check1">Accept terms</label>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" id="ds-check2" class="checkbox" />
                <label class="label" for="ds-check2">Subscribe to newsletter</label>
            </div>
        </div>

<fieldset>
            <legend class="sr-only">Notifications</legend>
            <div class="space-y-5">
                <div class="flex gap-3">
                    <div class="flex h-6 shrink-0 items-center">
                        <input type="checkbox" id="cb-comments" class="checkbox" checked />
                    </div>
                    <div class="text-sm">
                        <label for="cb-comments" class="font-medium text-foreground">Comments</label>
                        <p class="text-muted-foreground">Get notified when someone posts a comment.</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <div class="flex h-6 shrink-0 items-center">
                        <input type="checkbox" id="cb-candidates" class="checkbox" />
                    </div>
                    <div class="text-sm">
                        <label for="cb-candidates" class="font-medium text-foreground">Candidates</label>
                        <p class="text-muted-foreground">Get notified when a candidate applies for a job.</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <div class="flex h-6 shrink-0 items-center">
                        <input type="checkbox" id="cb-offers" class="checkbox" />
                    </div>
                    <div class="text-sm">
                        <label for="cb-offers" class="font-medium text-foreground">Offers</label>
                        <p class="text-muted-foreground">Get notified when a candidate accepts or rejects an offer.</p>
                    </div>
                </div>
            </div>
        </fieldset>

<div class="space-y-3">
            <div class="flex items-center gap-2">
                <input type="radio" id="ds-radio1" name="ds-radio" class="radio" checked />
                <label class="label label-muted" for="ds-radio1">Option A</label>
            </div>
            <div class="flex items-center gap-2">
                <input type="radio" id="ds-radio2" name="ds-radio" class="radio" />
                <label class="label label-muted" for="ds-radio2">Option B</label>
            </div>
        </div>

<fieldset>
            <legend class="text-sm font-semibold text-foreground">Select a plan</legend>
            <div class="mt-4 grid grid-cols-1 gap-y-4 sm:grid-cols-3 sm:gap-x-4">
                <label class="group relative flex rounded-lg border border-border bg-card p-4 has-[:checked]:ring-2 has-[:checked]:ring-primary cursor-pointer">
                    <input type="radio" name="plan-cards" value="starter" checked class="absolute inset-0 appearance-none focus:outline-none" />
                    <div class="flex-1">
                        <span class="block text-sm font-medium text-foreground">Starter</span>
                        <span class="mt-1 block text-sm text-muted-foreground">Perfect for small teams</span>
                        <span class="mt-4 block text-sm font-medium text-foreground">128 users</span>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="invisible size-5 text-primary group-has-[:checked]:visible">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                </label>
                <label class="group relative flex rounded-lg border border-border bg-card p-4 has-[:checked]:ring-2 has-[:checked]:ring-primary cursor-pointer">
                    <input type="radio" name="plan-cards" value="pro" class="absolute inset-0 appearance-none focus:outline-none" />
                    <div class="flex-1">
                        <span class="block text-sm font-medium text-foreground">Pro</span>
                        <span class="mt-1 block text-sm text-muted-foreground">For growing businesses</span>
                        <span class="mt-4 block text-sm font-medium text-foreground">512 users</span>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="invisible size-5 text-primary group-has-[:checked]:visible">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                </label>
            </div>
        </fieldset>

<fieldset aria-label="Choose an option">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-foreground">RAM</span>
            </div>
            <div class="mt-2 grid grid-cols-3 gap-3 sm:grid-cols-6">
                <label class="group relative flex items-center justify-center rounded-md border border-border bg-card p-3 has-[:checked]:border-primary has-[:checked]:ring-2 has-[:checked]:ring-primary cursor-pointer">
                    <input type="radio" name="ram" value="4gb" class="absolute inset-0 appearance-none focus:outline-none" />
                    <span class="text-sm font-medium text-foreground uppercase group-has-[:checked]:text-primary">4 GB</span>
                </label>
                <label class="group relative flex items-center justify-center rounded-md border border-border bg-card p-3 has-[:checked]:border-primary has-[:checked]:ring-2 has-[:checked]:ring-primary cursor-pointer">
                    <input type="radio" name="ram" value="8gb" checked class="absolute inset-0 appearance-none focus:outline-none" />
                    <span class="text-sm font-medium text-foreground uppercase group-has-[:checked]:text-primary">8 GB</span>
                </label>
                <label class="group relative flex items-center justify-center rounded-md border border-border bg-card p-3 has-[:checked]:border-primary has-[:checked]:ring-2 has-[:checked]:ring-primary cursor-pointer">
                    <input type="radio" name="ram" value="16gb" class="absolute inset-0 appearance-none focus:outline-none" />
                    <span class="text-sm font-medium text-foreground uppercase group-has-[:checked]:text-primary">16 GB</span>
                </label>
            </div>
        </fieldset>

<fieldset aria-label="Server size">
            <div class="space-y-4">
                <label class="group relative block rounded-lg border border-border bg-card px-6 py-4 has-[:checked]:ring-2 has-[:checked]:ring-primary sm:flex sm:justify-between cursor-pointer">
                    <input type="radio" name="server" value="hobby" checked class="absolute inset-0 appearance-none focus:outline-none" />
                    <span class="flex items-center">
                        <span class="flex flex-col text-sm">
                            <span class="font-medium text-foreground">Hobby</span>
                            <span class="text-muted-foreground"><span class="block sm:inline">8GB / 4 CPUs</span> <span class="hidden sm:inline">·</span> <span class="block sm:inline">160 GB SSD</span></span>
                        </span>
                    </span>
                    <span class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right">
                        <span class="font-medium text-foreground">$40</span>
                        <span class="ml-1 text-muted-foreground sm:ml-0">/mo</span>
                    </span>
                </label>
                <label class="group relative block rounded-lg border border-border bg-card px-6 py-4 has-[:checked]:ring-2 has-[:checked]:ring-primary sm:flex sm:justify-between cursor-pointer">
                    <input type="radio" name="server" value="startup" class="absolute inset-0 appearance-none focus:outline-none" />
                    <span class="flex items-center">
                        <span class="flex flex-col text-sm">
                            <span class="font-medium text-foreground">Startup</span>
                            <span class="text-muted-foreground"><span class="block sm:inline">12GB / 6 CPUs</span> <span class="hidden sm:inline">·</span> <span class="block sm:inline">256 GB SSD</span></span>
                        </span>
                    </span>
                    <span class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right">
                        <span class="font-medium text-foreground">$80</span>
                        <span class="ml-1 text-muted-foreground sm:ml-0">/mo</span>
                    </span>
                </label>
            </div>
        </fieldset>

<div class="flex items-center gap-3" x-data="switchToggle(true)">
            <button type="button" class="switch" :class="{ 'checked': checked }" @click="toggle()" role="switch" :aria-checked="checked"></button>
            <label class="label">Airplane Mode</label>
        </div>

<input type="range" class="slider" value="50" min="0" max="100" style="max-width: 300px;" />

<div x-data="{ open: false, search: '', selected: '', options: ['Next.js', 'Remix', 'Astro', 'Nuxt', 'SvelteKit'] }" class="relative" style="max-width: 300px;" @click.outside="open = false">
            <label class="label">Framework</label>
            <button @click="open = !open" class="flex w-full items-center justify-between rounded-md border border-border bg-card px-3 py-2 text-sm mt-1.5">
                <span :class="selected ? 'text-foreground' : 'text-muted-foreground'" x-text="selected || 'Select framework...'"></span>
                <svg class="size-4 text-muted-foreground" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
            </button>
            <div x-show="open" x-transition class="absolute z-50 mt-1 w-full rounded-md border border-border bg-card shadow-lg">
                <div class="p-2">
                    <input x-model="search" class="input input-sm w-full" placeholder="Search..." />
                </div>
                <ul class="max-h-48 overflow-auto py-1">
                    <template x-for="option in options.filter(o => o.toLowerCase().includes(search.toLowerCase()))" :key="option">
                        <li @click="selected = option; open = false; search = ''" class="cursor-pointer px-3 py-2 text-sm text-foreground hover:bg-muted flex items-center justify-between" :class="{ 'bg-muted': selected === option }">
                            <span x-text="option"></span>
                            <svg x-show="selected === option" class="size-4 text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" /></svg>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

<div x-data="toggleGroup('center')" class="inline-flex rounded-md border border-border">
            <button @click="toggle('left')" :class="isActive('left') ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50'" class="rounded-l-md px-3 py-2 text-sm font-medium transition-colors">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 3.75A.75.75 0 0 1 2.75 3h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75Zm0 4.167a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0 4.166a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm0 4.167a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /></svg>
            </button>
            <button @click="toggle('center')" :class="isActive('center') ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50'" class="border-x border-border px-3 py-2 text-sm font-medium transition-colors">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 3.75A.75.75 0 0 1 2.75 3h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75Zm3.333 4.167a.75.75 0 0 1 .75-.75h7.834a.75.75 0 0 1 0 1.5H6.083a.75.75 0 0 1-.75-.75ZM2 12.083a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm3.333 4.167a.75.75 0 0 1 .75-.75h7.834a.75.75 0 0 1 0 1.5H6.083a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /></svg>
            </button>
            <button @click="toggle('right')" :class="isActive('right') ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50'" class="rounded-r-md px-3 py-2 text-sm font-medium transition-colors">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 3.75A.75.75 0 0 1 2.75 3h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75Zm6.667 4.167a.75.75 0 0 1 .75-.75h5.833a.75.75 0 0 1 0 1.5H9.417a.75.75 0 0 1-.75-.75ZM2 12.083a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm6.667 4.167a.75.75 0 0 1 .75-.75h5.833a.75.75 0 0 1 0 1.5H9.417a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /></svg>
            </button>
        </div>

<div class="alert alert-default">
            <h5 class="alert-title">Heads up!</h5>
            <div class="alert-description">You can add components using the CLI.</div>
        </div>

<div class="alert alert-success">
            <h5 class="alert-title">Success</h5>
            <div class="alert-description">Your changes have been saved.</div>
        </div>

<div class="alert alert-warning">
            <h5 class="alert-title">Warning</h5>
            <div class="alert-description">Your session expires in 5 minutes.</div>
        </div>

<div class="alert alert-destructive">
            <h5 class="alert-title">Error</h5>
            <div class="alert-description">Something went wrong.</div>
        </div>

<div class="rounded-md bg-red-50 p-4 dark:bg-red-500/15">
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-red-400">
                        <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">There were 2 errors with your submission</h3>
                    <div class="mt-2 text-sm text-red-700 dark:text-red-200/80">
                        <ul role="list" class="list-disc space-y-1 pl-5">
                            <li>Your password must be at least 8 characters</li>
                            <li>Your password must include a special character</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<div class="rounded-md bg-green-50 p-4 dark:bg-green-500/10">
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-green-400">
                        <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-green-800 dark:text-green-200">Order completed</h3>
                    <div class="mt-2 text-sm text-green-700 dark:text-green-200/85">
                        <p>Your order has been processed successfully.</p>
                    </div>
                    <div class="mt-4">
                        <div class="-mx-2 -my-1.5 flex">
                            <button type="button" class="rounded-md bg-green-50 px-2 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100 dark:bg-transparent dark:text-green-200 dark:hover:bg-white/10">View status</button>
                            <button type="button" class="ml-3 rounded-md bg-green-50 px-2 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100 dark:bg-transparent dark:text-green-200 dark:hover:bg-white/10">Dismiss</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="rounded-md bg-blue-50 p-4 dark:bg-blue-500/10">
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-blue-400">
                        <path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3 flex-1 md:flex md:justify-between">
                    <p class="text-sm text-blue-700 dark:text-blue-300">A new software update is available.</p>
                    <p class="mt-3 text-sm md:mt-0 md:ml-6">
                        <a href="#" class="font-medium whitespace-nowrap text-blue-700 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200">Details →</a>
                    </p>
                </div>
            </div>
        </div>

<div class="border-l-4 border-yellow-400 bg-yellow-50 p-4 dark:border-yellow-500 dark:bg-yellow-500/10">
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-yellow-400 dark:text-yellow-500">
                        <path d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">
                        You have no credits left. <a href="#" class="font-medium underline hover:text-yellow-600 dark:hover:text-yellow-200">Upgrade your account.</a>
                    </p>
                </div>
            </div>
        </div>

<div class="rounded-md bg-green-50 p-4 dark:bg-green-500/10">
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-green-400">
                        <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800 dark:text-green-300">Successfully uploaded</p>
                </div>
                <div class="ml-auto pl-3">
                    <div class="-mx-1.5 -my-1.5">
                        <button type="button" class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 dark:bg-transparent dark:text-green-400 dark:hover:bg-green-500/10">
                            <span class="sr-only">Dismiss</span>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="progress" style="max-width: 300px;"><div class="progress-bar" style="width: 60%"></div></div>

<div class="progress" style="max-width: 300px;"><div class="progress-bar progress-bar-indeterminate"></div></div>

<div class="flex items-center gap-4">
            <div class="skeleton skeleton-avatar"></div>
            <div class="space-y-2">
                <div class="skeleton skeleton-text" style="width: 200px"></div>
                <div class="skeleton skeleton-text" style="width: 160px"></div>
            </div>
        </div>

<div x-data="toast()">
            <button @click="add('Changes saved successfully.', 'success')" class="btn">Show Toast</button>
            <div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
                <template x-for="t in toasts" :key="t.id">
                    <div class="rounded-lg border border-border bg-card px-4 py-3 shadow-lg flex items-center gap-3 animate-in slide-in-from-bottom-5"
                         :class="{
                             'border-green-500/30 bg-green-50 dark:bg-green-500/10': t.type === 'success',
                             'border-red-500/30 bg-red-50 dark:bg-red-500/10': t.type === 'destructive'
                         }">
                        <span class="text-sm text-foreground" x-text="t.message"></span>
                        <button @click="remove(t.id)" class="text-muted-foreground hover:text-foreground">
                            <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>
                        </button>
                    </div>
                </template>
            </div>
        </div>

<div class="empty-state text-center py-12">
            <div class="text-4xl mb-4">📭</div>
            <h3 class="font-semibold text-lg">No items yet</h3>
            <p class="text-muted-foreground mt-1">Get started by creating your first item.</p>
            <button class="btn mt-4">Create Item</button>
        </div>

<div class="text-center">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="mx-auto size-12 text-muted-foreground">
                <path d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <h3 class="mt-2 text-sm font-semibold text-foreground">No projects</h3>
            <p class="mt-1 text-sm text-muted-foreground">Get started by creating a new project.</p>
            <div class="mt-6">
                <button type="button" class="btn">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-1.5 -ml-0.5 size-5">
                        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                    </svg>
                    New Project
                </button>
            </div>
        </div>

<button type="button" class="relative block w-full rounded-lg border-2 border-dashed border-border p-12 text-center hover:border-muted-foreground focus:outline-2 focus:outline-offset-2 focus:outline-ring">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" class="mx-auto size-12 text-muted-foreground">
                <path d="M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="mt-2 block text-sm font-semibold text-foreground">Create a new database</span>
        </button>

<div>
            <h2 class="text-base font-semibold text-foreground">Projects</h2>
            <p class="mt-1 text-sm text-muted-foreground">You haven't created a project yet. Get started by selecting a template.</p>
            <ul role="list" class="mt-6 grid grid-cols-1 gap-6 border-y border-border py-6 sm:grid-cols-2">
                <li class="flow-root">
                    <div class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 hover:bg-muted">
                        <div class="flex size-16 shrink-0 items-center justify-center rounded-lg bg-pink-500">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-white">
                                <path d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-sm font-medium text-foreground">
                                <a href="#" class="focus:outline-hidden"><span class="absolute inset-0"></span>Create a List →</a>
                            </h3>
                            <p class="mt-1 text-sm text-muted-foreground">Organize tasks and track progress.</p>
                        </div>
                    </div>
                </li>
                <li class="flow-root">
                    <div class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 hover:bg-muted">
                        <div class="flex size-16 shrink-0 items-center justify-center rounded-lg bg-blue-500">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-white">
                                <path d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125Z" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-sm font-medium text-foreground">
                                <a href="#" class="focus:outline-hidden"><span class="absolute inset-0"></span>Create a Board →</a>
                            </h3>
                            <p class="mt-1 text-sm text-muted-foreground">Track tasks in different stages.</p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="mt-4">
                <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">Or start from an empty project →</a>
            </div>
        </div>

<div class="mx-auto max-w-lg">
            <h2 class="text-base font-semibold text-foreground">Create your first project</h2>
            <p class="mt-1 text-sm text-muted-foreground">Get started by selecting a template or start from scratch.</p>
            <ul role="list" class="mt-6 divide-y divide-border border-y border-border">
                <li>
                    <div class="group relative flex items-start space-x-3 py-4">
                        <div class="shrink-0">
                            <span class="inline-flex size-10 items-center justify-center rounded-lg bg-pink-500">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-white">
                                    <path d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-sm font-medium text-foreground">
                                <a href="#"><span class="absolute inset-0"></span>Marketing Campaign</a>
                            </div>
                            <p class="text-sm text-muted-foreground">Plan and execute marketing initiatives.</p>
                        </div>
                        <div class="shrink-0 self-center">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground group-hover:text-foreground">
                                <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="group relative flex items-start space-x-3 py-4">
                        <div class="shrink-0">
                            <span class="inline-flex size-10 items-center justify-center rounded-lg bg-purple-500">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-white">
                                    <path d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-sm font-medium text-foreground">
                                <a href="#"><span class="absolute inset-0"></span>Engineering Project</a>
                            </div>
                            <p class="text-sm text-muted-foreground">Track development and technical work.</p>
                        </div>
                        <div class="shrink-0 self-center">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground group-hover:text-foreground">
                                <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="mt-6">
                <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">Or start from an empty project →</a>
            </div>
        </div>

<div x-data="tabs('tab1')">
            <div class="tabs-list">
                <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab1' }" @click="setActive('tab1')">Account</button>
                <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab2' }" @click="setActive('tab2')">Security</button>
            </div>
            <div class="tabs-content" x-show="activeTab === 'tab1'">Account settings content</div>
            <div class="tabs-content" x-show="activeTab === 'tab2'">Security settings content</div>
        </div>

<div x-data="tabs('tab1')">
            <div class="tabs-underline">
                <nav class="tabs-list" aria-label="Tabs">
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab1' }" @click="setActive('tab1')">My Account</button>
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab2' }" @click="setActive('tab2')">Company</button>
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab3' }" @click="setActive('tab3')">Team Members</button>
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab4' }" @click="setActive('tab4')">Billing</button>
                </nav>
            </div>
            <div class="tabs-content" x-show="activeTab === 'tab1'">Account settings</div>
            <div class="tabs-content" x-show="activeTab === 'tab2'">Company info</div>
            <div class="tabs-content" x-show="activeTab === 'tab3'">Team members list</div>
            <div class="tabs-content" x-show="activeTab === 'tab4'">Billing details</div>
        </div>

<div x-data="tabs('tab1')">
            <div class="tabs-underline">
                <nav class="tabs-list" aria-label="Tabs">
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab1' }" @click="setActive('tab1')">
                        <svg class="tabs-trigger-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" /></svg>
                        <span>My Account</span>
                    </button>
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab2' }" @click="setActive('tab2')">
                        <svg class="tabs-trigger-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 16.5v-13h-.25a.75.75 0 0 1 0-1.5h12.5a.75.75 0 0 1 0 1.5H16v13h.25a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75v-2.5a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1 0-1.5H4Z" clip-rule="evenodd" /></svg>
                        <span>Company</span>
                    </button>
                    <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab3' }" @click="setActive('tab3')">
                        <svg class="tabs-trigger-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572Z" /></svg>
                        <span>Team</span>
                    </button>
                </nav>
            </div>
            <div class="tabs-content" x-show="activeTab === 'tab1'">Account content</div>
            <div class="tabs-content" x-show="activeTab === 'tab2'">Company content</div>
            <div class="tabs-content" x-show="activeTab === 'tab3'">Team content</div>
        </div>

<div x-data="tabs('tab1')">
            <!-- Mobile: Select dropdown -->
            <div class="tabs-select sm:hidden">
                <select @change="setActive($event.target.value)" class="w-full">
                    <option value="tab1">My Account</option>
                    <option value="tab2">Company</option>
                    <option value="tab3">Team Members</option>
                </select>
                <svg class="tabs-select-icon" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
            </div>
            <!-- Desktop: Underline tabs -->
            <div class="hidden sm:block">
                <div class="tabs-underline">
                    <nav class="tabs-list" aria-label="Tabs">
                        <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab1' }" @click="setActive('tab1')">My Account</button>
                        <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab2' }" @click="setActive('tab2')">Company</button>
                        <button class="tabs-trigger" :class="{ 'active': activeTab === 'tab3' }" @click="setActive('tab3')">Team Members</button>
                    </nav>
                </div>
            </div>
            <div class="tabs-content mt-4" x-show="activeTab === 'tab1'">Account content</div>
            <div class="tabs-content mt-4" x-show="activeTab === 'tab2'">Company content</div>
            <div class="tabs-content mt-4" x-show="activeTab === 'tab3'">Team content</div>
        </div>

<nav class="breadcrumb">
            <a href="#" class="breadcrumb-link">Home</a>
            <span class="breadcrumb-separator">/</span>
            <a href="#" class="breadcrumb-link">Products</a>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-current">Components</span>
        </nav>

<nav class="pagination">
            <a href="#" class="pagination-item">←</a>
            <a href="#" class="pagination-item">1</a>
            <a href="#" class="pagination-item active">2</a>
            <a href="#" class="pagination-item">3</a>
            <span class="pagination-ellipsis">...</span>
            <a href="#" class="pagination-item">10</a>
            <a href="#" class="pagination-item">→</a>
        </nav>

<nav class="pagination-card" aria-label="Pagination">
            <!-- Mobile view -->
            <div class="pagination-mobile">
                <a href="#" class="btn btn-outline btn-sm">Previous</a>
                <a href="#" class="btn btn-outline btn-sm">Next</a>
            </div>
            <!-- Desktop view -->
            <div class="pagination-desktop">
                <p class="pagination-card-info">
                    Showing <strong>1</strong> to <strong>10</strong> of <strong>97</strong> results
                </p>
                <div class="pagination-card-numbers">
                    <a href="#" class="pagination-item">
                        <span class="sr-only">Previous</span>
                        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>
                    </a>
                    <a href="#" class="pagination-item active" aria-current="page">1</a>
                    <a href="#" class="pagination-item">2</a>
                    <a href="#" class="pagination-item">3</a>
                    <span class="pagination-ellipsis">...</span>
                    <a href="#" class="pagination-item">8</a>
                    <a href="#" class="pagination-item">9</a>
                    <a href="#" class="pagination-item">10</a>
                    <a href="#" class="pagination-item">
                        <span class="sr-only">Next</span>
                        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
                    </a>
                </div>
            </div>
        </nav>

<nav class="pagination-centered">
            <a href="#" class="pagination-centered-prev">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" /></svg>
                Previous
            </a>
            <div class="pagination-centered-numbers hidden md:flex">
                <a href="#" class="pagination-item">1</a>
                <a href="#" class="pagination-item active" aria-current="page">2</a>
                <a href="#" class="pagination-item">3</a>
                <span class="pagination-ellipsis">...</span>
                <a href="#" class="pagination-item">8</a>
                <a href="#" class="pagination-item">9</a>
                <a href="#" class="pagination-item">10</a>
            </div>
            <a href="#" class="pagination-centered-next">
                Next
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" /></svg>
            </a>
        </nav>

<nav class="pagination-simple" aria-label="Pagination">
            <p class="pagination-simple-info hidden sm:block">
                Showing <strong>1</strong> to <strong>10</strong> of <strong>20</strong> results
            </p>
            <div class="pagination-simple-nav">
                <a href="#" class="btn btn-outline btn-sm">Previous</a>
                <a href="#" class="btn btn-outline btn-sm">Next</a>
            </div>
        </nav>

<nav x-data="navigation()" class="border-b border-border bg-background" @keydown.escape.window="closeMobile()">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <div class="flex items-center gap-8">
                        <a href="#" class="text-lg font-semibold text-foreground">Acme Inc</a>
                        <div class="hidden lg:flex lg:gap-1">
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-foreground bg-muted">Dashboard</a>
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Projects</a>
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Team</a>
                        </div>
                    </div>
                    <div class="hidden lg:flex lg:items-center lg:gap-3">
                        <button class="btn">Get Started</button>
                    </div>
                    <button @click="toggleMobile()" class="lg:hidden rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground">
                        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
                    </button>
                </div>
            </div>
            <div x-show="mobileOpen" x-transition class="lg:hidden border-t border-border">
                <div class="space-y-1 px-4 py-3">
                    <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-foreground bg-muted">Dashboard</a>
                    <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Projects</a>
                    <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Team</a>
                    <div class="pt-3">
                        <button class="btn w-full">Get Started</button>
                    </div>
                </div>
            </div>
        </nav>

<nav class="flex flex-col gap-1" style="max-width: 240px;">
            <a href="#" class="flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-sm font-medium text-foreground">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" /></svg>
                Dashboard
            </a>
            <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" /></svg>
                Team
            </a>
            <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 10.5a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" /></svg>
                Projects
            </a>
            <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" /></svg>
                Settings
            </a>
        </nav>

<div x-data="{ open: false, search: '' }">
            <button @click="open = true" class="btn btn-outline">
                <svg class="size-4 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" /></svg>
                Search...
                <kbd class="ml-auto text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5">⌘K</kbd>
            </button>
            <div x-show="open" class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]" @keydown.escape.window="open = false">
                <div class="fixed inset-0 bg-black/50" @click="open = false"></div>
                <div class="relative w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl" @click.outside="open = false">
                    <div class="flex items-center border-b border-border px-3">
                        <svg class="size-4 shrink-0 text-muted-foreground" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" /></svg>
                        <input x-model="search" class="flex h-11 w-full bg-transparent py-3 px-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none" placeholder="Type a command or search..." autofocus />
                    </div>
                    <div class="max-h-80 overflow-y-auto p-2">
                        <div class="text-xs font-medium text-muted-foreground px-2 py-1.5">Suggestions</div>
                        <button class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-foreground hover:bg-muted">
                            <svg class="size-4 text-muted-foreground" viewBox="0 0 20 20" fill="currentColor"><path d="M15.988 3.012A2.25 2.25 0 0 1 18 5.25v6.5A2.25 2.25 0 0 1 15.75 14H13.5V7A2.5 2.5 0 0 0 11 4.5H8.128a2.252 2.252 0 0 1 1.884-1.488A2.25 2.25 0 0 1 12.25 1h1.5a2.25 2.25 0 0 1 2.238 2.012ZM11.5 3.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Z" /><path d="M2 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Z" /></svg>
                            Create new page
                        </button>
                        <button class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-foreground hover:bg-muted">
                            <svg class="size-4 text-muted-foreground" viewBox="0 0 20 20" fill="currentColor"><path d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>
                            Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div x-data="dialog()">
            <button @click="show()" class="btn">Open Dialog</button>
            <div class="dialog-overlay" :class="{ 'open': open }" @click="hide()"></div>
            <div class="dialog-content" :class="{ 'open': open }" @keydown.escape.window="hide()">
                <button class="dialog-close" @click="hide()">×</button>
                <div class="dialog-header">
                    <h3 class="dialog-title">Dialog Title</h3>
                    <p class="dialog-description">This is a modal dialog.</p>
                </div>
                <div class="dialog-footer">
                    <button @click="hide()" class="btn btn-outline">Cancel</button>
                    <button class="btn">Confirm</button>
                </div>
            </div>
        </div>

<div x-data="sheet('right')">
            <button @click="show()" class="btn">Open Sheet</button>
            <div class="sheet-overlay" :class="{ 'open': open }" @click="hide()"></div>
            <div class="sheet-content sheet-right" :class="{ 'open': open }" @keydown.escape.window="hide()">
                <div class="sheet-header">
                    <h3 class="sheet-title">Edit Profile</h3>
                    <p class="sheet-description">Make changes to your profile here.</p>
                    <button class="sheet-close" @click="hide()">×</button>
                </div>
                <div class="sheet-body">
                    <div class="grid gap-4 py-4">
                        <div class="grid gap-2">
                            <label class="label">Name</label>
                            <input class="input" value="Pedro Duarte" />
                        </div>
                        <div class="grid gap-2">
                            <label class="label">Username</label>
                            <input class="input" value="@peduarte" />
                        </div>
                    </div>
                </div>
                <div class="sheet-footer">
                    <button @click="hide()" class="btn">Save changes</button>
                </div>
            </div>
        </div>

<div x-data="popover()" class="relative inline-block" @click.outside="close()">
            <button @click.stop="toggle()" class="btn btn-outline">Open Popover</button>
            <div x-show="open" x-transition.origin.top.left @click.stop class="popover-content absolute left-0 top-full mt-2 w-80 rounded-lg border border-border bg-card p-4 shadow-lg z-50">
                <div class="grid gap-4">
                    <div class="space-y-2">
                        <h4 class="font-medium text-foreground text-sm">Dimensions</h4>
                        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
                    </div>
                    <div class="grid gap-2">
                        <div class="grid grid-cols-3 items-center gap-4">
                            <label class="text-sm text-foreground">Width</label>
                            <input class="input col-span-2" value="100%" />
                        </div>
                        <div class="grid grid-cols-3 items-center gap-4">
                            <label class="text-sm text-foreground">Height</label>
                            <input class="input col-span-2" value="25px" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="flex gap-6 items-center">
            <div x-data="tooltip()" class="relative inline-block">
                <button @mouseenter="show = true" @mouseleave="show = false" class="btn btn-outline">Hover me</button>
                <div x-show="show" x-transition class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background whitespace-nowrap z-50">
                    Add to library
                    <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-foreground"></div>
                </div>
            </div>
        </div>

<table class="table" style="max-width: 500px;">
            <thead>
                <tr><th>Name</th><th>Email</th><th>Role</th></tr>
            </thead>
            <tbody>
                <tr><td>Jane Doe</td><td>[email protected]</td><td>Admin</td></tr>
                <tr><td>John Smith</td><td>[email protected]</td><td>User</td></tr>
            </tbody>
        </table>

<div class="data-table">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-medium text-foreground">Jane Cooper</td>
                        <td>[email protected]</td>
                        <td>Admin</td>
                        <td><span class="badge badge-success">Active</span></td>
                    </tr>
                    <tr>
                        <td class="font-medium text-foreground">Cody Fisher</td>
                        <td>[email protected]</td>
                        <td>Editor</td>
                        <td><span class="badge badge-success">Active</span></td>
                    </tr>
                    <tr>
                        <td class="font-medium text-foreground">Esther Howard</td>
                        <td>[email protected]</td>
                        <td>Viewer</td>
                        <td><span class="badge badge-secondary">Inactive</span></td>
                    </tr>
                </tbody>
            </table>
        </div>

<div class="data-table">
            <div class="data-table-toolbar">
                <div class="data-table-search">
                    <input type="text" class="input" placeholder="Search..." />
                </div>
                <div class="data-table-filters">
                    <select class="select">
                        <option value="">All Roles</option>
                        <option value="admin">Admin</option>
                        <option value="editor">Editor</option>
                        <option value="viewer">Viewer</option>
                    </select>
                </div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th class="data-table-sortable">Name <span class="data-table-sort-icon">↕</span></th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-medium text-foreground">Jane Cooper</td>
                        <td>[email protected]</td>
                        <td>Admin</td>
                        <td><span class="badge badge-success">Active</span></td>
                    </tr>
                    <tr>
                        <td class="font-medium text-foreground">Cody Fisher</td>
                        <td>[email protected]</td>
                        <td>Editor</td>
                        <td><span class="badge badge-success">Active</span></td>
                    </tr>
                </tbody>
            </table>
            <div class="data-table-pagination">
                <div class="data-table-pagination-info">
                    <span class="text-sm text-muted-foreground">Showing 1-2 of 10</span>
                </div>
                <div class="data-table-pagination-nav">
                    <button class="btn btn-outline btn-sm" disabled>Previous</button>
                    <button class="btn btn-outline btn-sm">Next</button>
                </div>
            </div>
        </div>

<div class="data-table">
            <table>
                <thead>
                    <tr>
                        <th style="width: 3rem;"><input type="checkbox" class="checkbox" /></th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-selected="true">
                        <td><input type="checkbox" class="checkbox" checked /></td>
                        <td class="font-medium text-foreground">Jane Cooper</td>
                        <td>[email protected]</td>
                        <td>Admin</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="checkbox" /></td>
                        <td class="font-medium text-foreground">Cody Fisher</td>
                        <td>[email protected]</td>
                        <td>Editor</td>
                    </tr>
                    <tr data-selected="true">
                        <td><input type="checkbox" class="checkbox" checked /></td>
                        <td class="font-medium text-foreground">Esther Howard</td>
                        <td>[email protected]</td>
                        <td>Viewer</td>
                    </tr>
                </tbody>
            </table>
        </div>

<div class="calendar">
            <div class="calendar-header">
                <button type="button" class="calendar-nav-btn">
                    <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
                </button>
                <span class="calendar-title">February 2026</span>
                <button type="button" class="calendar-nav-btn">
                    <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
                </button>
            </div>
            <div class="calendar-grid">
                <div class="calendar-weekday">Su</div>
                <div class="calendar-weekday">Mo</div>
                <div class="calendar-weekday">Tu</div>
                <div class="calendar-weekday">We</div>
                <div class="calendar-weekday">Th</div>
                <div class="calendar-weekday">Fr</div>
                <div class="calendar-weekday">Sa</div>
                <button class="calendar-day other-month">1</button>
                <button class="calendar-day other-month">2</button>
                <button class="calendar-day other-month">3</button>
                <button class="calendar-day other-month">4</button>
                <button class="calendar-day other-month">5</button>
                <button class="calendar-day other-month">6</button>
                <button class="calendar-day other-month">7</button>
                <button class="calendar-day">1</button>
                <button class="calendar-day">2</button>
                <button class="calendar-day">3</button>
                <button class="calendar-day">4</button>
                <button class="calendar-day">5</button>
                <button class="calendar-day">6</button>
                <button class="calendar-day">7</button>
                <button class="calendar-day">8</button>
                <button class="calendar-day">9</button>
                <button class="calendar-day">10</button>
                <button class="calendar-day today">11</button>
                <button class="calendar-day">12</button>
                <button class="calendar-day">13</button>
                <button class="calendar-day">14</button>
                <button class="calendar-day">15</button>
                <button class="calendar-day selected">16</button>
                <button class="calendar-day">17</button>
                <button class="calendar-day">18</button>
                <button class="calendar-day">19</button>
                <button class="calendar-day">20</button>
                <button class="calendar-day">21</button>
                <button class="calendar-day">22</button>
                <button class="calendar-day">23</button>
                <button class="calendar-day">24</button>
                <button class="calendar-day">25</button>
                <button class="calendar-day">26</button>
                <button class="calendar-day">27</button>
                <button class="calendar-day">28</button>
            </div>
        </div>

<div class="calendar">
            <div class="calendar-header">
                <button type="button" class="calendar-nav-btn">
                    <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
                </button>
                <span class="calendar-title">February 2026</span>
                <button type="button" class="calendar-nav-btn">
                    <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
                </button>
            </div>
            <div class="calendar-grid">
                <div class="calendar-weekday">Su</div>
                <div class="calendar-weekday">Mo</div>
                <div class="calendar-weekday">Tu</div>
                <div class="calendar-weekday">We</div>
                <div class="calendar-weekday">Th</div>
                <div class="calendar-weekday">Fr</div>
                <div class="calendar-weekday">Sa</div>
                <button class="calendar-day other-month">1</button>
                <button class="calendar-day other-month">2</button>
                <button class="calendar-day other-month">3</button>
                <button class="calendar-day other-month">4</button>
                <button class="calendar-day other-month">5</button>
                <button class="calendar-day other-month">6</button>
                <button class="calendar-day other-month">7</button>
                <button class="calendar-day">1</button>
                <button class="calendar-day">2</button>
                <button class="calendar-day">3</button>
                <button class="calendar-day">4</button>
                <button class="calendar-day">5</button>
                <button class="calendar-day">6</button>
                <button class="calendar-day">7</button>
                <button class="calendar-day">8</button>
                <button class="calendar-day" data-range-start="true">9</button>
                <button class="calendar-day" data-in-range="true">10</button>
                <button class="calendar-day today" data-in-range="true">11</button>
                <button class="calendar-day" data-in-range="true">12</button>
                <button class="calendar-day" data-range-end="true">13</button>
                <button class="calendar-day">14</button>
                <button class="calendar-day">15</button>
                <button class="calendar-day">16</button>
                <button class="calendar-day">17</button>
                <button class="calendar-day">18</button>
                <button class="calendar-day">19</button>
                <button class="calendar-day">20</button>
                <button class="calendar-day">21</button>
                <button class="calendar-day">22</button>
                <button class="calendar-day">23</button>
                <button class="calendar-day">24</button>
                <button class="calendar-day">25</button>
                <button class="calendar-day">26</button>
                <button class="calendar-day">27</button>
                <button class="calendar-day">28</button>
            </div>
        </div>

<div class="flex gap-4 flex-wrap">
            <div class="calendar">
                <div class="calendar-header">
                    <button type="button" class="calendar-nav-btn">
                        <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
                    </button>
                    <span class="calendar-title">February 2026</span>
                    <span></span>
                </div>
                <div class="calendar-grid">
                    <div class="calendar-weekday">Su</div>
                    <div class="calendar-weekday">Mo</div>
                    <div class="calendar-weekday">Tu</div>
                    <div class="calendar-weekday">We</div>
                    <div class="calendar-weekday">Th</div>
                    <div class="calendar-weekday">Fr</div>
                    <div class="calendar-weekday">Sa</div>
                    <button class="calendar-day other-month">1</button>
                    <button class="calendar-day other-month">2</button>
                    <button class="calendar-day other-month">3</button>
                    <button class="calendar-day other-month">4</button>
                    <button class="calendar-day other-month">5</button>
                    <button class="calendar-day other-month">6</button>
                    <button class="calendar-day other-month">7</button>
                    <button class="calendar-day">1</button>
                    <button class="calendar-day">2</button>
                    <button class="calendar-day">3</button>
                    <button class="calendar-day">4</button>
                    <button class="calendar-day">5</button>
                    <button class="calendar-day">6</button>
                    <button class="calendar-day">7</button>
                    <button class="calendar-day">8</button>
                    <button class="calendar-day">9</button>
                    <button class="calendar-day">10</button>
                    <button class="calendar-day today">11</button>
                    <button class="calendar-day">12</button>
                    <button class="calendar-day">13</button>
                    <button class="calendar-day">14</button>
                    <button class="calendar-day">15</button>
                    <button class="calendar-day">16</button>
                    <button class="calendar-day">17</button>
                    <button class="calendar-day">18</button>
                    <button class="calendar-day">19</button>
                    <button class="calendar-day">20</button>
                    <button class="calendar-day">21</button>
                    <button class="calendar-day">22</button>
                    <button class="calendar-day">23</button>
                    <button class="calendar-day">24</button>
                    <button class="calendar-day">25</button>
                    <button class="calendar-day">26</button>
                    <button class="calendar-day">27</button>
                    <button class="calendar-day">28</button>
                </div>
            </div>
            <div class="calendar">
                <div class="calendar-header">
                    <span></span>
                    <span class="calendar-title">March 2026</span>
                    <button type="button" class="calendar-nav-btn">
                        <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
                    </button>
                </div>
                <div class="calendar-grid">
                    <div class="calendar-weekday">Su</div>
                    <div class="calendar-weekday">Mo</div>
                    <div class="calendar-weekday">Tu</div>
                    <div class="calendar-weekday">We</div>
                    <div class="calendar-weekday">Th</div>
                    <div class="calendar-weekday">Fr</div>
                    <div class="calendar-weekday">Sa</div>
                    <button class="calendar-day">1</button>
                    <button class="calendar-day">2</button>
                    <button class="calendar-day">3</button>
                    <button class="calendar-day">4</button>
                    <button class="calendar-day">5</button>
                    <button class="calendar-day">6</button>
                    <button class="calendar-day">7</button>
                    <button class="calendar-day">8</button>
                    <button class="calendar-day">9</button>
                    <button class="calendar-day">10</button>
                    <button class="calendar-day">11</button>
                    <button class="calendar-day">12</button>
                    <button class="calendar-day">13</button>
                    <button class="calendar-day">14</button>
                    <button class="calendar-day selected">15</button>
                    <button class="calendar-day">16</button>
                    <button class="calendar-day">17</button>
                    <button class="calendar-day">18</button>
                    <button class="calendar-day">19</button>
                    <button class="calendar-day">20</button>
                    <button class="calendar-day">21</button>
                    <button class="calendar-day">22</button>
                    <button class="calendar-day">23</button>
                    <button class="calendar-day">24</button>
                    <button class="calendar-day">25</button>
                    <button class="calendar-day">26</button>
                    <button class="calendar-day">27</button>
                    <button class="calendar-day">28</button>
                    <button class="calendar-day">29</button>
                    <button class="calendar-day">30</button>
                    <button class="calendar-day">31</button>
                </div>
            </div>
        </div>

<div>
            <div class="border-b border-border pb-5">
                <h3 class="m-0 text-base font-semibold leading-tight text-foreground">Applicant Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and application.</p>
            </div>
            <div class="mt-6">
                <dl class="divide-y divide-border">
                    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Full name</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Margot Foster</dd>
                    </div>
                    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Application for</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Backend Developer</dd>
                    </div>
                    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Email address</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">[email protected]</dd>
                    </div>
                    <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Salary expectation</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">$120,000</dd>
                    </div>
                </dl>
            </div>
        </div>

<div class="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
            <div class="px-6 py-5">
                <h3 class="m-0 text-base font-semibold leading-tight text-foreground">Applicant Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and application.</p>
            </div>
            <div class="border-t border-border">
                <dl class="divide-y divide-border">
                    <div class="px-6 py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Full name</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Margot Foster</dd>
                    </div>
                    <div class="px-6 py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Application for</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Backend Developer</dd>
                    </div>
                    <div class="px-6 py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Email address</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">[email protected]</dd>
                    </div>
                </dl>
            </div>
        </div>

<div>
            <div class="border-b border-border pb-5">
                <h3 class="m-0 text-base font-semibold leading-tight text-foreground">Applicant Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and application.</p>
            </div>
            <div class="mt-6">
                <dl class="divide-y divide-border">
                    <div class="bg-muted px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-foreground">Full name</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Margot Foster</dd>
                    </div>
                    <div class="bg-background px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-foreground">Application for</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">Backend Developer</dd>
                    </div>
                    <div class="bg-muted px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-foreground">Email address</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">[email protected]</dd>
                    </div>
                    <div class="bg-background px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-foreground">Salary expectation</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:col-span-2 sm:mt-0">$120,000</dd>
                    </div>
                </dl>
            </div>
        </div>

<div>
            <div class="border-b border-border pb-5">
                <h3 class="m-0 text-base font-semibold leading-tight text-foreground">Applicant Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and application.</p>
            </div>
            <div class="mt-6">
                <dl class="grid grid-cols-1 sm:grid-cols-2">
                    <div class="px-4 py-5 sm:col-span-1 sm:px-0">
                        <dt class="text-sm font-medium text-foreground">Full name</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:mt-2">Margot Foster</dd>
                    </div>
                    <div class="border-t border-border px-4 py-5 sm:border-t-0 sm:col-span-1 sm:px-0">
                        <dt class="text-sm font-medium text-foreground">Application for</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:mt-2">Backend Developer</dd>
                    </div>
                    <div class="border-t border-border px-4 py-5 sm:col-span-1 sm:px-0">
                        <dt class="text-sm font-medium text-foreground">Email address</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:mt-2">[email protected]</dd>
                    </div>
                    <div class="border-t border-border px-4 py-5 sm:col-span-1 sm:px-0">
                        <dt class="text-sm font-medium text-foreground">Salary expectation</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:mt-2">$120,000</dd>
                    </div>
                    <div class="border-t border-border px-4 py-5 sm:col-span-2 sm:px-0">
                        <dt class="text-sm font-medium text-foreground">About</dt>
                        <dd class="mt-1 text-sm text-muted-foreground sm:mt-2">Experienced developer with a passion for building scalable applications and clean code.</dd>
                    </div>
                </dl>
            </div>
        </div>

<div>
            <div class="border-b border-border pb-5">
                <h3 class="m-0 text-base font-semibold leading-tight text-foreground">Applicant Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and application.</p>
            </div>
            <div class="mt-6">
                <dl class="divide-y divide-border">
                    <div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Full name</dt>
                        <dd class="mt-1 flex text-sm text-muted-foreground sm:col-span-2 sm:mt-0">
                            <span class="grow">Margot Foster</span>
                            <span class="ml-4 shrink-0">
                                <button type="button" class="font-medium text-primary hover:text-primary/80">Update</button>
                            </span>
                        </dd>
                    </div>
                    <div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Email address</dt>
                        <dd class="mt-1 flex text-sm text-muted-foreground sm:col-span-2 sm:mt-0">
                            <span class="grow">[email protected]</span>
                            <span class="ml-4 shrink-0">
                                <button type="button" class="font-medium text-primary hover:text-primary/80">Update</button>
                            </span>
                        </dd>
                    </div>
                    <div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="text-sm font-medium text-foreground">Salary expectation</dt>
                        <dd class="mt-1 flex text-sm text-muted-foreground sm:col-span-2 sm:mt-0">
                            <span class="grow">$120,000</span>
                            <span class="ml-4 shrink-0">
                                <button type="button" class="font-medium text-primary hover:text-primary/80">Update</button>
                            </span>
                        </dd>
                    </div>
                </dl>
            </div>
        </div>

<dl class="grid grid-cols-1 gap-5 sm:grid-cols-3">
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Total Subscribers</dt>
                <dd class="mt-1 text-3xl font-semibold tracking-tight text-foreground">71,897</dd>
            </div>
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Avg. Open Rate</dt>
                <dd class="mt-1 text-3xl font-semibold tracking-tight text-foreground">58.16%</dd>
            </div>
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Avg. Click Rate</dt>
                <dd class="mt-1 text-3xl font-semibold tracking-tight text-foreground">24.57%</dd>
            </div>
        </dl>

<dl class="grid grid-cols-1 gap-5 sm:grid-cols-3">
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Total Subscribers</dt>
                <dd class="mt-1 flex items-baseline justify-between">
                    <span class="text-2xl font-semibold text-foreground">71,897</span>
                    <span class="inline-flex items-center gap-1 text-sm font-medium text-primary">
                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /></svg>
                        12%
                    </span>
                </dd>
            </div>
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Avg. Open Rate</dt>
                <dd class="mt-1 flex items-baseline justify-between">
                    <span class="text-2xl font-semibold text-foreground">58.16%</span>
                    <span class="inline-flex items-center gap-1 text-sm font-medium text-primary">
                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /></svg>
                        5.4%
                    </span>
                </dd>
            </div>
            <div class="overflow-hidden rounded-lg border border-border bg-card px-4 py-5 sm:p-6">
                <dt class="truncate text-sm font-medium text-muted-foreground">Avg. Click Rate</dt>
                <dd class="mt-1 flex items-baseline justify-between">
                    <span class="text-2xl font-semibold text-foreground">24.57%</span>
                    <span class="inline-flex items-center gap-1 text-sm font-medium text-destructive">
                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" /></svg>
                        3.2%
                    </span>
                </dd>
            </div>
        </dl>

<dl class="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">
            <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-background px-4 py-10 sm:px-6">
                <dt class="text-sm font-medium text-muted-foreground">Revenue</dt>
                <dd class="text-xs font-medium text-foreground">+4.75%</dd>
                <dd class="w-full flex-none text-3xl font-medium tracking-tight text-foreground">$405,091.00</dd>
            </div>
            <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-background px-4 py-10 sm:px-6">
                <dt class="text-sm font-medium text-muted-foreground">Overdue invoices</dt>
                <dd class="text-xs font-medium text-destructive">+54.02%</dd>
                <dd class="w-full flex-none text-3xl font-medium tracking-tight text-foreground">$12,787.00</dd>
            </div>
            <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-background px-4 py-10 sm:px-6">
                <dt class="text-sm font-medium text-muted-foreground">Outstanding invoices</dt>
                <dd class="text-xs font-medium text-foreground">-1.39%</dd>
                <dd class="w-full flex-none text-3xl font-medium tracking-tight text-foreground">$245,988.00</dd>
            </div>
            <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-background px-4 py-10 sm:px-6">
                <dt class="text-sm font-medium text-muted-foreground">Expenses</dt>
                <dd class="text-xs font-medium text-destructive">+10.18%</dd>
                <dd class="w-full flex-none text-3xl font-medium tracking-tight text-foreground">$30,156.00</dd>
            </div>
        </dl>

<div class="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-background px-4 py-6 sm:px-6 lg:px-8">
                <p class="text-sm font-medium text-muted-foreground">Number of deploys</p>
                <p class="mt-2 flex items-baseline gap-x-2">
                    <span class="text-4xl font-semibold tracking-tight text-foreground">405</span>
                </p>
            </div>
            <div class="bg-background px-4 py-6 sm:px-6 lg:px-8">
                <p class="text-sm font-medium text-muted-foreground">Average deploy time</p>
                <p class="mt-2 flex items-baseline gap-x-2">
                    <span class="text-4xl font-semibold tracking-tight text-foreground">3.65</span>
                    <span class="text-sm text-muted-foreground">mins</span>
                </p>
            </div>
            <div class="bg-background px-4 py-6 sm:px-6 lg:px-8">
                <p class="text-sm font-medium text-muted-foreground">Number of servers</p>
                <p class="mt-2 flex items-baseline gap-x-2">
                    <span class="text-4xl font-semibold tracking-tight text-foreground">3</span>
                </p>
            </div>
            <div class="bg-background px-4 py-6 sm:px-6 lg:px-8">
                <p class="text-sm font-medium text-muted-foreground">Success rate</p>
                <p class="mt-2 flex items-baseline gap-x-2">
                    <span class="text-4xl font-semibold tracking-tight text-foreground">98.5%</span>
                </p>
            </div>
        </div>

<dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            <div class="relative overflow-hidden rounded-lg border border-border bg-card px-4 pb-12 pt-5 sm:px-6 sm:pt-6">
                <dt>
                    <div class="absolute rounded-md bg-primary p-3">
                        <svg class="size-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>
                    </div>
                    <p class="ml-16 truncate text-sm font-medium text-muted-foreground">Total Subscribers</p>
                </dt>
                <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                    <p class="text-2xl font-semibold text-foreground">71,897</p>
                    <p class="ml-2 flex items-baseline text-sm font-semibold text-primary">
                        <svg class="size-5 shrink-0 self-center" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
                        122
                    </p>
                </dd>
                <div class="absolute inset-x-0 bottom-0 bg-muted px-4 py-4 sm:px-6">
                    <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">View all</a>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border border-border bg-card px-4 pb-12 pt-5 sm:px-6 sm:pt-6">
                <dt>
                    <div class="absolute rounded-md bg-primary p-3">
                        <svg class="size-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" /></svg>
                    </div>
                    <p class="ml-16 truncate text-sm font-medium text-muted-foreground">Avg. Open Rate</p>
                </dt>
                <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                    <p class="text-2xl font-semibold text-foreground">58.16%</p>
                    <p class="ml-2 flex items-baseline text-sm font-semibold text-primary">
                        <svg class="size-5 shrink-0 self-center" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
                        5.4%
                    </p>
                </dd>
                <div class="absolute inset-x-0 bottom-0 bg-muted px-4 py-4 sm:px-6">
                    <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">View all</a>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-lg border border-border bg-card px-4 pb-12 pt-5 sm:px-6 sm:pt-6">
                <dt>
                    <div class="absolute rounded-md bg-primary p-3">
                        <svg class="size-6 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" /></svg>
                    </div>
                    <p class="ml-16 truncate text-sm font-medium text-muted-foreground">Avg. Click Rate</p>
                </dt>
                <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
                    <p class="text-2xl font-semibold text-foreground">24.57%</p>
                    <p class="ml-2 flex items-baseline text-sm font-semibold text-destructive">
                        <svg class="size-5 shrink-0 self-center" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" /></svg>
                        3.2%
                    </p>
                </dd>
                <div class="absolute inset-x-0 bottom-0 bg-muted px-4 py-4 sm:px-6">
                    <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">View all</a>
                </div>
            </div>
        </dl>

<dl class="grid grid-cols-1 divide-y divide-border overflow-hidden rounded-lg border border-border bg-card md:grid-cols-3 md:divide-x md:divide-y-0">
            <div class="px-4 py-5 sm:p-6">
                <dt class="text-base font-normal text-foreground">Total Subscribers</dt>
                <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
                    <div class="flex items-baseline text-2xl font-semibold text-primary">
                        71,897
                        <span class="ml-2 text-sm font-medium text-muted-foreground">from 70,946</span>
                    </div>
                    <span class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-sm font-medium text-primary md:mt-2 lg:mt-0">
                        <svg class="size-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
                        12%
                    </span>
                </dd>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <dt class="text-base font-normal text-foreground">Avg. Open Rate</dt>
                <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
                    <div class="flex items-baseline text-2xl font-semibold text-primary">
                        58.16%
                        <span class="ml-2 text-sm font-medium text-muted-foreground">from 56.14%</span>
                    </div>
                    <span class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-sm font-medium text-primary md:mt-2 lg:mt-0">
                        <svg class="size-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
                        2.02%
                    </span>
                </dd>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <dt class="text-base font-normal text-foreground">Avg. Click Rate</dt>
                <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
                    <div class="flex items-baseline text-2xl font-semibold text-primary">
                        24.57%
                        <span class="ml-2 text-sm font-medium text-muted-foreground">from 28.62%</span>
                    </div>
                    <span class="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2.5 py-0.5 text-sm font-medium text-destructive md:mt-2 lg:mt-0">
                        <svg class="size-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" /></svg>
                        4.05%
                    </span>
                </dd>
            </div>
        </dl>

<ul role="list" class="divide-y divide-border">
            <li class="flex justify-between gap-x-6 py-5">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">LA</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">Leslie Alexander</p>
                        <p class="mt-1 truncate text-xs/5 text-muted-foreground">[email protected]</p>
                    </div>
                </div>
                <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
                    <p class="text-sm/6 text-foreground">Co-Founder / CEO</p>
                    <p class="mt-1 text-xs/5 text-muted-foreground">Last seen 3h ago</p>
                </div>
            </li>
            <li class="flex justify-between gap-x-6 py-5">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">MF</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">Michael Foster</p>
                        <p class="mt-1 truncate text-xs/5 text-muted-foreground">[email protected]</p>
                    </div>
                </div>
                <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
                    <p class="text-sm/6 text-foreground">Co-Founder / CTO</p>
                    <div class="mt-1 flex items-center gap-x-1.5">
                        <div class="flex-none rounded-full bg-primary/20 p-1">
                            <div class="size-1.5 rounded-full bg-primary"></div>
                        </div>
                        <p class="text-xs/5 text-muted-foreground">Online</p>
                    </div>
                </div>
            </li>
        </ul>

<ul role="list" class="divide-y divide-border">
            <li class="relative flex justify-between gap-x-6 py-5">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">LA</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">
                            <a href="#">
                                <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                Leslie Alexander
                            </a>
                        </p>
                        <p class="mt-1 flex text-xs/5 text-muted-foreground">
                            <a href="mailto:[email protected]" class="relative truncate hover:underline">[email protected]</a>
                        </p>
                    </div>
                </div>
                <div class="flex shrink-0 items-center gap-x-4">
                    <div class="hidden sm:flex sm:flex-col sm:items-end">
                        <p class="text-sm/6 text-foreground">Co-Founder / CEO</p>
                        <p class="mt-1 text-xs/5 text-muted-foreground">Last seen 3h ago</p>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 flex-none text-muted-foreground">
                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
            </li>
            <li class="relative flex justify-between gap-x-6 py-5">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">MF</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">
                            <a href="#">
                                <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                Michael Foster
                            </a>
                        </p>
                        <p class="mt-1 flex text-xs/5 text-muted-foreground">
                            <a href="mailto:[email protected]" class="relative truncate hover:underline">[email protected]</a>
                        </p>
                    </div>
                </div>
                <div class="flex shrink-0 items-center gap-x-4">
                    <div class="hidden sm:flex sm:flex-col sm:items-end">
                        <p class="text-sm/6 text-foreground">Co-Founder / CTO</p>
                        <p class="mt-1 text-xs/5 text-muted-foreground">Last seen 3h ago</p>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 flex-none text-muted-foreground">
                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
            </li>
        </ul>

<ul role="list" class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card shadow-sm">
            <li class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-muted sm:px-6">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">LA</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">
                            <a href="#">
                                <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                Leslie Alexander
                            </a>
                        </p>
                        <p class="mt-1 flex text-xs/5 text-muted-foreground">
                            <a href="mailto:[email protected]" class="relative truncate hover:underline">[email protected]</a>
                        </p>
                    </div>
                </div>
                <div class="flex shrink-0 items-center gap-x-4">
                    <div class="hidden sm:flex sm:flex-col sm:items-end">
                        <p class="text-sm/6 text-foreground">Co-Founder / CEO</p>
                        <p class="mt-1 text-xs/5 text-muted-foreground">Last seen 3h ago</p>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 flex-none text-muted-foreground">
                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
            </li>
            <li class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-muted sm:px-6">
                <div class="flex min-w-0 gap-x-4">
                    <div class="avatar"><span class="avatar-fallback">MF</span></div>
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm/6 font-semibold text-foreground">
                            <a href="#">
                                <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                Michael Foster
                            </a>
                        </p>
                        <p class="mt-1 flex text-xs/5 text-muted-foreground">
                            <a href="mailto:[email protected]" class="relative truncate hover:underline">[email protected]</a>
                        </p>
                    </div>
                </div>
                <div class="flex shrink-0 items-center gap-x-4">
                    <div class="hidden sm:flex sm:flex-col sm:items-end">
                        <p class="text-sm/6 text-foreground">Co-Founder / CTO</p>
                        <div class="mt-1 flex items-center gap-x-1.5">
                            <div class="flex-none rounded-full bg-primary/20 p-1">
                                <div class="size-1.5 rounded-full bg-primary"></div>
                            </div>
                            <p class="text-xs/5 text-muted-foreground">Online</p>
                        </div>
                    </div>
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 flex-none text-muted-foreground">
                        <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
            </li>
        </ul>

<ul role="list" class="divide-y divide-border">
            <li class="flex items-center justify-between gap-x-4 py-3">
                <div class="flex items-center gap-x-3 min-w-0">
                    <div class="avatar avatar-sm"><span class="avatar-fallback text-xs">LA</span></div>
                    <p class="truncate text-sm font-medium text-foreground">Leslie Alexander</p>
                </div>
                <p class="text-sm text-muted-foreground">Co-Founder / CEO</p>
            </li>
            <li class="flex items-center justify-between gap-x-4 py-3">
                <div class="flex items-center gap-x-3 min-w-0">
                    <div class="avatar avatar-sm"><span class="avatar-fallback text-xs">MF</span></div>
                    <p class="truncate text-sm font-medium text-foreground">Michael Foster</p>
                </div>
                <p class="text-sm text-muted-foreground">Co-Founder / CTO</p>
            </li>
            <li class="flex items-center justify-between gap-x-4 py-3">
                <div class="flex items-center gap-x-3 min-w-0">
                    <div class="avatar avatar-sm"><span class="avatar-fallback text-xs">DV</span></div>
                    <p class="truncate text-sm font-medium text-foreground">Dries Vincent</p>
                </div>
                <p class="text-sm text-muted-foreground">Business Relations</p>
            </li>
        </ul>

<ul role="list" class="divide-y divide-border">
            <li class="flex items-center justify-between gap-x-6 py-5">
                <div class="min-w-0">
                    <div class="flex items-start gap-x-3">
                        <p class="text-sm/6 font-semibold text-foreground">GraphQL API</p>
                        <span class="badge badge-success">Complete</span>
                    </div>
                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-muted-foreground">
                        <p class="whitespace-nowrap">Due on March 17, 2023</p>
                        <svg viewBox="0 0 2 2" class="size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg>
                        <p class="truncate">Created by Leslie Alexander</p>
                    </div>
                </div>
                <div class="flex flex-none items-center gap-x-4">
                    <a href="#" class="hidden rounded-md bg-card px-2.5 py-1.5 text-sm font-semibold text-foreground shadow-sm ring-1 ring-border hover:bg-muted sm:block">View project</a>
                </div>
            </li>
            <li class="flex items-center justify-between gap-x-6 py-5">
                <div class="min-w-0">
                    <div class="flex items-start gap-x-3">
                        <p class="text-sm/6 font-semibold text-foreground">New benefits plan</p>
                        <span class="badge badge-secondary">In progress</span>
                    </div>
                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-muted-foreground">
                        <p class="whitespace-nowrap">Due on May 5, 2023</p>
                        <svg viewBox="0 0 2 2" class="size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg>
                        <p class="truncate">Created by Michael Foster</p>
                    </div>
                </div>
                <div class="flex flex-none items-center gap-x-4">
                    <a href="#" class="hidden rounded-md bg-card px-2.5 py-1.5 text-sm font-semibold text-foreground shadow-sm ring-1 ring-border hover:bg-muted sm:block">View project</a>
                </div>
            </li>
            <li class="flex items-center justify-between gap-x-6 py-5">
                <div class="min-w-0">
                    <div class="flex items-start gap-x-3">
                        <p class="text-sm/6 font-semibold text-foreground">Marketing site redesign</p>
                        <span class="badge badge-warning">Archived</span>
                    </div>
                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-muted-foreground">
                        <p class="whitespace-nowrap">Due on June 10, 2023</p>
                        <svg viewBox="0 0 2 2" class="size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg>
                        <p class="truncate">Created by Courtney Henry</p>
                    </div>
                </div>
                <div class="flex flex-none items-center gap-x-4">
                    <a href="#" class="hidden rounded-md bg-card px-2.5 py-1.5 text-sm font-semibold text-foreground shadow-sm ring-1 ring-border hover:bg-muted sm:block">View project</a>
                </div>
            </li>
        </ul>

<ul role="list" class="divide-y divide-border">
            <li class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-5 sm:flex-nowrap">
                <div>
                    <p class="text-sm/6 font-semibold text-foreground">
                        <a href="#" class="hover:underline">Atque perspiciatis et et aut ut porro voluptatem blanditiis?</a>
                    </p>
                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-muted-foreground">
                        <p><a href="#" class="hover:underline">Leslie Alexander</a></p>
                        <svg viewBox="0 0 2 2" class="size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg>
                        <p>2d ago</p>
                    </div>
                </div>
                <dl class="flex w-full flex-none justify-between gap-x-8 sm:w-auto">
                    <div class="flex -space-x-0.5">
                        <dt class="sr-only">Commenters</dt>
                        <dd><div class="avatar avatar-sm ring-2 ring-background"><span class="avatar-fallback text-xs">ED</span></div></dd>
                        <dd><div class="avatar avatar-sm ring-2 ring-background"><span class="avatar-fallback text-xs">TC</span></div></dd>
                        <dd><div class="avatar avatar-sm ring-2 ring-background"><span class="avatar-fallback text-xs">LW</span></div></dd>
                    </div>
                    <div class="flex w-16 gap-x-2.5">
                        <dt><span class="sr-only">Total comments</span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-muted-foreground">
                                <path d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </dt>
                        <dd class="text-sm/6 text-foreground">24</dd>
                    </div>
                </dl>
            </li>
            <li class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-5 sm:flex-nowrap">
                <div>
                    <p class="text-sm/6 font-semibold text-foreground">
                        <a href="#" class="hover:underline">Et ratione distinctio nesciunt recusandae vel ab?</a>
                    </p>
                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-muted-foreground">
                        <p><a href="#" class="hover:underline">Michael Foster</a></p>
                        <svg viewBox="0 0 2 2" class="size-0.5 fill-current"><circle r="1" cx="1" cy="1" /></svg>
                        <p>2d ago</p>
                    </div>
                </div>
                <dl class="flex w-full flex-none justify-between gap-x-8 sm:w-auto">
                    <div class="flex -space-x-0.5">
                        <dt class="sr-only">Commenters</dt>
                        <dd><div class="avatar avatar-sm ring-2 ring-background"><span class="avatar-fallback text-xs">AB</span></div></dd>
                        <dd><div class="avatar avatar-sm ring-2 ring-background"><span class="avatar-fallback text-xs">BR</span></div></dd>
                    </div>
                    <div class="flex w-16 gap-x-2.5">
                        <dt><span class="sr-only">Total comments</span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-6 text-muted-foreground">
                                <path d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </dt>
                        <dd class="text-sm/6 text-foreground">6</dd>
                    </div>
                </dl>
            </li>
        </ul>

<div class="flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <table class="min-w-full divide-y divide-border">
                        <thead>
                            <tr>
                                <th scope="col" class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-foreground sm:pl-0">Name</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Title</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Email</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Role</th>
                                <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-0"><span class="sr-only">Edit</span></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border">
                            <tr>
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-0">Lindsay Walton</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Front-end Developer</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-0">Courtney Henry</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Designer</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-0">Tom Cook</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Director of Product</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<div class="flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <div class="overflow-hidden shadow-sm ring-1 ring-border sm:rounded-lg">
                        <table class="min-w-full divide-y divide-border">
                            <thead class="bg-muted">
                                <tr>
                                    <th scope="col" class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-foreground sm:pl-6">Name</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Title</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Email</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Role</th>
                                    <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-6"><span class="sr-only">Edit</span></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-border bg-card">
                                <tr>
                                    <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6">Lindsay Walton</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Front-end Developer</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                    <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-6">
                                        <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6">Courtney Henry</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Designer</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                    <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-6">
                                        <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6">Tom Cook</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Director of Product</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                    <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-6">
                                        <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

<div class="flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <table class="min-w-full divide-y divide-border">
                        <thead>
                            <tr>
                                <th scope="col" class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-foreground sm:pl-3">Name</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Title</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Email</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Role</th>
                                <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-3"><span class="sr-only">Edit</span></th>
                            </tr>
                        </thead>
                        <tbody class="bg-background">
                            <tr class="even:bg-muted">
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-3">Lindsay Walton</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Front-end Developer</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr class="even:bg-muted">
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-3">Courtney Henry</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Designer</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr class="even:bg-muted">
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-3">Tom Cook</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Director of Product</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr class="even:bg-muted">
                                <td class="py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-3">Whitney Francis</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Copywriter</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">[email protected]</td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                <td class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<div class="flow-root">
            <div class="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle">
                    <table class="min-w-full border-separate border-spacing-0">
                        <thead>
                            <tr>
                                <th scope="col" class="sticky top-0 z-10 border-b border-border bg-background/75 py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-foreground backdrop-blur-sm sm:pl-6 lg:pl-8">Name</th>
                                <th scope="col" class="sticky top-0 z-10 hidden border-b border-border bg-background/75 px-3 py-3.5 text-left text-sm font-semibold text-foreground backdrop-blur-sm sm:table-cell">Title</th>
                                <th scope="col" class="sticky top-0 z-10 hidden border-b border-border bg-background/75 px-3 py-3.5 text-left text-sm font-semibold text-foreground backdrop-blur-sm lg:table-cell">Email</th>
                                <th scope="col" class="sticky top-0 z-10 border-b border-border bg-background/75 px-3 py-3.5 text-left text-sm font-semibold text-foreground backdrop-blur-sm">Role</th>
                                <th scope="col" class="sticky top-0 z-10 border-b border-border bg-background/75 py-3.5 pr-4 pl-3 backdrop-blur-sm sm:pr-6 lg:pr-8"><span class="sr-only">Edit</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border-b border-border py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6 lg:pl-8">Lindsay Walton</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground sm:table-cell">Front-end Developer</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground lg:table-cell">[email protected]</td>
                                <td class="border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="border-b border-border py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-8 lg:pr-8">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="border-b border-border py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6 lg:pl-8">Courtney Henry</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground sm:table-cell">Designer</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground lg:table-cell">[email protected]</td>
                                <td class="border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                <td class="border-b border-border py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-8 lg:pr-8">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="border-b border-border py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap text-foreground sm:pl-6 lg:pl-8">Tom Cook</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground sm:table-cell">Director of Product</td>
                                <td class="hidden border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground lg:table-cell">[email protected]</td>
                                <td class="border-b border-border px-3 py-4 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="border-b border-border py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-8 lg:pr-8">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<div class="flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <table class="min-w-full divide-y divide-border">
                        <thead>
                            <tr>
                                <th scope="col" class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-foreground sm:pl-0">Name</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Title</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Status</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-foreground">Role</th>
                                <th scope="col" class="py-3.5 pr-4 pl-3 sm:pr-0"><span class="sr-only">Edit</span></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border bg-background">
                            <tr>
                                <td class="py-5 pr-3 pl-4 text-sm whitespace-nowrap sm:pl-0">
                                    <div class="flex items-center">
                                        <div class="avatar"><span class="avatar-fallback">LW</span></div>
                                        <div class="ml-4">
                                            <div class="font-medium text-foreground">Lindsay Walton</div>
                                            <div class="mt-1 text-muted-foreground">[email protected]</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <div class="text-foreground">Front-end Developer</div>
                                    <div class="mt-1 text-muted-foreground">Optimization</div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <span class="badge badge-success">Active</span>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-5 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-5 pr-3 pl-4 text-sm whitespace-nowrap sm:pl-0">
                                    <div class="flex items-center">
                                        <div class="avatar"><span class="avatar-fallback">CH</span></div>
                                        <div class="ml-4">
                                            <div class="font-medium text-foreground">Courtney Henry</div>
                                            <div class="mt-1 text-muted-foreground">[email protected]</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <div class="text-foreground">Designer</div>
                                    <div class="mt-1 text-muted-foreground">Intranet</div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <span class="badge badge-success">Active</span>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">Admin</td>
                                <td class="py-5 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-5 pr-3 pl-4 text-sm whitespace-nowrap sm:pl-0">
                                    <div class="flex items-center">
                                        <div class="avatar"><span class="avatar-fallback">TC</span></div>
                                        <div class="ml-4">
                                            <div class="font-medium text-foreground">Tom Cook</div>
                                            <div class="mt-1 text-muted-foreground">[email protected]</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <div class="text-foreground">Director of Product</div>
                                    <div class="mt-1 text-muted-foreground">Directives</div>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">
                                    <span class="badge badge-success">Active</span>
                                </td>
                                <td class="px-3 py-5 text-sm whitespace-nowrap text-muted-foreground">Member</td>
                                <td class="py-5 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0">
                                    <a href="#" class="text-primary hover:text-primary/80">Edit</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <li class="col-span-1 divide-y divide-border rounded-lg bg-card shadow-sm ring-1 ring-border">
                <div class="flex w-full items-center justify-between space-x-6 p-6">
                    <div class="flex-1 truncate">
                        <div class="flex items-center space-x-3">
                            <h3 class="truncate text-sm font-medium text-foreground">Jane Cooper</h3>
                            <span class="badge badge-success">Admin</span>
                        </div>
                        <p class="mt-1 truncate text-sm text-muted-foreground">Regional Paradigm Technician</p>
                    </div>
                    <div class="avatar"><span class="avatar-fallback">JC</span></div>
                </div>
                <div>
                    <div class="-mt-px flex divide-x divide-border">
                        <div class="flex w-0 flex-1">
                            <a href="mailto:[email protected]" class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" /><path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" /></svg>
                                Email
                            </a>
                        </div>
                        <div class="-ml-px flex w-0 flex-1">
                            <a href="tel:+1-202-555-0170" class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>
                                Call
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="col-span-1 divide-y divide-border rounded-lg bg-card shadow-sm ring-1 ring-border">
                <div class="flex w-full items-center justify-between space-x-6 p-6">
                    <div class="flex-1 truncate">
                        <div class="flex items-center space-x-3">
                            <h3 class="truncate text-sm font-medium text-foreground">Cody Fisher</h3>
                            <span class="badge badge-success">Admin</span>
                        </div>
                        <p class="mt-1 truncate text-sm text-muted-foreground">Product Directives Officer</p>
                    </div>
                    <div class="avatar"><span class="avatar-fallback">CF</span></div>
                </div>
                <div>
                    <div class="-mt-px flex divide-x divide-border">
                        <div class="flex w-0 flex-1">
                            <a href="mailto:[email protected]" class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" /><path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" /></svg>
                                Email
                            </a>
                        </div>
                        <div class="-ml-px flex w-0 flex-1">
                            <a href="tel:+1-202-555-0114" class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>
                                Call
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            <li class="col-span-1 flex flex-col divide-y divide-border rounded-lg bg-card text-center shadow-sm ring-1 ring-border">
                <div class="flex flex-1 flex-col p-8">
                    <div class="avatar avatar-xl mx-auto"><span class="avatar-fallback">JC</span></div>
                    <h3 class="mt-6 text-sm font-medium text-foreground">Jane Cooper</h3>
                    <dl class="mt-1 flex grow flex-col justify-between">
                        <dt class="sr-only">Title</dt>
                        <dd class="text-sm text-muted-foreground">Paradigm Representative</dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="mt-3"><span class="badge badge-success">Admin</span></dd>
                    </dl>
                </div>
                <div>
                    <div class="-mt-px flex divide-x divide-border">
                        <div class="flex w-0 flex-1">
                            <a href="mailto:[email protected]" class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" /><path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" /></svg>
                                Email
                            </a>
                        </div>
                        <div class="-ml-px flex w-0 flex-1">
                            <a href="tel:+1-202-555-0170" class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>
                                Call
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="col-span-1 flex flex-col divide-y divide-border rounded-lg bg-card text-center shadow-sm ring-1 ring-border">
                <div class="flex flex-1 flex-col p-8">
                    <div class="avatar avatar-xl mx-auto"><span class="avatar-fallback">CF</span></div>
                    <h3 class="mt-6 text-sm font-medium text-foreground">Cody Fisher</h3>
                    <dl class="mt-1 flex grow flex-col justify-between">
                        <dt class="sr-only">Title</dt>
                        <dd class="text-sm text-muted-foreground">Lead Security Associate</dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="mt-3"><span class="badge badge-success">Admin</span></dd>
                    </dl>
                </div>
                <div>
                    <div class="-mt-px flex divide-x divide-border">
                        <div class="flex w-0 flex-1">
                            <a href="mailto:[email protected]" class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" /><path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" /></svg>
                                Email
                            </a>
                        </div>
                        <div class="-ml-px flex w-0 flex-1">
                            <a href="tel:+1-202-555-0114" class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-muted-foreground"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>
                                Call
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

<div>
            <h2 class="text-sm font-medium text-muted-foreground">Pinned Projects</h2>
            <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
                <li class="col-span-1 flex rounded-md shadow-sm">
                    <div class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-pink-600 text-sm font-medium text-white">GA</div>
                    <div class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-border bg-card">
                        <div class="flex-1 truncate px-4 py-2 text-sm">
                            <a href="#" class="font-medium text-foreground hover:text-muted-foreground">Graph API</a>
                            <p class="text-muted-foreground">16 Members</p>
                        </div>
                        <div class="shrink-0 pr-2">
                            <button type="button" class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus:outline-2 focus:outline-offset-2 focus:outline-primary">
                                <span class="sr-only">Open options</span>
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" /></svg>
                            </button>
                        </div>
                    </div>
                </li>
                <li class="col-span-1 flex rounded-md shadow-sm">
                    <div class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-purple-600 text-sm font-medium text-white">CD</div>
                    <div class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-border bg-card">
                        <div class="flex-1 truncate px-4 py-2 text-sm">
                            <a href="#" class="font-medium text-foreground hover:text-muted-foreground">Component Design</a>
                            <p class="text-muted-foreground">12 Members</p>
                        </div>
                        <div class="shrink-0 pr-2">
                            <button type="button" class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus:outline-2 focus:outline-offset-2 focus:outline-primary">
                                <span class="sr-only">Open options</span>
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" /></svg>
                            </button>
                        </div>
                    </div>
                </li>
                <li class="col-span-1 flex rounded-md shadow-sm">
                    <div class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-yellow-500 text-sm font-medium text-white">T</div>
                    <div class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-border bg-card">
                        <div class="flex-1 truncate px-4 py-2 text-sm">
                            <a href="#" class="font-medium text-foreground hover:text-muted-foreground">Templates</a>
                            <p class="text-muted-foreground">16 Members</p>
                        </div>
                        <div class="shrink-0 pr-2">
                            <button type="button" class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus:outline-2 focus:outline-offset-2 focus:outline-primary">
                                <span class="sr-only">Open options</span>
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" /></svg>
                            </button>
                        </div>
                    </div>
                </li>
                <li class="col-span-1 flex rounded-md shadow-sm">
                    <div class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-green-500 text-sm font-medium text-white">RC</div>
                    <div class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-border bg-card">
                        <div class="flex-1 truncate px-4 py-2 text-sm">
                            <a href="#" class="font-medium text-foreground hover:text-muted-foreground">React Components</a>
                            <p class="text-muted-foreground">8 Members</p>
                        </div>
                        <div class="shrink-0 pr-2">
                            <button type="button" class="inline-flex size-8 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus:outline-2 focus:outline-offset-2 focus:outline-primary">
                                <span class="sr-only">Open options</span>
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" /></svg>
                            </button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="relative flex items-center space-x-3 rounded-lg border border-border bg-card px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:border-muted-foreground">
                <div class="shrink-0">
                    <div class="avatar"><span class="avatar-fallback">LA</span></div>
                </div>
                <div class="min-w-0 flex-1">
                    <a href="#" class="focus:outline-hidden">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        <p class="text-sm font-medium text-foreground">Leslie Alexander</p>
                        <p class="truncate text-sm text-muted-foreground">Co-Founder / CEO</p>
                    </a>
                </div>
            </div>
            <div class="relative flex items-center space-x-3 rounded-lg border border-border bg-card px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:border-muted-foreground">
                <div class="shrink-0">
                    <div class="avatar"><span class="avatar-fallback">MF</span></div>
                </div>
                <div class="min-w-0 flex-1">
                    <a href="#" class="focus:outline-hidden">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        <p class="text-sm font-medium text-foreground">Michael Foster</p>
                        <p class="truncate text-sm text-muted-foreground">Co-Founder / CTO</p>
                    </a>
                </div>
            </div>
            <div class="relative flex items-center space-x-3 rounded-lg border border-border bg-card px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:border-muted-foreground">
                <div class="shrink-0">
                    <div class="avatar"><span class="avatar-fallback">DV</span></div>
                </div>
                <div class="min-w-0 flex-1">
                    <a href="#" class="focus:outline-hidden">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        <p class="text-sm font-medium text-foreground">Dries Vincent</p>
                        <p class="truncate text-sm text-muted-foreground">Business Relations</p>
                    </a>
                </div>
            </div>
            <div class="relative flex items-center space-x-3 rounded-lg border border-border bg-card px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:border-muted-foreground">
                <div class="shrink-0">
                    <div class="avatar"><span class="avatar-fallback">LW</span></div>
                </div>
                <div class="min-w-0 flex-1">
                    <a href="#" class="focus:outline-hidden">
                        <span aria-hidden="true" class="absolute inset-0"></span>
                        <p class="text-sm font-medium text-foreground">Lindsay Walton</p>
                        <p class="truncate text-sm text-muted-foreground">Front-end Developer</p>
                    </a>
                </div>
            </div>
        </div>

<div class="flow-root">
            <ul role="list" class="-mb-8">
                <li>
                    <div class="relative pb-8">
                        <span aria-hidden="true" class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-border"></span>
                        <div class="relative flex space-x-3">
                            <div>
                                <span class="flex size-8 items-center justify-center rounded-full bg-gray-400 ring-8 ring-background">
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-white">
                                        <path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
                                    </svg>
                                </span>
                            </div>
                            <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                <div>
                                    <p class="text-sm text-muted-foreground">Applied to <a href="#" class="font-medium text-foreground">Front End Developer</a></p>
                                </div>
                                <div class="text-right text-sm whitespace-nowrap text-muted-foreground">
                                    <time datetime="2020-09-20">Sep 20</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="relative pb-8">
                        <span aria-hidden="true" class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-border"></span>
                        <div class="relative flex space-x-3">
                            <div>
                                <span class="flex size-8 items-center justify-center rounded-full bg-green-500 ring-8 ring-background">
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-white">
                                        <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>
                            <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                <div>
                                    <p class="text-sm text-muted-foreground">Completed screening with <a href="#" class="font-medium text-foreground">Martha Gardner</a></p>
                                </div>
                                <div class="text-right text-sm whitespace-nowrap text-muted-foreground">
                                    <time datetime="2020-09-28">Sep 28</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="relative pb-8">
                        <div class="relative flex space-x-3">
                            <div>
                                <span class="flex size-8 items-center justify-center rounded-full bg-primary ring-8 ring-background">
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-white">
                                        <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>
                            <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                <div>
                                    <p class="text-sm text-muted-foreground">Hired as <a href="#" class="font-medium text-foreground">Full Stack Developer</a></p>
                                </div>
                                <div class="text-right text-sm whitespace-nowrap text-muted-foreground">
                                    <time datetime="2020-10-04">Oct 4</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

<ul role="list" class="space-y-6">
            <li class="relative flex gap-x-4">
                <div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
                    <div class="w-px bg-border"></div>
                </div>
                <div class="relative flex size-6 flex-none items-center justify-center bg-background">
                    <div class="size-1.5 rounded-full bg-muted ring ring-border"></div>
                </div>
                <p class="flex-auto py-0.5 text-xs/5 text-muted-foreground"><span class="font-medium text-foreground">Chelsea Hagon</span> created the invoice.</p>
                <time datetime="2023-01-23T10:32" class="flex-none py-0.5 text-xs/5 text-muted-foreground">7d ago</time>
            </li>
            <li class="relative flex gap-x-4">
                <div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center">
                    <div class="w-px bg-border"></div>
                </div>
                <div class="avatar size-6 mt-3">
                    <span class="avatar-fallback text-xs">CH</span>
                </div>
                <div class="flex-auto rounded-md p-3 ring-1 ring-border ring-inset">
                    <div class="flex justify-between gap-x-4">
                        <div class="py-0.5 text-xs/5 text-muted-foreground"><span class="font-medium text-foreground">Chelsea Hagon</span> commented</div>
                        <time datetime="2023-01-23T15:56" class="flex-none py-0.5 text-xs/5 text-muted-foreground">3d ago</time>
                    </div>
                    <p class="text-sm/6 text-muted-foreground">Called client, they reassured me the invoice would be paid by the 25th.</p>
                </div>
            </li>
            <li class="relative flex gap-x-4">
                <div class="absolute top-0 left-0 flex h-6 w-6 justify-center">
                    <div class="w-px bg-border"></div>
                </div>
                <div class="relative flex size-6 flex-none items-center justify-center bg-background">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-6 text-primary">
                        <path d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </div>
                <p class="flex-auto py-0.5 text-xs/5 text-muted-foreground"><span class="font-medium text-foreground">Alex Curren</span> paid the invoice.</p>
                <time datetime="2023-01-24T09:20" class="flex-none py-0.5 text-xs/5 text-muted-foreground">1d ago</time>
            </li>
        </ul>

<div class="flow-root">
            <ul role="list" class="-mb-8">
                <li>
                    <div class="relative pb-8">
                        <span aria-hidden="true" class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-border"></span>
                        <div class="relative flex items-start space-x-3">
                            <div class="relative">
                                <div class="avatar size-10">
                                    <span class="avatar-fallback">EB</span>
                                </div>
                                <span class="absolute -right-1 -bottom-0.5 rounded-tl bg-background px-0.5 py-px">
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-muted-foreground">
                                        <path d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 0 0 1.28.53l3.58-3.579a.78.78 0 0 1 .527-.224 41.202 41.202 0 0 0 5.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2Zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>
                            <div class="min-w-0 flex-1">
                                <div>
                                    <div class="text-sm">
                                        <a href="#" class="font-medium text-foreground">Eduardo Benz</a>
                                    </div>
                                    <p class="mt-0.5 text-sm text-muted-foreground">Commented 6d ago</p>
                                </div>
                                <div class="mt-2 text-sm text-foreground">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="relative pb-8">
                        <span aria-hidden="true" class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-border"></span>
                        <div class="relative flex items-start space-x-3">
                            <div>
                                <div class="relative px-1">
                                    <div class="flex size-8 items-center justify-center rounded-full bg-muted ring-8 ring-background">
                                        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-muted-foreground">
                                            <path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" fill-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 py-1.5">
                                <div class="text-sm text-muted-foreground">
                                    <a href="#" class="font-medium text-foreground">Hilary Mahy</a>
                                    assigned
                                    <a href="#" class="font-medium text-foreground">Kristin Watson</a>
                                    <span class="whitespace-nowrap">2d ago</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="relative pb-8">
                        <div class="relative flex items-start space-x-3">
                            <div>
                                <div class="relative px-1">
                                    <div class="flex size-8 items-center justify-center rounded-full bg-muted ring-8 ring-background">
                                        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-muted-foreground">
                                            <path d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" fill-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 py-0">
                                <div class="text-sm/8 text-muted-foreground">
                                    <span class="mr-0.5">
                                        <a href="#" class="font-medium text-foreground">Hilary Mahy</a>
                                        added tags
                                    </span>
                                    <span class="mr-0.5">
                                        <a href="#" class="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium text-foreground ring-1 ring-inset ring-border">
                                            <svg viewBox="0 0 6 6" aria-hidden="true" class="size-1.5 fill-red-500">
                                                <circle r="3" cx="3" cy="3" />
                                            </svg>
                                            Bug
                                        </a>
                                        <a href="#" class="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium text-foreground ring-1 ring-inset ring-border">
                                            <svg viewBox="0 0 6 6" aria-hidden="true" class="size-1.5 fill-primary">
                                                <circle r="3" cx="3" cy="3" />
                                            </svg>
                                            Accessibility
                                        </a>
                                    </span>
                                    <span class="whitespace-nowrap">6h ago</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

<div class="bg-card shadow-sm rounded-lg border border-border">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-foreground">Manage subscription</h3>
                <div class="mt-2 max-w-xl text-sm text-muted-foreground">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.</p>
                </div>
                <div class="mt-5">
                    <button type="button" class="btn">Change plan</button>
                </div>
            </div>
        </div>

<div class="bg-card shadow-sm rounded-lg border border-border">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-foreground">Manage subscription</h3>
                <div class="mt-2 sm:flex sm:items-start sm:justify-between">
                    <div class="max-w-xl text-sm text-muted-foreground">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.</p>
                    </div>
                    <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:shrink-0 sm:items-center">
                        <button type="button" class="btn">Change plan</button>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-card shadow-sm rounded-lg border border-border">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-foreground">Auto-renew subscription</h3>
                <div class="mt-2 sm:flex sm:items-start sm:justify-between">
                    <div class="max-w-xl text-sm text-muted-foreground">
                        <p>Automatically renew your subscription when it expires to avoid service interruption.</p>
                    </div>
                    <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:shrink-0 sm:items-center" x-data="switchToggle(true)">
                        <button type="button" class="switch" :class="{ 'checked': checked }" @click="toggle()" role="switch" :aria-checked="checked"></button>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-card shadow-sm rounded-lg border border-border">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-foreground">Update your email</h3>
                <div class="mt-2 max-w-xl text-sm text-muted-foreground">
                    <p>Change the email address associated with your account.</p>
                </div>
                <form class="mt-5 sm:flex sm:items-center">
                    <div class="w-full sm:max-w-xs">
                        <input type="email" placeholder="[email protected]" class="input" />
                    </div>
                    <button type="submit" class="btn mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto">Save</button>
                </form>
            </div>
        </div>

<div class="bg-muted rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold text-foreground">Need more bandwidth?</h3>
                <div class="mt-2 max-w-xl text-sm text-muted-foreground">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus praesentium tenetur pariatur.</p>
                </div>
                <div class="mt-5">
                    <button type="button" class="btn btn-outline">Contact sales</button>
                </div>
            </div>
        </div>

<div x-data="carousel({ loop: true })" class="relative overflow-hidden rounded-lg" @mouseenter="stopAutoplay()" @mouseleave="autoplay && startAutoplay()">
            <div class="flex transition-transform duration-300 ease-in-out" :style="{ transform: translateX }">
                <div class="carousel-slide w-full shrink-0">
                    <div class="aspect-[16/9] rounded-lg bg-muted flex items-center justify-center">
                        <span class="text-4xl font-semibold text-muted-foreground">1</span>
                    </div>
                </div>
                <div class="carousel-slide w-full shrink-0">
                    <div class="aspect-[16/9] rounded-lg bg-muted flex items-center justify-center">
                        <span class="text-4xl font-semibold text-muted-foreground">2</span>
                    </div>
                </div>
                <div class="carousel-slide w-full shrink-0">
                    <div class="aspect-[16/9] rounded-lg bg-muted flex items-center justify-center">
                        <span class="text-4xl font-semibold text-muted-foreground">3</span>
                    </div>
                </div>
            </div>
            <button @click="prev()" class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 shadow-sm border border-border hover:bg-background">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>
            </button>
            <button @click="next()" class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-background/80 p-2 shadow-sm border border-border hover:bg-background">
                <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
            </button>
            <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5">
                <template x-for="(slide, i) in slides" :key="i">
                    <button @click="goTo(i)" class="size-2 rounded-full transition-colors" :class="isActive(i) ? 'bg-foreground' : 'bg-foreground/30'"></button>
                </template>
            </div>
        </div>

<form class="space-y-12">
            <div class="border-b border-border pb-12">
                <h2 class="text-base font-semibold text-foreground">Profile</h2>
                <p class="mt-1 text-sm text-muted-foreground">This information will be displayed publicly.</p>
                <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-4">
                        <label class="label">Username</label>
                        <div class="mt-2">
                            <input type="text" class="input" placeholder="janesmith" />
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label class="label">About</label>
                        <div class="mt-2">
                            <textarea rows="3" class="textarea"></textarea>
                        </div>
                        <p class="mt-3 text-sm text-muted-foreground">Write a few sentences about yourself.</p>
                    </div>
                </div>
            </div>
            <div class="border-b border-border pb-12">
                <h2 class="text-base font-semibold text-foreground">Personal Information</h2>
                <p class="mt-1 text-sm text-muted-foreground">Use a permanent address where you can receive mail.</p>
                <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-3">
                        <label class="label">First name</label>
                        <div class="mt-2">
                            <input type="text" class="input" />
                        </div>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="label">Last name</label>
                        <div class="mt-2">
                            <input type="text" class="input" />
                        </div>
                    </div>
                    <div class="sm:col-span-4">
                        <label class="label">Email address</label>
                        <div class="mt-2">
                            <input type="email" class="input" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-end gap-x-6">
                <button type="button" class="text-sm font-semibold text-foreground">Cancel</button>
                <button type="submit" class="btn">Save</button>
            </div>
        </form>

<form class="space-y-12">
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-border pb-12 md:grid-cols-3">
                <div>
                    <h2 class="text-base font-semibold text-foreground">Profile</h2>
                    <p class="mt-1 text-sm text-muted-foreground">This information will be displayed publicly.</p>
                </div>
                <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2">
                    <div class="sm:col-span-4">
                        <label class="label">Username</label>
                        <div class="mt-2">
                            <input type="text" class="input" placeholder="janesmith" />
                        </div>
                    </div>
                    <div class="col-span-full">
                        <label class="label">About</label>
                        <div class="mt-2">
                            <textarea rows="3" class="textarea"></textarea>
                        </div>
                        <p class="mt-3 text-sm text-muted-foreground">Write a few sentences about yourself.</p>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-border pb-12 md:grid-cols-3">
                <div>
                    <h2 class="text-base font-semibold text-foreground">Personal Information</h2>
                    <p class="mt-1 text-sm text-muted-foreground">Use a permanent address where you can receive mail.</p>
                </div>
                <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2">
                    <div class="sm:col-span-3">
                        <label class="label">First name</label>
                        <div class="mt-2">
                            <input type="text" class="input" />
                        </div>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="label">Last name</label>
                        <div class="mt-2">
                            <input type="text" class="input" />
                        </div>
                    </div>
                    <div class="sm:col-span-4">
                        <label class="label">Email address</label>
                        <div class="mt-2">
                            <input type="email" class="input" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-end gap-x-6">
                <button type="button" class="text-sm font-semibold text-foreground">Cancel</button>
                <button type="submit" class="btn">Save</button>
            </div>
        </form>

<div class="velocity-card" style="max-width: 300px;">
            <div class="card-header">
                <h3 class="card-title">Card Title</h3>
                <p class="card-description">Card description text.</p>
            </div>
            <div class="card-content">
                <p>Card content goes here.</p>
            </div>
            <div class="card-footer">
                <button class="btn">Action</button>
            </div>
        </div>

<div class="separator"></div>

<div class="accordion" x-data="accordion()">
            <div class="accordion-item">
                <button class="accordion-trigger" @click="toggle('item1')" :class="{ 'active': isOpen('item1') }">
                    Section 1
                </button>
                <div class="accordion-content" x-show="isOpen('item1')">
                    Content for section 1
                </div>
            </div>
            <div class="accordion-item">
                <button class="accordion-trigger" @click="toggle('item2')" :class="{ 'active': isOpen('item2') }">
                    Section 2
                </button>
                <div class="accordion-content" x-show="isOpen('item2')">
                    Content for section 2
                </div>
            </div>
        </div>

<div x-data="collapsible(false)" class="rounded-lg border border-border" style="max-width: 360px;">
            <div class="flex items-center justify-between px-4 py-3">
                <h4 class="text-sm font-semibold text-foreground">@peduarte starred 3 repositories</h4>
                <button @click="toggle()" class="rounded-md p-1 hover:bg-muted">
                    <svg class="size-4 text-muted-foreground transition-transform" :class="{ 'rotate-180': open }" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
                </button>
            </div>
            <div x-show="open" x-transition class="border-t border-border">
                <div class="rounded-md border border-border mx-4 my-3 px-4 py-3 text-sm text-muted-foreground">@radix-ui/primitives</div>
                <div class="rounded-md border border-border mx-4 mb-3 px-4 py-3 text-sm text-muted-foreground">@radix-ui/colors</div>
                <div class="rounded-md border border-border mx-4 mb-3 px-4 py-3 text-sm text-muted-foreground">@stitches/react</div>
            </div>
        </div>

<div class="border-b border-border pb-5">
            <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Dashboard</h1>
        </div>

<div class="border-b border-border pb-5">
            <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Projects</h1>
            <p class="mt-2 text-sm text-muted-foreground">A list of all projects in your account including their name, status, and team.</p>
        </div>

<div class="flex items-center justify-between border-b border-border pb-5">
            <h1 class="m-0 text-2xl font-semibold leading-none text-foreground">Projects</h1>
            <button class="btn">New Project</button>
        </div>

<div class="border-b border-border pb-5 sm:flex sm:items-center sm:justify-between">
            <div class="min-w-0 flex-1">
                <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Team Members</h1>
                <p class="mt-1 text-sm text-muted-foreground">A list of all team members with their roles and status.</p>
            </div>
            <div class="mt-4 sm:ml-4 sm:mt-0">
                <button class="btn">Add Member</button>
            </div>
        </div>

<div class="border-b border-border pb-5">
            <nav class="breadcrumb mb-3">
                <a href="#" class="breadcrumb-link">Projects</a>
                <span class="breadcrumb-separator">/</span>
                <a href="#" class="breadcrumb-link">Velocity</a>
                <span class="breadcrumb-separator">/</span>
                <span class="breadcrumb-current">Settings</span>
            </nav>
            <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Project Settings</h1>
        </div>

<div class="flex items-center gap-4 border-b border-border pb-5">
            <div class="avatar avatar-lg"><span class="avatar-fallback">JD</span></div>
            <div>
                <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Jane Doe</h1>
                <div class="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
                    <span>[email protected]</span>
                    <span>·</span>
                    <span class="badge badge-secondary">Active</span>
                </div>
            </div>
        </div>

<div class="overflow-hidden rounded-lg border border-border">
            <div class="h-32 bg-linear-to-r from-primary/20 to-primary/5"></div>
            <div class="flex items-end gap-4 px-6 pb-5" style="margin-top: -2.5rem;">
                <div class="avatar avatar-xl ring-4 ring-background"><span class="avatar-fallback">AC</span></div>
                <div class="pb-1">
                    <h1 class="m-0 text-2xl font-semibold leading-tight text-foreground">Acme Corporation</h1>
                    <p class="mt-1 text-sm text-muted-foreground">Enterprise software solutions</p>
                </div>
            </div>
        </div>

<div class="border-b border-border pb-5">
            <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
        </div>

<div class="border-b border-border pb-5">
            <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
            <p class="mt-2 text-sm text-muted-foreground">Find the perfect role from our open positions.</p>
        </div>

<div class="flex items-center justify-between border-b border-border pb-5">
            <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
            <button class="btn btn-sm">Add Job</button>
        </div>

<div class="flex items-center gap-3 border-b border-border pb-5">
            <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
            <span class="badge badge-secondary">12</span>
        </div>

<div class="flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between sm:gap-0">
            <div>
                <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
                <p class="mt-1 text-sm text-muted-foreground">Open roles across all departments.</p>
            </div>
            <button class="btn btn-sm shrink-0">Post a Job</button>
        </div>

<div class="border-b border-border">
            <div class="flex items-center justify-between pb-5">
                <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
                <button class="btn btn-sm">Add Job</button>
            </div>
            <nav class="-mb-px flex gap-6">
                <a href="#" class="border-b-2 border-primary pb-4 text-sm font-medium text-primary">All</a>
                <a href="#" class="border-b-2 border-transparent pb-4 text-sm font-medium text-muted-foreground hover:border-border hover:text-foreground">Engineering</a>
                <a href="#" class="border-b-2 border-transparent pb-4 text-sm font-medium text-muted-foreground hover:border-border hover:text-foreground">Design</a>
                <a href="#" class="border-b-2 border-transparent pb-4 text-sm font-medium text-muted-foreground hover:border-border hover:text-foreground">Marketing</a>
            </nav>
        </div>

<div class="border-b border-border pb-5">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <h3 class="text-base font-semibold text-foreground">Job Postings</h3>
                <div class="flex items-center gap-3">
                    <input type="search" class="input" placeholder="Search jobs..." style="max-width: 200px;" />
                    <button class="btn btn-outline btn-sm">Filters</button>
                </div>
            </div>
        </div>

<div class="mb-6">
            <h3 class="text-base font-semibold text-foreground">Recent Activity</h3>
        </div>

<div class="card-header">
            <h3 class="card-title">Account Settings</h3>
        </div>

<div class="card-header">
            <h3 class="card-title">Account Settings</h3>
            <p class="card-description">Manage your account preferences and security.</p>
        </div>

<div class="card-header flex flex-row items-center justify-between">
            <div>
                <h3 class="card-title">Team Members</h3>
                <p class="card-description">Manage who has access to this project.</p>
            </div>
            <button class="btn btn-sm shrink-0">Invite</button>
        </div>

<div class="card-header flex flex-row items-center justify-between">
            <h3 class="card-title">Recent Orders</h3>
            <div x-data="dropdown()" class="relative" @click.outside="close()">
                <button @click="toggle()" class="btn btn-ghost btn-sm">
                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" /></svg>
                </button>
                <div class="dropdown-menu right-0 mt-2" :class="{ 'open': open }">
                    <a href="#" class="dropdown-item">View details</a>
                    <a href="#" class="dropdown-item">Export</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item text-destructive">Delete</a>
                </div>
            </div>
        </div>

<div class="card-header flex flex-row items-center gap-4">
            <div class="avatar"><span class="avatar-fallback">JD</span></div>
            <div>
                <h3 class="card-title">Jane Doe</h3>
                <p class="card-description">Product Designer</p>
            </div>
        </div>

<div class="card-header flex flex-row items-center justify-between">
            <div class="flex items-center gap-3">
                <h3 class="card-title">API Requests</h3>
                <span class="badge badge-success">Healthy</span>
            </div>
            <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">View all</a>
        </div>

<div class="card-header">
            <h3 class="card-title mb-4">Analytics</h3>
            <div class="tabs-list">
                <button class="tabs-trigger active">Overview</button>
                <button class="tabs-trigger">Traffic</button>
                <button class="tabs-trigger">Revenue</button>
            </div>
        </div>

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:group {"className":"max-w-3xl mx-auto text-center","layout":{"type":"constrained"}} -->
<div class="wp-block-group max-w-3xl mx-auto text-center">

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Building Strength in the U.S. Industrial Base</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg sm:text-xl text-muted-foreground mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="text-lg sm:text-xl text-muted-foreground mt-8 max-w-2xl mx-auto text-balance">Velocity One, through our family of operating units, designs, manufactures, and supports a wide range of products for the aerospace and defense markets.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero-split bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero-split bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":true,"style":{"spacing":{"blockGap":{"top":"3rem","left":"4rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-center is-stacked-on-mobile">

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center">

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-6xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-6xl font-semibold tracking-tight text-foreground text-balance">Precision. Performance. Partnership.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6"} -->
<p class="text-lg text-muted-foreground mt-6">Our operating units serve the full spectrum of aerospace and defense applications, from energetic devices to inertial navigation to power systems.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">About Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center">
<!-- wp:velocity/image {"url":"scenes/velocity-one-03.jpg","alt":"Plane silhouette against dramatic clouds","className":"w-full rounded-2xl shadow-xl ring-1 ring-border/50 object-cover"} /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:group {"className":"max-w-3xl mx-auto text-center","layout":{"type":"constrained"}} -->
<div class="wp-block-group max-w-3xl mx-auto text-center">

<!-- wp:html -->
<div class="flex justify-center mb-8">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /></svg>
      New
    </span>
    Velocity One signs merger agreement with EMCORE. Read more →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Building Strength in the U.S. Industrial Base</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg sm:text-xl text-muted-foreground mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="text-lg sm:text-xl text-muted-foreground mt-8 max-w-2xl mx-auto text-balance">We partner with founders to preserve their legacy while scaling operations for long-term growth. Backed by Charlesbank Capital Partners.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"42rem"}} -->
<div class="wp-block-group">

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Building Strength in the U.S. Industrial Base</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground text-center mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="text-lg text-muted-foreground text-center mt-8 max-w-2xl mx-auto text-balance">Velocity One designs, manufactures, and supports critical products for the aerospace and defense markets through our family of operating units.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"mt-16","layout":{"type":"default"}} -->
<div class="wp-block-group mt-16">
<!-- wp:velocity/image {"url":"scenes/velocity-one-11.jpg","alt":"Plane above clouds and mountains at sunrise","className":"w-full rounded-lg shadow-xl ring-1 ring-border object-cover"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"42rem"}} -->
<div class="wp-block-group">

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Precision. Performance. Partnership.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground text-center mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="text-lg text-muted-foreground text-center mt-8 max-w-2xl mx-auto text-balance">We acquire and operate essential aerospace and defense manufacturers, modernizing operations and empowering leadership for long-term growth.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Explore Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Learn More</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"mt-16 rounded-xl lg:rounded-2xl border border-border bg-muted p-2 lg:p-4","layout":{"type":"default"}} -->
<div class="wp-block-group mt-16 rounded-xl lg:rounded-2xl border border-border bg-muted p-2 lg:p-4">
<!-- wp:velocity/image {"url":"scenes/velocity-one-08.jpg","alt":"Aircraft on runway at night","className":"w-full rounded-md shadow-xl object-cover"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:cover {"templateLock":"contentOnly","lock":{"move":true,"remove":false},"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-11.jpg","id":0,"dimRatio":70,"customOverlayColor":"#0b131e","isUserOverlayColor":true,"minHeight":700,"contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:700px">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#0b131e"></span>
<img class="wp-block-cover__image-background" alt="Aircraft soaring above clouds at sunrise with mountain peaks below" src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-11.jpg" data-object-fit="cover" />
<div class="wp-block-cover__inner-container">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"48rem"}} -->
<div class="wp-block-group">

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-white text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-white text-balance">Building Strength in the U.S. Industrial Base</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"text-lg sm:text-xl text-white/70 mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="has-text-align-center text-lg sm:text-xl text-white/70 mt-8 max-w-2xl mx-auto text-balance">Velocity One acquires and scales specialized manufacturers serving aerospace, defense, and industrial markets.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button {"className":"!bg-amber-500 hover:!bg-amber-400 !rounded-md !text-sm !font-semibold !shadow-sm"} -->
<div class="wp-block-button !bg-amber-500 hover:!bg-amber-400 !rounded-md !text-sm !font-semibold !shadow-sm"><a class="wp-block-button__link wp-element-button" href="#">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline !text-sm !font-semibold !border-0","style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-button is-style-outline !text-sm !font-semibold !border-0"><a class="wp-block-button__link wp-element-button has-text-color" href="#" style="color:#ffffff">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
</div>
<!-- /wp:cover -->

<!-- wp:cover {"templateLock":"contentOnly","lock":{"move":true,"remove":false},"url":"https://velocity-one.com/wp-content/themes/velocity/assets/vid/velocity-one-videos-03.mp4","id":0,"backgroundType":"video","dimRatio":60,"customOverlayColor":"#0b131e","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:100vh">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim" style="background-color:#0b131e"></span>
<video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://velocity-one.com/wp-content/themes/velocity/assets/vid/velocity-one-videos-03.mp4" data-object-fit="cover"></video>
<div class="wp-block-cover__inner-container">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"48rem"}} -->
<div class="wp-block-group">

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-white text-balance"} -->
<h1 class="wp-block-heading has-text-align-center text-5xl sm:text-7xl font-semibold tracking-tight text-white text-balance">Building the Future of U.S. Manufacturing</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"text-lg sm:text-xl text-white/70 mt-8 max-w-2xl mx-auto text-balance"} -->
<p class="has-text-align-center text-lg sm:text-xl text-white/70 mt-8 max-w-2xl mx-auto text-balance">Velocity One unites and strengthens essential aerospace, defense, and industrial companies: modernizing operations, empowering leadership, and advancing American capability.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button {"className":"!bg-amber-500 hover:!bg-amber-400 !rounded-md !text-sm !font-semibold !shadow-sm"} -->
<div class="wp-block-button !bg-amber-500 hover:!bg-amber-400 !rounded-md !text-sm !font-semibold !shadow-sm"><a class="wp-block-button__link wp-element-button" href="#companies">Explore Our Companies</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
</div>
<!-- /wp:cover -->

<!-- wp:group {"className":"is-section-hero bg-background","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background" style="padding-top:0;padding-bottom:0">

<!-- wp:columns {"verticalAlignment":"stretch","isStackedOnMobile":true,"style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns are-vertically-aligned-stretch is-stacked-on-mobile">

<!-- wp:column {"verticalAlignment":"center","width":"50%","className":"py-24 sm:py-32 px-6 sm:px-10"} -->
<div class="wp-block-column is-vertically-aligned-center py-24 sm:py-32 px-6 sm:px-10" style="flex-basis:50%">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group">

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Building Strength in the U.S. Industrial Base</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One acquires and scales specialized manufacturers serving aerospace, defense, and industrial markets.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="flex flex-wrap items-center gap-4 mt-10">
  <a href="#" class="rounded-md bg-amber-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-400 transition-colors">Our Companies</a>
  <a href="#" class="text-sm font-semibold text-foreground hover:text-muted-foreground transition-colors">Contact Us <span aria-hidden="true">→</span></a>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"50%","backgroundColor":"muted"} -->
<div class="wp-block-column is-vertically-aligned-stretch has-muted-background-color has-background" style="flex-basis:50%">
<!-- wp:cover {"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-07.jpg","id":0,"dimRatio":0,"minHeight":100,"minHeightUnit":"%","contentPosition":"center center"} -->
<div class="wp-block-cover" style="min-height:100%">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="Aircraft approaching through golden sunset clouds" src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-07.jpg" data-object-fit="cover" />
<div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32 overflow-hidden","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32 overflow-hidden">

<!-- wp:columns {"verticalAlignment":"center","className":"gap-x-8 lg:gap-x-14"} -->
<div class="wp-block-columns are-vertically-aligned-center gap-x-8 lg:gap-x-14">

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Three Operating Units. One Commitment.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One acquires and scales specialized manufacturers serving aerospace, defense, and industrial markets.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">

<!-- wp:html -->
<div class="flex justify-end gap-5">
  <div class="w-44 shrink-0 flex flex-col gap-5 pt-32 sm:pt-52">
    <div class="aspect-[2/3] overflow-hidden rounded-xl shadow-lg">
      <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-09.jpg" alt="Engine close-up on the tarmac" class="size-full object-cover" />
    </div>
  </div>
  <div class="w-44 shrink-0 flex flex-col gap-5 pt-16 sm:pt-24">
    <div class="aspect-[2/3] overflow-hidden rounded-xl shadow-lg">
      <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-05.jpg" alt="Plane silhouette against sunset sky" class="size-full object-cover" />
    </div>
    <div class="aspect-[2/3] overflow-hidden rounded-xl shadow-lg">
      <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-15.jpg" alt="Landing gear close-up at sunset" class="size-full object-cover" />
    </div>
  </div>
  <div class="w-44 shrink-0 flex flex-col gap-5">
    <div class="aspect-[2/3] overflow-hidden rounded-xl shadow-lg">
      <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-13.jpg" alt="Plane landing approach at golden sunset" class="size-full object-cover" />
    </div>
    <div class="aspect-[2/3] overflow-hidden rounded-xl shadow-lg">
      <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg" alt="Fighter jet in hangar" class="size-full object-cover" />
    </div>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"left":"4rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top">

<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%">

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Where Aerospace Leaders Find Their Next Chapter</h1>
<!-- /wp:heading -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%">

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One is a disciplined acquirer and operator in the aerospace and defense sector. We partner with founders to preserve their legacy while scaling operations for long-term growth. Backed by Charlesbank Capital Partners.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"2.5rem"}}}} -->
<div class="wp-block-columns" style="margin-top:2.5rem">

<!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:velocity/image {"url":"scenes/velocity-one-07.jpg","alt":"Plane approaching through sunset clouds","className":"w-full rounded-2xl object-cover"} /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"4rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-center">

<!-- wp:column {"verticalAlignment":"center","width":"55%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%">

<!-- wp:html -->
<div class="flex items-center mb-8">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M1 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6Zm4 1.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2 3a4 4 0 0 0-3.665 2.395.75.75 0 0 0 .416 1A8.98 8.98 0 0 0 7 14.5a8.98 8.98 0 0 0 3.249-.605.75.75 0 0 0 .416-1A4 4 0 0 0 7 10.5Zm5-3.75a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Zm0 2.5a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /></svg>
      News
    </span>
    Backed by Charlesbank Capital Partners →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Committed to American Manufacturing</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One partners with founders who have built something worth preserving, investing in operations, talent, and technology.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Learn More</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"45%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:45%">
<!-- wp:group {"className":"flex justify-center","layout":{"type":"default"}} -->
<div class="wp-block-group flex justify-center">
<!-- wp:velocity/image {"url":"scenes/velocity-one-09.jpg","alt":"Aircraft engine close-up","className":"w-[280px] rounded-[2.5rem] shadow-2xl object-cover aspect-[9/19]"} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero-split bg-background","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull is-section-hero-split bg-background" style="padding-top:0;padding-bottom:0">

<!-- wp:columns {"verticalAlignment":"stretch","isStackedOnMobile":true,"style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns are-vertically-aligned-stretch is-stacked-on-mobile">

<!-- wp:column {"verticalAlignment":"center","width":"58.333%","className":"py-24 sm:py-32 px-6 sm:px-10"} -->
<div class="wp-block-column is-vertically-aligned-center py-24 sm:py-32 px-6 sm:px-10" style="flex-basis:58.333%">

<!-- wp:group {"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group">

<!-- wp:html -->
<div class="flex items-center mb-4">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /></svg>
      New
    </span>
    Velocity One signs merger agreement with EMCORE. Read more →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Committed to Takeoff</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One acquires and scales specialized manufacturers serving aerospace, defense, and industrial markets.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","width":"41.667%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:41.667%">
<!-- wp:velocity/image {"url":"scenes/velocity-one-11.jpg","alt":"Aircraft above clouds at sunrise","className":"w-full h-full object-cover"} /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"4rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-center">

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">


<!-- wp:html -->
<div class="flex items-center mt-6 mb-4">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /></svg>
      News
    </span>
    Backed by Charlesbank Capital Partners →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Precision. Performance. Partnership.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Velocity One unites essential aerospace, defense, and industrial companies under one platform.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">
<!-- wp:velocity/image {"url":"scenes/velocity-one-19.jpg","alt":"Fighter jet in hangar","className":"w-full rounded-xl shadow-2xl object-cover"} /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"center","className":"gap-x-8 lg:gap-x-14"} -->
<div class="wp-block-columns are-vertically-aligned-center gap-x-8 lg:gap-x-14">

<!-- wp:column {"verticalAlignment":"center","width":"45%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:45%">

<!-- wp:html -->
<div class="flex items-center gap-x-4 mb-6">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /></svg>
      About
    </span>
    Backed by Charlesbank Capital Partners →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Every Part Must Perform</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">In pilot terminology, V1 is the speed at which an aircraft is committed to takeoff. Velocity One carries that same commitment to its operating units.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">About Us</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"55%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%">

<!-- wp:group {"className":"rounded-xl lg:rounded-2xl border border-border bg-muted p-2 lg:p-4","layout":{"type":"default"}} -->
<div class="wp-block-group rounded-xl lg:rounded-2xl border border-border bg-muted p-2 lg:p-4">
<!-- wp:velocity/image {"url":"scenes/velocity-one-16.jpg","alt":"Aircraft approaching on runway at night","className":"w-full rounded-md shadow-xl object-cover"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-hero bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-hero bg-background py-24 sm:py-32">

<!-- wp:columns {"verticalAlignment":"center","className":"gap-x-8 lg:gap-x-14"} -->
<div class="wp-block-columns are-vertically-aligned-center gap-x-8 lg:gap-x-14">

<!-- wp:column {"verticalAlignment":"center","width":"45%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:45%">

<!-- wp:html -->
<div class="flex items-center gap-x-4 mb-6">
  <a href="#" class="inline-flex items-center gap-x-3 rounded-full border border-border bg-transparent px-3 py-1 text-sm text-muted-foreground hover:border-border/80 transition-colors">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
      <svg class="size-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /></svg>
      About
    </span>
    Backed by Charlesbank Capital Partners →
  </a>
</div>
<!-- /wp:html -->

<!-- wp:heading {"level":1,"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance"} -->
<h1 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-foreground text-balance">Four Operating Units. One Mission.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 text-balance"} -->
<p class="text-lg text-muted-foreground mt-6 text-balance">Each company in the Velocity One family is a specialist manufacturer serving critical markets.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mt-10"} -->
<div class="wp-block-buttons mt-10">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Explore Our Companies</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contact Us</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"55%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%">

<!-- wp:html -->
<div class="rounded-xl bg-card shadow-lg ring-1 ring-border overflow-hidden">
  <div class="border-b border-border bg-muted/50 px-6 py-3">
    <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground m-0">Operating Units</p>
  </div>
  <pre class="p-6 text-sm leading-7 text-muted-foreground font-mono overflow-x-auto"><code>VELOCITY ONE

CAD
Cartridge Actuated Devices, Inc.
Energetics · Defense · Space
Est. 1974

EMCORE
EMCORE Corporation
Navigation · Sensing · Guidance
Three U.S. Facilities

AEROSPHERE
Aerosphere Power & Navigation
Power Electronics · UAV · Military
MIL-Spec Certified

KANEY
Kaney Aerospace
Actuation · Motion Control
Aerospace & Medical</code></pre>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-testimonials bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-testimonials bg-background py-24 sm:py-32">

<!-- wp:heading {"textAlign":"center","className":"text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl">Trusted by founders and operators</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"mt-6 text-lg text-muted-foreground"} -->
<p class="has-text-align-center mt-6 text-lg text-muted-foreground">Leaders across the aerospace and defense industry on what it means to partner with Velocity One.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"mt-16 sm:mt-20","layout":{"type":"default"}} -->
<div class="wp-block-group mt-16 sm:mt-20">
<!-- wp:velocity/testimonial-cards {"columns":3,"gap":"default","variant":"default","limit":6} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-testimonial-centered bg-background","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-testimonial-centered bg-background">
<!-- wp:velocity/testimonial-cards {"columns":1,"variant":"centered","limit":1} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-testimonial-grid bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-testimonial-grid bg-background py-24 sm:py-32">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center has-text-color eyebrow" style="color:var(--color-primary)">Testimonials</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"mt-2 text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl"} -->
<h2 class="wp-block-heading has-text-align-center mt-2 text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl">Trusted by leaders across aerospace and defense</h2>
<!-- /wp:heading -->

<!-- wp:velocity/testimonial-cards {"variant":"grid-masonry","limit":0} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-testimonial-overlapping bg-background","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-testimonial-overlapping bg-background">
<!-- wp:velocity/testimonial-cards {"columns":1,"variant":"overlapping","limit":1} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-testimonial-side-by-side bg-background py-24 sm:py-32","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-testimonial-side-by-side bg-background py-24 sm:py-32">

<!-- wp:velocity/testimonial-cards {"columns":2,"variant":"side-by-side","limit":2} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-logo-cloud bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-logo-cloud bg-background py-24 sm:py-32">

<!-- wp:heading {"textAlign":"center","className":"text-lg font-semibold text-muted-foreground"} -->
<h2 class="wp-block-heading has-text-align-center text-lg font-semibold text-muted-foreground">Our family of operating units</h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"mt-10 sm:mt-14","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group mt-10 sm:mt-14">
<!-- wp:velocity/logo-cloud {"variant":"flex","grayscale":true} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-stats bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-stats bg-background py-24 sm:py-32">

<!-- wp:heading {"className":"text-3xl sm:text-4xl font-semibold tracking-tight text-foreground text-balance"} -->
<h2 class="wp-block-heading text-3xl sm:text-4xl font-semibold tracking-tight text-foreground text-balance">Backed by Charlesbank Capital Partners, Velocity One unites and advances essential aerospace, defense, and industrial companies.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 max-w-2xl"} -->
<p class="text-lg text-muted-foreground mt-6 max-w-2xl">Velocity One is a disciplined acquirer and operator in the aerospace and defense sector. We partner with founders to preserve their legacy while scaling operations for long-term growth.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"mt-10 sm:mt-16","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group mt-10 sm:mt-16">
<!-- wp:velocity/stat-cards {"columns":4,"variant":"card"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"companies","className":"is-section-features-grid bg-muted py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-features-grid bg-muted py-24 sm:py-32" id="companies">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center eyebrow has-text-color" style="color:var(--color-primary)">Our capabilities</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-2xl mx-auto mt-2 text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-2xl mx-auto mt-2 text-balance">Built for critical missions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground text-center max-w-2xl mx-auto mt-6"} -->
<p class="text-lg text-muted-foreground text-center max-w-2xl mx-auto mt-6">Our operating units design and manufacture specialized products trusted across every branch of the U.S. military and major commercial aerospace programs.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16 mt-16 sm:mt-20 max-w-7xl mx-auto"} -->
<div class="wp-block-columns grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16 mt-16 sm:mt-20 max-w-7xl mx-auto">

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"fire","heading":"Energetic Devices","description":"CAD designs and manufactures squibs, bolts, cutters, initiators, detonators, and fuses with over 50 years of proven reliability in critical aerospace and defense applications."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"map","heading":"Inertial Navigation","description":"EMCORE produces advanced navigation and inertial sensing products using Photonic Integrated Chip, Quartz MEMS, and Lithium Niobate technologies for precision guidance systems."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"bolt","heading":"Aircraft Power Electronics","description":"Aerosphere Power \u0026 Navigation manufactures inverters, converters, TRUs, and generator control units for commercial and military aerospace, ground vehicles, and UAV applications."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"cog-6-tooth","heading":"Electromechanical Actuation","description":"Kaney designs and manufactures electromechanical actuation and motion control products for aerospace and medical applications."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"shield-check","heading":"Defense-Grade Quality","description":"Every operating unit maintains rigorous quality programs meeting AS9100, MIL-STD, and customer-specific requirements for the most demanding defense and aerospace platforms."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"building-office-2","heading":"100% U.S. Manufacturing","description":"All production takes place in U.S. facilities across New Jersey, California, and Illinois, supporting domestic supply chain security for critical defense programs."} /-->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/icon-box {"icon":"users","heading":"Operational Partnership","description":"We preserve the leadership, culture, and expertise of every company we acquire. Our founders stay, our teams grow, and our operating units build on decades of proven performance."} /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-features-alt bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-features-alt bg-background py-24 sm:py-32">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center eyebrow has-text-color" style="color:var(--color-primary)">Our Capabilities</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-2xl mx-auto mt-2 text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-2xl mx-auto mt-2 text-balance">Precision manufacturing across the spectrum</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground text-center max-w-2xl mx-auto mt-6"} -->
<p class="text-lg text-muted-foreground text-center max-w-2xl mx-auto mt-6">Our operating units deliver mission-critical products across energetic devices, inertial navigation, and power electronics.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 items-center mt-16 sm:mt-20"} -->
<div class="wp-block-columns grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 items-center mt-16 sm:mt-20">

<!-- wp:column {"className":"lg:order-1"} -->
<div class="wp-block-column lg:order-1">
<!-- wp:image {"aspectRatio":"4/3","scale":"cover","className":"overflow-hidden rounded-xl shadow-sm ring-1 ring-border/50"} -->
<figure class="wp-block-image overflow-hidden rounded-xl shadow-sm ring-1 ring-border/50"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-14.jpg" alt="Control tower at night with light trails" style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:order-0"} -->
<div class="wp-block-column lg:order-0">
<!-- wp:group {"className":"lg:max-w-lg","layout":{"type":"constrained"}} -->
<div class="wp-block-group lg:max-w-lg">

<!-- wp:heading {"level":3,"className":"text-2xl font-semibold tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-2xl font-semibold tracking-tight text-foreground">Aerospace & Defense Manufacturing</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-base text-muted-foreground mt-4"} -->
<p class="text-base text-muted-foreground mt-4">Our operating units design and manufacture products trusted in the most demanding environments, from fighter ejection seats to satellite navigation systems.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"check-list mt-8 space-y-3 text-sm text-muted-foreground"} -->
<ul class="check-list mt-8 space-y-3 text-sm text-muted-foreground"><!-- wp:list-item -->
<li>Energetic devices: squibs, bolts, cutters, initiators</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Inertial navigation using Photonic Integrated Chip technology</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Power electronics: inverters, converters, TRUs</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 items-center mt-16 sm:mt-24"} -->
<div class="wp-block-columns grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-16 items-center mt-16 sm:mt-24">

<!-- wp:column {"className":"lg:order-0"} -->
<div class="wp-block-column lg:order-0">
<!-- wp:image {"aspectRatio":"4/3","scale":"cover","className":"overflow-hidden rounded-xl shadow-sm ring-1 ring-border/50"} -->
<figure class="wp-block-image overflow-hidden rounded-xl shadow-sm ring-1 ring-border/50"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-15.jpg" alt="Landing gear close-up with sunset flare" style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:order-1"} -->
<div class="wp-block-column lg:order-1">
<!-- wp:group {"className":"lg:max-w-lg","layout":{"type":"constrained"}} -->
<div class="wp-block-group lg:max-w-lg">

<!-- wp:heading {"level":3,"className":"text-2xl font-semibold tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-2xl font-semibold tracking-tight text-foreground">Operational Excellence</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-base text-muted-foreground mt-4"} -->
<p class="text-base text-muted-foreground mt-4">We invest in modernizing operations, strengthening supply chains, and empowering leadership teams to drive long-term performance.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"check-list mt-8 space-y-3 text-sm text-muted-foreground"} -->
<ul class="check-list mt-8 space-y-3 text-sm text-muted-foreground"><!-- wp:list-item -->
<li>Five manufacturing facilities across the U.S.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>500+ employees across operating units</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>50+ years of combined expertise</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"companies","className":"is-section-bento-three-column bg-muted py-24 sm:py-32","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-bento-three-column bg-muted py-24 sm:py-32" id="companies">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center eyebrow has-text-color" style="color:var(--color-primary)">Our Capabilities</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance">Three operating units. One standard of excellence.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"className":"bento-grid grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-4 mt-10 sm:mt-16"} -->
<div class="wp-block-columns bento-grid grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-4 mt-10 sm:mt-16">

<!-- wp:column {"className":"order-2 lg:order-0 lg:row-span-2"} -->
<div class="wp-block-column order-2 lg:order-0 lg:row-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg lg:rounded-l-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg lg:rounded-l-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10 pb-3 sm:pb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10 pb-3 sm:pb-0">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Energetic Devices</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">CAD designs and manufactures squibs, bolts, cutters, initiators, and fuses trusted in ejection seats and spacecraft separation systems for over 50 years.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"relative min-h-80 lg:min-h-120 w-full grow","layout":{"type":"constrained"}} -->
<div class="wp-block-group relative min-h-80 lg:min-h-120 w-full grow">
<!-- wp:html -->
<div class="absolute inset-x-10 top-10 -bottom-40 overflow-hidden rounded-t-2xl shadow-2xl">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg" alt="Fighter jet in hangar" class="size-full object-cover object-top" />
</div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"order-1 lg:order-0"} -->
<div class="wp-block-column order-1 lg:order-0">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg max-lg:rounded-t-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg max-lg:rounded-t-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Operational Scale</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Five manufacturing facilities and over 500 employees across the United States, delivering products for the most demanding applications in aerospace and defense.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="flex flex-1 items-center justify-center px-8 pt-10 pb-12 sm:px-10 lg:pb-2 lg:pt-0">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-02.jpg" alt="Aerial view of aircraft operations" class="w-full rounded-lg object-cover" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"order-3 lg:order-0 lg:col-start-2 lg:row-start-2"} -->
<div class="wp-block-column order-3 lg:order-0 lg:col-start-2 lg:row-start-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Quality Assurance</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Rigorous testing and certification across every operating unit. When failure is not an option, our quality standards set the benchmark.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="flex flex-1 items-center px-8 py-6 sm:px-10 lg:pb-2 lg:py-0">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-15.jpg" alt="Landing gear detail" class="w-full rounded-lg object-cover" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"order-4 lg:order-0 lg:row-span-2"} -->
<div class="wp-block-column order-4 lg:order-0 lg:row-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg max-lg:rounded-b-4xl lg:rounded-r-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg max-lg:rounded-b-4xl lg:rounded-r-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10 pb-3 sm:pb-0","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10 pb-3 sm:pb-0">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Inertial Navigation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">EMCORE delivers navigation-grade inertial measurement units using Photonic Integrated Chip, Quartz MEMS, and Lithium Niobate technologies for defense and commercial platforms.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"relative min-h-80 lg:min-h-120 w-full grow","layout":{"type":"constrained"}} -->
<div class="wp-block-group relative min-h-80 lg:min-h-120 w-full grow">
<!-- wp:html -->
<div class="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl shadow-2xl">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-14.jpg" alt="Control tower at night" class="size-full object-cover" />
</div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-bento-two-row bg-muted py-24 sm:py-32","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-bento-two-row bg-muted py-24 sm:py-32">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center eyebrow has-text-color" style="color:var(--color-primary)">How We Operate</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance">Disciplined operations. Measurable results.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"className":"bento-grid grid grid-cols-1 lg:grid-cols-3 gap-4 mt-10 sm:mt-16"} -->
<div class="wp-block-columns bento-grid grid grid-cols-1 lg:grid-cols-3 gap-4 mt-10 sm:mt-16">

<!-- wp:column {"className":"lg:col-span-2"} -->
<div class="wp-block-column lg:col-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-tl-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-tl-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Manufacturing Excellence</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Five facilities across the United States producing mission-critical components for aerospace and defense programs. We modernize operations while preserving the expertise that built each company.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-17.jpg" alt="Engine close-up with cargo operations" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:col-span-1"} -->
<div class="wp-block-column lg:col-span-1">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-tr-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-tr-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Supply Chain</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Coordinated procurement and logistics across our family of operating units, strengthening supplier relationships and reducing lead times.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-06.jpg" alt="Control tower at sunset" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:col-span-1"} -->
<div class="wp-block-column lg:col-span-1">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-bl-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-bl-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Quality & Compliance</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Certified processes and rigorous testing standards across every product line. In aerospace, there is no margin for error.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-15.jpg" alt="Landing gear close-up" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:col-span-2"} -->
<div class="wp-block-column lg:col-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-br-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-br-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Technology & Innovation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">From Photonic Integrated Chip navigation to next-generation power electronics, our operating units invest in the technologies that keep the U.S. industrial base competitive.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-14.jpg" alt="Control tower at night with light trails" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-bento-two-row-three-col bg-muted py-24 sm:py-32","align":"full","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-bento-two-row-three-col bg-muted py-24 sm:py-32">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"eyebrow"} -->
<p class="has-text-align-center eyebrow has-text-color" style="color:var(--color-primary)">Our Markets</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground max-w-lg mx-auto mt-2 text-balance">Products trusted where performance is not optional</h2>
<!-- /wp:heading -->

<!-- wp:columns {"className":"bento-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 mt-10 sm:mt-16"} -->
<div class="wp-block-columns bento-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 mt-10 sm:mt-16">

<!-- wp:column {"className":"sm:col-span-1 lg:col-span-2"} -->
<div class="wp-block-column sm:col-span-1 lg:col-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-tl-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-tl-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Energetics</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Cartridge actuated devices for ejection seats, spacecraft separation, and ordnance systems. Over 50 years of proven reliability.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg" alt="Fighter jet in hangar" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"sm:col-span-1 lg:col-span-2"} -->
<div class="wp-block-column sm:col-span-1 lg:col-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Navigation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Inertial measurement units and navigation systems built on Photonic Integrated Chip technology for military and commercial platforms.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-08.jpg" alt="Motion blur plane on runway at night" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"sm:col-span-2 lg:col-span-2"} -->
<div class="wp-block-column sm:col-span-2 lg:col-span-2">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-tr-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-tr-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Power Systems</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">Inverters, converters, TRUs, and generator control units for commercial aircraft, military platforms, and UAVs.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-16.jpg" alt="Plane head-on with runway lights at night" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"sm:col-span-1 lg:col-span-3"} -->
<div class="wp-block-column sm:col-span-1 lg:col-span-3">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-bl-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-bl-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">Operational Excellence</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">We invest in modernizing operations, strengthening supply chains, and empowering leadership teams to drive long-term performance across every facility.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-02.jpg" alt="Aerial view of plane at gate" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column {"className":"sm:col-span-1 lg:col-span-3"} -->
<div class="wp-block-column sm:col-span-1 lg:col-span-3">
<!-- wp:group {"className":"h-full overflow-hidden rounded-lg rounded-br-4xl bg-card shadow-sm ring-1 ring-border/50","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group h-full overflow-hidden rounded-lg rounded-br-4xl bg-card shadow-sm ring-1 ring-border/50">

<!-- wp:group {"className":"p-8 sm:p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group p-8 sm:p-10">
<!-- wp:heading {"level":3,"className":"text-lg font-medium tracking-tight text-foreground"} -->
<h3 class="wp-block-heading text-lg font-medium tracking-tight text-foreground">National Defense</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-sm/6 text-muted-foreground mt-2 max-w-lg"} -->
<p class="text-sm/6 text-muted-foreground mt-2 max-w-lg">100% U.S.-based manufacturing supporting programs across the Department of Defense, allied forces, and prime defense contractors worldwide.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:html -->
<div class="grow">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-03.jpg" alt="Plane silhouette against dramatic clouds" class="w-full h-full object-cover object-top" />
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"templateLock":"contentOnly","lock":{"move":true,"remove":false},"anchor":"about","className":"overflow-hidden bg-muted py-24 sm:py-32","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull overflow-hidden bg-muted py-24 sm:py-32" id="about">

<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":true} -->
<div class="wp-block-columns are-vertically-aligned-center is-stacked-on-mobile">

<!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance"} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance">About Velocity One</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg/8 text-muted-foreground","style":{"spacing":{"margin":{"top":"1.5rem"}}}} -->
<p class="text-lg/8 text-muted-foreground" style="margin-top:1.5rem">Backed by <a href="https://www.charlesbank.com" target="_blank" rel="noopener noreferrer" class="text-foreground underline underline-offset-4 hover:text-primary">Charlesbank Capital Partners</a>, Velocity One identifies strategically vital manufacturers with untapped potential. Through investment, modernization, and partnership, we help each business achieve lasting growth and strengthen the domestic industrial base.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"2.5rem"}}}} -->
<div class="wp-block-buttons" style="margin-top:2.5rem">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#companies">Explore Our Companies →</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%">
<!-- wp:image {"aspectRatio":"3/2","scale":"cover","className":"rounded-2xl overflow-hidden"} -->
<figure class="wp-block-image rounded-2xl overflow-hidden"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-27.jpg" alt="Fighter jet on landing approach against golden sunset" style="aspect-ratio:3/2;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

<!-- wp:columns {"isStackedOnMobile":false,"align":"wide","style":{"spacing":{"margin":{"top":"3rem"}}}} -->
<div class="wp-block-columns alignwide is-not-stacked-on-mobile" style="margin-top:3rem">

<!-- wp:column {"width":"25%","className":"pt-16","style":{"spacing":{"padding":{"right":"0.75rem"}}}} -->
<div class="wp-block-column pt-16" style="flex-basis:25%;padding-right:0.75rem">
<!-- wp:image {"aspectRatio":"2/3","scale":"cover","className":"rounded-2xl overflow-hidden"} -->
<figure class="wp-block-image rounded-2xl overflow-hidden"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-24.jpg" alt="Fighter jet climbing through dramatic sunset clouds" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"left":"0.75rem","right":"0.75rem"}}}} -->
<div class="wp-block-column" style="flex-basis:50%;padding-left:0.75rem;padding-right:0.75rem">
<!-- wp:image {"aspectRatio":"4/3","scale":"cover","className":"rounded-2xl overflow-hidden"} -->
<figure class="wp-block-image rounded-2xl overflow-hidden"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-21.jpg" alt="Aviation headset silhouetted in cockpit" style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%","className":"pt-8","style":{"spacing":{"padding":{"left":"0.75rem"}}}} -->
<div class="wp-block-column pt-8" style="flex-basis:25%;padding-left:0.75rem">
<!-- wp:image {"aspectRatio":"2/3","scale":"cover","className":"rounded-2xl overflow-hidden"} -->
<figure class="wp-block-image rounded-2xl overflow-hidden"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-22.jpg" alt="Military personnel with gear on airfield near helicopter" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"templateLock":"contentOnly","lock":{"move":true,"remove":false},"anchor":"companies","className":"is-section-content-split-image bg-background py-24 sm:py-32","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-content-split-image bg-background py-24 sm:py-32" id="companies">

<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":true,"className":"gap-x-16"} -->
<div class="wp-block-columns are-vertically-aligned-center is-stacked-on-mobile gap-x-16">

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">
<!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"rounded-2xl overflow-hidden"} -->
<figure class="wp-block-image rounded-2xl overflow-hidden"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg" alt="Fighter jet in hangar, dramatic lighting" style="aspect-ratio:3/4;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">

<!-- wp:heading {"className":"text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl"} -->
<h2 class="wp-block-heading text-4xl font-semibold tracking-tight text-pretty text-foreground sm:text-5xl">Our Companies</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-6 text-xl/8 text-muted-foreground"} -->
<p class="mt-6 text-xl/8 text-muted-foreground">A growing network of U.S. manufacturers serving mission-critical industries.</p>
<!-- /wp:paragraph -->

<!-- wp:velocity/company-cards {"columns":2,"gap":"default"} /-->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"about","className":"is-section-about bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-about bg-background py-24 sm:py-32" id="about">

<!-- wp:heading {"className":"text-3xl sm:text-4xl font-semibold tracking-tight text-foreground max-w-2xl text-balance"} -->
<h2 class="wp-block-heading text-3xl sm:text-4xl font-semibold tracking-tight text-foreground max-w-2xl text-balance">A disciplined acquirer and operator in aerospace and defense</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground mt-6 max-w-2xl"} -->
<p class="text-lg text-muted-foreground mt-6 max-w-2xl">Velocity One partners with founders to preserve their legacy while scaling operations for long-term growth. Backed by Charlesbank Capital Partners, we unite and advance essential aerospace, defense, and industrial companies.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"isStackedOnMobile":true,"className":"mt-10 gap-x-12"} -->
<div class="wp-block-columns is-stacked-on-mobile mt-10 gap-x-12">

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph {"className":"text-base/7 text-muted-foreground"} -->
<p class="text-base/7 text-muted-foreground">We identify strategically vital manufacturing companies serving critical aerospace and defense programs. Our operating units produce energetic devices, inertial navigation systems, and aircraft power electronics used on platforms across every branch of the U.S. military and major commercial aerospace programs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"text-base/7 text-muted-foreground mt-6"} -->
<p class="text-base/7 text-muted-foreground">With over 50 years of combined expertise and 500+ employees across our family of companies, we bring the operational depth and technical talent to support both legacy programs and next-generation platforms.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph {"className":"text-base/7 text-muted-foreground"} -->
<p class="text-base/7 text-muted-foreground">In pilot terminology, V1 is the speed at which an aircraft is committed to takeoff. Every part must perform. Velocity One carries that same commitment to its operating units: we modernize operations, empower leadership, and invest in innovation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"text-base/7 text-muted-foreground mt-6"} -->
<p class="text-base/7 text-muted-foreground">We don't acquire companies to restructure them. We invest in the people, processes, and products that made them valuable in the first place. Our founders stay, our contracts grow, and our teams build on decades of proven performance.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"templateLock":"contentOnly","lock":{"move":true,"remove":false},"anchor":"companies","align":"full","className":"is-section-companies-grid bg-background","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull is-section-companies-grid bg-background" id="companies">
<!-- wp:columns {"verticalAlignment":"stretch","className":"min-h-[600px]"} -->
<div class="wp-block-columns are-vertically-aligned-stretch min-h-[600px]">

<!-- wp:column {"verticalAlignment":"stretch","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:50%">
<!-- wp:cover {"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg","alt":"Fighter jet in hangar, dramatic lighting","dimRatio":0,"minHeight":100,"minHeightUnit":"%","style":{"dimensions":{"minHeight":"100%"}}} -->
<div class="wp-block-cover" style="min-height:100%"><img class="wp-block-cover__image-background" alt="Fighter jet in hangar, dramatic lighting" src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height":"1px"} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
</div></div>
<!-- /wp:cover -->
</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"2rem","right":"2rem"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:4rem;padding-right:2rem;padding-bottom:4rem;padding-left:2rem;flex-basis:50%">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground"} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground">Our Companies</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-6 text-xl/8 text-muted-foreground"} -->
<p class="mt-6 text-xl/8 text-muted-foreground">A growing network of U.S. manufacturers serving mission-critical industries.</p>
<!-- /wp:paragraph -->

<!-- wp:velocity/company-cards /-->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-gallery bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-gallery bg-background py-24 sm:py-32">

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance">Operations Gallery</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"text-lg text-muted-foreground mt-6"} -->
<p class="has-text-align-center text-lg text-muted-foreground mt-6">A look at our operations across aerospace and defense manufacturing.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"mt-10 sm:mt-16","layout":{"type":"default"}} -->
<div class="wp-block-group mt-10 sm:mt-16">
<!-- wp:velocity/image-grid {"images":[{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-19.jpg","alt":"Fighter jet in hangar"},{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-17.jpg","alt":"Engine close-up with cargo"},{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-08.jpg","alt":"Aircraft on runway at night"},{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-06.jpg","alt":"Control tower at sunset"},{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-15.jpg","alt":"Landing gear close-up"},{"id":0,"url":"https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-14.jpg","alt":"Control tower at night"}],"columns":{"sm":2,"lg":3},"aspectRatio":"square","gap":"4","rounded":"xl","linkTo":"lightbox"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"news","className":"is-style-silver is-section-blog-three-column py-24 sm:py-32 px-6 lg:px-8","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-silver is-section-blog-three-column py-24 sm:py-32 px-6 lg:px-8" id="news">

<!-- wp:heading {"className":"text-5xl sm:text-7xl font-semibold tracking-tight text-balance","textColor":"foreground"} -->
<h2 class="wp-block-heading text-5xl sm:text-7xl font-semibold tracking-tight text-balance has-foreground-color has-text-color">In the News</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-xl sm:text-2xl mt-6 text-balance max-w-2xl","textColor":"muted-foreground"} -->
<p class="text-xl sm:text-2xl mt-6 text-balance max-w-2xl has-muted-foreground-color has-text-color">Read the latest updates from across the Velocity One platform.</p>
<!-- /wp:paragraph -->

<!-- wp:velocity/latest-posts {"variant":"minimal","columns":2,"count":2,"showExcerpt":true,"showDate":true,"dividers":true,"className":"mt-10 sm:mt-16"} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-contact bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact bg-background py-24 sm:py-32">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground","level":2} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-foreground">Contact Us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-4 text-base/7 text-muted-foreground max-w-2xl"} -->
<p class="mt-4 text-base/7 text-muted-foreground max-w-2xl">Have a question about our operating units or interested in exploring a partnership? We'd like to hear from you.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="mx-auto max-w-7xl px-6 lg:px-8">
  <div class="grid grid-cols-1 gap-x-16 gap-y-12 lg:grid-cols-5">
    <!-- Left: Info -->
    <div class="lg:col-span-2">
      <dl class="space-y-4 text-base/7 text-muted-foreground">
        <div class="flex gap-x-4">
          <dt class="flex-none">
            <span class="sr-only">Address</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="h-7 w-6 text-muted-foreground/70">
              <path d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </dt>
          <dd>51 Dwight Pl, Fairfield, NJ 07004</dd>
        </div>
        <div class="flex gap-x-4">
          <dt class="flex-none">
            <span class="sr-only">Email</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="h-7 w-6 text-muted-foreground/70">
              <path d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </dt>
          <dd><a href="mailto:[email protected]" class="hover:text-foreground">[email protected]</a></dd>
        </div>
      </dl>
            <div class="mt-8">
        <a href="https://www.linkedin.com/company/velocity-one-holdings/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-x-2 text-sm font-semibold text-muted-foreground hover:text-foreground">
          <svg class="size-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          Follow on LinkedIn
        </a>
      </div>
          </div>
    <!-- Right: Form -->
    <div class="lg:col-span-3">
<!-- /wp:html -->

<!-- wp:velocity/contact-form /-->

<!-- wp:html -->
    </div>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"contact","className":"is-section-contact-centered bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact-centered bg-background py-24 sm:py-32" id="contact">

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance">Contact Us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"mt-2 text-lg text-muted-foreground"} -->
<p class="has-text-align-center mt-2 text-lg text-muted-foreground">Whether you're exploring a partnership or have a question about our operating units, we're here to help.</p>
<!-- /wp:paragraph -->

<!-- wp:velocity/contact-form {"showPhone":true,"showPolicyCheckbox":true,"buttonFullWidth":true,"className":"mx-auto mt-16 max-w-xl sm:mt-20"} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-contact-split-info bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact-split-info bg-background py-24 sm:py-32">

<!-- wp:columns {"className":"grid grid-cols-1 lg:grid-cols-2 gap-x-16 gap-y-16"} -->
<div class="wp-block-columns grid grid-cols-1 lg:grid-cols-2 gap-x-16 gap-y-16">

<!-- wp:column -->
<div class="wp-block-column">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground"} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground">Get in touch</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-6 text-lg/8 text-muted-foreground"} -->
<p class="mt-6 text-lg/8 text-muted-foreground">Interested in learning more about Velocity One or our family of operating units? Reach out and a member of our team will follow up.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"mt-10 space-y-6","layout":{"type":"constrained"}} -->
<div class="wp-block-group mt-10 space-y-6">

<!-- wp:heading {"level":3,"className":"text-sm font-semibold uppercase tracking-wider text-muted-foreground"} -->
<h3 class="wp-block-heading text-sm font-semibold uppercase tracking-wider text-muted-foreground">Headquarters</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-base/7 text-foreground"} -->
<p class="text-base/7 text-foreground">51 Dwight Pl<br>Fairfield, NJ 07004</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"className":"text-sm font-semibold uppercase tracking-wider text-muted-foreground mt-8"} -->
<h3 class="wp-block-heading text-sm font-semibold uppercase tracking-wider text-muted-foreground mt-8">Email</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-base/7 text-foreground"} -->
<p class="text-base/7 text-foreground"><a href="mailto:[email protected]">[email protected]</a></p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:velocity/contact-form /-->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-contact-side-by-side bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact-side-by-side bg-background py-24 sm:py-32">

<!-- wp:columns {"className":"grid grid-cols-1 lg:grid-cols-3 gap-10"} -->
<div class="wp-block-columns grid grid-cols-1 lg:grid-cols-3 gap-10">

<!-- wp:column -->
<div class="wp-block-column">

<!-- wp:heading {"className":"text-4xl font-semibold tracking-tight text-pretty text-foreground"} -->
<h2 class="wp-block-heading text-4xl font-semibold tracking-tight text-pretty text-foreground">Reach the right team</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-4 text-base/7 text-muted-foreground"} -->
<p class="mt-4 text-base/7 text-muted-foreground">Contact a department directly or send a general inquiry to <a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a>.</p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:column -->

<!-- wp:column {"className":"lg:col-span-2"} -->
<div class="wp-block-column lg:col-span-2">

<!-- wp:columns {"className":"grid grid-cols-1 sm:grid-cols-2 gap-6"} -->
<div class="wp-block-columns grid grid-cols-1 sm:grid-cols-2 gap-6">

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"className":"rounded-2xl bg-muted !p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group rounded-2xl bg-muted !p-10">
<!-- wp:heading {"level":3,"className":"text-base/7 font-semibold text-foreground"} -->
<h3 class="wp-block-heading text-base/7 font-semibold text-foreground">Acquisitions</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"mt-3 text-sm/6 text-muted-foreground"} -->
<p class="mt-3 text-sm/6 text-muted-foreground"><a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"className":"rounded-2xl bg-muted !p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group rounded-2xl bg-muted !p-10">
<!-- wp:heading {"level":3,"className":"text-base/7 font-semibold text-foreground"} -->
<h3 class="wp-block-heading text-base/7 font-semibold text-foreground">Operations</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"mt-3 text-sm/6 text-muted-foreground"} -->
<p class="mt-3 text-sm/6 text-muted-foreground"><a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"className":"rounded-2xl bg-muted !p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group rounded-2xl bg-muted !p-10">
<!-- wp:heading {"level":3,"className":"text-base/7 font-semibold text-foreground"} -->
<h3 class="wp-block-heading text-base/7 font-semibold text-foreground">Investor Relations</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"mt-3 text-sm/6 text-muted-foreground"} -->
<p class="mt-3 text-sm/6 text-muted-foreground"><a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"className":"rounded-2xl bg-muted !p-10","layout":{"type":"constrained"}} -->
<div class="wp-block-group rounded-2xl bg-muted !p-10">
<!-- wp:heading {"level":3,"className":"text-base/7 font-semibold text-foreground"} -->
<h3 class="wp-block-heading text-base/7 font-semibold text-foreground">Media & Press</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"mt-3 text-sm/6 text-muted-foreground"} -->
<p class="mt-3 text-sm/6 text-muted-foreground"><a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-contact-testimonial bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact-testimonial bg-background py-24 sm:py-32">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground","level":2} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground">Let's talk about working together</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-2 text-lg/8 text-muted-foreground max-w-xl"} -->
<p class="mt-2 text-lg/8 text-muted-foreground max-w-xl">Whether you're exploring a partnership or considering your company's next chapter, we're ready to listen.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="mx-auto max-w-xl lg:max-w-4xl px-6 lg:px-8">
  <div class="mt-16 flex flex-col gap-16 sm:gap-y-20 lg:flex-row">
    <div class="lg:flex-auto">
<!-- /wp:html -->

<!-- wp:velocity/contact-form {"buttonFullWidth":true} /-->

<!-- wp:html -->
      <p class="mt-4 text-sm/6 text-muted-foreground">By submitting this form, I agree to the <a href="#" class="font-semibold whitespace-nowrap" style="color: var(--color-primary)">privacy policy</a>.</p>
    </div>
        <div class="lg:mt-6 lg:w-80 lg:flex-none">
      <figure class="mt-10">
        <blockquote class="text-lg/8 font-semibold text-foreground">
          <p>"Velocity One understood our business from day one. They preserved what made us special while giving us the resources to compete at a higher level."</p>
        </blockquote>
        <figcaption class="mt-10 flex gap-x-6">
          <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/portraits/team-portrait--11.jpg" alt="David Mercer" class="size-12 flex-none rounded-full bg-muted object-cover" />
          <div>
            <div class="text-base font-semibold text-foreground">David Mercer</div>
            <div class="text-sm/6 text-muted-foreground">Former CEO, Acquired Operating Unit</div>
          </div>
        </figcaption>
      </figure>
    </div>
      </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-contact-split-image bg-background","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-contact-split-image bg-background">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground","level":2} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-pretty text-foreground">Let's work together</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-2 text-lg/8 text-muted-foreground max-w-xl"} -->
<p class="mt-2 text-lg/8 text-muted-foreground max-w-xl">Whether you're a founder exploring options or an industry partner, we'd welcome the conversation.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="relative">
  <div class="lg:absolute lg:inset-0 lg:left-1/2">
    <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-18.jpg" alt="Velocity One - aerospace operations" class="h-64 w-full bg-muted object-cover sm:h-80 lg:absolute lg:h-full" />
  </div>
  <div class="pt-16 pb-24 sm:pt-24 sm:pb-32 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:pt-32">
    <div class="px-6 lg:px-8">
      <div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg mt-16">
<!-- /wp:html -->

<!-- wp:velocity/contact-form {"showPhone":true} /-->

<!-- wp:html -->
      </div>
    </div>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"anchor":"contact","className":"is-style-amber is-section-contact-branded py-24 sm:py-32 px-6 lg:px-8 overflow-hidden","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-amber is-section-contact-branded py-24 sm:py-32 px-6 lg:px-8 overflow-hidden" id="contact">

<!-- wp:columns {"verticalAlignment":"center","className":"gap-x-8 lg:gap-x-14"} -->
<div class="wp-block-columns are-vertically-aligned-center gap-x-8 lg:gap-x-14">

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">

<!-- wp:heading {"className":"text-4xl sm:text-5xl font-semibold tracking-tight text-balance mt-2","textColor":"foreground"} -->
<h2 class="wp-block-heading text-4xl sm:text-5xl font-semibold tracking-tight text-balance mt-2 has-foreground-color has-text-color">Contact us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg mt-6 text-balance","textColor":"muted-foreground"} -->
<p class="text-lg mt-6 text-balance has-muted-foreground-color has-text-color">We'd love to hear from you. Reach out to our team using the information below.</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"gap-x-8 gap-y-8 mt-10 sm:mt-14"} -->
<div class="wp-block-columns gap-x-8 gap-y-8 mt-10 sm:mt-14">

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"className":"text-sm font-semibold","textColor":"foreground"} -->
<p class="text-sm font-semibold has-foreground-color has-text-color">Email</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"text-sm","textColor":"foreground"} -->
<p class="text-sm has-foreground-color has-text-color"><a href="mailto:[email protected]" class="underline underline-offset-4 hover:no-underline">[email protected]</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"className":"text-sm font-semibold","textColor":"foreground"} -->
<p class="text-sm font-semibold has-foreground-color has-text-color">LinkedIn</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"text-sm","textColor":"foreground"} -->
<p class="text-sm has-foreground-color has-text-color"><a href="https://www.linkedin.com/company/velocity-one-holdings/" target="_blank" rel="noopener noreferrer" class="underline underline-offset-4 hover:no-underline">Follow Velocity One</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">

<!-- wp:group {"className":"is-image-tiles-stagger","layout":{"type":"default"}} -->
<div class="wp-block-group is-image-tiles-stagger">

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:image {"aspectRatio":"2/3","scale":"cover"} -->
<figure class="wp-block-image"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-23.jpg" alt="Fighter jet canopy and tail fins against sunset sky" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:image {"aspectRatio":"2/3","scale":"cover"} -->
<figure class="wp-block-image"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-24.jpg" alt="Fighter jet climbing through dramatic sunset clouds" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
<!-- wp:image {"aspectRatio":"2/3","scale":"cover"} -->
<figure class="wp-block-image"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-20.jpg" alt="Engineers inspecting industrial robotics in manufacturing facility" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:image {"aspectRatio":"2/3","scale":"cover"} -->
<figure class="wp-block-image"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-25.jpg" alt="Aircraft undercarriage and landing gear on tarmac at sunset" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
<!-- wp:image {"aspectRatio":"2/3","scale":"cover"} -->
<figure class="wp-block-image"><img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-01.jpg" alt="Sunset sky with contrail" style="aspect-ratio:2/3;object-fit:cover"/></figure>
<!-- /wp:image -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:column -->

</div>
<!-- /wp:columns -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-page-header bg-background","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-page-header bg-background">

<!-- wp:html -->
<div class="py-24 sm:py-32 px-6 lg:px-8">
  <div class="mx-auto max-w-7xl">
    <p class="text-sm font-medium uppercase tracking-wider m-0" style="color: var(--color-primary)">Company</p>
    <h1 class="text-4xl sm:text-5xl font-bold tracking-tight mt-3 mb-0">Our mission and team</h1>
    <p class="text-muted-foreground mt-2 mb-0">Learn about who we are, what we value, and how we build products that help teams move faster.</p>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-banner bg-gradient-to-r from-primary to-primary/80 text-primary-foreground py-3.5 text-sm text-center [\u0026_a]:text-primary-foreground [\u0026_a]:underline [\u0026_a]:underline-offset-[3px] [\u0026_a]:font-medium [\u0026_a]:hover:opacity-80 [\u0026_a]:transition-opacity","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-group alignfull is-section-banner bg-gradient-to-r from-primary to-primary/80 text-primary-foreground py-3.5 text-sm text-center [&_a]:text-primary-foreground [&_a]:underline [&_a]:underline-offset-[3px] [&_a]:font-medium [&_a]:hover:opacity-80 [&_a]:transition-opacity"><!-- wp:paragraph -->
<p>🎉 <strong>Announcing our next round of funding.</strong> <a href="#" style="color: var(--color-primary-foreground)">Read more →</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-page-header-centered bg-background py-24 sm:py-32","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-page-header-centered bg-background py-24 sm:py-32">

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(\u002d\u002dcolor-primary)"}},"className":"text-base/7 font-semibold"} -->
<p class="has-text-align-center has-text-color text-base/7 font-semibold" style="color:var(--color-primary)">Get the help you need</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","className":"mt-2 text-5xl font-semibold tracking-tight text-foreground sm:text-7xl","level":2} -->
<h2 class="wp-block-heading has-text-align-center mt-2 text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">Support center</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl mx-auto"} -->
<p class="has-text-align-center mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl mx-auto">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.</p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-page-header-cards bg-background py-24 sm:py-32","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-page-header-cards bg-background py-24 sm:py-32">

<!-- wp:heading {"className":"text-5xl font-semibold tracking-tight text-foreground sm:text-7xl","level":2} -->
<h2 class="wp-block-heading text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">Get in Touch</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl"} -->
<p class="mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl">Whether you're a founder exploring options, an industry partner, or a member of the press, we'd welcome the conversation.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="relative isolate overflow-hidden">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-10.jpg" alt="" class="absolute inset-0 -z-10 size-full object-cover object-right opacity-10 md:object-center" />
  <div aria-hidden="true" class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
    <div style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" class="aspect-[1097/845] w-[68.5rem] bg-gradient-to-tr from-primary/30 to-accent/30 opacity-15"></div>
  </div>
  <div aria-hidden="true" class="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:ml-16 sm:translate-x-0">
    <div style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" class="aspect-[1097/845] w-[68.5rem] bg-gradient-to-tr from-primary/30 to-accent/30 opacity-15"></div>
  </div>
  <div class="mx-auto max-w-7xl">
    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
      <div class="flex gap-x-4 rounded-xl bg-card/30 p-6 ring-1 ring-border/50 backdrop-blur-sm">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-7 w-5 flex-none text-primary">
          <path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" />
          <path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" />
        </svg>
        <div class="text-base/7">
          <h3 class="font-semibold text-foreground m-0">General Inquiries</h3>
          <p class="mt-2 text-muted-foreground mb-0">Reach our team at <a href="mailto:" class="text-primary hover:underline"></a></p>
        </div>
      </div>
      <div class="flex gap-x-4 rounded-xl bg-card/30 p-6 ring-1 ring-border/50 backdrop-blur-sm">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-7 w-5 flex-none text-primary">
          <path fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h16.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 10a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75ZM1 6.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 6.25Zm0 3.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Zm0 7a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
        </svg>
        <div class="text-base/7">
          <h3 class="font-semibold text-foreground m-0">Acquisitions</h3>
          <p class="mt-2 text-muted-foreground mb-0">Exploring a sale or partnership? Our acquisitions team can discuss next steps confidentially.</p>
        </div>
      </div>
      <div class="flex gap-x-4 rounded-xl bg-card/30 p-6 ring-1 ring-border/50 backdrop-blur-sm">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-7 w-5 flex-none text-primary">
          <path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v11.75A2.75 2.75 0 0 0 16.75 18h-12A2.75 2.75 0 0 1 2 15.25V3.5Zm3.75 7a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Zm0 3a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5ZM5 5.75A.75.75 0 0 1 5.75 5h4.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 8.25v-2.5Z" clip-rule="evenodd" fill-rule="evenodd" />
          <path d="M16.5 6.5h-1v8.75a1.25 1.25 0 1 0 2.5 0V8a1.5 1.5 0 0 0-1.5-1.5Z" />
        </svg>
        <div class="text-base/7">
          <h3 class="font-semibold text-foreground m-0">Media Inquiries</h3>
          <p class="mt-2 text-muted-foreground mb-0">For press and media requests, contact us at <a href="mailto:" class="text-primary hover:underline"></a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-page-header-stats bg-background py-24 sm:py-32","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-page-header-stats bg-background py-24 sm:py-32">

<!-- wp:heading {"className":"text-5xl font-semibold tracking-tight text-foreground sm:text-7xl","level":2} -->
<h2 class="wp-block-heading text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">About Velocity One</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl"} -->
<p class="mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8 max-w-2xl">We acquire and scale specialized manufacturers serving aerospace, defense, and industrial markets. Backed by Charlesbank Capital Partners.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="mt-10 rounded-xl bg-muted/50 ring-1 ring-border overflow-hidden relative">
  <img src="https://velocity-one.com/wp-content/themes/velocity/assets/img/scenes/velocity-one-01.jpg" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-5" />
  <div class="px-6 py-8 sm:px-10 sm:py-10">
    <div class="flex flex-wrap gap-x-8 gap-y-4 text-sm font-semibold text-foreground">
      <a href="#" class="hover:text-primary transition-colors">Our Companies <span aria-hidden="true">→</span></a>
      <a href="#" class="hover:text-primary transition-colors">Leadership <span aria-hidden="true">→</span></a>
      <a href="#" class="hover:text-primary transition-colors">News <span aria-hidden="true">→</span></a>
      <a href="#" class="hover:text-primary transition-colors">Contact Us <span aria-hidden="true">→</span></a>
    </div>
    <dl class="mt-10 grid grid-cols-2 gap-8 lg:grid-cols-4 mb-0">
      <div class="flex flex-col-reverse gap-1">
        <dt class="text-sm text-muted-foreground">Operating units</dt>
        <dd class="text-3xl font-semibold tracking-tight text-foreground m-0">3</dd>
      </div>
      <div class="flex flex-col-reverse gap-1">
        <dt class="text-sm text-muted-foreground">Employees</dt>
        <dd class="text-3xl font-semibold tracking-tight text-foreground m-0">500+</dd>
      </div>
      <div class="flex flex-col-reverse gap-1">
        <dt class="text-sm text-muted-foreground">Manufacturing facilities</dt>
        <dd class="text-3xl font-semibold tracking-tight text-foreground m-0">5</dd>
      </div>
      <div class="flex flex-col-reverse gap-1">
        <dt class="text-sm text-muted-foreground">Years of expertise</dt>
        <dd class="text-3xl font-semibold tracking-tight text-foreground m-0">50+</dd>
      </div>
    </dl>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-404 text-center py-32 relative","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-404 text-center py-32 relative">

<!-- wp:html -->
<div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-muted) 50%, transparent), transparent 70%);"></div>
<!-- /wp:html -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group">

<!-- wp:paragraph {"className":"text-base font-bold text-primary"} -->
<p class="text-base font-bold text-primary">404</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","level":1,"className":"text-4xl sm:text-5xl font-bold mt-4"} -->
<h1 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-bold mt-4">Page not found</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"text-muted-foreground mt-4"} -->
<p class="has-text-align-center text-muted-foreground mt-4">Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-10"} -->
<div class="wp-block-buttons mt-10"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/">Go back home</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/contact">Contact support</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-faq bg-background py-24 sm:py-32","align":"full","templateLock":"contentOnly","lock":{"move":true,"remove":false},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-faq bg-background py-24 sm:py-32">

<!-- wp:heading {"textAlign":"center","className":"text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance"} -->
<h2 class="wp-block-heading has-text-align-center text-4xl sm:text-5xl font-semibold tracking-tight text-foreground text-balance">Frequently asked questions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"text-lg text-muted-foreground text-center mt-6 max-w-2xl mx-auto"} -->
<p class="text-lg text-muted-foreground text-center mt-6 max-w-2xl mx-auto">Have a different question? Reach out to our team at <a href="mailto:[email protected]" style="color: var(--color-primary)">[email protected]</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"max-w-3xl mx-auto mt-16 divide-y divide-border","layout":{"type":"constrained"}} -->
<div class="wp-block-group max-w-3xl mx-auto mt-16 divide-y divide-border">

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>What types of companies does Velocity One acquire?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">We focus on strategically vital manufacturers serving the aerospace and defense markets. Our operating units produce energetic devices, inertial navigation systems, aircraft power electronics, and electromechanical actuation systems.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>What happens to my company after an acquisition?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">We preserve what makes each business valuable. Founders stay, leadership teams remain empowered, and existing contracts continue. We invest in modernizing operations, strengthening supply chains, and positioning each company for long-term growth.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>Who backs Velocity One?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">Velocity One is backed by Charlesbank Capital Partners, a middle-market private equity firm managing more than $22 billion in capital commitments. Charlesbank provides the resources and long-term perspective to support our growth strategy.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>How does the acquisition process work?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">It starts with a conversation. We take time to understand your business, your team, and your goals. From there, we work through diligence at a pace that respects your operations, and structure partnerships that align with what you have built.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>What does "V1" mean?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">In pilot terminology, V1 is the speed at which an aircraft is committed to takeoff. Every part must perform. Velocity One carries that same commitment to its operating units: once we invest, we are all in.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"py-6 faq-item","showContent":false} -->
<details class="wp-block-details py-6 faq-item"><summary>Where is Velocity One headquartered?</summary><!-- wp:paragraph {"className":"mt-3 text-base/7 text-muted-foreground"} -->
<p class="mt-3 text-base/7 text-muted-foreground">Our headquarters are in Fairfield, New Jersey. Our operating units maintain their own facilities across the United States, with locations in New Jersey, New York, California, and Illinois.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-section-footer bg-muted border-t border-border py-12 sm:py-16","align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-section-footer bg-muted border-t border-border py-12 sm:py-16">

<!-- wp:html -->
<div class="flex flex-col items-center gap-8">
  <a href="/" class="velocity-logo" aria-label="Velocity One home">
    <svg class="h-12 w-auto text-foreground" fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 911.16 291.26"><defs><style>.cls-1{isolation:isolate}</style></defs><path d="M147.74 116.13 81.68 265.31l-6.4-17.19z" style="fill:#e3ac42"/><g class="cls-1"><path d="m265.94 104.05-24.68 80.7h-25.49l-24.78-80.7h21.33l16.25 58.27 16.15-58.27h21.23ZM292.04 122.02v13.16h22.85v17.06h-22.85v14.54h25.9v17.97h-45.81v-80.7h45.81v17.97zM347.7 167.58h22.24v17.17h-42.15v-80.7h19.91zM393.51 180.22c-5.62-3.55-10.07-8.47-13.36-14.77s-4.93-13.41-4.93-21.35 1.64-15.05 4.93-21.35c3.28-6.3 7.74-11.2 13.36-14.71s11.78-5.27 18.49-5.27 12.95 1.76 18.54 5.27 10 8.41 13.25 14.71 4.88 13.41 4.88 21.35-1.63 15.05-4.88 21.35-7.69 11.22-13.31 14.77-11.78 5.32-18.49 5.32-12.87-1.77-18.49-5.32Zm30.52-21.11c2.95-3.74 4.42-8.74 4.42-15s-1.47-11.46-4.42-15.17c-2.95-3.7-6.96-5.55-12.04-5.55s-9.18 1.85-12.09 5.55-4.37 8.76-4.37 15.17 1.46 11.35 4.37 15.05q4.365 5.55 12.09 5.55c7.725 0 9.09-1.87 12.04-5.61ZM459.58 122.99c2.95-6.22 7.13-11.06 12.54-14.54 5.42-3.47 11.65-5.21 18.69-5.21 8.94 0 16.45 2.69 22.55 8.07 6.09 5.38 10.02 12.69 11.78 21.92h-21.43c-1.29-3.05-3.06-5.38-5.33-6.98s-4.89-2.4-7.87-2.4c-4.61 0-8.28 1.85-11.02 5.55q-4.11 5.55-4.11 14.82c0 9.27 1.37 11.24 4.11 14.94s6.41 5.55 11.02 5.55c2.98 0 5.6-.8 7.87-2.4s4.04-3.93 5.33-6.98h21.43c-1.76 9.23-5.69 16.54-11.78 21.92s-13.61 8.07-22.55 8.07c-7.04 0-13.27-1.73-18.69-5.21-5.42-3.47-9.6-8.32-12.54-14.54s-4.42-13.33-4.42-21.35 1.47-15.01 4.42-21.23M554.49 104.05v80.7h-19.91v-80.7zM619.8 104.05v17.86h-19.09v62.84H580.8v-62.84h-18.89v-17.86zM692.32 104.05l-25.19 55.06v25.64h-20.01v-25.64l-25.19-55.06h22.75l12.59 31.14 12.59-31.14h22.45Z"/></g><g class="cls-1"><path d="M722.94 181.76c-5.62-3.55-10.07-8.47-13.36-14.77s-4.93-13.41-4.93-21.35 1.64-15.05 4.93-21.35c3.28-6.3 7.73-11.2 13.36-14.71 5.62-3.51 11.78-5.27 18.49-5.27s12.95 1.76 18.54 5.27 10 8.41 13.25 14.71 4.88 13.41 4.88 21.35-1.62 15.05-4.88 21.35c-3.25 6.3-7.69 11.22-13.31 14.77s-11.78 5.32-18.49 5.32-12.87-1.77-18.49-5.32Zm30.52-21.12c2.95-3.74 4.42-8.74 4.42-15s-1.47-11.46-4.42-15.17c-2.95-3.7-6.96-5.55-12.04-5.55s-9.18 1.85-12.09 5.55-4.37 8.76-4.37 15.17 1.46 11.35 4.37 15.05q4.365 5.55 12.09 5.55c7.725 0 9.09-1.87 12.04-5.61ZM853.36 186.28h-19.91l-26.51-45.1v45.1h-19.91v-80.7h19.91l26.51 45.67v-45.67h19.91zM884.64 123.55v13.16h22.85v17.06h-22.85v14.54h25.9v17.97h-45.81v-80.7h45.81v17.97z"/></g><g class="cls-1"><path d="M192.19 225.14v-.11c0-10.7 6.91-19.55 16.52-19.55 5.93 0 9.48 2.43 12.74 6l-2.52 3.13c-2.75-3.02-5.83-5.19-10.27-5.19-7.23 0-12.65 6.81-12.65 15.5v.11c0 8.75 5.46 15.61 12.65 15.61 4.48 0 7.42-2 10.55-5.46l2.43 2.75c-3.41 4-7.14 6.64-13.07 6.64-9.43 0-16.38-8.59-16.38-19.45ZM232.61 206.13h3.69V240h18.39v3.94h-22.08zM266.35 206.13h3.69v37.81h-3.69zM284.13 206.13h3.73l11.9 20.63 11.9-20.63h3.73v37.81h-3.69v-30.63l-11.9 20.26h-.19l-11.9-20.2v30.57h-3.59v-37.81ZM329.12 206.13h13.91c3.73 0 6.67 1.24 8.54 3.35 1.35 1.62 2.1 3.62 2.1 6.05v.11c0 4.92-2.61 7.45-5.18 8.75 3.87 1.35 7 3.94 7 9.13v.11c0 6.48-4.71 10.32-11.86 10.32h-14.52v-37.81Zm20.82 9.99c0-3.73-2.57-6.16-7.23-6.16h-9.94v13.02h9.66c4.43 0 7.52-2.32 7.52-6.75v-.11Zm-6.86 10.64h-10.32v13.34h10.97c4.95 0 8.03-2.54 8.03-6.75v-.11c0-4.11-2.99-6.48-8.68-6.48M383.36 206.13h4.01l9.34 31.49 8.96-31.6h3.03l8.96 31.6 9.34-31.49h3.87l-11.67 38.08h-3.13l-8.96-30.68-9.01 30.68h-3.08l-11.67-38.08ZM442.35 206.13h3.69v37.81h-3.69zM468.76 210.07h-10.97v-3.94h25.67v3.94h-10.97v33.87h-3.73zM494.85 206.13h3.69v16.8h18.86v-16.8h3.69v37.81h-3.69v-17.01h-18.86v17.01h-3.69zM551.93 225.14v-.11c0-10.7 6.91-19.55 16.52-19.55 5.93 0 9.48 2.43 12.74 6l-2.52 3.13c-2.75-3.02-5.83-5.19-10.27-5.19-7.23 0-12.65 6.81-12.65 15.5v.11c0 8.75 5.46 15.61 12.65 15.61 4.48 0 7.42-2 10.55-5.46l2.43 2.75c-3.41 4-7.14 6.64-13.07 6.64-9.43 0-16.38-8.59-16.38-19.45ZM589.96 225.14v-.11c0-10.43 6.77-19.55 16.71-19.55s16.62 9.02 16.62 19.45v.11c0 10.42-6.77 19.55-16.71 19.55s-16.62-9.02-16.62-19.45m29.5 0v-.11c0-8.59-5.42-15.61-12.88-15.61s-12.79 6.91-12.79 15.5v.11c0 8.59 5.41 15.61 12.88 15.61s12.79-6.91 12.79-15.5M635.61 206.13h3.45l20.58 30.3v-30.3h3.59v37.81h-2.94l-21.1-31v31h-3.59v-37.81ZM676.96 206.13h23.48v3.94h-19.79v13.5h17.69v3.89h-17.69v16.47h-3.69v-37.81ZM712.43 206.13h3.69v37.81h-3.69zM730.21 206.13h11.34c10.27 0 17.36 8.16 17.36 18.8v.11c0 10.64-7.09 18.91-17.36 18.91h-11.34v-37.81Zm3.69 3.94v29.92h7.66c8.26 0 13.54-6.48 13.54-14.85v-.11c0-8.37-5.27-14.96-13.54-14.96zM771.19 206.13h23.62v3.89h-19.93v12.91h17.83v3.89h-17.83v13.23h20.16v3.89h-23.85zM806.94 206.13h3.45l20.58 30.3v-30.3h3.59v37.81h-2.94l-21.1-31v31h-3.59v-37.81ZM846.89 225.14v-.11c0-10.7 6.91-19.55 16.52-19.55 5.93 0 9.48 2.43 12.74 6l-2.52 3.13c-2.75-3.02-5.83-5.19-10.27-5.19-7.23 0-12.65 6.81-12.65 15.5v.11c0 8.75 5.46 15.61 12.65 15.61 4.48 0 7.42-2 10.55-5.46l2.43 2.75c-3.41 4-7.14 6.64-13.07 6.64-9.43 0-16.38-8.59-16.38-19.45ZM887.3 206.13h23.62v3.89h-19.93v12.91h17.83v3.89h-17.83v13.23h20.16v3.89H887.3z"/></g><path d="m0 73.41 65.09 150.01 23.28-30.17L35.34 73.41zM136.64 157.31 93.33 291.26l-9.23-18.05zM123.14 148.41l-51.53 96.18-4.99-11.08zM217.97 64.33c2.72 2.15 5.45 4.3 8.18 6.45 1.29 1.01 1.27 1.01 1.07 2.52-.28 2.03-.51 4.05-.77 6.09-.2-.12-.34-.17-.37-.23-.66-1.84-1.67-2.85-3.24-3.19-1.21-.26-2.47-.84-3.71-1.33-.71-.28-1.09-.17-1.35.58-.63 1.92-.69 1.89-2.65 1.18-3.97-1.4-7.96-2.81-11.94-4.23-.84-.29-1.61-.43-2.39-.34-3.12.41-6.26.75-9.41 1.1-.43.05-.78.09-.98.61-1.47 3.68-4.17 5.8-7.12 7.56-.64.38-1.15.87-1.58 1.56-3.64 5.86-7.43 11.57-11.83 16.57-1.8 2.02-3.73 3.87-5.89 5.36.23.66.69.8 1.06 1.07 1.14.86 2.26 1.72 3.41 2.56.57.41.8.81.48 1.35-.05.09-.12.15-.14.26-.52 1.98-1.58 2.7-3.7 1.99-2.26-.75-4.5-.92-6.75-1.49-1.12-.28-1.89-.02-2.62.66-1.86 1.72-3.84 3.24-6.03 4.42-.58.31-1.2.49-1.84.63-1.29.28-1.86-.26-2.38-2.01-.46-1.53-.32-2.82.03-4.02.11-.34.24-.64.48-1.24-6.89-.25-13.52-.49-20.38-.75.52-1.5 1.24-2.52 1.81-3.67.23-.46.72-.37 1.14-.43 5.65-.81 11.31-1.64 16.96-2.46.18-.03.38-.02.51-.34-2.49-3.44-5-6.92-7.52-10.4-1.87-2.58-3.76-5.16-5.63-7.73-.89-1.24-.89-1.27-.31-2.16.72-1.1 1.49-2.16 2.16-3.35.4-.71.84-.66 1.63-.15 4.33 2.79 8.7 5.46 13.12 7.75 1.29.66 2.58 1.2 3.87 1.6.86.26 1.38.03 1.76-.77 2.53-5.28 5.12-10.5 7.67-15.77.41-.84 1.06-1.5 1.18-2.62-3.19-1.3-6.18-1.55-9.18-1.72-8.61-.48-17.23-1.01-25.84-1.53-.4-.03-.81-.09-1.21-.15q-1.53-.2-1.75-2.19c-6.38-.78-12.77-1.58-19.4-2.39.89-1.15 1.98-1.47 2.85-2.13 1.32-1 2.82-1.72 4.13-2.78.41-.34.97-.31 1.49-.37 7.32-.67 14.65-1.32 21.99-1.98 9.62-.87 19.24-1.78 28.88-2.62.77-.06 1.3-.35 1.75-1 1.64-2.42 3.31-4.82 5.02-7.18 1.18-1.66 2.7-1.83 4.76-.44.71.48.81.05 1.01-.34.98-1.81 1.92-3.64 2.88-5.46 3.5-6.57 7.01-13.12 10.48-19.7 1.15-2.18 2.06-4.59 3.38-6.61 1.86-2.85 4.04-5.26 6.92-6.74 1.37-.69 2.84-1.12 4.48-1.09 1.2.02 2.27-.21 3.35-.55.71-.22 1.47-.32 2.21-.46 3.57-.71 6.41 4.53 6.14 7.59-.26 2.84-.71 5.55-1.44 8.1-1.4 4.85-3.47 9.08-5.69 13.2-2.79 5.17-5.65 10.25-8.5 15.36-.31.54-.49 1.14-.49 1.87 0 1.27-.06 2.5-.35 3.62-.15.58.05 1.01.57 1.44 1.4 1.17 2.78 2.35 4.16 3.54.72.63 1.03.25 1.38-.18 1.69-2.03 3.36-4.04 5.07-6.05 1.69-2.01 3.88-1.52 6.17 1.38 1.39 1.76 2.09 3.71 2.35 5.79.06.52-.11.91-.25 1.3-.8 2.3-1.78 4.44-2.95 6.38-.16.18-.32.35-.32.9"/></svg>  </a>

  <nav class="flex flex-wrap items-center justify-center gap-x-8 gap-y-2" aria-label="Footer">
        <a href="/#about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a>
        <a href="/#companies" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Companies</a>
        <a href="/#leadership" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Leadership</a>
        <a href="/#news" class="text-sm text-muted-foreground hover:text-foreground transition-colors">News</a>
        <a href="/#contact" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Contact</a>
      </nav>

  <div class="flex items-center gap-x-6">
    <a href="mailto:[email protected]" class="text-sm text-muted-foreground hover:text-foreground transition-colors">[email protected]</a>
    <a href="https://www.linkedin.com/company/velocity-one-holdings/" target="_blank" rel="noopener noreferrer" class="text-muted-foreground hover:text-foreground transition-colors" aria-label="LinkedIn">
      <svg class="size-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
    </a>
  </div>

  <hr class="w-full border-border" />

  <div class="flex items-center justify-between w-full flex-wrap gap-x-6 gap-y-3">
    <p class="text-sm text-muted-foreground">© 2026 Velocity One. All rights reserved.</p>
    <a href="#" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Back to top ↑</a>
  </div>
</div>
<!-- /wp:html -->

</div>
<!-- /wp:group -->