Rocky_Mountain_Vending/components/about-page.tsx

108 lines
4.3 KiB
XML

"use client"
import Image from "next/image"
import Link from "next/link"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
PublicInset,
PublicPageHeader,
PublicSurface,
} from "@/components/public-surface"
export function AboutPage() {
return (
<div className="public-page">
<Breadcrumbs
className="mb-6"
items={[{ label: "About Us", href: "/about-us" }]}
/>
<PublicPageHeader
align="center"
eyebrow="Family Owned"
title="About Rocky Mountain Vending"
description="We built Rocky Mountain Vending to serve Utah businesses with responsive service, better machine care, and a relationship that still feels personal."
className="mb-10 md:mb-14"
/>
<PublicSurface className="overflow-hidden p-5 md:p-7">
<div className="grid gap-6 md:grid-cols-[0.95fr_1.05fr] md:gap-8">
<div>
<PublicInset className="overflow-hidden p-0">
<Image
src="https://rockymountainvending.com/wp-content/uploads/2022/06/Rebekahand-Matt-scaled.webp"
alt="Matt and Rebekah"
width={640}
height={800}
className="h-full w-full object-cover"
priority
/>
</PublicInset>
</div>
<div className="flex flex-col justify-center">
<div className="space-y-4 text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
<p>
When my wife, Rebekah, and I met, we knew we wanted to start a
business and raise our family here in the Salt Lake Valley. We
met in Bellevue, Washington and moved straight to Salt Lake City
after we got married to build Rocky Mountain Vending.
</p>
<p>
Our focus is on healthy vending and dependable service, while
still helping locations that want traditional snack and drink
options too.
</p>
<p>
Rocky Mountain Vending is a local family-run business founded in
2019. We believe business should be built on trust, exceptional
customer service, modern technology, and enjoying the work we
do.
</p>
</div>
<PublicInset className="mt-6">
<p className="text-sm leading-6 text-muted-foreground">
If you&apos;re looking for a more personal vending partner with
modern tools and real follow-through, that&apos;s exactly what
we set out to build.
</p>
<p className="mt-4 text-lg font-semibold text-foreground">
~Matt
</p>
</PublicInset>
</div>
</div>
</PublicSurface>
<section className="mt-12">
<PublicSurface className="text-center">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
Next Step
</p>
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
Want to talk through your location with us directly?
</h2>
<p className="mx-auto mt-4 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
If you want a more personal vending partner, tell us about your
space and we&apos;ll help you decide whether placement, machine
sales, or service support makes the most sense.
</p>
<div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
<Link
href="/contact-us#contact-form"
className="inline-flex min-h-11 items-center justify-center rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
>
Talk to Our Team
</Link>
<Link
href="/reviews"
className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-6 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
>
Read Reviews
</Link>
</div>
</PublicSurface>
</section>
</div>
)
}