implement table reservation form with reCAPTCHA validation and email integration
This commit is contained in:
parent
32f7443bb8
commit
90edbddeb8
@ -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}>
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user