Browse Source
✨ Added PageContact component
✨ Added PageContact component
🛠️ Updated contact information 📝 Added contact form 🌐 Integrated social links 🚀 Ready for contact pagemain
John Doe
1 year ago
1 changed files with 95 additions and 0 deletions
@ -0,0 +1,95 @@ |
|||||
|
import React, { FC } from "react"; |
||||
|
import SectionSubscribe2 from "@/components/SectionSubscribe2"; |
||||
|
import SocialsList from "@/shared/SocialsList"; |
||||
|
import Label from "@/components/Label"; |
||||
|
import Input from "@/shared/Input"; |
||||
|
import Textarea from "@/shared/Textarea"; |
||||
|
import ButtonPrimary from "@/shared/ButtonPrimary"; |
||||
|
|
||||
|
export interface PageContactProps {} |
||||
|
|
||||
|
const info = [ |
||||
|
{ |
||||
|
title: "🗺 ADDRESS", |
||||
|
desc: "Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter", |
||||
|
}, |
||||
|
{ |
||||
|
title: "💌 EMAIL", |
||||
|
desc: "nc.example@example.com", |
||||
|
}, |
||||
|
{ |
||||
|
title: "☎ PHONE", |
||||
|
desc: "000-123-456-7890", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const PageContact: FC<PageContactProps> = ({}) => { |
||||
|
return ( |
||||
|
<div className={`nc-PageContact overflow-hidden`}> |
||||
|
<div className="mb-24 lg:mb-32"> |
||||
|
<h2 className="my-16 sm:my-20 flex items-center text-3xl leading-[115%] md:text-5xl md:leading-[115%] font-semibold text-neutral-900 dark:text-neutral-100 justify-center"> |
||||
|
Contact |
||||
|
</h2> |
||||
|
<div className="container max-w-7xl mx-auto"> |
||||
|
<div className="flex-shrink-0 grid grid-cols-1 sm:grid-cols-2 gap-12 "> |
||||
|
<div className="max-w-sm space-y-8"> |
||||
|
{info.map((item, index) => ( |
||||
|
<div key={index}> |
||||
|
<h3 className="uppercase font-semibold text-sm dark:text-neutral-200 tracking-wider"> |
||||
|
{item.title} |
||||
|
</h3> |
||||
|
<span className="block mt-2 text-neutral-500 dark:text-neutral-400"> |
||||
|
{item.desc} |
||||
|
</span> |
||||
|
</div> |
||||
|
))} |
||||
|
<div> |
||||
|
<h3 className="uppercase font-semibold text-sm dark:text-neutral-200 tracking-wider"> |
||||
|
🌏 SOCIALS |
||||
|
</h3> |
||||
|
<SocialsList className="mt-2" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<form className="grid grid-cols-1 gap-6" action="#" method="post"> |
||||
|
<label className="block"> |
||||
|
<Label>Full name</Label> |
||||
|
|
||||
|
<Input |
||||
|
placeholder="Example Doe" |
||||
|
type="text" |
||||
|
className="mt-1" |
||||
|
/> |
||||
|
</label> |
||||
|
<label className="block"> |
||||
|
<Label>Email address</Label> |
||||
|
|
||||
|
<Input |
||||
|
type="email" |
||||
|
placeholder="example@example.com" |
||||
|
className="mt-1" |
||||
|
/> |
||||
|
</label> |
||||
|
<label className="block"> |
||||
|
<Label>Message</Label> |
||||
|
|
||||
|
<Textarea className="mt-1" rows={6} /> |
||||
|
</label> |
||||
|
<div> |
||||
|
<ButtonPrimary type="submit">Send Message</ButtonPrimary> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* OTHER SECTIONS */} |
||||
|
<div className="container"> |
||||
|
<SectionSubscribe2 className="pb-24 lg:pb-32" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default PageContact; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue