vargha/Voyager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add plans, about, blog and contact pages

Browse Source 
Add the /plans, /about, /blog and /contact routes, a Company dropdown in
the navbar, and a shared 3D about-bus tile. Group components into
ui, layout, home, plans, about, blog and contact folders.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
vargha1
2026-10-03 15:07:44 +03:30
parent 5198432136
commit b9cc3c6349
45 changed files with 1461 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,147 @@
import type { Metadata } from "next";
import { AboutBus } from "@/components/about/about-bus";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { ButtonLink } from "@/components/ui/button";
import Image from "next/image";
import { Reveal } from "@/components/ui/reveal";
export const metadata: Metadata = {
title: "About us — VOYAGER",
description: "Voyager is an AI-powered business operating platform for tour operators, transportation companies and rental businesses.",
};
const principles = [
{ title: "Simple", text: "Powerful technology shouldn’t feel complicated." },
{ title: "Connected", text: "Your systems should work together." },
{ title: "Scalable", text: "Your software should grow with your business." },
{ title: "Intelligence", text: "AI should help your team, not replace the people who know your business." },
{ title: "Affordable", text: "Enterprise-level capability shouldn’t require enterprise-level complexity." },
];
const stats = [
{ value: "37mil", label: "Yearly Tickets" },
{ value: "360", label: "Operation" },
{ value: "280", label: "Clients" },
{ value: "50", label: "Countries" },
{ value: "102", label: "Employees" },
];
const aims = [
{
title: "Vision",
image: "/vision.png",
text: "To give every tour and transportation business the tools of a global enterprise, in one connected platform that grows with them.",
},
{
title: "Mission",
image: "/mission.png",
text: "To simplify how tourism businesses book, manage and grow by bringing ticketing, operations, distribution, payments and AI together.",
},
];
export default function AboutPage() {
return (
<>
<Navbar />
<main className="flex-1 overflow-x-clip">
<section className="pb-12 pt-4 lg:pb-20">
<div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 sm:px-6">
<Breadcrumb current="About us" />
<div className="grid items-start gap-10 lg:grid-cols-[6fr_4fr]">
<div className="flex flex-col gap-6">
<h1 className="text-4xl font-medium leading-tight tracking-tight text-[#11192d] sm:text-5xl">
Voyager<span className="text-icon">,</span> the ticketing solution for tour operators
</h1>
<div className="flex flex-col gap-1">
<h2 className="text-xs font-bold text-[#11192d]">Technology That Makes Tourism Businesses Simpler</h2>
<p className="text-xs leading-relaxed text-[#11192d]/70">
Voyager is an AI-powered business operating platform for tour operators, transportation companies, rental businesses and tourism
enterprises. Voyager was created around a simple idea: tour operators shouldn&rsquo;t have to build their business around their
software. The software should adapt to the business. Voyager brings tour booking, ticketing, operations, fleet management, CRM,
payments, communication, distribution, marketing and AI together in one connected platform.
</p>
</div>
<div className="flex flex-col gap-3">
<h2 className="text-lg font-medium text-[#11192d]">Our Principles</h2>
<ul className="grid gap-3 sm:grid-cols-2">
{principles.map((p, i) => (
<li key={p.title} className={i === principles.length - 1 && principles.length % 2 === 1 ? "sm:col-span-2" : ""}>
<Reveal delay={(i % 2) * 90} className="h-full">
<div className="flex h-full flex-col gap-1 rounded-2xl bg-[#0160d4]/4 p-4">
<h3 className="text-base font-medium text-[#11192d]">{p.title}</h3>
<p className="max-w-56 text-xs text-[#11192d]/60 sm:max-w-none">{p.text}</p>
</div>
</Reveal>
</li>
))}
</ul>
</div>
</div>
<div className="mx-auto w-72 sm:w-80 lg:mx-0 lg:w-full lg:max-w-sm lg:justify-self-center">
<AboutBus priority />
</div>
</div>
</div>
</section>
<section className="py-12 lg:py-16">
<div className="mx-auto grid max-w-6xl gap-6 px-4 pt-20 sm:px-6 md:grid-cols-2">
{aims.map((a, i) => (
<Reveal key={a.title} delay={i * 90}>
<div className="relative flex h-full min-h-[22rem] flex-col justify-end rounded-3xl bg-[#0160d4]/4 p-8">
<div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
<div className="absolute -left-10 top-1/3 h-24 w-[130%] -rotate-6 rounded-full border-[14px] border-[#0160d4]/8" />
</div>
<Image src={a.image} alt="" width={460} height={370} sizes="(min-width: 768px) 24rem, 80vw" className="pointer-events-none absolute inset-x-0 -top-16 mx-auto h-auto w-[75%] max-w-sm" />
<h2 className="relative text-lg font-bold text-[#11192d]">{a.title}</h2>
<p className="relative mt-2 text-xs leading-relaxed text-[#11192d]/70">{a.text}</p>
</div>
</Reveal>
))}
</div>
</section>
<section className="py-12 lg:py-16">
<div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 sm:px-6">
<h2 className="flex flex-wrap items-end gap-x-4 leading-none">
<span className="bg-linear-to-r from-[#0160d4] to-[#0a8bff]/10 bg-clip-text text-[7rem] font-black leading-[0.85] text-transparent sm:text-[9rem]">
WHY
</span>
<span className="pb-2 text-3xl font-medium text-[#11192d] sm:text-4xl">
Choose Voyager<span className="text-accent">?</span>
</span>
</h2>
<ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
{stats.map((s) => (
<li key={s.label} className="flex flex-col items-center gap-1 rounded-2xl bg-[#0160d4]/4 px-4 py-4 text-center">
<span className="text-3xl font-medium text-[#0160d4]">{s.value}</span>
<span className="text-xs text-[#11192d]/70">{s.label}</span>
</li>
))}
</ul>
<div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-[#0160d4]/12 bg-white p-3 pl-5 sm:flex-row sm:items-center">
<p className="flex items-center gap-2 text-lg font-medium text-[#11192d]">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="size-5 text-icon">
<path d="m5 3 14 7-6 2-2 6L5 3Z" />
</svg>
Wanna try?
</p>
<ButtonLink href="/#demo" className="h-9 rounded-lg px-4 text-xs">
Become a Voyager Customer
</ButtonLink>
</div>
</div>
</section>
</main>
<Footer />
</>
);
}

30
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,30 @@
import type { Metadata } from "next";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BlogList } from "@/components/blog/blog-list";
import { BlogAbout } from "@/components/blog/blog-about";
export const metadata: Metadata = {
title: "Weblog — VOYAGER",
description: "Guides, industry insights, customer stories and product updates for tour operators.",
};
export default function BlogPage() {
return (
<>
<Navbar />
<main className="flex-1 overflow-x-clip">
<section className="pb-12 pt-4 lg:pb-16">
<div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 sm:px-6">
<Breadcrumb current="Weblog" />
<h1 className="text-4xl font-medium tracking-tight text-[#11192d] sm:text-5xl">Weblog</h1>
<BlogList />
</div>
</section>
<BlogAbout />
</main>
<Footer />
</>
);
}

