diff --git a/package-lock.json b/package-lock.json index ecb28ec..1542d82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react": "19.2.0", "react-dom": "19.2.0", "react-google-recaptcha": "^3.1.0", + "react-icons": "^5.5.0", "selenium-webdriver": "^4.38.0", "sitemap": "^9.0.0", "xml2js": "^0.6.2" @@ -5069,6 +5070,15 @@ "react": ">=16.4.1" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 07160a6..15bc925 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "19.2.0", "react-dom": "19.2.0", "react-google-recaptcha": "^3.1.0", + "react-icons": "^5.5.0", "selenium-webdriver": "^4.38.0", "sitemap": "^9.0.0", "xml2js": "^0.6.2" diff --git a/public/images/about-right-bg.webp b/public/images/about-right-bg.webp new file mode 100644 index 0000000..b3ab9c6 Binary files /dev/null and b/public/images/about-right-bg.webp differ diff --git a/public/images/footer-bg.png b/public/images/footer-bg.png index a78229d..4a1ef83 100644 Binary files a/public/images/footer-bg.png and b/public/images/footer-bg.png differ diff --git a/public/images/footer-bg.webp b/public/images/footer-bg.webp new file mode 100644 index 0000000..af6693d Binary files /dev/null and b/public/images/footer-bg.webp differ diff --git a/public/images/footer-logo.webp b/public/images/footer-logo.webp new file mode 100644 index 0000000..5450a2c Binary files /dev/null and b/public/images/footer-logo.webp differ diff --git a/public/images/testimonial-bg.webp b/public/images/testimonial-bg.webp new file mode 100644 index 0000000..c8857ea Binary files /dev/null and b/public/images/testimonial-bg.webp differ diff --git a/src/app/about-us/about.module.css b/src/app/about-us/about.module.css new file mode 100644 index 0000000..3f09323 --- /dev/null +++ b/src/app/about-us/about.module.css @@ -0,0 +1,575 @@ +.main { + background-color: var(--color-dark); + color: var(--color-text-light); + min-height: 100vh; +} + +.hero { + padding: 10rem 2rem; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png'); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.heroContent { + max-width: 800px; +} + +.heroTitle { + font-family: var(--font-playfair); + font-size: 4rem; + color: var(--color-gold); + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.breadcrumb { + font-size: 1.1rem; + color: #C5A059; + font-family: var(--font-lato); +} + +.breadcrumb a { + color: #fff; + transition: color 0.3s; +} + +.breadcrumb a:hover { + color: var(--color-gold); +} + +.section { + padding: 80px 20px; + background-color: #f5e6d3; +} + +.featuresSection { + background-color: #3a0c08; + background-image: url('/images/section-bg.jpg'); + background-size: cover; + background-position: center; +} + +.testimonialsSection { + background-color: #3a0c08; + background-image: url('/images/about-testimonial-bg.jpg'); + background-size: cover; + background-position: center; + background-repeat: repeat; +} + +.container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 4rem; + flex-wrap: wrap; +} + +.textBlock { + flex: 1; + min-width: 300px; +} + +.imageBlock { + flex: 1; + min-width: 300px; + display: flex; + justify-content: center; +} + +.sectionTitle { + font-family: var(--font-playfair); + font-size: 3rem; + color: #5d4037; + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.sectionTitleCenter { + font-family: var(--font-playfair); + font-size: 3.5rem; + color: #C5A059; + margin-bottom: 3rem; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; +} + +.text { + font-size: 1.1rem; + line-height: 1.8; + color: #5d4037; + margin-bottom: 1.5rem; + opacity: 0.9; + font-family: var(--font-lato); +} + +.image { + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + max-width: 100%; + height: auto; + border: 4px solid #C5A059; +} + +.menuButton { + display: inline-block; + padding: 15px 40px; + border: 2px solid #C5A059; + color: #C5A059; + 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; +} + +.menuButton:hover { + background-color: #C5A059; + color: #000; +} + +/* Features Section */ +.featuresGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 3rem; + max-width: 1200px; + margin: 0 auto; +} + +.featureCard { + background-color: #F5E6D3; + padding: 2.5rem 2rem; + text-align: center; + border: 4px solid #C5A059; + transition: transform 0.3s ease; +} + +.featureCard:hover { + transform: translateY(-10px); +} + +.featureImageWrapper { + position: relative; + width: 100%; + height: 200px; + margin-bottom: 1.5rem; + border-radius: 8px; + overflow: hidden; + border: 2px solid #C5A059; +} + +.featureImage { + object-fit: cover; +} + +.featureTitle { + font-family: var(--font-playfair); + font-size: 1.8rem; + color: #3e2723; + margin-bottom: 1rem; + font-weight: 600; +} + +.featureDesc { + font-family: var(--font-lato); + font-size: 1rem; + color: #5d4037; + line-height: 1.6; +} + +/* Testimonials Slider */ +.testimonialSlider { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + max-width: 900px; + margin: 0 auto; + position: relative; +} + +.sliderBtn { + background: transparent; + border: 2px solid #C5A059; + color: #C5A059; + font-size: 2.5rem; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + flex-shrink: 0; +} + +.sliderBtn:hover { + background-color: #C5A059; + color: #000; +} + +.testimonialCard { + background-color: #F5E6D3; + padding: 3rem 2.5rem; + border: 4px solid #C5A059; + display: flex; + flex-direction: column; + gap: 2rem; + flex: 1; + min-height: 300px; +} + +.testimonialText { + font-family: var(--font-lato); + font-size: 1.3rem; + color: #5d4037; + line-height: 1.8; + font-style: italic; + text-align: center; +} + +.testimonialAuthor { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; +} + +.authorImageWrapper { + position: relative; + width: 70px; + height: 70px; + border-radius: 50%; + overflow: hidden; + border: 3px solid #C5A059; + flex-shrink: 0; +} + +.authorImage { + object-fit: cover; +} + +.authorInfo { + display: flex; + flex-direction: column; + text-align: left; +} + +.authorName { + font-family: var(--font-playfair); + font-size: 1.2rem; + color: #3e2723; + font-weight: 600; +} + +.authorRole { + font-family: var(--font-lato); + font-size: 0.95rem; + color: #836839; +} + +.sliderDots { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 2rem; +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: transparent; + border: 2px solid #C5A059; + cursor: pointer; + transition: all 0.3s; + padding: 0; +} + +.dot:hover, +.activeDot { + background-color: #C5A059; +} + +/* Call to Action Section */ +.ctaSection { + padding: 5rem 2rem; + background-size: cover; + background-position: center; + position: relative; + text-align: center; +} + +.ctaOverlay { + position: relative; + z-index: 2; + background: rgba(58, 12, 8, 0.9); + padding: 4rem 2rem; + max-width: 800px; + margin: 0 auto; + border: 4px solid #C5A059; +} + +.ctaTitle { + font-family: var(--font-playfair); + font-size: 3rem; + color: #C5A059; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.ctaSubtitle { + font-family: var(--font-lato); + font-size: 1.3rem; + color: #F5E6D3; + margin-bottom: 2rem; +} + +.ctaButton { + display: inline-block; + padding: 15px 40px; + border: 2px solid #C5A059; + color: #C5A059; + 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; +} + +.ctaButton:hover { + background-color: #C5A059; + color: #000; +} + +@media (max-width: 1024px) { + .featuresGrid { + grid-template-columns: 1fr; + } + + .testimonialSlider { + flex-direction: column; + } + + .sliderBtn { + order: 2; + } + + .testimonialCard { + order: 1; + } + + .faqContainer { + grid-template-columns: 1fr; + gap: 3rem; + } + + .faqImageBlock { + min-height: 400px; + } +} + +@media (max-width: 768px) { + .heroTitle { + font-size: 3rem; + } + + .container { + flex-direction: column; + gap: 2rem; + } + + .section { + padding: 60px 10px; + } + + .sectionTitleCenter { + font-size: 2rem; + } + + .ctaTitle { + font-size: 2rem; + } + + .sliderBtn { + width: 40px; + height: 40px; + font-size: 2rem; + } + + .faqSection { + padding: 60px 20px; + } + + .faqTitle { + font-size: 2rem; + } + + .faqSubtitle { + font-size: 1rem; + } + + .faqQuestion { + padding: 1.2rem 1.5rem; + font-size: 1rem; + } + + .faqAnswer { + padding: 1.2rem 1.5rem; + } + + .faqImageBlock { + min-height: 300px; + } +} + +/* FAQ Section Styles */ +.faqSection { + padding: 80px 20px; + background-color: #F5E6D3; +} + +.faqContainer { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.faqImageBlock { + position: relative; + width: 100%; + height: 100%; + /* min-height: 600px; */ +} + +.faqImage { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.faqContentBlock { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.faqTitle { + font-family: var(--font-playfair); + font-size: 2.5rem; + color: #5d4037; + margin-bottom: 0.5rem; +} + +.faqSubtitle { + font-family: var(--font-lato); + font-size: 1.1rem; + color: #836839; + line-height: 1.6; + margin-bottom: 1rem; +} + +.faqAccordion { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.faqItem { + background: #fff; + border: 2px solid #C5A059; + border-radius: 8px; + overflow: hidden; + transition: all 0.3s ease; +} + +.faqItem:hover { + box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2); +} + +.faqQuestion { + width: 100%; + padding: 1.5rem 2rem; + background: transparent; + border: none; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + font-family: var(--font-lato); + font-size: 1.1rem; + font-weight: 600; + color: #5d4037; + text-align: left; + transition: all 0.3s ease; +} + +.faqQuestion:hover { + background-color: #C5A059; +} + +.faqQuestionActive { + background-color: #C5A059; + color: #fff; +} + +.faqIcon { + font-size: 1.5rem; + font-weight: bold; + color: #C5A059; + transition: transform 0.3s ease; + flex-shrink: 0; + margin-left: 1rem; +} + +.faqQuestionActive .faqIcon { + color: #fff; + transform: rotate(180deg); +} + +.faqAnswer { + padding: 1.5rem 2rem; + border-top: 1px solid #e0d5c7; + animation: slideDown 0.3s ease; +} + +.faqAnswer p { + font-family: var(--font-lato); + font-size: 1rem; + color: #5d4037; + line-height: 1.8; + margin: 0; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/src/app/about-us/about_temp.css b/src/app/about-us/about_temp.css new file mode 100644 index 0000000..0083cc0 --- /dev/null +++ b/src/app/about-us/about_temp.css @@ -0,0 +1,168 @@ +.main { + background-color: var(--color-dark); + color: var(--color-text-light); + min-height: 100vh; +} + +.hero { + padding: 10rem 2rem; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png'); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.heroContent { + max-width: 800px; +} + +.heroTitle { + font-family: var(--font-playfair); + font-size: 4rem; + color: var(--color-gold); + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.breadcrumb { + font-size: 1.1rem; + color: #C5A059; + font-family: var(--font-lato); +} + +.breadcrumb a { + color: #fff; + transition: color 0.3s; +} + +.breadcrumb a:hover { + color: var(--color-gold); +} + +.section { + padding: 80px 10px; + background-color: #f5e6d3; +} + +.featuresSection { + background-color: #3a0c08; + background-image: url('/images/section-bg.jpg'); + background-size: cover; + background-position: center; +} + +.testimonialsSection { + background-color: #0a0a0a; +} + +.container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 4rem; + flex-wrap: wrap; +} + +.textBlock { + flex: 1; + min-width: 300px; +} + +.imageBlock { + flex: 1; + min-width: 300px; + display: flex; + justify-content: center; +} + +.sectionTitle { + font-family: var(--font-playfair); + font-size: 3rem; + color: #C5A059; + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.sectionTitleCenter { + font-family: var(--font-playfair); + font-size: 3.5rem; + color: #C5A059; + margin-bottom: 3rem; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; +} + +.text { + font-size: 1.1rem; + line-height: 1.8; + color: #C5A059; + margin-bottom: 1.5rem; + opacity: 0.9; + font-family: var(--font-lato); +} + +.image { + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + max-width: 100%; + height: auto; + border: 4px solid #C5A059; +} + +.menuButton { + display: inline-block; + padding: 15px 40px; + border: 2px solid #C5A059; + color: #C5A059; + 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; +} + +.menuButton:hover { + background-color: #C5A059; + color: #000; +} + +/* Features Section */ +.featuresGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 3rem; + max-width: 1200px; + margin: 0 auto; +} + +.featureCard { + background-color: #F5E6D3; + padding: 2.5rem 2rem; + text-align: center; + border: 4px solid #C5A059; + transition: transform 0.3s ease; +} + +.featureCard:hover { + transform: translateY(-10px); +} + +.featureImageWrapper { + position: relative; + width: 100%; + height: 200px; + margin-bottom: 1.5rem; + border-radius: 8px; + overflow: hidden; + border: 2px solid #C5A059; +} \ No newline at end of file diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx new file mode 100644 index 0000000..f56560f --- /dev/null +++ b/src/app/about-us/page.tsx @@ -0,0 +1,352 @@ +'use client' + +import Navbar from "@/components/Navbar/Navbar"; +import Footer from "@/components/Footer/Footer"; +import FAQ from "@/components/FAQ/FAQ"; +import Image from "next/image"; +import Link from "next/link"; +import styles from "./about.module.css"; +import { featuresData, testimonialData, ctaData, aboutFaqData } from "@/utils/constant"; +import { useState, useEffect } from "react"; +import { motion, AnimatePresence } from "framer-motion"; + +export default function AboutPage() { + const [currentTestimonial, setCurrentTestimonial] = useState(0); + + // Animation variants + const fadeInUp = { + hidden: { opacity: 0, y: 30 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6 + } + } + }; + + const fadeIn = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { duration: 0.8 } + } + }; + + const slideInLeft = { + hidden: { opacity: 0, x: -50 }, + visible: { + opacity: 1, + x: 0, + transition: { + duration: 0.7 + } + } + }; + + const slideInRight = { + hidden: { opacity: 0, x: 50 }, + visible: { + opacity: 1, + x: 0, + transition: { + duration: 0.7 + } + } + }; + + const staggerContainer = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2, + delayChildren: 0.1 + } + } + }; + + // Auto-slide testimonials + useEffect(() => { + const interval = setInterval(() => { + setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length); + }, 5000); // Change every 5 seconds + + return () => clearInterval(interval); + }, []); + + const nextTestimonial = () => { + setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length); + }; + + const prevTestimonial = () => { + setCurrentTestimonial((prev) => (prev - 1 + testimonialData.length) % testimonialData.length); + }; + + return ( +
+ + + {/* Hero Banner */} + +
+

