From 9b389cc63f873510d608c98b40d97869badcbf03 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Thu, 3 Jul 2025 17:14:36 +0530
Subject: [PATCH] contact page updated

---
 app/about/page.tsx                   |   2 +-
 app/contact copy/page.tsx            | 204 +++++++++++++++++++++++++++
 app/contact/page.tsx                 | 180 ++++++++---------------
 components/layout/header/Header1.tsx |   2 +-
 public/assets/css/main.css           | 108 +++++++++++---
 5 files changed, 355 insertions(+), 141 deletions(-)
 create mode 100644 app/contact copy/page.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 43816f9..1ed6431 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -12,7 +12,7 @@ export default function About() {
 
 			<Layout headerStyle={1} footerStyle={1}>
 				<div>
-					<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg5.png)' }}>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg5.png)' }}>
 						<div className="container">
 							<div className="row">
 								<div className="col-lg-4 m-auto">
diff --git a/app/contact copy/page.tsx b/app/contact copy/page.tsx
new file mode 100644
index 0000000..4b9e5ec
--- /dev/null
+++ b/app/contact copy/page.tsx	
@@ -0,0 +1,204 @@
+
+import Countdown from '@/components/elements/Countdown'
+import Layout from "@/components/layout/Layout"
+import Link from "next/link"
+export default function Contact() {
+
+	return (
+		<>
+
+			<Layout headerStyle={1} footerStyle={1}>
+				<div>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg12.png)' }}>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-6 m-auto">
+									<div className="heading1 text-center">
+										<h1>Contact Us</h1>
+										<div className="space20" />
+										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Contact Us</span></Link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					{/*===== HERO AREA ENDS =======*/}
+					{/*===== CONTACT AREA STARTS =======*/}
+					<div className="contact-inner-section sp1">
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-6">
+									<div className="img1 image-anime">
+										<img src="/assets/img/all-images/contact/contact-img4.png" alt="" />
+									</div>
+								</div>
+								<div className="col-lg-6" data-aos="zoom-in" data-aos-duration={1000}>
+									<div className="contact4-boxarea">
+										<h3 className="text-anime-style-3">Get In Touch Now</h3>
+										<div className="space8" />
+										<div className="row">
+											<div className="col-lg-6 col-md-6">
+												<div className="input-area">
+													<input type="text" placeholder="Name" />
+												</div>
+											</div>
+											<div className="col-lg-6 col-md-6">
+												<div className="input-area">
+													<input type="text" placeholder="Phone" />
+												</div>
+											</div>
+											<div className="col-lg-12 col-md-6">
+												<div className="input-area">
+													<input type="email" placeholder="Email" />
+												</div>
+											</div>
+											<div className="col-lg-12 col-md-6">
+												<div className="input-area">
+													<input type="text" placeholder="Subjects" />
+												</div>
+											</div>
+											<div className="col-lg-12">
+												<div className="input-area">
+													<textarea placeholder="Message" />
+												</div>
+											</div>
+											<div className="col-lg-12">
+												<div className="space24" />
+												<div className="input-area text-end">
+													<button type="submit" className="vl-btn1">Submit Now</button>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					{/*===== CONTACT AREA ENDS =======*/}
+					{/*===== CONTACT AREA STARTS =======*/}
+					<div className="contact2-bg-section">
+						<div className="img1">
+							<img src="/assets/img/all-images/contact/contact-img1.png" alt="" className="contact-img1" />
+						</div>
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-6">
+									<div className="space48" />
+									<div className="row">
+										<div className="col-lg-6 col-md-6">
+											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={900}>
+												<div className="icons">
+													<img src="/assets/img/icons/mail1.svg" alt="" />
+												</div>
+												<div className="text">
+													<h5>Our Email</h5>
+													<div className="space14" />
+													<Link href="/maito:eventify@gmail.com">eventify@gmail.com</Link>
+												</div>
+											</div>
+											<div className="space18" />
+											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1000}>
+												<div className="icons">
+													<img src="/assets/img/icons/location1.svg" alt="" />
+												</div>
+												<div className="text">
+													<h5>our location</h5>
+													<div className="space14" />
+													<Link href="/#">1800 Abbot Kinney</Link>
+												</div>
+											</div>
+										</div>
+										<div className="col-lg-6 col-md-6">
+											<div className="space20 d-md-none d-block" />
+											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1000}>
+												<div className="icons">
+													<img src="/assets/img/icons/phn1.svg" alt="" />
+												</div>
+												<div className="text">
+													<h5>Call/Message</h5>
+													<div className="space14" />
+													<Link href="/tel:+11234567890">+1 123 456 7890</Link>
+												</div>
+											</div>
+											<div className="space18" />
+											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1200}>
+												<div className="icons">
+													<img src="/assets/img/icons/instagram.svg" alt="" />
+												</div>
+												<div className="text">
+													<h5>Instagram</h5>
+													<div className="space14" />
+													<Link href="/#">eneventify.eve</Link>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div className="mapouter">
+							<div className="gmap_canvas">
+								<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4506257.120552435!2d88.67021924228865!3d21.954385721237916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1704088968016!5m2!1sen!2sbd" width={600} height={450} style={{ border: 0 }} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
+							</div>
+						</div>
+					</div>
+					<div className="space100 d-lg-block d-none" />
+					<div className="space50 d-lg-none d-block" />
+					{/*===== CONTACT AREA ENDS =======*/}
+					{/*===== CTA AREA STARTS =======*/}
+					<div className="cta1-section-area d-lg-block d-block">
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-10 m-auto">
+									<div className="cta1-main-boxarea">
+										<div className="timer-btn-area">
+										<Countdown />
+											<div className="btn-area1">
+												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
+											</div>
+										</div>
+										<ul>
+											<li>
+												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
+											</li>
+											<li className="m-0">
+												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					{/*===== CTA AREA ENDS =======*/}
+					{/*===== CTA AREA STARTS =======*/}
+					<div className="cta1-section-area d-lg-none d-block">
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-10 m-auto">
+									<div className="cta1-main-boxarea">
+										<div className="timer-btn-area">
+										<Countdown />
+											<div className="btn-area1">
+												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
+											</div>
+										</div>
+										<ul>
+											<li>
+												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
+											</li>
+											<li className="m-0">
+												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</Layout>
+		</>
+	)
+}
\ No newline at end of file
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 4b9e5ec..483405b 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -9,7 +9,7 @@ export default function Contact() {
 
 			<Layout headerStyle={1} footerStyle={1}>
 				<div>
-					<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg12.png)' }}>
+					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg12.png)' }}>
 						<div className="container">
 							<div className="row">
 								<div className="col-lg-6 m-auto">
