feat: implement styling for Contact page and form components
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
@use './variables' as *;
|
||||
@use './card.scss' as card;
|
||||
|
||||
@include card.card;
|
||||
|
||||
/* Card styling */
|
||||
.contactCard {
|
||||
position: relative;
|
||||
border-left: 3px solid $accent-fire;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.contactIcon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $accent-fire;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contactTitle {
|
||||
font-size: 1.3rem;
|
||||
color: $text-light;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contactContent {
|
||||
color: $text-ash;
|
||||
line-height: 1.6;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
color: $accent-fire;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contactLink:hover {
|
||||
text-decoration: underline;
|
||||
color: $accent-ember;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.btnPrimary {
|
||||
background: linear-gradient(45deg, $accent-dragon, $accent-fire);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btnPrimary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
|
||||
background-color: $accent-fire;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btnPrimary:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.4);
|
||||
}
|
||||
|
||||
.btnPrimary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.btnPrimary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btnPrimary:disabled {
|
||||
background: linear-gradient(45deg, rgba(139, 0, 0, 0.5), rgba(255, 100, 0, 0.5));
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Social links styling */
|
||||
.socialGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.socialItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.socialItem:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.socialIconLg {
|
||||
font-size: 1.8rem;
|
||||
color: $accent-fire;
|
||||
}
|
||||
|
||||
.socialName {
|
||||
color: $text-ash;
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Map styling */
|
||||
.mapContainer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $card-border;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mapContainer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: linear-gradient(to right, $accent-dragon, $accent-fire);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mapFrame {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: none;
|
||||
background-color: $card-bg;
|
||||
filter: grayscale(90%) invert(92%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
/* Accordion styling */
|
||||
.accordionButton {
|
||||
background-color: $card-bg !important;
|
||||
color: $text-light !important;
|
||||
border-color: $card-border !important;
|
||||
box-shadow: none !important;
|
||||
padding: 1rem 1.25rem;
|
||||
font-family: 'Cinzel', serif;
|
||||
}
|
||||
|
||||
.accordionButton:not(.collapsed) {
|
||||
color: $accent-fire !important;
|
||||
}
|
||||
|
||||
.accordionButton:focus {
|
||||
border-color: $accent-fire !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.accordionButton::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.accordionItem {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.accordionBody {
|
||||
background-color: $card-bg;
|
||||
border: 1px solid $card-border;
|
||||
border-top: none;
|
||||
color: $text-ash;
|
||||
padding: 1.25rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* Binary background effect */
|
||||
.binaryLine {
|
||||
position: absolute;
|
||||
font-family: 'Fira Code', monospace;
|
||||
color: $accent-fire;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Ember effect */
|
||||
.emberParticle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: $accent-fire;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 5px $accent-fire;
|
||||
animation: float 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
.table {
|
||||
color: $text-ash;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 0.5rem 0.25rem;
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.schedule-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.social-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.map-frame {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.social-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-floating>label {
|
||||
padding: 0.75rem 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
@use './variables.scss' as *;
|
||||
|
||||
/* Form styling */
|
||||
.form-control {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--card-border);
|
||||
color: var(--text-light);
|
||||
padding: 0.75rem 0.9375rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--accent-fire);
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--text-ash);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--card-border);
|
||||
color: var(--text-light);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6400' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--accent-fire);
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Alert styling */
|
||||
.alert-success {
|
||||
background-color: rgba(25, 135, 84, 0.1);
|
||||
border-color: rgba(25, 135, 84, 0.3);
|
||||
color: #75b798;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border-color: rgba(220, 53, 69, 0.3);
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
/* Form validation styling */
|
||||
.was-validated .form-control:invalid,
|
||||
.form-control.is-invalid {
|
||||
border-color: #dc3545;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid,
|
||||
.form-control.is-valid {
|
||||
border-color: #198754;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: #dc3545;
|
||||
font-size: 0.875em;
|
||||
margin-top: 0.25rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@use './variables.scss' as *;
|
||||
|
||||
/* Card styling */
|
||||
@mixin card {
|
||||
.card {
|
||||
background-color: $card-bg;
|
||||
border: 1px solid $card-border;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-7px);
|
||||
border-color: rgba(255, 100, 0, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to right, $accent-dragon, $accent-fire);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import '@styles/FormControl.scss'
|
||||
import styles from '@styles/Contact.module.scss'
|
||||
|
||||
export const ContactForm = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -47,11 +49,11 @@ export const ContactForm = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<div className="card-header bg-transparent">
|
||||
<div className={`card h-100 ${styles.card}`}>
|
||||
<div className={`card-header bg-transparent ${styles.cardHeader}`}>
|
||||
<h2 className="mb-0 py-2">Send a Message to the Forge</h2>
|
||||
</div>
|
||||
<div className="card-body p-4">
|
||||
<div className={`card-body p-4 ${styles.cardBody}`}>
|
||||
{/* Success message */}
|
||||
{showSuccess && (
|
||||
<div className="alert alert-success" role="alert">
|
||||
@@ -176,7 +178,7 @@ export const ContactForm = () => {
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary position-relative"
|
||||
className={`btn btn-primary position-relative ${styles.btnPrimary}`}
|
||||
id="submit-button"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
|
||||
@@ -1,127 +1,3 @@
|
||||
/* About Page Styles */
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 3px solid rgba(255, 100, 0, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(255, 100, 0, 0.2), transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: contrast(1.1) brightness(0.9);
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: var(--text-ash);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.intro-text p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.intro-text strong {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.intro-text .accent {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.connect-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: var(--text-light);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--card-border);
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.connect-link:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--accent-fire);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.connect-icon {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
/* Value cards */
|
||||
.value-card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1.875rem;
|
||||
border: 1px solid var(--card-border);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(255, 100, 0, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--accent-fire);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.value-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.value-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--accent-fire);
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.value-text {
|
||||
color: var(--text-ash);
|
||||
line-height: 1.6;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Skills card */
|
||||
.skill-card {
|
||||
background-color: var(--card-bg);
|
||||
@@ -532,17 +408,6 @@
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.social-icon-lg {
|
||||
font-size: 1.8rem;
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.social-name {
|
||||
color: var(--text-ash);
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* 404 page styles */
|
||||
.error-container {
|
||||
position: relative;
|
||||
|
||||
+24
-24
@@ -26,23 +26,23 @@ export const Contact = () => {
|
||||
{/* Contact Info Column */}
|
||||
<div className="col-lg-5">
|
||||
{/* Email Info */}
|
||||
<div className="card mb-4">
|
||||
<div className="card-body p-4">
|
||||
<div className="contact-card">
|
||||
<div className="contact-icon">
|
||||
<div className={`card mb-4 ${style.card}`}>
|
||||
<div className={`card-body p-4 ${style.cardBody}`}>
|
||||
<div className={`${style.contactCard}`}>
|
||||
<div className={`${style.contactIcon}`}>
|
||||
<i className="fas fa-envelope"></i>
|
||||
</div>
|
||||
<h3 className="contact-title">Email</h3>
|
||||
<h3 className={style.contactTitle}>Email</h3>
|
||||
<div className="contact-content">
|
||||
<p>For project inquiries or questions:</p>
|
||||
<p>
|
||||
<a href={`mailto:${data.email}`} className="contact-link">
|
||||
<a href={`mailto:${data.email}`} className={style.contactLink}>
|
||||
{data.email}
|
||||
</a>
|
||||
</p>
|
||||
<p>For business collaborations:</p>
|
||||
<p>
|
||||
<a href={`mailto:${data.businessEmail}`} className="contact-link">
|
||||
<a href={`mailto:${data.businessEmail}`} className={style.contactLink}>
|
||||
{data.businessEmail}
|
||||
</a>
|
||||
</p>
|
||||
@@ -53,21 +53,21 @@ export const Contact = () => {
|
||||
|
||||
{
|
||||
data.socialLinks.length > 0 && (
|
||||
<div className="card">
|
||||
<div className="card-body p-4">
|
||||
<div className="contact-card">
|
||||
<div className="contact-icon">
|
||||
<div className={`card ${style.card}`}>
|
||||
<div className={`card-body p-4 ${style.cardBody}`}>
|
||||
<div className={style.contactCard}>
|
||||
<div className={style.contactIcon}>
|
||||
<i className="fas fa-link"></i>
|
||||
</div>
|
||||
<h3 className="contact-title">Connect Through the Ether</h3>
|
||||
<div className="contact-content">
|
||||
<h3 className={style.contactTitle}>Connect Through the Ether</h3>
|
||||
<div className={style.contactContent}>
|
||||
<p>You can also reach me through these digital pathways:</p>
|
||||
<div className="social-grid">
|
||||
<div className={style.socialGrid}>
|
||||
{data.socialLinks.map((link, index) => (
|
||||
|
||||
<a key={index} href={link.url} className="social-item">
|
||||
<i className={`${link.icon} social-icon-lg`}></i>
|
||||
<span className="social-name">{link.platform}</span>
|
||||
|
||||
<a key={index} href={link.url} className={`social-item ${style.socialItem}`}>
|
||||
<i className={`${link.icon} social-icon-lg ${style.socialIconLg}`}></i>
|
||||
<span className={`social-name ${style.socialName}`}>{link.platform}</span>
|
||||
</a>
|
||||
|
||||
))}
|
||||
@@ -98,10 +98,10 @@ export const Contact = () => {
|
||||
<div className="accordion" id="faqAccordion">
|
||||
{
|
||||
data.questionsAndAnswers.map((item, index) => (
|
||||
<div className="accordion-item">
|
||||
<h2 className="accordion-header" id={`heading${index}`}>
|
||||
<div className={`accordion-item ${style.accordionItem}`} key={index}>
|
||||
<h2 className={`accordion-header ${style.accordionHeader}`} id={`heading${index}`}>
|
||||
<button
|
||||
className="accordion-button collapsed"
|
||||
className={`accordion-button collapsed ${style.accordionButton}`}
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
@@ -117,7 +117,7 @@ export const Contact = () => {
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#faqAccordion"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
<div className={`accordion-body ${style.accordionBody}`}>
|
||||
{item.answer}
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,9 +141,9 @@ export const Contact = () => {
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="map-container">
|
||||
<div className={style.mapContainer}>
|
||||
<iframe
|
||||
className="map-frame"
|
||||
className={style.mapFrame}
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82077.2903513271!2d21.9433946!3d50.0411861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfae3cc14d449%3A0xd2240d31b33eb2ed!2zUnplc3rDs3c!5e0!3m2!1sen!2spl!4v1651813309336!5m2!1sen!2spl"
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
|
||||
Reference in New Issue
Block a user