90
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,90 @@
import type { Metadata } from "next";
import type { ReactNode } from "react";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { ContactForm } from "@/components/contact/contact-form";
export const metadata: Metadata = {
title: "Contact us — VOYAGER",
description: "Get in touch with the Voyager sales team or find our office details.",
};
const icons = {
pin: (
<>
<path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11Z" />
<circle cx="12" cy="10" r="2.5" />
</>
),
phone: <path d="M5 4h4l2 5-2.500 1.500a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2Z" />,
mail: (
<>
<rect x="3" y="5" width="18" height="14" rx="3" />
<path d="m4 8 8 6 8-6" />
</>
),
};
function InfoCard({ icon, label, value, href, children }: { icon: ReactNode; label: string; value: string; href?: string; children?: ReactNode }) {
return (
<div className="flex items-center gap-4 rounded-3xl bg-[#0160d4]/4 px-5 py-4">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="size-6 shrink-0 text-icon">
{icon}
</svg>
<div className="flex min-w-0 grow flex-col">
<span className="text-[10px] text-[#11192d]/60">{label}</span>
{href ? (
<a href={href} className="text-sm font-medium text-[#11192d] transition-colors hover:text-accent">
{value}
</a>
) : (
<span className="text-sm font-medium text-[#11192d]">{value}</span>
)}
</div>
{children}
</div>
);
}
export default function ContactPage() {
return (
<>
<Navbar />
<main className="flex-1 overflow-x-clip">
<section className="pb-16 pt-4 lg:pb-24">
<div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 sm:px-6">
<Breadcrumb current="Contact us" />
<h1 className="text-4xl font-medium tracking-tight text-[#11192d] sm:text-5xl">Contact us</h1>
<div className="grid items-start gap-6 lg:grid-cols-[5fr_5fr]">
<div className="flex flex-col gap-4">
<InfoCard icon={icons.pin} label="Central Office" value="full address replaced here">
<a
href="https://maps.google.com"
target="_blank"
rel="noopener noreferrer"
className="flex shrink-0 items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-xs font-medium text-[#11192d] transition-colors hover:text-accent"
>
<svg viewBox="0 0 24 24" aria-hidden className="size-4">
<path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Z" fill="#34a853" />
<path d="M12 2a7 7 0 0 0-5 2.100L12 10Z" fill="#ea4335" />
<circle cx="12" cy="9" r="2.500" fill="#fff" />
</svg>
Google map
</a>
</InfoCard>
<InfoCard icon={icons.phone} label="Sales Unit" value="+1 234 5432" href="tel:+12345432" />
<InfoCard icon={icons.phone} label="CEO Unit" value="+1 234 5432" href="tel:+12345432" />
<InfoCard icon={icons.mail} label="Mail" value="info@voyager.com" href="mailto:info@voyager.com" />
</div>
<ContactForm />
</div>
</div>
</section>
</main>
<Footer />
</>
);
}