@@ -24,14 +24,54 @@ export default function Contact() {
 					</div>
 					{/*===== HERO AREA ENDS =======*/}
 					{/*===== CONTACT AREA STARTS =======*/}
+					<div className="space100" />
+					<div className="contact-bg-section">
+						<div className="container">
+							<div className="row">
+								<div className="col-lg-4 col-md-6">
+									<div className="contact-boxarea2" data-aos="zoom-in" data-aos-duration={900}>
+										<div className="icons">
+											<img src="/assets/img/icons/mail1.svg" alt="" />
+										</div>
+										<div className="text">
+											<h5>Email</h5>
+											<div className="space14" />
+											<Link href="mailto:eventify@gmail.com">mail@tamilculturewaterloo.org</Link>
+										</div>
+									</div>
+								</div>
+								<div className="col-lg-4 col-md-6">
+									<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1000}>
+										<div className="icons">
+											<img src="/assets/img/icons/location1.svg" alt="" />
+										</div>
+										<div className="text">
+											<h5>Location</h5>
+											<div className="space14" />
+											<Link href="#">P.O. Box No:25068, Kitchener, Ontario, N2A 4A5, Canada.</Link>
+										</div>
+									</div>
+								</div>
+								<div className="col-lg-4 col-md-6">
+									<div className="contact-boxarea3" data-aos="zoom-in" data-aos-duration={1000}>
+										<div className="icons">
+											<img src="/assets/img/icons/phn1.svg" alt="" />
+										</div>
+										<div className="text">
+											<h5>Call Us</h5>
+											<div className="space14" />
+											<Link href="tel:+11234567890">+1 123 456 7890</Link>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					{/*===== CONTACT AREA ENDS =======*/}
+					{/*===== CONTACT AREA STARTS =======*/}
 					<div className="contact-inner-section sp1">
 						<div className="container">
 							<div className="row">
-								<div className="col-lg-6">
-									<div className="img1 image-anime">
-										<img src="/assets/img/all-images/contact/contact-img4.png" alt="" />
-									</div>
-								</div>
 								<div className="col-lg-6" data-aos="zoom-in" data-aos-duration={1000}>
 									<div className="contact4-boxarea">
 										<h3 className="text-anime-style-3">Get In Touch Now</h3>
