4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2ffb,"use client" // shadcn import { Button } from "@/components/ui/button" import { Field, FieldGroup, FieldLabel } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" // third-party import { motion, type Variants } from "framer-motion" // ------------------------------ | CONTACT 1 | ------------------------------ // const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.1, }, }, } const itemVariants: Variants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }, }, } const cardVariants: Variants = { hidden: { y: 30, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] }, }, } export default function Contact1() { return (

Get in Touch Get in touch for questions, support, or feedback. We’re here to help and hear from you.

First Name

Last Name

Email Messege

</Field>
                  <Field orientation="horizontal" className="justify-center">
                    <Button
                      type="reset"
                      variant="outline"
                      className="bg-card hover:translate-y-1 hover:opacity-90"
                    >
                      Reset
                    </Button>
                    <Button
                      type="submit"
                      className="hover:translate-y-1 hover:opacity-90"
                    >
                      Send Messege
                    </Button>
                  </Field>
                </FieldGroup>
              </div>
              <div className="w-full basis-full text-center lg:basis-7/12">
                <div className="flex flex-col items-center gap-4 lg:flex-row">
                  <div className="w-full basis-full text-center lg:basis-6/12">
                    <motion.div
                      whileHover={{ scale: 1.03, y: -5 }}
                      transition={{
                        type: "spring",
                        stiffness: 300,
                        damping: 20,
                      }}
                      className="group cursor-pointer rounded-2xl bg-background px-6 py-10 transition-all hover:bg-pink-500"
                    >
                      <div className="flex flex-col gap-6">
                        <h2 className="text-md font-medium text-slate-800 transition-all group-hover:text-white sm:text-2xl dark:text-slate-100">
                          Contact Us
                        </h2>
                        <motion.div
                          whileHover={{ rotate: 10 }}
                          className="mx-auto inline-flex size-30 items-center justify-center rounded-full bg-pink-500 text-white transition-all group-hover:bg-white group-hover:text-pink-500"
                        >
                          <svg
                            className="size-16"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                          >
                            <path
                              d="M6 13c-2.76 0-5 2.23-5 5s2.24 5 5 5 5-2.24 5-5-2.23-5-5-5Zm-2.04 2.96H6a.68.68 0 0 1 0 1.36H3.96a.68.68 0 0 1 0-1.36Zm4.08 4.08H3.96a.68.68 0 0 1-.68-.68c0-.37.31-.68.68-.68h4.09c.38 0 .68.31.68.68 0 .37-.31.68-.69.68Z"
                              fill="currentColor"
                            ></path>
                            <path
                              d="M17 3H7C4 3 2 4.5 2 8v3.14c0 .73.75 1.19 1.42.9a6.51 6.51 0 0 1 3.66-.45c2.62.43 4.76 2.5 5.29 5.1.15.76.17 1.5.07 2.21-.08.59.4 1.11.99 1.11H17c3 0 5-1.5 5-5V8c0-3.5-2-5-5-5Zm.47 5.59-3.13 2.5c-.66.53-1.5.79-2.34.79-.84 0-1.69-.26-2.34-.79l-3.13-2.5a.77.77 0 0 1-.12-1.06c.26-.32.73-.38 1.05-.12l3.13 2.5c.76.61 2.05.61 2.81 0l3.13-2.5c.32-.26.8-.21 1.05.12.26.32.21.8-.11 1.06Z"
                              fill="currentColor"
                            ></path>
                          </svg>
                        </motion.div>
                        <div className="flex flex-col gap-1">
                          <p className="text-md text-slate-800 transition-all group-hover:text-white sm:text-lg dark:text-slate-100">
                            Email
                          </p>
                          <a href="mailto:contact@example.com">
                            <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                              contact@example.com
                            </p>
                          </a>
                          <a href="mailto:hr@suport.com">
                            <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                              Hr@suport.com
                            </p>
                          </a>
                        </div>
                        <div className="flex flex-col gap-1">
                          <p className="text-md text-slate-800 transition-all group-hover:text-white sm:text-lg dark:text-slate-100">
                            Phone
                          </p>
                          <a href="tel:+1 (555) 123-4567">
                            <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                              +1 (555) 123-4567
                            </p>
                          </a>
                          <a href="tel:+1 (555) 987-1234">
                            <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                              +1 (687) 987-1234
                            </p>
                          </a>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                  <div className="w-full basis-full text-center lg:basis-6/12">
                    <motion.div
                      whileHover={{ scale: 1.03, y: -5 }}
                      transition={{
                        type: "spring",
                        stiffness: 300,
                        damping: 20,
                      }}
                      className="group cursor-pointer rounded-2xl bg-background px-6 py-10 transition-all hover:bg-sky-500"
                    >
                      <div className="flex flex-col gap-6">
                        <h2 className="text-md font-medium text-slate-800 transition-all group-hover:text-white sm:text-2xl dark:text-slate-100">
                          Reach Us
                        </h2>
                        <motion.div
                          whileHover={{ rotate: 10 }}
                          className="mx-auto inline-flex size-30 items-center justify-center rounded-full bg-sky-500 text-white transition-all group-hover:bg-white group-hover:text-sky-500"
                        >
                          <svg
                            className="size-16"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                          >
                            <path
                              d="M20.621 8.45c-1.05-4.62-5.08-6.7-8.62-6.7h-.01c-3.53 0-7.57 2.07-8.62 6.69-1.17 5.16 1.99 9.53 4.85 12.28a5.436 5.436 0 0 0 3.78 1.53c1.36 0 2.72-.51 3.77-1.53 2.86-2.75 6.02-7.11 4.85-12.27Zm-8.62 5.01a3.15 3.15 0 1 1 0-6.3 3.15 3.15 0 0 1 0 6.3Z"
                              fill="currentColor"
                            ></path>
                          </svg>
                        </motion.div>
                        <div className="flex flex-col gap-1">
                          <p className="text-md text-slate-800 transition-all group-hover:text-white sm:text-lg dark:text-slate-100">
                            Company Headquarters
                          </p>
                          <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                            2450 Business Park Drive Building C, Irving, TX
                            75063
                          </p>
                        </div>
                        <div className="flex flex-col gap-1">
                          <p className="text-md text-slate-800 transition-all group-hover:text-white sm:text-lg dark:text-slate-100">
                            Corporate Office
                          </p>
                          <p className="text-slate-600 transition-all group-hover:text-white dark:text-slate-400 dark:group-hover:text-white">
                            4500 Innovation Parkway Office 120, Dallas, TX 75261
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}
4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@uiable","registryDependencies":["@uiable/button","@uiable/field","@uiable/input","@uiable/textarea"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/uiable/blocks/contact/contact-1/contact-1.tsx","content":"$51","type":"registry:component","target":"@components/uiable/blocks/contact/contact-1/contact-1.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>