and so it begins
This commit is contained in:
user
@@ -1,438 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Title from "$lib/components/atoms/title.svelte";
|
||||
import TicketSearchInput from "$lib/domains/ticket/view/ticket-search-input.svelte";
|
||||
import Button from "$lib/components/ui/button/button.svelte";
|
||||
import CheckIcon from "~icons/material-symbols/check";
|
||||
import Icon from "$lib/components/atoms/icon.svelte";
|
||||
import { flightTicketVM } from "$lib/domains/ticket/view/ticket.vm.svelte";
|
||||
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
|
||||
import {
|
||||
ArrowRight,
|
||||
Calendar,
|
||||
CreditCard,
|
||||
Headphones,
|
||||
Plane,
|
||||
Search,
|
||||
Shield,
|
||||
} from "@lucide/svelte";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "$lib/components/ui/accordion";
|
||||
import Badge from "$lib/components/ui/badge/badge.svelte";
|
||||
import Card from "$lib/components/ui/card/card.svelte";
|
||||
import CardContent from "$lib/components/ui/card/card-content.svelte";
|
||||
import Testimonials from "$lib/components/organisms/testimonials.svelte";
|
||||
import { airportVM } from "$lib/domains/airport/view/airport.vm.svelte";
|
||||
|
||||
type Destination = {
|
||||
id: number;
|
||||
name: string;
|
||||
country: string;
|
||||
image: string;
|
||||
code: string;
|
||||
discount?: number;
|
||||
popular?: boolean;
|
||||
};
|
||||
|
||||
const destinations: Destination[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Bali",
|
||||
country: "Indonesia",
|
||||
code: "DPS",
|
||||
image: "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&q=80&w=2338&ixlib=rb-4.0.3",
|
||||
discount: 25,
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Tokyo",
|
||||
country: "Japan",
|
||||
code: "HND",
|
||||
image: "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&q=80&w=1788&ixlib=rb-4.0.3",
|
||||
discount: 25,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Dubai",
|
||||
country: "United Arab Emirates",
|
||||
code: "DXB",
|
||||
image: "/assets/images/destinations/dubai.jpg",
|
||||
discount: 25,
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Santorini",
|
||||
country: "Greece",
|
||||
code: "JTR",
|
||||
image: "https://images.unsplash.com/photo-1469796466635-455ede028aca?auto=format&fit=crop&q=80&w=2338&ixlib=rb-4.0.3",
|
||||
discount: 25,
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Search,
|
||||
title: "Smart Flight Search",
|
||||
description:
|
||||
"Our advanced algorithm finds the best connections and prices across 500+ airlines, often saving you hundreds on each booking.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Booking Protection",
|
||||
description:
|
||||
"Bank-level security for your payment details, with fraud monitoring and instant booking confirmations for peace of mind.",
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
title: "Flexible Date Options",
|
||||
description:
|
||||
"Compare prices across multiple dates to find the best fares, with calendar view showing price variations throughout the month.",
|
||||
},
|
||||
{
|
||||
icon: Headphones,
|
||||
title: "24/7 Flight Assistance",
|
||||
description:
|
||||
"Our flight specialists are available around the clock for rebooking, cancellations, or help with unexpected travel changes.",
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "Transparent Pricing",
|
||||
description:
|
||||
"See all fees and charges upfront with no hidden costs. Choose from multiple payment options including installment plans.",
|
||||
},
|
||||
{
|
||||
icon: Plane,
|
||||
title: "Flight Status Updates",
|
||||
description:
|
||||
"Receive real-time notifications about gate changes, delays, or cancellations directly to your email or mobile device.",
|
||||
},
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: "How does the 25% discount work on FlyTicketTravel?",
|
||||
answer: "Our 25% discount is automatically applied to all flight bookings made through FlyTicketTravel. There's no need for discount codes or special memberships - simply search for your flight, and you'll see the discounted price reflected in your total. This exclusive limited time discount is available on all routes and airlines in our system, making every destination more affordable for you.",
|
||||
},
|
||||
{
|
||||
question: "How do I find the best flight deals on FlyTicketTravel?",
|
||||
answer: "FlyTicketTravel searches across 300+ airlines to find the best prices. For the best deals, we recommend booking 6-8 weeks in advance, using our flexible date search option, and setting up price alerts for your desired route. Our smart search algorithm compares prices to ensure you always get competitive rates.",
|
||||
},
|
||||
{
|
||||
question: "Can I cancel or change my flight after booking?",
|
||||
answer: "Yes, most flights can be changed or canceled via contacting us. The specific policies and fees depend on the airline and fare type you've selected. You can view the change/cancellation policies before completing your booking. For assistance with changes, our customer support team is available 24/7.",
|
||||
},
|
||||
{
|
||||
question: "How early should I arrive at the airport for my flight?",
|
||||
answer: "We recommend arriving 2 hours before departure for domestic flights and 3 hours for international flights. During peak travel seasons or at busy airports, consider adding an extra 30 minutes. This allows sufficient time for check-in, security screening, and boarding procedures.",
|
||||
},
|
||||
{
|
||||
question: "Does FlyTicketTravel charge booking fees?",
|
||||
answer: "FlyTicketTravel maintains complete transparency in pricing. We don't cost you anything to use our platform. All mandatory fees and taxes are included in the prices you see during the search process. We do offer premium booking options with additional services for a small fee, but these are clearly marked and always optional.",
|
||||
},
|
||||
{
|
||||
question: "How do I check in for my flight?",
|
||||
answer: "Most airlines offer online check-in 24-48 hours before departure. You'll receive an email reminder from FlyTicketTravel when check-in opens for your flight with a direct link to the airline's check-in page. Alternatively, you can check in at the airport using the airline's kiosks or check-in counters.",
|
||||
},
|
||||
{
|
||||
question: "What if my flight is delayed or canceled?",
|
||||
answer: "FlyTicketTravel will notify you immediately via email and SMS if your flight is delayed or canceled. Our system automatically searches for alternative options when disruptions occur. You can also contact our 24/7 support team who will assist in rebooking or securing refunds according to the airline's policies.",
|
||||
},
|
||||
{
|
||||
question: "How do baggage allowances work?",
|
||||
answer: "Baggage allowances vary by airline, route, and fare class. The specific baggage details for your flight are displayed during the booking process and in your confirmation email. Most airlines include a personal item and cabin baggage in standard fares, while checked baggage may incur additional fees depending on the ticket type.",
|
||||
},
|
||||
{
|
||||
question: "Is my payment information secure?",
|
||||
answer: "Absolutely. FlyTicketTravel employs bank-level encryption and security protocols to protect your payment information. We are PCI-DSS compliant and never store your complete credit card details on our servers. We also offer secure payment options including credit/debit cards, PayPal, and digital wallets.",
|
||||
},
|
||||
];
|
||||
|
||||
async function handleDestinationSelect(destination: Destination) {
|
||||
await airportVM.searchForAirportByCode(destination.code);
|
||||
const searchElement = document.querySelector("#flight-search-form");
|
||||
if (searchElement) {
|
||||
searchElement.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<MaxWidthWrapper cls="px-4">
|
||||
<section
|
||||
class="grid min-h-[70vh] w-full place-items-center rounded-xl bg-cover bg-right md:bg-center"
|
||||
style="background-image: url('/assets/images/hero-bg.jpg');"
|
||||
>
|
||||
<div
|
||||
class="grid h-full w-full place-items-center rounded-xl bg-gradient-to-br from-black/50 via-brand-950/50 to-black/50 p-5 lg:p-12 xl:px-20"
|
||||
>
|
||||
<div class="w-full pt-28">
|
||||
<div
|
||||
class="flex h-full w-full flex-col items-center justify-center gap-4 md:gap-8"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center gap-4 md:gap-8">
|
||||
<Title color="white" size="h3" weight="semibold" center>
|
||||
Get 25% Off Your Next Adventure
|
||||
</Title>
|
||||
<p
|
||||
class="max-w-prose text-center text-white/80 lg:text-lg"
|
||||
>
|
||||
Enjoy exclusive savings on flights worldwide. Search,
|
||||
compare, and book with confidence on FlyTicketTravel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="flight-search-form"
|
||||
class="w-full rounded-lg bg-white/90 p-4 drop-shadow-xl md:p-8"
|
||||
>
|
||||
<TicketSearchInput
|
||||
rowify
|
||||
onSubmit={() => {
|
||||
flightTicketVM.beginSearch();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</MaxWidthWrapper>
|
||||
|
||||
<section
|
||||
id="destinations"
|
||||
class="bg-gradient-to-b from-white via-brand-100 to-white py-24"
|
||||
>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mx-auto mb-16 flex max-w-3xl flex-col gap-2 text-center">
|
||||
<Title color="black" weight="semibold" size="h3">
|
||||
Top Flight Destinations
|
||||
</Title>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
Explore our most popular routes with competitive fares and
|
||||
frequent departures. Click on a destination to start saving today.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{#each destinations as destination}
|
||||
<Card
|
||||
class="card-hover cursor-pointer overflow-hidden transition-all hover:scale-[1.02] hover:shadow-lg"
|
||||
onclick={() => handleDestinationSelect(destination)}
|
||||
>
|
||||
<div class="relative h-48 overflow-hidden">
|
||||
<img
|
||||
src={destination.image}
|
||||
alt={destination.name}
|
||||
class="h-full w-full object-cover transition-transform duration-700 hover:scale-110"
|
||||
/>
|
||||
{#if destination.discount}
|
||||
<div class="absolute left-3 top-3">
|
||||
<Badge class="bg-brand-500">
|
||||
{destination.discount}% OFF
|
||||
</Badge>
|
||||
</div>
|
||||
{/if}
|
||||
{#if destination.popular}
|
||||
<div class="absolute right-3 top-3">
|
||||
<Badge variant="secondary">Trending</Badge>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<CardContent class="p-5">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold">
|
||||
{destination.name}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{destination.country}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-brand-600">
|
||||
{destination.code} · Click to book
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mx-auto mb-16 flex max-w-3xl flex-col gap-2 text-center">
|
||||
<Title color="black" weight="semibold" size="h3">
|
||||
Flight Booking Features
|
||||
</Title>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
Enjoy premium booking tools with our guaranteed 25% discount on
|
||||
every flight you book through our platform.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each features as feature}
|
||||
<div
|
||||
class="rounded-xl border border-border bg-card p-6 transition-colors hover:border-brand-300"
|
||||
>
|
||||
<div class="mb-4 inline-block rounded-full bg-brand-100 p-3">
|
||||
<Icon icon={feature.icon} cls="h-8 w-8 text-brand-600" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-semibold">{feature.title}</h3>
|
||||
<p class="text-muted-foreground">{feature.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MaxWidthWrapper
|
||||
cls="grid grid-cols-1 md:place-items-center gap-8 p-4 md:p-8 md:grid-cols-2"
|
||||
>
|
||||
<div class="grid w-full place-items-center">
|
||||
<img
|
||||
src="/assets/images/about.jpg"
|
||||
alt="Flight booking experience"
|
||||
class="aspect-square h-full w-full max-w-xl rounded-xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex w-full flex-col gap-1 p-4 text-start">
|
||||
<Title color="gradientPrimary" size="p" capitalize weight="medium">
|
||||
Flight Booking Made Easy
|
||||
</Title>
|
||||
<Title color="black" size="h4">
|
||||
Save a quarter of your travel budget with our exclusive discount
|
||||
</Title>
|
||||
<p>
|
||||
Our advanced flight search technology compares thousands of routes and
|
||||
fares in seconds, finding you the best value tickets with transparent
|
||||
pricing and instant confirmation. Enjoy a seamless booking experience
|
||||
from search to takeoff.
|
||||
</p>
|
||||
<div class="mt-4 flex flex-col gap-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<Icon
|
||||
icon={CheckIcon}
|
||||
cls="h-6 w-auto text-brand-600 flex-shrink-0 mt-1"
|
||||
/>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold">
|
||||
Guaranteed 25% Discount Technology
|
||||
</h4>
|
||||
<p class="text-xs text-gray-600 lg:text-base">
|
||||
Our engine analyzes millions of flight combinations across
|
||||
hundreds of airlines to find you the the most competitive
|
||||
price with convenience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<Icon
|
||||
icon={CheckIcon}
|
||||
cls="h-6 w-auto text-brand-600 flex-shrink-0 mt-1"
|
||||
/>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold">
|
||||
Real-Time Flight Information
|
||||
</h4>
|
||||
<p class="text-xs text-gray-600 lg:text-base">
|
||||
From booking confirmation to landing, receive timely
|
||||
updates about your flight status, gate changes, and
|
||||
check-in reminders to ensure a smooth travel experience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MaxWidthWrapper>
|
||||
|
||||
<Testimonials />
|
||||
|
||||
<section id="faq" class="bg-gradient-to-b from-white via-brand-50 to-white py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mx-auto mb-16 max-w-3xl text-center">
|
||||
<h2 class="mb-4 text-3xl font-bold md:text-4xl">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
Get answers to common questions about booking flights with
|
||||
FlyTicketTravel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<div class="rounded-xl border border-border bg-card p-6">
|
||||
<Accordion type="single" class="w-full">
|
||||
{#each faqItems as item, i}
|
||||
<AccordionItem value="item-{i}">
|
||||
<AccordionTrigger>{item.question}</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<p class="text-muted-foreground">{item.answer}</p>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative overflow-hidden bg-brand-600 py-24">
|
||||
<div
|
||||
class="absolute left-0 top-0 h-64 w-64 rounded-full bg-brand-500 opacity-20 blur-3xl"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-0 right-0 h-96 w-96 rounded-full bg-brand-700 opacity-20 blur-3xl"
|
||||
></div>
|
||||
|
||||
<div class="container relative z-10 mx-auto px-4">
|
||||
<div class="mx-auto max-w-4xl text-center text-white">
|
||||
<h2 class="mb-6 text-3xl font-bold md:text-5xl">
|
||||
Ready to Book Your Flight?
|
||||
</h2>
|
||||
<p class="mb-10 text-xl text-white/90 md:text-2xl">
|
||||
Find and book your perfect flight in just a few clicks. No hidden
|
||||
fees, instant confirmation, and the best prices guaranteed.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<a href="/search">
|
||||
<Button size="lg" variant="white">
|
||||
Search Flights <ArrowRight class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<a href="/search">
|
||||
<Button size="lg" variant="glassWhite">
|
||||
View Flight Deals <ArrowRight class="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 grid grid-cols-2 gap-6 text-center md:grid-cols-4">
|
||||
<div>
|
||||
<p class="text-3xl font-bold md:text-4xl">100+</p>
|
||||
<p class="text-white/80">Airlines</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold md:text-4xl">2.4k+</p>
|
||||
<p class="text-white/80">Flights Booked</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold md:text-4xl">24/7</p>
|
||||
<p class="text-white/80">Flight Support</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold md:text-4xl">95%</p>
|
||||
<p class="text-white/80">Customer Satisfaction</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
4
apps/frontend/src/routes/(main)/[pageid]/+page.svelte
Normal file
4
apps/frontend/src/routes/(main)/[pageid]/+page.svelte
Normal file
@@ -0,0 +1,4 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<span>Show the thing to do the thing about the thing around the thing</span>
|
||||
@@ -27,12 +27,12 @@
|
||||
let callback = function () {
|
||||
console.log("ct-ed");
|
||||
};
|
||||
window.gtag("event", "conversion", {
|
||||
send_to: "AW-17085207253/ZFAVCLD6tMkaENWl7tI_",
|
||||
value: 1.0,
|
||||
currency: "USD",
|
||||
event_callback: callback,
|
||||
});
|
||||
// window.gtag("event", "conversion", {
|
||||
// send_to: "AW-17085207253/ZFAVCLD6tMkaENWl7tI_",
|
||||
// value: 1.0,
|
||||
// currency: "USD",
|
||||
// event_callback: callback,
|
||||
// });
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@@ -24,12 +24,12 @@
|
||||
></script>
|
||||
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function () {
|
||||
dataLayer.push(arguments);
|
||||
};
|
||||
window.gtag("js", new Date());
|
||||
window.gtag("config", "AW-17085207253");
|
||||
// window.dataLayer = window.dataLayer || [];
|
||||
// window.gtag = function () {
|
||||
// dataLayer.push(arguments);
|
||||
// };
|
||||
// window.gtag("js", new Date());
|
||||
// window.gtag("config", "AW-17085207253");
|
||||
</script>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user