catering page new slider section updated
This commit is contained in:
akash
parent
6a73c43f40
commit
c0fd0439b7
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar/Navbar'
|
||||
import Footer from '@/components/Footer/Footer'
|
||||
@ -9,6 +9,43 @@ import Image from 'next/image'
|
||||
import styles from './catering.module.css'
|
||||
|
||||
export default function CateringContent() {
|
||||
// Slider state for Visual Journey section
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const sliderImages = [
|
||||
'/images/hero-1.png',
|
||||
'/images/dish-1.png',
|
||||
'/images/hero-2.png',
|
||||
'/images/dish-2.png',
|
||||
'/images/hero-3.png'
|
||||
];
|
||||
|
||||
// Set mounted state after component mounts (client-side only)
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Auto-slide effect (only runs after mount)
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
|
||||
}, 3000); // Change slide every 3 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [mounted, sliderImages.length]);
|
||||
|
||||
// Manual navigation
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + sliderImages.length) % sliderImages.length);
|
||||
};
|
||||
|
||||
// Animation variants
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
@ -178,24 +215,51 @@ export default function CateringContent() {
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{/* Left Side: Images */}
|
||||
{/* Left Side: Image Slider */}
|
||||
<motion.div className={styles.welcomeImagesWrapper} variants={slideInLeft}>
|
||||
<div className={styles.welcomeImagesStack}>
|
||||
<div className={styles.welcomeImageTop}>
|
||||
<Image
|
||||
src="/images/hero-1.png"
|
||||
alt="Gourmet dish"
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
<div className={styles.sliderContainer}>
|
||||
<div className={styles.sliderWrapper}>
|
||||
{sliderImages.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.sliderSlide} ${index === currentSlide ? styles.sliderSlideActive : ''}`}
|
||||
>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Slide ${index + 1}`}
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.welcomeImageBottom}>
|
||||
<Image
|
||||
src="/images/dish-1.png"
|
||||
alt="Delicious burger"
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
|
||||
{/* Navigation Arrows */}
|
||||
<button
|
||||
className={`${styles.sliderArrow} ${styles.sliderArrowLeft}`}
|
||||
onClick={prevSlide}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.sliderArrow} ${styles.sliderArrowRight}`}
|
||||
onClick={nextSlide}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
|
||||
{/* Slide Indicators */}
|
||||
<div className={styles.sliderIndicators}>
|
||||
{sliderImages.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`${styles.sliderIndicator} ${index === currentSlide ? styles.sliderIndicatorActive : ''}`}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@ -208,13 +272,13 @@ export default function CateringContent() {
|
||||
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
||||
</div>
|
||||
<h2 className={styles.mainHeadingSection}>A Visual Journey Through</h2>
|
||||
<div className={styles.welcomeDivider}>
|
||||
{/* <div className={styles.welcomeDivider}>
|
||||
<svg width="120" height="20" viewBox="0 0 120 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="45" y2="10" stroke="#d3cab3" strokeWidth="2" />
|
||||
<path d="M52 5 Q60 10 52 15 M55 5 Q63 10 55 15 M58 5 Q66 10 58 15" stroke="#d3cab3" strokeWidth="1.5" fill="none" />
|
||||
<line x1="75" y1="10" x2="120" y2="10" stroke="#d3cab3" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<p className={styles.welcomeDescription}>
|
||||
Seabreeze was the first restaurant to open in Egypt, the restaurant was designed with the history in mind of it. We have created a soft industrial dining room, combined with an open kitchen, coffee take out bar and a lovely on site coffee roastery.
|
||||
</p>
|
||||
@ -385,7 +449,7 @@ export default function CateringContent() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Link href="/menu" className={styles.lastButton}>
|
||||
<Link href="/menu" className={styles.lastButton}>
|
||||
View Our Menu
|
||||
</Link>
|
||||
</motion.div>
|
||||
@ -395,4 +459,4 @@ export default function CateringContent() {
|
||||
<Footer />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -119,7 +119,6 @@
|
||||
}
|
||||
|
||||
.sectionHeading3 {
|
||||
/* padding: 80px 20px 40px; */
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
@ -247,10 +246,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* .topSection {
|
||||
padding: 80px 15px;
|
||||
} */
|
||||
|
||||
.topCardsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
@ -269,10 +264,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ============================================
|
||||
WELCOME SECTION
|
||||
WELCOME SECTION (WITH SLIDER)
|
||||
============================================ */
|
||||
|
||||
.welcomeSection {
|
||||
@ -295,46 +288,113 @@
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.welcomeImagesStack {
|
||||
/* Slider Styles */
|
||||
.sliderContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sliderWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.welcomeImageTop {
|
||||
.sliderSlide {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 370px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
background-color: #000;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.welcomeImageBottom {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
left: 200px;
|
||||
top: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
.sliderSlideActive {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.welcomeImageTop img,
|
||||
.welcomeImageBottom img {
|
||||
.sliderSlide img {
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.welcomeImagesWrapper:hover .welcomeImageTop img,
|
||||
.welcomeImagesWrapper:hover .welcomeImageBottom img {
|
||||
.sliderContainer:hover .sliderSlideActive img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
.sliderArrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(211, 202, 179, 0.9);
|
||||
border: 2px solid var(--color-border);
|
||||
color: #5d4037;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sliderArrow:hover {
|
||||
background-color: var(--color-button);
|
||||
color: #fff;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.sliderArrowLeft {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.sliderArrowRight {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* Slide Indicators */
|
||||
.sliderIndicators {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sliderIndicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 2px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sliderIndicator:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.sliderIndicatorActive {
|
||||
background-color: var(--color-button);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
padding: 40px;
|
||||
}
|
||||
@ -398,10 +458,8 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 20px;
|
||||
/* font-size: 2.5rem; */
|
||||
}
|
||||
|
||||
|
||||
.welcomeSignature {
|
||||
text-align: left;
|
||||
}
|
||||
@ -432,27 +490,33 @@
|
||||
|
||||
.welcomeImagesWrapper {
|
||||
height: 450px;
|
||||
max-width: 600px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.welcomeImageTop {
|
||||
width: 240px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.welcomeImageBottom {
|
||||
width: 340px;
|
||||
height: 420px;
|
||||
left: 180px;
|
||||
}
|
||||
|
||||
.welcomeTitle {
|
||||
font-size: 44px;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
padding: 20px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.sliderArrow {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sliderArrowLeft {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.sliderArrowRight {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.welcomeTitle {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -469,16 +533,28 @@
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.welcomeImageTop {
|
||||
width: 200px;
|
||||
height: 280px;
|
||||
.sliderArrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.welcomeImageBottom {
|
||||
width: 280px;
|
||||
height: 360px;
|
||||
left: 140px;
|
||||
top: 40px;
|
||||
.sliderArrowLeft {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.sliderArrowRight {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.sliderIndicators {
|
||||
bottom: 15px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sliderIndicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.welcomeTitle {
|
||||
@ -495,16 +571,29 @@
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.welcomeImageTop {
|
||||
width: 160px;
|
||||
height: 240px;
|
||||
.sliderArrow {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.welcomeImageBottom {
|
||||
width: 240px;
|
||||
height: 310px;
|
||||
left: 100px;
|
||||
top: 40px;
|
||||
.sliderArrowLeft {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.sliderArrowRight {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.sliderIndicators {
|
||||
bottom: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sliderIndicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.welcomeTitle {
|
||||
@ -831,192 +920,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SERVICES SECTION
|
||||
============================================ */
|
||||
|
||||
.servicesSection {
|
||||
padding: 80px 20px;
|
||||
background-color: #f5e6d3;
|
||||
}
|
||||
|
||||
.servicesContainer {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.serviceItem {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
margin-bottom: 120px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serviceItem:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.serviceItemReverse {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.serviceItemReverse>* {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.serviceImageWrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serviceImageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.serviceItem:hover .serviceImageContainer {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.serviceImageContainer img {
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.serviceItem:hover .serviceImageContainer img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.serviceContent {
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serviceNumber {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 120px;
|
||||
color: rgba(139, 115, 85, 0.15);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin-bottom: -40px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.serviceDecorLine {
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #d3cab3, transparent);
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.serviceTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 36px;
|
||||
color: #2d2d2d;
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.serviceDescription {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
font-family: var(--font-lato);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.serviceItem {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.serviceItemReverse {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.serviceImageContainer {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.serviceNumber {
|
||||
font-size: 90px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.serviceTitle {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.serviceDescription {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.servicesSection {
|
||||
padding: 80px 15px;
|
||||
}
|
||||
|
||||
.serviceItem {
|
||||
margin-bottom: 60px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.serviceImageContainer {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.serviceContent {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.serviceNumber {
|
||||
font-size: 70px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.serviceTitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.serviceDescription {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.serviceDecorLine {
|
||||
width: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.serviceImageContainer {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.serviceNumber {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.serviceTitle {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ABOUT SECTION
|
||||
============================================ */
|
||||
@ -1087,67 +990,8 @@
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.aboutLabel {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #5d4037;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.aboutTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 48px;
|
||||
color: #2d2d2d;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 25px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.aboutDescription {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 40px;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.aboutSpecials {
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.lastButton {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
border: 2px solid #b07c4b;
|
||||
color: var(--color-paragraph);
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.lastButton:hover {
|
||||
background-color: #c49c5c;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.aboutSpecialsTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 24px;
|
||||
color: #2d2d2d;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
font-style: italic;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.aboutSpecialsList {
|
||||
@ -1160,58 +1004,39 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-family: var(--font-lato);
|
||||
margin-bottom: 20px;
|
||||
font-size: var(--body-size);
|
||||
color: var(--color-paragraph);
|
||||
font-family: var(--font-lato);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.aboutSpecialsIcon {
|
||||
color: #5d4037;
|
||||
color: var(--color-button);
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aboutButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 18px 40px;
|
||||
background-color: #5d4037;
|
||||
.lastButton {
|
||||
display: inline-block;
|
||||
margin-top: 30px;
|
||||
padding: 15px 40px;
|
||||
background-color: var(--color-button);
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-lato);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.aboutButton:hover {
|
||||
background-color: #ff5722;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
.aboutButtonIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.aboutButton:hover .aboutButtonIcon {
|
||||
background-color: #fff;
|
||||
color: #5d4037;
|
||||
transform: rotate(90deg);
|
||||
.lastButton:hover {
|
||||
background-color: #5d4037;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@ -1224,10 +1049,6 @@
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.aboutTitle {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.aboutContent {
|
||||
padding: 20px 0;
|
||||
}
|
||||
@ -1247,17 +1068,8 @@
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.aboutTitle {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.aboutSpecialsTitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aboutButton {
|
||||
padding: 15px 30px;
|
||||
font-size: 12px;
|
||||
.aboutSpecialsItem {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1267,20 +1079,8 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.aboutTitle {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.aboutSpecialsTitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.aboutDescription {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.aboutSpecialsItem {
|
||||
font-size: 14px;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
@ -97,6 +97,12 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
h2 {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global Border Utility */
|
||||
.border-standard {
|
||||
border-color: var(--color-border);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user