About Us

+

+ Home / About Us +

+
+ + + {/* About Section - No boxed structure */} +
+ + +

Our Story

+

+ Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community. + What started as a small family-run kitchen has grown into a beloved dining destination, known for its warm hospitality and traditional recipes passed down through generations. +

+

+ Every dish we serve tells a story of tradition, passion, and dedication to the culinary arts. Our chefs use time-honored techniques combined with the freshest ingredients to create an unforgettable dining experience. +

+ + View Our Menu + + + + Our Story + + +
+ + {/* Features Section - With real images */} +
+ + What Makes Us Special + + + {featuresData.map((feature) => ( + +
+ {feature.title} +
+

{feature.title}

+

{feature.description}

+ + ))} + +
+ + {/* Why Choose Us Section */} +
+ + + Why Choose Us + + +

Why Choose Us

+

+ At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions. +

+

+ From our charcoal-grilled kebabs to our handmade baklava, we take pride in delivering dishes that transport you straight to the streets of Istanbul and the coasts of Antalya. +

+ + +
+ + {/* Testimonials Section - Auto Slider */} +
+ + What Our Guests Say + + + + + + +

"{testimonialData[currentTestimonial].text}"

+
+
+ {testimonialData[currentTestimonial].name} +
+
+

{testimonialData[currentTestimonial].name}

