223 lines
7.9 KiB
TypeScript
223 lines
7.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import WebSiteHeader from '../components/WebPageComponents/Header';
|
|
import WebSiteFooter from '../components/WebPageComponents/Footer';
|
|
import {
|
|
ContactFormDesigns,
|
|
HeroDesigns,
|
|
FeaturesDesigns,
|
|
TestimonialsDesigns,
|
|
PricingDesigns,
|
|
} from '../components/WebPageComponents/designs';
|
|
|
|
import ContactFormSection from '../components/WebPageComponents/ContactFormComponent';
|
|
|
|
import HeroSection from '../components/WebPageComponents/HeroComponent';
|
|
|
|
import FeaturesSection from '../components/WebPageComponents/FeaturesComponent';
|
|
|
|
import TestimonialsSection from '../components/WebPageComponents/TestimonialsComponent';
|
|
|
|
import PricingSection from '../components/WebPageComponents/PricingComponent';
|
|
|
|
export default function WebSite() {
|
|
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
|
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
|
|
const projectName = 'Ethr';
|
|
|
|
useEffect(() => {
|
|
const darkElement = document.querySelector('body .dark');
|
|
if (darkElement) {
|
|
darkElement.classList.remove('dark');
|
|
}
|
|
}, []);
|
|
const pages = [
|
|
{
|
|
href: '/home',
|
|
label: 'home',
|
|
},
|
|
|
|
{
|
|
href: '/services',
|
|
label: 'services',
|
|
},
|
|
|
|
{
|
|
href: '/contact',
|
|
label: 'contact',
|
|
},
|
|
];
|
|
|
|
const features_points = [
|
|
{
|
|
name: 'Easy Registration',
|
|
description:
|
|
'Sign up quickly and start exploring a wide range of vehicles. Our user-friendly interface ensures a smooth registration process.',
|
|
icon: 'mdiAccountCircle',
|
|
},
|
|
{
|
|
name: 'Secure Transactions',
|
|
description:
|
|
'Enjoy peace of mind with secure payment options. We prioritize your safety with encrypted transactions and trusted payment gateways.',
|
|
icon: 'mdiLock',
|
|
},
|
|
{
|
|
name: 'Flexible Booking',
|
|
description:
|
|
'Choose from a variety of vehicles and book at your convenience. Our flexible booking system adapts to your schedule.',
|
|
icon: 'mdiCalendarCheckOutline',
|
|
},
|
|
{
|
|
name: 'Verified Users',
|
|
description:
|
|
'Rent with confidence knowing all users are verified. Our platform ensures a trustworthy community for both renters and rentees.',
|
|
icon: 'mdiShieldCheck',
|
|
},
|
|
{
|
|
name: 'Comprehensive Listings',
|
|
description:
|
|
'Browse detailed listings with photos, descriptions, and pricing. Find the perfect vehicle for your adventure with ease.',
|
|
icon: 'mdiViewList',
|
|
},
|
|
{
|
|
name: '24/7 Support',
|
|
description:
|
|
'Get assistance whenever you need it. Our dedicated support team is available around the clock to help with any inquiries.',
|
|
icon: 'mdiHeadsetMic',
|
|
},
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
text: '${projectName} made my weekend getaway unforgettable! The booking process was seamless, and the vehicle was in perfect condition.',
|
|
company: 'Adventure Seekers Inc.',
|
|
user_name: 'John Doe, Outdoor Enthusiast',
|
|
},
|
|
{
|
|
text: 'I was impressed by the variety of vehicles available. ${projectName} is my go-to platform for all my adventure needs.',
|
|
company: 'Thrill Ventures',
|
|
user_name: 'Jane Smith, Travel Blogger',
|
|
},
|
|
{
|
|
text: 'The secure payment system gave me peace of mind. I highly recommend ${projectName} for anyone looking to rent outdoor vehicles.',
|
|
company: 'Secure Travels Co.',
|
|
user_name: 'Michael Brown, Finance Manager',
|
|
},
|
|
{
|
|
text: 'The customer support team was incredibly helpful. They answered all my questions promptly and made the experience enjoyable.',
|
|
company: 'Happy Trails Ltd.',
|
|
user_name: 'Emily White, Customer Service Specialist',
|
|
},
|
|
{
|
|
text: 'I love how easy it is to find and book vehicles on ${projectName}. The platform is user-friendly and efficient.',
|
|
company: 'Easy Rentals Group',
|
|
user_name: 'David Green, Tech Enthusiast',
|
|
},
|
|
{
|
|
text: 'The verification process ensures a safe community. I felt confident renting out my vehicle on ${projectName}.',
|
|
company: 'Trusty Rides',
|
|
user_name: 'Sarah Johnson, Vehicle Owner',
|
|
},
|
|
];
|
|
|
|
const pricing_features = {
|
|
standard: {
|
|
features: [
|
|
'Basic vehicle listings',
|
|
'Secure payment processing',
|
|
'User verification',
|
|
],
|
|
limited_features: ['Limited customer support', 'Basic analytics'],
|
|
},
|
|
premium: {
|
|
features: [
|
|
'Advanced vehicle listings',
|
|
'Priority customer support',
|
|
'Enhanced security measures',
|
|
],
|
|
also_included: ['Detailed analytics', 'Customizable booking options'],
|
|
},
|
|
business: {
|
|
features: [
|
|
'Comprehensive vehicle management',
|
|
'Dedicated account manager',
|
|
'Full analytics suite',
|
|
'Custom integrations',
|
|
],
|
|
},
|
|
};
|
|
|
|
const description = {
|
|
standard:
|
|
'Ideal for individuals looking to rent or list a few vehicles. Enjoy basic features with secure transactions and user verification.',
|
|
premium:
|
|
'Perfect for small startups or agencies needing advanced features and priority support. Gain access to detailed analytics and customizable options.',
|
|
business:
|
|
'Designed for enterprises managing a large fleet. Benefit from comprehensive management tools, dedicated support, and custom integrations.',
|
|
};
|
|
|
|
return (
|
|
<div className='flex flex-col min-h-screen'>
|
|
<Head>
|
|
<title>{`Peer-to-Peer Power Sports Rentals | Rent Snowmobiles, ATVs, Boats & More`}</title>
|
|
<meta
|
|
name='description'
|
|
content={`Discover the ultimate peer-to-peer power sports rental platform. Rent snowmobiles, ATVs, UTVs, dirt bikes, and boats directly from owners. Safe, secure, and convenient rentals for your next adventure.`}
|
|
/>
|
|
</Head>
|
|
<WebSiteHeader projectName={'Ethr'} pages={pages} />
|
|
<main className={`flex-grow ${bgColor} rounded-none `}>
|
|
<HeroSection
|
|
projectName={'Ethr'}
|
|
image={['Exciting outdoor adventure vehicles']}
|
|
mainText={`Explore Adventure with ${projectName} Rentals`}
|
|
subTitle={`Experience the thrill of the outdoors with ${projectName}. Rent snowmobiles, ATVs, and more directly from owners. Safe, secure, and ready for your next adventure.`}
|
|
design={HeroDesigns.IMAGE_BG || ''}
|
|
buttonText={`Start Your Adventure`}
|
|
/>
|
|
|
|
<FeaturesSection
|
|
projectName={'Ethr'}
|
|
image={['Diverse range of rental vehicles']}
|
|
withBg={0}
|
|
features={features_points}
|
|
mainText={`Discover ${projectName} Key Features`}
|
|
subTitle={`Unlock the full potential of your outdoor adventures with ${projectName}. Explore our unique features designed for a seamless rental experience.`}
|
|
design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
|
|
/>
|
|
|
|
<TestimonialsSection
|
|
projectName={'Ethr'}
|
|
design={TestimonialsDesigns.HORIZONTAL_CAROUSEL || ''}
|
|
testimonials={testimonials}
|
|
mainText={`What Our Users Say About ${projectName} `}
|
|
/>
|
|
|
|
<PricingSection
|
|
projectName={'Ethr'}
|
|
withBg={1}
|
|
features={pricing_features}
|
|
description={description}
|
|
/>
|
|
|
|
<ContactFormSection
|
|
projectName={'Ethr'}
|
|
design={ContactFormDesigns.WITH_IMAGE || ''}
|
|
image={['Contact us for quick support']}
|
|
mainText={`Get in Touch with ${projectName} `}
|
|
subTitle={`Reach out to us anytime. Our team is here to assist you with any inquiries or support you need. Expect a prompt response from ${projectName}.`}
|
|
/>
|
|
</main>
|
|
<WebSiteFooter projectName={'Ethr'} pages={pages} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
WebSite.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|