contact page added
This commit is contained in:
jhpin2
parent
6f7614e928
commit
2663c9da04
3 changed files with 259 additions and 0 deletions
5
src/app/contact/page.tsx
Normal file
5
src/app/contact/page.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import ContactPage from "@/components/contact-page";
|
||||
|
||||
export default function Contact() {
|
||||
return <ContactPage />;
|
||||
}
|
||||
232
src/components/contact-page.tsx
Normal file
232
src/components/contact-page.tsx
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Facebook, Twitter, Linkedin, Instagram, MapPin } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
company: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted:", formData);
|
||||
// toast({
|
||||
// title: "Message sent!",
|
||||
// description: "We'll be in touch with you shortly.",
|
||||
// });
|
||||
// Reset form
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
company: "",
|
||||
message: "",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-50">
|
||||
<div className="h-20"></div>
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
{/* Left Column - Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold leading-tight">
|
||||
Get in touch <br />
|
||||
with us directly
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-gray-700">
|
||||
We are here to help you! Tell us how we can help & we'll be
|
||||
in touch with an expert within the next 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">Send us an email:</h3>
|
||||
<a
|
||||
href="mailto:contact@adspillar.com"
|
||||
className="text-xl hover:underline"
|
||||
>
|
||||
contact@adspillar.com
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">Give us a call:</h3>
|
||||
<a
|
||||
href="tel:+8801784493232"
|
||||
className="text-xl hover:underline"
|
||||
>
|
||||
+880 1784-493232
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-4">Follow us:</h3>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Facebook size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Instagram size={20} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Contact Form */}
|
||||
<div className="bg-white p-8 rounded-lg shadow-sm">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-lg font-medium">
|
||||
Enter your name
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Enter your name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-lg font-medium">
|
||||
Email address
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="example@gmail.com"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-lg font-medium">
|
||||
Phone number
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="(123) 456 - 7890"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="company" className="text-lg font-medium">
|
||||
Company
|
||||
</label>
|
||||
<Input
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="EX Facebook"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-lg font-medium">
|
||||
Message
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Write your message here..."
|
||||
rows={6}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full md:w-auto px-8 py-6 bg-pink-500 hover:bg-pink-600 text-white text-lg rounded-full"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map Section */}
|
||||
<div className="mt-16 space-y-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="text-pink-500" size={24} />
|
||||
<h2 className="text-2xl font-semibold">Our Location</h2>
|
||||
</div>
|
||||
<p className="text-lg">
|
||||
Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
|
||||
1216)
|
||||
</p>
|
||||
|
||||
<div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Ads Pillar Location"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <Toaster /> */}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
22
src/components/ui/textarea.tsx
Normal file
22
src/components/ui/textarea.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.ComponentProps<"textarea">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
Loading…
Add table
Reference in a new issue