-->
<vanilla-card class="w-[350px]">
<card-header>
<card-title>Create project</card-title>
<card-description
>Deploy your new project in one-click.</card-description
>
</card-header>
<card-content>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col gap-y-1.5">
<vanilla-label for="name">Name</vanilla-label>
<vanilla-input id="name" placeholder="Name of your project"
></vanilla-input>
</div>
<div class="flex flex-col gap-y-1.5">
<vanilla-label for="framework">Framework</vanilla-label>
<vanilla-select>
<select-trigger id="framework">
<select-value placeholder="Select"></select-value>
</select-trigger>
<select-content position="popper">
<select-item data-value="next">Next.js</select-item>
<select-item data-value="sveltekit"
>SvelteKit</select-item
>
<select-item data-value="astro">Astro</select-item>
<select-item data-value="nuxt">Nuxt.js</select-item>
</select-content>
</vanilla-select>
</div>
</div>
</form>
</card-content>
<card-footer class="flex justify-between">
<vanilla-button variant="outline">Cancel</vanilla-button>
<vanilla-button>Deploy</vanilla-button>
</card-footer>
</vanilla-card>