feat: implement programmatic SEO for solutions pages
- Add 10 oil-for-concern solution pages with localized slugs - Support 4 languages: sr, en, de, fr with proper canonical URLs - Add solutions hub, by-concern, and by-oil directory pages - Filter bundle products from solutions pages - Add hideLangSwitcher prop to Header component - Update translations for all languages - Fix canonical URLs to include locale prefix
This commit is contained in:
Unchained
@@ -1,7 +1,10 @@
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { ChevronRight, Sparkles, Heart, Leaf, Sun, Moon, Clock, Globe, Users, Droplets, ArrowRight } from "lucide-react";
|
||||
import { ChevronRight, Droplets, ArrowRight } from "lucide-react";
|
||||
import Header from "@/components/layout/Header";
|
||||
import Footer from "@/components/layout/Footer";
|
||||
import { isValidLocale, DEFAULT_LOCALE } from "@/lib/i18n/locales";
|
||||
|
||||
type Params = Promise<{ locale: string }>;
|
||||
|
||||
@@ -11,11 +14,22 @@ export async function generateMetadata({
|
||||
params: Params;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: "Solutions.Hub" });
|
||||
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
||||
const t = await getTranslations({ locale: validLocale, namespace: "Solutions.Hub" });
|
||||
|
||||
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
|
||||
const localePrefix = validLocale === DEFAULT_LOCALE ? "/sr" : `/${validLocale}`;
|
||||
const canonicalUrl = `${baseUrl}${localePrefix}/solutions`;
|
||||
|
||||
return {
|
||||
title: t("metaTitle"),
|
||||
description: t("metaDescription"),
|
||||
alternates: {
|
||||
canonical: canonicalUrl,
|
||||
},
|
||||
openGraph: {
|
||||
url: canonicalUrl,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -107,185 +121,103 @@ export default async function SolutionsHubPage({
|
||||
icon: <Droplets className="w-5 h-5" />,
|
||||
priority: true,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.ageSkinRoutine.title"),
|
||||
description: hubT("categories.ageSkinRoutine.description"),
|
||||
href: `/${locale}/solutions/age-skin-routine`,
|
||||
icon: <Clock className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.ingredientPairings.title"),
|
||||
description: hubT("categories.ingredientPairings.description"),
|
||||
href: `/${locale}/solutions/ingredient-pairings`,
|
||||
icon: <Sparkles className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.bodyPartConcerns.title"),
|
||||
description: hubT("categories.bodyPartConcerns.description"),
|
||||
href: `/${locale}/solutions/body-part-concerns`,
|
||||
icon: <Heart className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.oilComparisons.title"),
|
||||
description: hubT("categories.oilComparisons.description"),
|
||||
href: `/${locale}/solutions/oil-comparisons`,
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.routineStepSkinType.title"),
|
||||
description: hubT("categories.routineStepSkinType.description"),
|
||||
href: `/${locale}/solutions/routine-step-skin-type`,
|
||||
icon: <Leaf className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.seasonalSkincare.title"),
|
||||
description: hubT("categories.seasonalSkincare.description"),
|
||||
href: `/${locale}/solutions/seasonal-skincare`,
|
||||
icon: <Sun className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.timeOfDayConcerns.title"),
|
||||
description: hubT("categories.timeOfDayConcerns.description"),
|
||||
href: `/${locale}/solutions/time-of-day-concerns`,
|
||||
icon: <Moon className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.naturalAlternatives.title"),
|
||||
description: hubT("categories.naturalAlternatives.description"),
|
||||
href: `/${locale}/solutions/natural-alternatives`,
|
||||
icon: <Leaf className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
title: hubT("categories.culturalBeautySecrets.title"),
|
||||
description: hubT("categories.culturalBeautySecrets.description"),
|
||||
href: `/${locale}/solutions/cultural-beauty-secrets`,
|
||||
icon: <Globe className="w-5 h-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<section className="pt-32 pb-16 lg:pt-40 lg:pb-24">
|
||||
<div className="container">
|
||||
<nav className="flex items-center gap-2 text-sm text-[#666666] mb-8">
|
||||
<Link href={`/${locale}`} className="hover:text-black transition-colors">
|
||||
{t("breadcrumb.home")}
|
||||
</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-[#1a1a1a]">{t("breadcrumb.solutions")}</span>
|
||||
</nav>
|
||||
<>
|
||||
<Header locale={locale} hideLangSwitcher={true} />
|
||||
<div className="min-h-screen bg-white">
|
||||
<section className="pt-32 pb-16 lg:pt-40 lg:pb-24">
|
||||
<div className="container">
|
||||
<nav className="flex items-center gap-2 text-sm text-[#666666] mb-8">
|
||||
<Link href={`/${locale}`} className="hover:text-black transition-colors">
|
||||
{t("breadcrumb.home")}
|
||||
</Link>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<span className="text-[#1a1a1a]">{t("breadcrumb.solutions")}</span>
|
||||
</nav>
|
||||
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl lg:text-5xl font-medium tracking-tight text-[#1a1a1a] mb-6">
|
||||
{hubT("title")}
|
||||
</h1>
|
||||
<p className="text-lg text-[#666666] leading-relaxed">
|
||||
{hubT("subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
|
||||
{categories.map((category) => (
|
||||
<CategoryCard key={category.href} {...category} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
<div className="border border-[#e5e5e5] rounded-lg overflow-hidden">
|
||||
<div className="p-6 bg-[#fafafa] border-b border-[#e5e5e5]">
|
||||
<h2 className="text-lg font-medium text-[#1a1a1a]">
|
||||
{hubT("quickAccess.byConcern")}
|
||||
</h2>
|
||||
<p className="text-sm text-[#666666] mt-1">
|
||||
{hubT("quickAccess.byConcernDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="divide-y divide-[#e5e5e5]">
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.wrinkles")}
|
||||
href={`/${locale}/solutions/by-concern/wrinkles`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.acne")}
|
||||
href={`/${locale}/solutions/by-concern/acne`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.drySkin")}
|
||||
href={`/${locale}/solutions/by-concern/dry-skin`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.darkSpots")}
|
||||
href={`/${locale}/solutions/by-concern/dark-spots`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.viewAll")}
|
||||
href={`/${locale}/solutions/by-concern`}
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl lg:text-5xl font-medium tracking-tight text-[#1a1a1a] mb-6">
|
||||
{hubT("title")}
|
||||
</h1>
|
||||
<p className="text-lg text-[#666666] leading-relaxed">
|
||||
{hubT("subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="border border-[#e5e5e5] rounded-lg overflow-hidden">
|
||||
<div className="p-6 bg-[#fafafa] border-b border-[#e5e5e5]">
|
||||
<h2 className="text-lg font-medium text-[#1a1a1a]">
|
||||
{hubT("quickAccess.byOil")}
|
||||
</h2>
|
||||
<p className="text-sm text-[#666666] mt-1">
|
||||
{hubT("quickAccess.byOilDesc")}
|
||||
</p>
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
|
||||
{categories.map((category) => (
|
||||
<CategoryCard key={category.href} {...category} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
<div className="border border-[#e5e5e5] rounded-lg overflow-hidden">
|
||||
<div className="p-6 bg-[#fafafa] border-b border-[#e5e5e5]">
|
||||
<h2 className="text-lg font-medium text-[#1a1a1a]">
|
||||
{hubT("quickAccess.byConcern")}
|
||||
</h2>
|
||||
<p className="text-sm text-[#666666] mt-1">
|
||||
{hubT("quickAccess.byConcernDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="divide-y divide-[#e5e5e5]">
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.viewAll")}
|
||||
href={`/${locale}/solutions/by-concern`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-[#e5e5e5]">
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.rosehipOil")}
|
||||
href={`/${locale}/solutions/by-oil/rosehip-oil`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.arganOil")}
|
||||
href={`/${locale}/solutions/by-oil/argan-oil`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.jojobaOil")}
|
||||
href={`/${locale}/solutions/by-oil/jojoba-oil`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.seaBuckthornOil")}
|
||||
href={`/${locale}/solutions/by-oil/sea-buckthorn-oil`}
|
||||
/>
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.viewAll")}
|
||||
href={`/${locale}/solutions/by-oil`}
|
||||
/>
|
||||
|
||||
<div className="border border-[#e5e5e5] rounded-lg overflow-hidden">
|
||||
<div className="p-6 bg-[#fafafa] border-b border-[#e5e5e5]">
|
||||
<h2 className="text-lg font-medium text-[#1a1a1a]">
|
||||
{hubT("quickAccess.byOil")}
|
||||
</h2>
|
||||
<p className="text-sm text-[#666666] mt-1">
|
||||
{hubT("quickAccess.byOilDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="divide-y divide-[#e5e5e5]">
|
||||
<QuickLink
|
||||
title={hubT("quickAccess.links.viewAll")}
|
||||
href={`/${locale}/solutions/by-oil`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="bg-[#1a1a1a] rounded-2xl p-8 lg:p-12 text-center">
|
||||
<h2 className="text-2xl lg:text-3xl font-medium text-white mb-4">
|
||||
{hubT("cta.title")}
|
||||
</h2>
|
||||
<p className="text-[#999999] max-w-xl mx-auto mb-8">
|
||||
{hubT("cta.description")}
|
||||
</p>
|
||||
<Link
|
||||
href={`/${locale}/products`}
|
||||
className="inline-flex items-center justify-center px-8 py-3 bg-white text-[#1a1a1a] font-medium rounded-full hover:bg-[#f5f5f5] transition-colors"
|
||||
>
|
||||
{hubT("cta.button")}
|
||||
</Link>
|
||||
<section className="pb-16 lg:pb-24">
|
||||
<div className="container">
|
||||
<div className="bg-[#1a1a1a] rounded-2xl p-8 lg:p-12 text-center">
|
||||
<h2 className="text-2xl lg:text-3xl font-medium text-white mb-4">
|
||||
{hubT("cta.title")}
|
||||
</h2>
|
||||
<p className="text-[#999999] max-w-xl mx-auto mb-8">
|
||||
{hubT("cta.description")}
|
||||
</p>
|
||||
<Link
|
||||
href={`/${locale}/products`}
|
||||
className="inline-flex items-center justify-center px-8 py-3 bg-white text-[#1a1a1a] font-medium rounded-full hover:bg-[#f5f5f5] transition-colors"
|
||||
>
|
||||
{hubT("cta.button")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Footer locale={locale} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user