117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@konobangu/design-system/components/ui/button';
|
|
import { Calendar } from '@konobangu/design-system/components/ui/calendar';
|
|
import { Input } from '@konobangu/design-system/components/ui/input';
|
|
import { Label } from '@konobangu/design-system/components/ui/label';
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@konobangu/design-system/components/ui/popover';
|
|
import { cn } from '@konobangu/design-system/lib/utils';
|
|
import { format } from 'date-fns';
|
|
import { CalendarIcon, Check, MoveRight } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
export const ContactForm = () => {
|
|
const [date, setDate] = useState<Date | undefined>(new Date());
|
|
|
|
return (
|
|
<div className="w-full py-20 lg:py-40">
|
|
<div className="container mx-auto max-w-6xl">
|
|
<div className="grid gap-10 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<h4 className="max-w-xl text-left font-regular text-3xl tracking-tighter md:text-5xl">
|
|
Something new
|
|
</h4>
|
|
<p className="max-w-sm text-left text-lg text-muted-foreground leading-relaxed tracking-tight">
|
|
Managing a small business today is already tough. Avoid
|
|
further complications by ditching outdated, tedious trade
|
|
methods.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row items-start gap-6 text-left">
|
|
<Check className="mt-2 h-4 w-4 text-primary" />
|
|
<div className="flex flex-col gap-1">
|
|
<p>Easy to use</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
We've made it easy to use and understand.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row items-start gap-6 text-left">
|
|
<Check className="mt-2 h-4 w-4 text-primary" />
|
|
<div className="flex flex-col gap-1">
|
|
<p>Fast and reliable</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
We've made it easy to use and understand.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row items-start gap-6 text-left">
|
|
<Check className="mt-2 h-4 w-4 text-primary" />
|
|
<div className="flex flex-col gap-1">
|
|
<p>Beautiful and modern</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
We've made it easy to use and understand.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center">
|
|
<div className="flex max-w-sm flex-col gap-4 rounded-md border p-8">
|
|
<p>Book a meeting</p>
|
|
<div className="grid w-full max-w-sm items-center gap-1">
|
|
<Label htmlFor="picture">Date</Label>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className={cn(
|
|
'w-full max-w-sm justify-start text-left font-normal',
|
|
!date && 'text-muted-foreground'
|
|
)}
|
|
>
|
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
{date ? format(date, 'PPP') : <span>Pick a date</span>}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0">
|
|
<Calendar
|
|
mode="single"
|
|
selected={date}
|
|
onSelect={setDate}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<div className="grid w-full max-w-sm items-center gap-1">
|
|
<Label htmlFor="firstname">First name</Label>
|
|
<Input id="firstname" type="text" />
|
|
</div>
|
|
<div className="grid w-full max-w-sm items-center gap-1">
|
|
<Label htmlFor="lastname">Last name</Label>
|
|
<Input id="lastname" type="text" />
|
|
</div>
|
|
<div className="grid w-full max-w-sm items-center gap-1">
|
|
<Label htmlFor="picture">Upload resume</Label>
|
|
<Input id="picture" type="file" />
|
|
</div>
|
|
|
|
<Button className="w-full gap-4">
|
|
Book the meeting <MoveRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|