@@ -71,133 +111,31 @@ export default function Contact() {
 										</div>
 									</div>
 								</div>
+								<div className="col-lg-6">
+									<div className="img1 image-anime">
+										<img src="/assets/img/all-images/contact/contact-img4.png" alt="" />
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
 					{/*===== CONTACT AREA ENDS =======*/}
 					{/*===== CONTACT AREA STARTS =======*/}
-					<div className="contact2-bg-section">
-						<div className="img1">
-							<img src="/assets/img/all-images/contact/contact-img1.png" alt="" className="contact-img1" />
-						</div>
-						<div className="container">
-							<div className="row">
-								<div className="col-lg-6">
-									<div className="space48" />
-									<div className="row">
-										<div className="col-lg-6 col-md-6">
-											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={900}>
-												<div className="icons">
-													<img src="/assets/img/icons/mail1.svg" alt="" />
-												</div>
-												<div className="text">
-													<h5>Our Email</h5>
-													<div className="space14" />
-													<Link href="/maito:eventify@gmail.com">eventify@gmail.com</Link>
-												</div>
-											</div>
-											<div className="space18" />
-											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1000}>
-												<div className="icons">
-													<img src="/assets/img/icons/location1.svg" alt="" />
-												</div>
-												<div className="text">
-													<h5>our location</h5>
-													<div className="space14" />
-													<Link href="/#">1800 Abbot Kinney</Link>
-												</div>
-											</div>
-										</div>
-										<div className="col-lg-6 col-md-6">
-											<div className="space20 d-md-none d-block" />
-											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1000}>
-												<div className="icons">
-													<img src="/assets/img/icons/phn1.svg" alt="" />
-												</div>
-												<div className="text">
-													<h5>Call/Message</h5>
-													<div className="space14" />
-													<Link href="/tel:+11234567890">+1 123 456 7890</Link>
-												</div>
-											</div>
-											<div className="space18" />
-											<div className="contact-boxarea" data-aos="zoom-in" data-aos-duration={1200}>
-												<div className="icons">
-													<img src="/assets/img/icons/instagram.svg" alt="" />
-												</div>
-												<div className="text">
-													<h5>Instagram</h5>
-													<div className="space14" />
-													<Link href="/#">eneventify.eve</Link>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
+					<div className="contact2-section">
 						<div className="mapouter">
 							<div className="gmap_canvas">
-								<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4506257.120552435!2d88.67021924228865!3d21.954385721237916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1704088968016!5m2!1sen!2sbd" width={600} height={450} style={{ border: 0 }} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
+								<iframe
+									src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.0622283957745!2d-80.39731242413884!3d43.434476063108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf3cd7b1f3f11%3A0xc93e0b894c6a8b15!2sKitchener%2C%20ON%20N2A%204A5%2C%20Canada!5e0!3m2!1sen!2sin!4v1720000000000!5m2!1sen!2sin"
+									style={{ border: 0, width: '100%', height: '450px' }}
+									allowFullScreen
+									loading="lazy"
+									referrerPolicy="no-referrer-when-downgrade"
+								></iframe>
 							</div>
 						</div>
 					</div>
-					<div className="space100 d-lg-block d-none" />
-					<div className="space50 d-lg-none d-block" />
 					{/*===== CONTACT AREA ENDS =======*/}
-					{/*===== CTA AREA STARTS =======*/}
-					<div className="cta1-section-area d-lg-block d-block">
-						<div className="container">
-							<div className="row">
-								<div className="col-lg-10 m-auto">
-									<div className="cta1-main-boxarea">
-										<div className="timer-btn-area">
-										<Countdown />
-											<div className="btn-area1">
-												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
-											</div>
-										</div>
-										<ul>
-											<li>
-												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
-											</li>
-											<li className="m-0">
-												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
-											</li>
-										</ul>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					{/*===== CTA AREA ENDS =======*/}
-					{/*===== CTA AREA STARTS =======*/}
-					<div className="cta1-section-area d-lg-none d-block">
-						<div className="container">
-							<div className="row">
-								<div className="col-lg-10 m-auto">
-									<div className="cta1-main-boxarea">
-										<div className="timer-btn-area">
-										<Countdown />
-											<div className="btn-area1">
-												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
-											</div>
-										</div>
-										<ul>
-											<li>
-												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
-											</li>
-											<li className="m-0">
-												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
-											</li>
-										</ul>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
 				</div>
-
 			</Layout>
 		</>
 	)
diff --git a/components/layout/header/Header1.tsx b/components/layout/header/Header1.tsx
index a8e671d..31f1dda 100644
--- a/components/layout/header/Header1.tsx
+++ b/components/layout/header/Header1.tsx
@@ -260,7 +260,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 												</ul>
 											</li> */}
 											<li>
-												<Link href="/#">Contact</Link>												
+												<Link href="/contact">Contact</Link>												
 											</li>
 										</ul>
 									</div>
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 030c43f..efe5936 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -6514,19 +6514,22 @@ Location:
 		padding: 0;
 	}
 }
+
 .blog-auhtor-details-name {
-  font-family: 'Inter', sans-serif; /* match your site font */
-  font-size: 18px;
-  font-weight: 600;
-  color: #000; /* or #222 depending on rest of your theme */
-  margin-top: 12px;
+	font-family: 'Inter', sans-serif;
+	/* match your site font */
+	font-size: 18px;
+	font-weight: 600;
+	color: #000;
+	/* or #222 depending on rest of your theme */
+	margin-top: 12px;
 }
 
 .blog-auhtor-details-post {
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  color: #666;
-  margin-bottom: 8px;
+	font-family: 'Inter', sans-serif;
+	font-size: 15px;
+	color: #666;
+	margin-bottom: 8px;
 }
 
 
