Testimonials Section - Copy this React, Tailwind Component to your project
import Head from 'next/head'; import Navbar from '../components/Navbar'; import Link from 'next/link'; import Slider from '../components/Slider'; import EventTypeCards from '../components/EventTypeCards'; import TourSection from '../components/TourSection'; export default function Home({ mainSlider, eventTypes, events, allEvents }) { return ( <> <Head> <title>Home | Raahi Outdoors for an outdoor adventure</title> <meta name='title' content='Raahi Outdoors - Home' /> <meta name='description' content='We are a group of professional, well trained and experienced outdoor experts who also offer customized treks and tours for your leisure time. We have more than 6 years of experience in organizing socially conscious treks and tours all over India.' /> </Head> <> <Navbar allEvents={allEvents} /> <Slider mainSlider={mainSlider} /> {/* <div className='about-area pt-90'> <div className='about-bg style-2 d-none d-sm-block'> <img src='img/about/2.png' alt='' /> </div> <div className='container'> <div className='row'> <div className='col-lg-6'> <div className='section-title'> <p className='title'>WHO ARE WE?</p> <h2>It's Time To Hit The New Path To Exploration.</h2> </div> <div className='about-content'> <p> Calling all adventure enthusiasts! Are you ready to be captivated by the breathtaking beauty of India's landscapes, from the serene seas to majestic mountains? If so, join Raahi Outdoors for an outdoor adventure that promises a blend of intimacy and camaraderie, purposefulness, and the raw richness of nature. </p> </div> <div className='row'> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/7.png' alt='' /> <p>adventure camping</p> </div> </div> </div> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/8.png' alt='' /> <p>Backpacking</p> </div> </div> </div> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/9.png' alt='' /> <p>caravan camping</p> </div> </div> </div> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/10.png' alt='' /> <p>day hiking</p> </div> </div> </div> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/11.png' alt='' /> <p>Mountain Bike</p> </div> </div> </div> <div className='col-sm-4 col-6'> <div className='single-quick-icon style-2 text-center'> <div className='quick-icon-content'> <img src='img/icon/12.png' alt='' /> <p>Winter Camping</p> </div> </div> </div> </div> </div> </div> </div> </div> */} <div className='camping-hi-area pt-85 pb-80'> <div className='container'> <div className='row justify-content-center'> <div className='col-lg-8'> <div className='section-title text-center'> <p className='title'>Browse by Camping & Hiking</p> <h2> Inspiration and guidance for <span /> wherever your trail may lead. </h2> </div> </div> </div> <div className='row'> <EventTypeCards eventTypes={eventTypes} /> </div> </div> </div> <div className='pt-85 pb-80'> <div className='container'> <div className='row justify-content-center'> <div className='col-lg-8'> <div className='section-title text-center'> <p className='title'>UPCOMING TRIPS</p> <h2> Top Rated Experiences<span></span> at Raahi </h2> </div> </div> </div> <div className='row'> <TourSection events={events} /> </div> </div> </div> <div className='row'>console.log('Home component rendered'); console.log('Main Slider:', mainSlider); console.log('Event Types:', eventTypes); console.log('Events:', events); console.log('All Events:', allEvents); <div className='col' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', transfrom: 'translate(50%)', marginTop: '-50px', }} > <Link href='/customisetour' className='btn btn-theme blue mb-30' style={{ width: '300px', fontWeight: 'bold', }} > Customise Your Tour </Link> </div> </div> <div className='funfact-area style-2 pt-170 pb-90'> <div className='container'> <div className='row justify-content-center'> <div className='col-lg-5'> <div className='section-title white text-center'> <p className='title'>Interesting Facts</p> <h2> Experiences Away <span /> From Crowd </h2> </div> </div> </div> <div className='row'> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/7.png' alt='' /> <span>{/* className='counter' */}10000</span> <span>+</span> <p>Total Clients</p> </div> </div> </div> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/8.png' alt='' /> <span>{/* className='counter' */} 800</span> <span>+</span> <p>Total Events</p> </div> </div> </div> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/9.png' alt='' /> <span>{/* className='counter' */} 100</span> <span>+</span> <p>Destinations </p> </div> </div> </div> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/10.png' alt='' /> <span>{/* className='counter' */} 20</span> <span>+</span> <p>International Tours</p> </div> </div> </div> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/11.png' alt='' /> <span>{/* className='counter' */} 100</span> <span>+</span> <p>Customised Tours</p> </div> </div> </div> <div className='col-lg-2 col-sm-4'> <div className='single-fact text-center'> <div className='fact-info'> <img src='img/funfact/12.png' alt='' /> <span>{/* className='counter' */} 4.8</span> <span>+</span> <p>Ratings</p> </div> </div> </div> </div> </div> </div> </> </> ); } export async function getServerSideProps() { try { const [mainSlider, eventTypes, events] = await Promise.all([ new Promise((resolve) => { fetch(process.env.BASEURL + '/api/main-slider') .then((response) => response.json()) .then((response) => resolve(response)); }), new Promise((resolve) => { fetch(process.env.BASEURL + '/api/eventTypes') .then((response) => response.json()) .then((response) => resolve(response)); }), new Promise((resolve) => { fetch(process.env.BASEURL + '/api/events') .then((response) => response.json()) .then((response) => resolve(response)); }), ]); return { props: { mainSlider, eventTypes, events }, }; } catch (e) { console.error(e); } } this my index page in this code please Add review/testimonials section