{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-contact-1","type":"registry:block","title":"Contact 1","description":"Tailark Mist contact variant 1 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/mist-card","@tailark-oss/mist-input","@tailark-oss/mist-label","@tailark-oss/mist-select","@tailark-oss/mist-textarea"],"meta":{"aspect-ratio":"90/66","width":686,"height":503},"files":[{"path":"mist/blocks/contact/one.tsx","type":"registry:component","target":"@components/contact-1.tsx","content":"import { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Textarea } from '@/components/ui/textarea'\nimport { Button } from '@/components/ui/button'\nimport { Label } from '@/components/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport Link from 'next/link'\n\nexport default function ContactSection() {\n    return (\n        <section className=\"bg-muted py-15 sm:py-24 lg:py-32\">\n            <div className=\"mx-auto max-w-4xl px-4 lg:px-0\">\n                <h1 className=\"text-4xl font-semibold lg:text-5xl\">Help us route your inquiry</h1>\n                <p className=\"text-muted-foreground mt-4 text-lg\">We'll help you find the right plan and pricing for your business.</p>\n                <div className=\"mt-12 grid gap-12 lg:grid-cols-5\">\n                    <div className=\"grid grid-cols-2 lg:col-span-2 lg:block lg:space-y-12\">\n                        <div className=\"flex flex-col justify-between space-y-6\">\n                            <div>\n                                <h2 className=\"mb-3 text-lg font-semibold\">Collaborate</h2>\n                                <Link\n                                    href=\"mailto:hello@tailus.com\"\n                                    className=\"text-primary text-lg hover:underline\"\n                                >\n                                    hello@tailark.com\n                                </Link>\n                                <p className=\"mt-3 text-sm\">+243 000 000 000</p>\n                            </div>\n                        </div>\n                        <div className=\"flex flex-col justify-between space-y-6\">\n                            <div>\n                                <h3 className=\"mb-3 text-lg font-semibold\">Press</h3>\n                                <Link\n                                    href=\"mailto:press@tailark.com\"\n                                    className=\"text-primary text-lg hover:underline\"\n                                >\n                                    press@tailark.com\n                                </Link>\n                                <p className=\"mt-3 text-sm\">+243 000 000 000</p>\n                            </div>\n                        </div>\n                    </div>\n\n                    <form\n                        action=\"\"\n                        className=\"@container lg:col-span-3\"\n                    >\n                        <Card className=\"p-8 sm:p-12\">\n                            <h3 className=\"text-xl font-semibold\">Let's get you to the right place</h3>\n                            <p className=\"mt-4 text-sm\">Reach out to our sales team! We’re eager to learn more about how you plan to use our application.</p>\n\n                            <div className=\"**:[&>label]:block mt-12 space-y-6 *:space-y-3\">\n                                <div className=\"@md:grid-cols-2 grid gap-3 *:space-y-3\">\n                                    <div>\n                                        <Label\n                                            htmlFor=\"name\"\n                                            className=\"space-y-2\"\n                                        >\n                                            Full name\n                                        </Label>\n                                        <Input\n                                            type=\"text\"\n                                            id=\"name\"\n                                            required\n                                        />\n                                    </div>\n                                    <div>\n                                        <Label htmlFor=\"email\">Work Email</Label>\n                                        <Input\n                                            type=\"email\"\n                                            id=\"email\"\n                                            required\n                                        />\n                                    </div>\n                                </div>\n                                <div>\n                                    <Label htmlFor=\"country\">Country/Region</Label>\n                                    <Select>\n                                        <SelectTrigger>\n                                            <SelectValue placeholder=\"Select a country\" />\n                                        </SelectTrigger>\n                                        <SelectContent>\n                                            <SelectItem value=\"1\">DR Congo</SelectItem>\n                                            <SelectItem value=\"2\">United States</SelectItem>\n                                            <SelectItem value=\"3\">France</SelectItem>\n                                        </SelectContent>\n                                    </Select>\n                                </div>\n                                <div className=\"@md:grid-cols-2 grid gap-3 *:space-y-3\">\n                                    <div>\n                                        <Label htmlFor=\"website\">Company Website</Label>\n                                        <Input\n                                            type=\"url\"\n                                            id=\"website\"\n                                        />\n                                    </div>\n                                    <div>\n                                        <Label htmlFor=\"job\">Job function</Label>\n                                        <Select>\n                                            <SelectTrigger>\n                                                <SelectValue placeholder=\"Select a job function\" />\n                                            </SelectTrigger>\n                                            <SelectContent>\n                                                <SelectItem value=\"1\">Finance</SelectItem>\n                                                <SelectItem value=\"2\">Education</SelectItem>\n                                                <SelectItem value=\"3\">Legal</SelectItem>\n                                                <SelectItem value=\"4\">More</SelectItem>\n                                            </SelectContent>\n                                        </Select>\n                                    </div>\n                                </div>\n                                <div>\n                                    <Label htmlFor=\"msg\">Message</Label>\n                                    <Textarea\n                                        id=\"msg\"\n                                        rows={3}\n                                    />\n                                </div>\n                                <Button>Submit</Button>\n                            </div>\n                        </Card>\n                    </form>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}