F a Q_ D a T A - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stylish Components</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> /* General Styles */ body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; line-height: 1.6; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; width: 100%; box-sizing: border-box; } /* Header Styles */ header { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); padding: 1.25rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.75rem; font-weight: 800; color: white; text-decoration: none; letter-spacing: -0.5px; } nav { display: flex; align-items: center; gap: 2rem; } nav a { color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; } nav a:not(.sign-up-btn)::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: white; transition: width 0.3s ease; } nav a:not(.sign-up-btn):hover::after { width: 100%; } .sign-up-btn { background-color: white; color: #2563eb; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .sign-up-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } /* Stories Carousel Styles */ .stories { padding: 4rem 0; background-color: #f8fafc; } .carousel { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); margin-top: 2rem; } .carousel-inner { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-item { flex: 0 0 100%; position: relative; height: 600px; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .carousel-caption { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; color: white; } .carousel-caption h3 { font-size: 2.5rem; font-weight: bold; margin: 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .carousel-item.active .carousel-caption h3 { opacity: 1; transform: translateY(0); } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.9); color: #2563eb; border: none; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .carousel-btn:hover { background-color: white; transform: translateY(-50%) scale(1.1); } .carousel-btn-prev { left: 1.5rem; } .carousel-btn-next { right: 1.5rem; } /* Testimonials Styles */ .testimonials { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 2rem 0; } .testimonials h2 { font-size: 2.5rem; font-weight: bold; text-align: center; margin-bottom: 3rem; color: #1e40af; } .testimonials-carousel { position: relative; padding: 1rem; } .testimonials-inner { display: flex; gap: 2rem; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .testimonial-card { flex: 0 0 calc(33.333% - 1.33rem); background-color: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; transform: scale(0.98); } .testimonial-card:hover { transform: translateY(-5px) scale(1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .testimonial-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .testimonial-avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; } .testimonial-name { font-weight: 600; font-size: 1.25rem; margin: 0; color: #1e40af; } .testimonial-role { font-size: 0.875rem; color: #6b7280; margin: 0.25rem 0 0 0; } .testimonial-content { font-style: italic; color: #374151; line-height: 1.7; margin: 0; } /* About Us Styles */ .about-us { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); color: white; padding: 2rem 0; } .about-us-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-us h2 { font-size: 3rem; font-weight: bold; margin: 0 0 2rem 0; line-height: 1.2; } .about-us p { font-size: 1.25rem; margin: 0 0 2.5rem 0; opacity: 0.9; line-height: 1.7; } .about-us-btn { display: inline-block; background-color: white; color: #1e40af; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .about-us-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .about-us-image { position: relative; border-radius: 1rem; overflow: hidden; } .about-us-image img { width: 100%; height: 500px; object-fit: cover; border-radius: 1rem; transition: transform 0.6s ease; } .about-us-image:hover img { transform: scale(1.05); } /* Footer Styles */ footer { background-color: #1f2937; color: white; padding: 2rem 0; text-align: center; } footer p { margin: 0; opacity: 0.9; } /* Responsive Styles */ @media (max-width: 1024px) { .testimonial-card { flex: 0 0 calc(50% - 1rem); } .carousel-item { height: 500px; } } @media (max-width: 768px) { nav { display: none; } .about-us-content { grid-template-columns: 1fr; gap: 3rem; } .carousel-item { height: 400px; } .carousel-caption h3 { font-size: 2rem; } .testimonial-card { flex: 0 0 calc(100% - 1rem); } .about-us h2 { font-size: 2.5rem; } } @media (max-width: 480px) { .carousel-item { height: 300px; } .carousel-caption h3 { font-size: 1.5rem; } .carousel-btn { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; } .about-us { padding: 4rem 0; } .testimonials { padding: 4rem 0; } } </style> </head> <body> <header> <div class="container"> <a href="#" class="logo">Wanderlust</a> <nav> <a href="#">Home</a> <a href="#">Stories</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#" class="sign-up-btn">Sign Up</a> </nav> </div> </header> <main> <section class="stories"> <div class="container"> <h1 style="text-align: center; font-size: 2.5rem; font-weight: bold; margin: 0 0 1rem 0; color: #1e40af;">Amazing Stories</h1> <div class="carousel"> <div class="carousel-inner"> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" alt="A Journey Through Time"> <div class="carousel-caption"> <h3>A Journey Through Time</h3> </div> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1682687221006-b7fd60cf9dd0" alt="The Hidden Oasis"> <div class="carousel-caption"> <h3>The Hidden Oasis</h3> </div> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1682687220063-4742bd7fd538" alt="Echoes of the Past"> <div class="carousel-caption"> <h3>Echoes of the Past</h3> </div> </div> </div> <button class="carousel-btn carousel-btn-prev">❮</button> <button class="carousel-btn carousel-btn-next">❯</button> </div> </div> </section> <section class="testimonials"> <div class="container"> <h2>What Our Travelers Say</h2> <div class="testimonials-carousel"> <div class="testimonials-inner"> <div class="testimonial-card"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="Bob Smith" class="testimonial-avatar"> <div> <h3 class="testimonial-name">Bob Smith</h3> <p class="testimonial-role">Travel Photographer</p> </div> </div> <p class="testimonial-content">"As a photographer, I've found endless inspiration through these journeys. The destinations are simply breathtaking!"</p> </div> <div class="testimonial-card"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80" alt="Carol Williams" class="testimonial-avatar"> <div> <h3 class="testimonial-name">Carol Williams</h3> <p class="testimonial-role">Cultural Explorer</p> </div> </div> <p class="testimonial-content">"The cultural immersion experiences have opened my eyes to new perspectives. Truly unforgettable moments!"</p> </div> <div class="testimonial-card"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" alt="Alice Johnson" class="testimonial-avatar"> <div> <h3 class="testimonial-name">Alice Johnson</h3> <p class="testimonial-role">Adventure Enthusiast</p> </div> </div> <p class="testimonial-content">"The experiences I've had through Wanderlust have been absolutely life-changing. Every journey tells a unique story!"</p> </div> <div class="testimonial-card"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="Bob Smith" class="testimonial-avatar"> <div> <h3 class="testimonial-name">Bob Smith</h3> <p class="testimonial-role">Travel Photographer</p> </div> </div> <p class="testimonial-content">"As a photographer, I've found endless inspiration through these journeys. The destinations are simply breathtaking!"</p> </div> <div class="testimonial-card"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80" alt="Carol Williams" class="testimonial-avatar"> <div> <h3 class="testimonial-name">Carol Williams</h3> <p class="testimonial-role">Cultural Explorer</p> </div> </div> <p class="testimonial-content">"The cultural immersion experiences have opened my eyes to new perspectives. Truly unforgettable moments!"</p> </div> </div> </div> </div> </section> <section class="about-us"> <div class="container"> <div class="about-us-content"> <div> <h2>About Us</h2> <p>At Wanderlust, we believe every journey has a story waiting to be told. Our passion is creating immersive experiences that transform travelers into storytellers, connecting people with the heart and soul of each destination.</p> <a href="#" class="about-us-btn">Read More</a> </div> <div class="about-us-image"> <img src="https://images.unsplash.com/photo-1682687220198-88e9bdea9931" alt="Adventure Awaits"> </div> </div> </div> </section> </main> <footer> <div class="container"> <p>© 2024 Wanderlust. Crafting unforgettable stories through travel.</p> </div> </footer> <script> $(document).ready(function() { // Stories Carousel let storiesCurrentIndex = 0; const storiesItems = $('.carousel-item'); const storiesTotalItems = storiesItems.length; function showStoriesSlide(index) { if (index < 0) index = storiesTotalItems - 1; if (index >= storiesTotalItems) index = 0; storiesCurrentIndex = index; // Remove active class from all items storiesItems.removeClass('active'); // Add active class to current item $(storiesItems[index]).addClass('active'); $('.carousel-inner').css('transform', `translateX(-${storiesCurrentIndex * 100}%)`); } $('.carousel-btn-next').click(function() { showStoriesSlide(storiesCurrentIndex + 1); }); $('.carousel-btn-prev').click(function() { showStoriesSlide(storiesCurrentIndex - 1); }); // Show first slide as active showStoriesSlide(0); // Auto advance slides setInterval(function() { showStoriesSlide(storiesCurrentIndex + 1); }, 5000); // Testimonials Carousel let testimonialsCurrentIndex = 0; const testimonialCards = $('.testimonial-card'); const testimonialsTotalItems = testimonialCards.length; const visibleCards = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 768 ? 2 : 1; function showTestimonialsSlide(index) { if (index < 0) index = testimonialsTotalItems - visibleCards; if (index > testimonialsTotalItems - visibleCards) index = 0; testimonialsCurrentIndex = index; const translateValue = window.innerWidth >= 1024 ? (index * 33.333) : window.innerWidth >= 768 ? (index * 50) : (index * 100); $('.testimonials-inner').css('transform', `translateX(-${translateValue}%)`); } // Handle window resize for responsive carousel $(window).resize(function() { showTestimonialsSlide(0); }); // Auto advance testimonials setInterval(function() { showTestimonialsSlide(testimonialsCurrentIndex + 1); }, 5000); }); </script> </body> </html> enhance the styles and functionalities