117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { Breadcrumbs } from '@/components/breadcrumbs'
|
|
import { PublicInset, PublicPageHeader, PublicSurface } from '@/components/public-surface'
|
|
import type { Metadata } from 'next'
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog | Rocky Mountain Vending',
|
|
description: 'Read our latest blog posts about vending machines, services, and industry insights from Rocky Mountain Vending.',
|
|
alternates: {
|
|
canonical: 'https://rockymountainvending.com/blog/',
|
|
},
|
|
}
|
|
|
|
const blogPosts = [
|
|
{
|
|
title: 'How to Remove an Abandoned Vending Machine in Utah',
|
|
description: 'A comprehensive guide for Utah businesses dealing with unwanted vending machines on their property.',
|
|
slug: 'abandoned-vending-machines',
|
|
date: 'March 20, 2025',
|
|
image: '/images/abandoned-vending-machine-guide.jpg',
|
|
imageAlt: 'Abandoned vending machine guide',
|
|
},
|
|
{
|
|
title: 'Rocky Mountain Vending Reviews & Testimonials',
|
|
description: 'Read customer reviews and testimonials about our vending machine services in Utah.',
|
|
slug: 'reviews',
|
|
date: 'March 20, 2025',
|
|
image: '/images/customer-reviews.jpg',
|
|
imageAlt: 'Customer reviews and testimonials',
|
|
},
|
|
{
|
|
title: 'The Best Vending Machine Supplier in Salt Lake City, Utah',
|
|
description: 'Why Rocky Mountain Vending is the top choice for vending machine services in Salt Lake City.',
|
|
slug: 'best-vending-machine-supplier-in-salt-lake-city-utah',
|
|
date: 'March 20, 2025',
|
|
image: '/images/salt-lake-city-vending.jpg',
|
|
imageAlt: 'Vending machine supplier in Salt Lake City',
|
|
},
|
|
]
|
|
|
|
export default function BlogPage() {
|
|
return (
|
|
<>
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: 'Blog', href: '/blog' },
|
|
]}
|
|
/>
|
|
<article className="container mx-auto max-w-5xl px-4 py-10 md:py-14">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Rocky Updates"
|
|
title="Blog"
|
|
description="Guides, reviews, and local Utah vending insights from the Rocky Mountain Vending team."
|
|
/>
|
|
|
|
<div className="mt-10 space-y-6">
|
|
{blogPosts.map((post) => (
|
|
<PublicSurface key={post.slug} as="article" className="p-5 md:p-6">
|
|
<div className="flex flex-col md:flex-row gap-6">
|
|
<div className="md:w-1/3">
|
|
<Link href={`/blog/${post.slug}`}>
|
|
<div className="relative aspect-video w-full overflow-hidden rounded-[1.5rem] bg-muted">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.imageAlt}
|
|
fill
|
|
className="object-cover transition-transform hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="md:w-2/3">
|
|
<h2 className="text-2xl md:text-3xl font-semibold mb-2 tracking-tight text-balance">
|
|
<Link href={`/blog/${post.slug}`} className="transition-colors hover:text-primary">
|
|
{post.title}
|
|
</Link>
|
|
</h2>
|
|
<p className="text-muted-foreground mb-4 leading-relaxed text-base md:text-lg">
|
|
{post.description}
|
|
</p>
|
|
<PublicInset className="mb-4 inline-flex items-center gap-4 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
|
|
<time>{post.date}</time>
|
|
</PublicInset>
|
|
<div className="mt-4">
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
className="inline-flex min-h-11 items-center gap-2 rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
|
|
>
|
|
Read more
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M5 12h14" />
|
|
<path d="m12 5 7 7-7 7" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PublicSurface>
|
|
))}
|
|
</div>
|
|
</article>
|
|
</>
|
|
)
|
|
}
|