19
src/app/globals.css
View File

@@ -123,3 +123,22 @@ body {
scroll-behavior: auto !important;
}
}
.revenue-slider::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border-radius: 9999px;
background: #0160d4;
border: 3px solid #fff;
box-shadow: 0 0 0 1px #0160d4;
}
.revenue-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 9999px;
background: #0160d4;
border: 3px solid #fff;
box-shadow: 0 0 0 1px #0160d4;
}

38
src/app/page.tsx
View File

@@ -1,22 +1,22 @@
import { Navbar } from "@/components/navbar";
import { Hero } from "@/components/hero";
import { Partners } from "@/components/partners";
import { Platform } from "@/components/platform";
import { VoyagerDifference } from "@/components/voyager-difference";
import { TourBooking } from "@/components/tour-booking";
import { VoyagerAI } from "@/components/voyager-ai";
import { TourOperations } from "@/components/tour-operations";
import { CRM } from "@/components/crm";
import { OTADistribution } from "@/components/ota-distribution";
import { RentalManagement } from "@/components/rental-management";
import { PaymentsRevenue } from "@/components/payments-revenue";
import { MarketingGrowth } from "@/components/marketing-growth";
import { Solutions } from "@/components/solutions";
import { Pricing } from "@/components/pricing";
import { Integrations } from "@/components/integrations";
import { CustomerStories } from "@/components/customer-stories";
import { About } from "@/components/about";
import { Footer } from "@/components/footer";
import { Navbar } from "@/components/layout/navbar";
import { Hero } from "@/components/home/hero";
import { Partners } from "@/components/home/partners";
import { Platform } from "@/components/home/platform";
import { VoyagerDifference } from "@/components/home/voyager-difference";
import { TourBooking } from "@/components/home/tour-booking";
import { VoyagerAI } from "@/components/home/voyager-ai";
import { TourOperations } from "@/components/home/tour-operations";
import { CRM } from "@/components/home/crm";
import { OTADistribution } from "@/components/home/ota-distribution";
import { RentalManagement } from "@/components/home/rental-management";
import { PaymentsRevenue } from "@/components/home/payments-revenue";
import { MarketingGrowth } from "@/components/home/marketing-growth";
import { Solutions } from "@/components/home/solutions";
import { Pricing } from "@/components/home/pricing";
import { Integrations } from "@/components/home/integrations";
import { CustomerStories } from "@/components/home/customer-stories";
import { About } from "@/components/home/about";
import { Footer } from "@/components/layout/footer";
export default function Home() {
return (

37
src/app/plans/page.tsx Normal file
View File

@@ -0,0 +1,37 @@
import type { Metadata } from "next";
import { Navbar } from "@/components/layout/navbar";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { Footer } from "@/components/layout/footer";
import { PlanCalculator } from "@/components/plans/plan-calculator";
import { PlanIncludes } from "@/components/plans/plan-includes";
import { PlanComparison } from "@/components/plans/plan-comparison";
import { PlanFAQ } from "@/components/plans/plan-faq";
export const metadata: Metadata = {
title: "Our Plans — VOYAGER",
description: "Simple pricing built around your business. Compare Core, Grow, Scale and Enterprise plans.",
};
export default function PlansPage() {
return (
<>
<Navbar />
<main className="flex-1 overflow-x-clip">
<section className="pb-12 pt-4 lg:pb-16">
<div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 sm:px-6">
<Breadcrumb current="Our Plans" />
<div className="flex flex-col gap-3">
<h1 className="text-4xl font-medium tracking-tight text-[#11192d] sm:text-5xl">Our Plans</h1>
<p className="text-lg text-[#11192d]">Your annual revenue</p>
</div>
<PlanCalculator />
</div>
</section>
<PlanIncludes />
<PlanComparison />
<PlanFAQ />
</main>
<Footer />
</>
);
}