@@ -19239,7 +19242,7 @@ html {
 .contact-bg-section {
 	position: relative;
 	z-index: 1;
-	background-image: url(../img/bg/contact-bg1.png);
+	/* background-image: url(../img/bg/contact-bg1.png); */
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
@@ -19291,13 +19294,31 @@ html {
 
 .contact-bg-section .contact-boxarea {
 	border-radius: 8px;
-	background: #FFF;
+	background: #F1F1F1;
 	padding: 24px;
 	position: relative;
 	z-index: 1;
 }
 
-.contact-bg-section .contact-boxarea .icons {
+.contact-bg-section .contact-boxarea2 {
+	border-radius: 8px;
+	background: #F1F1F1;
+	padding: 32px;
+	position: relative;
+	z-index: 1;
+}
+
+.contact-bg-section .contact-boxarea3 {
+	border-radius: 8px;
+	background: #F1F1F1;
+	padding: 32px;
+	position: relative;
+	z-index: 1;
+}  
+
+.contact-bg-section .contact-boxarea .icons,
+.contact-boxarea2 .icons,
+.contact-boxarea3 .icons {
 	height: 60px;
 	width: 60px;
 	text-align: center;
@@ -19305,22 +19326,30 @@ html {
 	display: inline-block;
 	transition: all 0.4s;
 	border-radius: 50%;
-	background: linear-gradient(90deg, #FF3639 2.73%, #E12FA2 71.84%);
+	/* background: linear-gradient(90deg, #FF3639 2.73%, #E12FA2 71.84%); */
+	background: linear-gradient(to right, #ed1b24, #a31319);
 	position: absolute;
 }
 
-.contact-bg-section .contact-boxarea .icons img {
+.contact-bg-section .contact-boxarea .icons img,
+.contact-boxarea2 .icons img,
+.contact-boxarea3 .icons img
+ {
 	height: 30px;
 	width: 30px;
 	display: inline-block;
 	filter: brightness(0) invert(1);
 }
 
-.contact-bg-section .contact-boxarea .text {
+.contact-bg-section .contact-boxarea .text,
+.contact-boxarea2 .text,
+.contact-boxarea3 .text {
 	padding-left: 74px;
 }
 
-.contact-bg-section .contact-boxarea .text h5 {
+.contact-bg-section .contact-boxarea .text h5,
+.contact-boxarea2 .text h5,
+.contact-boxarea3 .text h5 {
 	color: var(--ztc-text-text-8);
 	font-family: var(--grotesk);
 	font-size: var(--ztc-font-size-font-s18);
@@ -19331,9 +19360,11 @@ html {
 	text-transform: uppercase;
 }
 
-.contact-bg-section .contact-boxarea .text a {
+.contact-bg-section .contact-boxarea .text a,
+.contact-boxarea2 .text a,
+.contact-boxarea3 .text a {
 	color: var(--ztc-text-text-9);
-	text-align: center;
+	text-align: start;
 	font-family: var(--grotesk);
 	font-size: var(--ztc-font-size-font-s18);
 	font-style: normal;
@@ -19341,6 +19372,7 @@ html {
 	line-height: 18px;
 	/* 100% */
 	display: inline-block;
+	word-break: break-word;
 }
 
 .contact5-bg-section {
@@ -19390,6 +19422,30 @@ html {
 	}
 }
 
+@media (max-width: 1200px) {
+	.contact-bg-section .contact-boxarea2 {
+		padding: 33px 25px;
+	}
+}
+
+@media (max-width: 425px) {
+	.contact-bg-section .contact-boxarea {
+		margin-top: 25px;
+	}
+}
+
+@media (max-width: 1200px) {
+	.contact-bg-section .contact-boxarea3 {
+		padding: 41px 25px;
+	}
+}
+
+@media (max-width: 768px) {
+	.contact-bg-section .contact-boxarea3 {
+		margin-top: 25px;
+	}
+}
+
 @media only screen and (min-width: 768px) and (max-width: 991px) {
 	.contact5-bg-section .mapouter .gmap_canvas iframe {
 		width: 100%;
@@ -28164,4 +28220,20 @@ html {
 	font-size: 18px;
 	font-weight: 600;
 	padding: 10px 15px;
+}
+
+.contact2-section {
+	width: 100%;
+}
+
+.mapouter,
+.gmap_canvas {
+	width: 100%;
+}
+
+.gmap_canvas iframe {
+	display: block;
+	width: 100%;
+	height: 100%;
+	border: 0;
 }
\ No newline at end of file