53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { ArrowUpRight, type LucideIcon } from "lucide-react";
|
|
|
|
export function PageHero({ eyebrow, title, lede }: { eyebrow: string; title: string; lede?: string }) {
|
|
return (
|
|
<section className="border-b">
|
|
<div className="container-page py-20">
|
|
<div className="text-xs uppercase tracking-[0.25em] text-brand-blue font-semibold">{eyebrow}</div>
|
|
<h1 className="mt-4 font-display text-5xl md:text-6xl font-black leading-[1]">{title}</h1>
|
|
{lede && <p className="mt-6 max-w-2xl text-lg text-muted-foreground">{lede}</p>}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function Section({ children, className = "" }: { children: React.ReactNode; className?: string }) {
|
|
return <section className={`py-20 ${className}`}><div className="container-page">{children}</div></section>;
|
|
}
|
|
|
|
export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; title: string; body: string; reverse?: boolean; Icon?: LucideIcon }) {
|
|
return (
|
|
<div className={`grid lg:grid-cols-2 gap-10 items-center ${reverse ? "lg:[&>*:first-child]:order-2" : ""}`}>
|
|
<img src={img} alt={title} className="w-full h-[380px] object-cover" />
|
|
<div>
|
|
{Icon && <Icon className="h-6 w-6 text-brand-red" />}
|
|
<h3 className="mt-4 font-display text-3xl font-black">{title}</h3>
|
|
<p className="mt-4 text-muted-foreground whitespace-pre-line">{body}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CTA() {
|
|
return (
|
|
<section className="bg-brand-blue text-white">
|
|
<div className="container-page py-12 flex flex-wrap items-center justify-between gap-6">
|
|
<div>
|
|
<div className="text-xl md:text-2xl font-bold leading-tight">
|
|
Questions? Call Now:{" "}
|
|
<span className="text-3xl md:text-4xl font-black whitespace-nowrap">+971 4 320 3552</span>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
to="/enquiry"
|
|
className="inline-flex items-center gap-2 bg-white text-brand-blue px-8 py-4 rounded-md text-lg font-bold hover:opacity-90 transition-opacity"
|
|
>
|
|
BOOK NOW <ArrowUpRight className="h-5 w-5" />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|