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