implement table reservation form with reCAPTCHA validation and email integration

This commit is contained in:
Alaguraj0361 2026-04-03 16:13:45 +05:30
parent 32f7443bb8
commit 90edbddeb8
2 changed files with 17 additions and 17 deletions

View File

@ -343,7 +343,7 @@ export default function ContactContent() {
</div> </div>
</div> </div>
<div className={styles.locationCard}> {/* <div className={styles.locationCard}>
<div className={styles.iconWrapper}> <div className={styles.iconWrapper}>
<svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
@ -363,7 +363,7 @@ export default function ContactContent() {
</a> </a>
</div> </div>
</div> </div>
</div> </div> */}
<div className={styles.locationCard}> <div className={styles.locationCard}>
<div className={styles.iconWrapper}> <div className={styles.iconWrapper}>

View File

@ -50,7 +50,7 @@
.smallHeading { .smallHeading {
font-size: var(--small-text-size); font-size: var(--small-text-size);
color: var(--color-paragraph); color: #441109;
font-family: var(--font-lato); font-family: var(--font-lato);
font-weight: 600; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;
@ -69,7 +69,7 @@
.formBlock { .formBlock {
background-color: #F5E6D3; background-color: #F5E6D3;
padding: 2.5rem; padding: 2.5rem;
border: 2px solid #b07c4b; border: 2px solid #441109;
} }
.title { .title {
@ -78,14 +78,14 @@
color: #5d4037; color: #5d4037;
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: 600; font-weight: 600;
border-bottom: 3px solid #c49c5c; border-bottom: 3px solid #441109;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
display: inline-block; display: inline-block;
} }
.subtitle { .subtitle {
font-size: var(--body-size); font-size: var(--body-size);
color: var(--color-alterparagraph) !important; color: #441109 !important;
line-height: 1.6; line-height: 1.6;
margin-bottom: 2rem; margin-bottom: 2rem;
font-family: var(--font-lato); font-family: var(--font-lato);
@ -111,7 +111,7 @@
.formLabel { .formLabel {
font-family: var(--font-lato); font-family: var(--font-lato);
color: var(--color-paragraph); color: #441109;
font-size: var(--small-text-size); font-size: var(--small-text-size);
font-weight: 600; font-weight: 600;
} }
@ -121,7 +121,7 @@
background: #fff; background: #fff;
border: 1px solid #d4c5b0; border: 1px solid #d4c5b0;
padding: 0.9rem; padding: 0.9rem;
color: var(--color-paragraph); color: #441109;
font-family: var(--font-lato); font-family: var(--font-lato);
font-size: var(--small-text-size); font-size: var(--small-text-size);
transition: border-color 0.3s; transition: border-color 0.3s;
@ -146,13 +146,13 @@
.charCount { .charCount {
font-size: var(--small-text-size); font-size: var(--small-text-size);
color: var(--color-alterparagraph) !important; color: #441109 !important;
text-align: right; text-align: right;
font-family: var(--font-lato); font-family: var(--font-lato);
} }
.submitButton { .submitButton {
background: #c49c5c; background: #441109;
border: none; border: none;
color: #fff; color: #fff;
padding: 15px 40px; padding: 15px 40px;
@ -168,7 +168,7 @@
} }
.submitButton:hover { .submitButton:hover {
background-color: #b08f4a; background-color: #441109;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3); box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
} }
@ -216,7 +216,7 @@
.locationCard { .locationCard {
background: #F5E6D3; background: #F5E6D3;
padding: 1.5rem; padding: 1.5rem;
border: 2px solid #b07c4b; border: 2px solid #441109;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 1.5rem; gap: 1.5rem;
@ -228,7 +228,7 @@
} }
.iconWrapper { .iconWrapper {
background: #c49c5c; background: #441109;
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
@ -251,14 +251,14 @@
.locationTitle { .locationTitle {
font-family: var(--font-playfair); font-family: var(--font-playfair);
font-size: var(--subheading-size); font-size: var(--subheading-size);
color: #5d4037; color: #441109;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: 600; font-weight: 600;
} }
.locationSubtitle { .locationSubtitle {
font-size: var(--small-text-size); font-size: var(--small-text-size);
color: var(--color-alterparagraph) !important; color: #441109 !important;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-family: var(--font-lato); font-family: var(--font-lato);
} }
@ -273,11 +273,11 @@
.locationPhone { .locationPhone {
font-size: var(--subheading-size); font-size: var(--subheading-size);
font-weight: 600; font-weight: 600;
color: var(--color-paragraph); color: #441109;
} }
.mapContainer { .mapContainer {
border: 2px solid #b07c4b; border: 2px solid #441109;
overflow: hidden; overflow: hidden;
margin-top: 0.5rem; margin-top: 0.5rem;
} }