+

{testimonialData[currentTestimonial].role}

+
+
+ + + + + + + {/* Slider dots */} +
+ {testimonialData.map((_, index) => ( +
+
+ + {/* FAQ Section - Image Left, FAQ Right */} +
+ + + Frequently Asked Questions + + +

Frequently Asked Questions

+

+ Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below. +

+
+ {aboutFaqData.map((faq, index) => ( + + ))} +
+ + +
+ + {/* Call to Action */} + +
+ + {ctaData.title} + + + {ctaData.subtitle} + + + + {ctaData.buttonText} + + +
+ + +
+ ); +} + +// FAQ Item Component +function FaqItem({ question, answer }: { question: string; answer: string }) { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + {isOpen && ( +
+

{answer}

+
+ )} +
+ ); +} diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css index be53a06..e9b2c7f 100644 --- a/src/app/about/about.module.css +++ b/src/app/about/about.module.css @@ -396,15 +396,19 @@ } .section { - padding: 60px 20px; + padding: 60px 10px; } .sectionTitleCenter { font-size: 2rem; } + .ctaSubtitle { + font-size: 14px; + } + .ctaTitle { - font-size: 2rem; + font-size: 22px; } .sliderBtn { @@ -437,6 +441,20 @@ .faqImageBlock { min-height: 300px; } + + .ctaButton { + display: inline-block; + padding: 12px 20px; + border: 2px solid #C5A059; + color: #C5A059; + font-family: var(--font-lato); + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + transition: all 0.3s ease; + background: transparent; + letter-spacing: 1px; +} } /* FAQ Section Styles */ @@ -458,7 +476,7 @@ position: relative; width: 100%; height: 100%; - min-height: 600px; + /* min-height: 600px; */ } .faqImage { @@ -572,4 +590,57 @@ opacity: 1; transform: translateY(0); } +} + +@media (max-width: 500px) { + + .faqContainer { + display: flex; + flex-direction: column !important; + align-items: center; + width: 100%; + gap: 1.5rem; + } + + /* Image should come to top */ + .faqImageBlock { + width: 100% !important; + order: -1; + /* ⬅⬅ THIS moves image to the top */ + } + + .faqImage { + width: 100% !important; + height: auto !important; + object-fit: cover !important; + border-radius: 12px; + border: 4px solid #c5a059; + } + + .ctaButton { + display: inline-block; + padding: 12px 20px; + border: 2px solid #C5A059; + color: #C5A059; + font-family: var(--font-lato); + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + transition: all 0.3s ease; + background: transparent; + letter-spacing: 1px; + } + + /* FAQ Text */ + .faqContent { + width: 100% !important; + padding: 0 1rem; + text-align: left; + } + + /* Accordion full width */ + .accordionWrapper { + width: 100% !important; + padding: 0 1rem; + } } \ No newline at end of file diff --git a/src/app/about/about_temp.css b/src/app/about/about_temp.css index 3ccf7f6..0083cc0 100644 --- a/src/app/about/about_temp.css +++ b/src/app/about/about_temp.css @@ -44,7 +44,7 @@ } .section { - padding: 80px 20px; + padding: 80px 10px; background-color: #f5e6d3; } diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css index 6646cb1..9941fc9 100644 --- a/src/app/blog/blog.module.css +++ b/src/app/blog/blog.module.css @@ -43,7 +43,7 @@ } .blogSection { - padding: 80px 20px; + padding: 80px 10px; max-width: 1200px; margin: 0 auto; /* background-color: #0a0a0a; */ @@ -138,6 +138,6 @@ } .blogSection { - padding: 60px 20px; + padding: 60px 10px; } } \ No newline at end of file diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css index 205d63d..3c66921 100644 --- a/src/app/contact/contact.module.css +++ b/src/app/contact/contact.module.css @@ -42,7 +42,7 @@ } .contactSection { - padding: 80px 20px; + padding: 80px 10px; background-color: #F5E6D3; /* background-image: url('/images/section-bg.jpg'); */ background-size: cover; @@ -284,7 +284,7 @@ @media (max-width: 1024px) { .container { - grid-template-columns: 1fr; + grid-template-columns: repeat(2, 1fr); gap: 3rem; } @@ -299,7 +299,7 @@ } .contactSection { - padding: 60px 20px; + padding: 60px 10px; } .title { @@ -313,4 +313,10 @@ .formBlock { padding: 2rem 1.5rem; } +} + +@media (max-width: 768px) and (min-width: 200px) { + .container { + grid-template-columns: repeat(1, 1fr); + } } \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fe..e9ee432 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css index 0757f6a..6e7d3e7 100644 --- a/src/app/gallery/gallery.module.css +++ b/src/app/gallery/gallery.module.css @@ -43,10 +43,10 @@ } .section { - padding: 80px 20px; + padding: 80px 10px; max-width: 1200px; margin: 0 auto; - /* background-color: #0a0a0a; */ +/* background-color: #0a0a0a; */ } .tabs { diff --git a/src/app/menu/menu.module.css b/src/app/menu/menu.module.css index eb10222..3948e8c 100644 --- a/src/app/menu/menu.module.css +++ b/src/app/menu/menu.module.css @@ -248,7 +248,7 @@ @media (max-width: 968px) { .menuGrid { - grid-template-columns: 1fr; + grid-template-columns: repeat(2, 1fr); } } @@ -286,4 +286,14 @@ gap: 0.5rem; align-items: center; } +} + +@media (max-width: 767px) and (min-width: 200px){ + + .menuGrid { + grid-template-columns: 1fr; + } + + + } \ No newline at end of file diff --git a/src/components/About/About.module.css b/src/components/About/About.module.css index 1e9f28d..00b1a58 100644 --- a/src/components/About/About.module.css +++ b/src/components/About/About.module.css @@ -35,7 +35,7 @@ .imageWrapper { flex: 1; position: relative; - min-height: 600px; + min-height: 900px; /* Ensure substantial height */ } @@ -47,13 +47,13 @@ .content { flex: 1; - padding: 80px 60px; + /* padding: 80px 60px; */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; - background-image: url('/images/pattern-overlay.png'); + background-image: url('/images/about-right-bg.webp'); /* Optional pattern overlay if available, else dark bg */ background-color: #151515; position: relative; @@ -91,7 +91,7 @@ /* Goldish text color as seen in image */ line-height: 1.8; margin-bottom: 50px; - max-width: 80%; + max-width: 60%; font-size: 1rem; opacity: 0.8; } diff --git a/src/components/Blogs/Blogs.module.css b/src/components/Blogs/Blogs.module.css index 3552525..1e2f1e4 100644 --- a/src/components/Blogs/Blogs.module.css +++ b/src/components/Blogs/Blogs.module.css @@ -1,5 +1,5 @@ .section { - padding: 80px 20px; + padding: 80px 10px; background-color: #3a0c08; background-image: url('/images/section-bg.jpg'); background-size: cover; @@ -173,11 +173,11 @@ .card { flex: 0 0 100%; - max-width: 100%; + max-width: 50%; } /* Hide 2nd and 3rd cards on mobile, show only 1st */ - .card:nth-child(2), + .card:nth-child(3) { display: none; } @@ -222,6 +222,19 @@ padding: 0 15px; } + .card { + flex: 0 0 100%; + max-width: 100%; + } + + /* Hide 2nd and 3rd cards on mobile, show only 1st */ + .card:nth-child(2) { + display: none; + } + .card:nth-child(3) { + display: none; + } + .arrow { font-size: 1.8rem; } diff --git a/src/components/BookTable/BookTable.module.css b/src/components/BookTable/BookTable.module.css index 77f2c43..e2fccaf 100644 --- a/src/components/BookTable/BookTable.module.css +++ b/src/components/BookTable/BookTable.module.css @@ -166,13 +166,55 @@ .recaptchaWrapper { display: flex; flex-direction: column; - align-items: center; + /* align-items: center; */ gap: 0.5rem; - margin: 1rem 0; + /* margin: 1rem 0; */ } @media (min-width: 768px) { .imageContainer { display: block; } +} + +@media (max-width: 480px) { + .formContainer { + padding: 3rem 1rem; + /* Reduce padding on mobile */ + } + + .title { + font-size: 2rem; + /* Smaller title */ + margin-bottom: 2rem; + } + + /* Fix reCAPTCHA overflow on very small screens */ + .recaptchaWrapper { + transform: scale(0.85); + transform-origin: left top; + width: 100%; + display: flex; + justify-content: center; + /* Center it if possible, or left align */ + margin-bottom: -10px; + /* Compensate for scale gap */ + } + + /* If centering is preferred */ + .recaptchaWrapper>div { + margin: 0 auto; + } +} + +@media (max-width: 340px) { + .formContainer { + padding: 2rem 0.5rem; + /* Even less padding for 320px */ + } + + .recaptchaWrapper { + transform: scale(0.77); + /* Aggressive scaling for 320px */ + } } \ No newline at end of file diff --git a/src/components/BookTable/BookTable.tsx b/src/components/BookTable/BookTable.tsx index 9ecce6a..aa4203b 100644 --- a/src/components/BookTable/BookTable.tsx +++ b/src/components/BookTable/BookTable.tsx @@ -204,6 +204,15 @@ export default function BookTable() { /> {charCount}/500 characters + +
+ + {formErrors.captcha && {formErrors.captcha}} +
+