120 lines
5.6 KiB
TypeScript
120 lines
5.6 KiB
TypeScript
import React from 'react'
|
|
import { Metadata } from 'next'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import SeoNavbar from '@/components/seo/SeoNavbar'
|
|
import SeoFooter from '@/components/seo/SeoFooter'
|
|
import { blogPosts } from '@/lib/blogPosts'
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'GreenLens Plant Care & Identification Blog',
|
|
description:
|
|
'Expert guides on houseplant watering schedules, plant disease diagnosis, pest control, and photo identification.',
|
|
alternates: {
|
|
canonical: '/blog',
|
|
},
|
|
}
|
|
|
|
const readMoreLabel: Record<string, string> = {
|
|
en: 'Read Full Guide',
|
|
de: 'Ganzen Artikel lesen',
|
|
es: 'Leer la guía completa',
|
|
}
|
|
|
|
const languageBadge: Record<string, { label: string; flag: string }> = {
|
|
en: { label: 'EN', flag: '🇬🇧' },
|
|
de: { label: 'DE', flag: '🇩🇪' },
|
|
es: { label: 'ES', flag: '🇪🇸' },
|
|
}
|
|
|
|
export default function BlogIndexPage() {
|
|
// This index page's own chrome (hero copy) stays English, but every post —
|
|
// English, German, Spanish — is listed here with a small language badge so
|
|
// DE/ES posts are actually discoverable instead of living at an unlinked URL.
|
|
const posts = Object.values(blogPosts)
|
|
|
|
return (
|
|
<div className="bg-[#fdfbf6] text-on-surface font-body antialiased min-h-screen relative overflow-hidden flex flex-col justify-between">
|
|
{/* Header Navigation */}
|
|
<SeoNavbar locale="en" />
|
|
|
|
{/* Decorative Ambient Green Blobs */}
|
|
<div className="absolute inset-0 pointer-events-none -z-10" aria-hidden="true">
|
|
<div className="absolute top-[-5%] left-[-10%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#c2e5cc] blur-[120px] rounded-full mix-blend-multiply opacity-70" />
|
|
<div className="absolute top-[25%] right-[-5%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-[#e5f0cb] blur-[100px] rounded-full mix-blend-multiply opacity-80" />
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<main className="pt-32 pb-24 flex-1">
|
|
<div className="max-w-[1100px] mx-auto px-6">
|
|
{/* Hero Header */}
|
|
<div className="text-center max-w-[750px] mx-auto mb-16">
|
|
<span className="bg-emerald-600/10 text-emerald-800 border border-emerald-600/20 text-xs font-extrabold tracking-widest uppercase px-4 py-1.5 rounded-full inline-block mb-4 shadow-xs">
|
|
🌿 Botanical Research & Guides
|
|
</span>
|
|
<h1 className="font-display text-4xl sm:text-5xl font-bold text-emerald-950 mb-4 tracking-tight leading-tight">
|
|
Plant Care & Identification Guides
|
|
</h1>
|
|
<p className="text-emerald-900/80 text-lg sm:text-xl font-medium leading-relaxed">
|
|
Evidence-based guides on indoor plant watering schedules, health diagnostics, pest control, and species identification.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Blog Cards Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{posts.map((post, index) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/blog/${post.slug}`}
|
|
className="group bg-white rounded-3xl border-2 border-emerald-600/20 overflow-hidden shadow-sm hover:shadow-2xl hover:border-emerald-600/40 transition-all duration-300 flex flex-col"
|
|
>
|
|
{/* Image */}
|
|
<div className="relative h-52 w-full overflow-hidden bg-emerald-950">
|
|
<Image
|
|
src={post.heroImage}
|
|
alt={post.heroImageAlt}
|
|
fill
|
|
priority={index < 3}
|
|
loading={index < 3 ? undefined : 'lazy'}
|
|
sizes="(min-width: 768px) 33vw, 100vw"
|
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute top-4 left-4 bg-emerald-950/90 backdrop-blur-md px-3.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-300 border border-emerald-500/30">
|
|
{post.category}
|
|
</div>
|
|
<div className="absolute top-4 right-4 bg-white/95 backdrop-blur-md px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-900 border border-emerald-600/20 shadow-sm">
|
|
{languageBadge[post.locale]?.flag ?? ''} {languageBadge[post.locale]?.label ?? post.locale}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Content */}
|
|
<div className="p-6 flex-1 flex flex-col justify-between">
|
|
<div>
|
|
<div className="text-xs text-emerald-800 font-semibold mb-2">
|
|
{post.publishedAt} • {post.readTime}
|
|
</div>
|
|
<h2 className="font-display text-xl font-bold text-emerald-950 group-hover:text-emerald-700 transition-colors mb-3 leading-snug">
|
|
{post.title}
|
|
</h2>
|
|
<p className="text-emerald-900/70 text-sm line-clamp-3 leading-relaxed mb-6 font-normal">
|
|
{post.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-emerald-700 font-bold text-sm flex items-center gap-1.5 group-hover:translate-x-1 transition-transform">
|
|
<span>{readMoreLabel[post.locale] ?? readMoreLabel.en}</span>
|
|
<span>→</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer Navigation */}
|
|
<SeoFooter locale="en" />
|
|
</div>
|
|
)
|
|
}
|