feat: implement internationalization and routing for locale-based pages
- Added RootLayout component to handle locale and message loading. - Created Home page with header, about info, products, and story sections. - Developed ProductPage for displaying product categories and products. - Implemented ProductsPage to list product categories with banners. - Added Projects page with a grid layout for project display. - Configured server settings for port and host. - Established navigation and routing for internationalization. - Set up request handling for locale and message retrieval. - Defined routing structure for supported locales. - Created middleware for locale-based routing. - Defined layout parameters for locale handling.
This commit is contained in:
@@ -1,13 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import images from '@/assets/images/images';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import FooterMenuBuilder from './FooterMenuBuilder';
|
||||
import { appConstants } from '@/assets/constants';
|
||||
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
||||
import FooterInfo from './FooterInfo';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
|
||||
import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
|
||||
import { TLocales } from '@/locales/translates';
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations();
|
||||
const params = useParams();
|
||||
const locale = params.locale as TLocales;
|
||||
|
||||
const quickLinks = getQuickLinks(t, locale);
|
||||
const whoAreWeLinks = getWhoAreWeLinks(t, locale);
|
||||
|
||||
return (
|
||||
<div className="relative w-full bg-gray-500 pt-24 text-white">
|
||||
<div className="absolute inset-0 z-10 flex items-end justify-start">
|
||||
@@ -21,28 +33,26 @@ export default function Footer() {
|
||||
</div>
|
||||
<div className="relative z-20 container mx-auto">
|
||||
<div className="flex max-w-[920px] flex-col gap-5 pb-10">
|
||||
<p className="text-5xl tracking-tighter">
|
||||
{t('footer_title') as string}
|
||||
</p>
|
||||
<p className="text-5xl tracking-tighter">{t('footer_title')}</p>
|
||||
<h5 className="text-base tracking-normal">
|
||||
{t('footer_description') as string}
|
||||
{t('footer_description')}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="flex items-start justify-between gap-8 border-y border-gray-300/50 py-14 max-lg:flex-col-reverse">
|
||||
<FooterInfo withLogo className="lg:max-w-[200px]" />
|
||||
<div className="grid w-full grid-cols-2 gap-5 md:grid-cols-3 md:gap-10 lg:max-w-3/5">
|
||||
<FooterMenuBuilder
|
||||
title={t('footer_links_quick_links') as string}
|
||||
links={appConstants.footerMenu.quickLinks}
|
||||
title={t('footer_links_quick_links')}
|
||||
links={quickLinks}
|
||||
className="max-md:text-center"
|
||||
/>
|
||||
<FooterMenuBuilder
|
||||
title={t('footer_links_who_we_are') as string}
|
||||
links={appConstants.footerMenu.whoAreWeLinks}
|
||||
title={t('footer_links_who_we_are')}
|
||||
links={whoAreWeLinks}
|
||||
className="max-md:text-center"
|
||||
/>
|
||||
<FooterMenuBuilderWrapper
|
||||
title={t('footer_links_contact') as string}
|
||||
title={t('footer_links_contact')}
|
||||
className="max-md:col-span-2 max-md:text-center"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
@@ -59,7 +69,7 @@ export default function Footer() {
|
||||
info@sample.com
|
||||
</Link>
|
||||
<span className="text-sm tracking-tight text-gray-100 hover:text-gray-200">
|
||||
{t('footer_links_address') as string}
|
||||
{t('footer_links_address')}
|
||||
</span>
|
||||
</div>
|
||||
</FooterMenuBuilderWrapper>
|
||||
@@ -67,9 +77,7 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="py-8 lg:py-14">
|
||||
<p className="text-center text-sm">
|
||||
{t('footer_copyright') as string}
|
||||
</p>
|
||||
<p className="text-center text-sm">{t('footer_copyright')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { appConstants } from '@/assets/constants';
|
||||
import images from '@/assets/images/images';
|
||||
import { Icon, IconName } from '@/components/uikit/icons';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function FooterInfo({
|
||||
withLogo,
|
||||
@@ -12,6 +14,8 @@ export default function FooterInfo({
|
||||
withLogo?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex w-full flex-col gap-3 max-lg:text-center lg:w-auto ${className}`}
|
||||
@@ -26,7 +30,7 @@ export default function FooterInfo({
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<p className="text-sm tracking-normal">{t('footer_slogan') as string}</p>
|
||||
<p className="text-sm tracking-normal">{t('footer_slogan')}</p>
|
||||
<div className="flex items-center gap-4 max-lg:justify-center">
|
||||
{appConstants.socials.map((social) => (
|
||||
<Link
|
||||
|
||||
@@ -3,11 +3,11 @@ import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
||||
|
||||
export default function FooterMenuBuilder({
|
||||
title,
|
||||
links,
|
||||
links = [],
|
||||
className = '',
|
||||
}: {
|
||||
title: string;
|
||||
links: { title: string; link: string }[];
|
||||
links?: { title: string; link: string }[];
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import images from '@/assets/images/images';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { usePathname, useParams } from 'next/navigation';
|
||||
import { Icon } from '@/components/uikit/icons';
|
||||
import { t } from '@/locales/translates';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import FooterInfo from '../footer/FooterInfo';
|
||||
import routeFactory from '@/assets/constants/routeFactory';
|
||||
@@ -15,12 +15,17 @@ interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const links = [routeFactory.home, routeFactory.about, routeFactory.contact];
|
||||
|
||||
export default function HamburgerMenu({ isOpen, onClose }: Props) {
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const locale = params.locale as string;
|
||||
const t = useTranslations();
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Generate links dynamically with current locale and translations
|
||||
const routes = routeFactory(t, locale);
|
||||
const links = [routes.home, routes.about, routes.contact];
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
@@ -50,7 +55,7 @@ export default function HamburgerMenu({ isOpen, onClose }: Props) {
|
||||
className="relative z-10 flex h-full w-80 max-w-full flex-col bg-black p-5 text-white"
|
||||
>
|
||||
<div className="mb-14 flex items-center justify-between">
|
||||
<Link href="/" className="h-12 w-auto">
|
||||
<Link href={`/${locale}`} className="h-12 w-auto">
|
||||
<Image
|
||||
alt="logo"
|
||||
src={images.logo}
|
||||
@@ -76,7 +81,7 @@ export default function HamburgerMenu({ isOpen, onClose }: Props) {
|
||||
: 'border border-white/10 text-white hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{title as string}
|
||||
{title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import images from '@/assets/images/images';
|
||||
import Navbar from '../navbar';
|
||||
import Button, { IconButton } from '@/components/uikit/button';
|
||||
import { t } from '@/locales/translates';
|
||||
import { Icon } from '@/components/uikit/icons';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function Header() {
|
||||
const t = useTranslations();
|
||||
|
||||
const bannerFooter = [
|
||||
t('com_home_Banner_link1') as string,
|
||||
t('com_home_Banner_link2') as string,
|
||||
t('com_home_Banner_link3') as string,
|
||||
t('com_home_Banner_link1'),
|
||||
t('com_home_Banner_link2'),
|
||||
t('com_home_Banner_link3'),
|
||||
];
|
||||
|
||||
return (
|
||||
<header
|
||||
className="relative w-full bg-cover bg-right bg-no-repeat text-white md:h-screen"
|
||||
@@ -20,21 +25,19 @@ export default function Header() {
|
||||
<div className="relative z-10 container mx-auto flex h-[80%] flex-col items-center bg-cover bg-center pb-6 text-white md:justify-between md:py-20">
|
||||
<div className="flex w-full flex-col justify-start">
|
||||
<h1 className="text-xl font-light md:text-5xl lg:text-7xl">
|
||||
{t('com_home_banner_title') as string}
|
||||
{t('com_home_banner_title')}
|
||||
</h1>
|
||||
<h1 className="text-xl font-bold md:text-5xl lg:text-7xl">
|
||||
{t('com_home_banner_title_bold') as string}
|
||||
{t('com_home_banner_title_bold')}
|
||||
</h1>
|
||||
<p
|
||||
className="mt-2 mb-8 text-xs font-normal md:mt-5 md:text-sm lg:text-base"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: t('com_home_banner_description') as string,
|
||||
__html: t('com_home_banner_description'),
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<Button endIcon="showMore">
|
||||
{t('com_home_banner_button') as string}
|
||||
</Button>
|
||||
<Button endIcon="showMore">{t('com_home_banner_button')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,113 +1,33 @@
|
||||
// 'use client';
|
||||
|
||||
// import images from '@/assets/images/images';
|
||||
// import { Icon } from '@/components/uikit/icons';
|
||||
// import { t } from '@/locales/translates';
|
||||
// import Image from 'next/image';
|
||||
// import Link from 'next/link';
|
||||
// import { usePathname } from 'next/navigation';
|
||||
// import { useState } from 'react';
|
||||
|
||||
// export default function Navbar() {
|
||||
// const [open, setOpen] = useState(false);
|
||||
// const pathname = usePathname();
|
||||
|
||||
// const links = [
|
||||
// { href: '/', label: t('pages_home_title') as string },
|
||||
// { href: '/about', label: t('pages_about_title') as string },
|
||||
// { href: '/blog', label: t('pages_contact_title') as string },
|
||||
// { href: '/contact', label: t('pages_contact_title') as string },
|
||||
// { href: '/product', label: t('pages_product_categories_title') as string },
|
||||
// { href: '/project', label: t('pages_projects_title') as string },
|
||||
// ];
|
||||
|
||||
// const linkClass = (href: string) =>
|
||||
// pathname === href ? ' text-red-500 font-semibold' : 'text-white';
|
||||
|
||||
// return (
|
||||
// <nav className="relative z-10 container mx-auto shrink-0 bg-transparent pt-7 pb-3 md:py-11">
|
||||
// <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b-[1px]">
|
||||
// <Link href="/" className="h-12 w-auto">
|
||||
// <Image
|
||||
// alt="logo"
|
||||
// src={images.logo}
|
||||
// className="h-full w-auto object-contain"
|
||||
// />
|
||||
// </Link>
|
||||
// <ul className="hidden space-x-6 text-sm md:flex lg:text-base">
|
||||
// {links.map(({ href, label }) => (
|
||||
// <li key={href}>
|
||||
// <Link
|
||||
// href={href}
|
||||
// className={`${linkClass(href)} hover:text-primary-light`}
|
||||
// >
|
||||
// {label}
|
||||
// </Link>
|
||||
// </li>
|
||||
// ))}
|
||||
// <li>
|
||||
// <a className="flex items-center gap-2" href="tel:+098123456789">
|
||||
// <Icon name="phone" className="text-primary" />
|
||||
// <p>+098 123456789</p>
|
||||
// </a>
|
||||
// </li>
|
||||
// </ul>
|
||||
|
||||
// <button
|
||||
// className="text-gray-700 md:hidden"
|
||||
// onClick={() => setOpen(!open)}
|
||||
// >
|
||||
// {open ? (
|
||||
// <Icon name="close" className="text-white" />
|
||||
// ) : (
|
||||
// <Icon name="menu" className="text-white" />
|
||||
// )}
|
||||
// </button>
|
||||
// </div>
|
||||
|
||||
// {open && (
|
||||
// <ul className="mt-2 space-y-2 px-2 md:hidden">
|
||||
// {links.map(({ href, label }) => (
|
||||
// <li key={href}>
|
||||
// <Link
|
||||
// href={href}
|
||||
// className={linkClass(href)}
|
||||
// onClick={() => setOpen(false)}
|
||||
// >
|
||||
// {label}
|
||||
// </Link>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// )}
|
||||
// </nav>
|
||||
// );
|
||||
// }
|
||||
|
||||
'use client';
|
||||
|
||||
import images from '@/assets/images/images';
|
||||
import { Icon } from '@/components/uikit/icons';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { usePathname, useParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import HamburgerMenu from '../hamburgerMenu';
|
||||
import { t } from '@/locales/translates';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import routeFactory from '@/assets/constants/routeFactory';
|
||||
|
||||
export default function Navbar() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const locale = params.locale as string;
|
||||
const t = useTranslations();
|
||||
|
||||
// Get localized routes
|
||||
const routes = routeFactory(t, locale);
|
||||
const links = [
|
||||
routeFactory.home,
|
||||
routeFactory.productCategories,
|
||||
routeFactory.projects,
|
||||
routeFactory.blog,
|
||||
routeFactory.about,
|
||||
routeFactory.contact,
|
||||
routes.home,
|
||||
routes.productCategories,
|
||||
routes.projects,
|
||||
routes.blog,
|
||||
routes.about,
|
||||
routes.contact,
|
||||
];
|
||||
|
||||
const linkClass = (href: string) =>
|
||||
pathname === href ? 'text-primary font-semibold' : 'text-white';
|
||||
|
||||
@@ -115,7 +35,7 @@ export default function Navbar() {
|
||||
<>
|
||||
<nav className="relative z-50 container mx-auto bg-transparent pt-7 pb-3 md:py-11">
|
||||
<div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b">
|
||||
<Link href="/" className="h-12 w-auto">
|
||||
<Link href={`/${locale}`} className="h-12 w-auto">
|
||||
<Image
|
||||
alt="logo"
|
||||
src={images.logo}
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import routeFactory from '@/assets/constants/routeFactory';
|
||||
import images from '@/assets/images/images';
|
||||
import AchievementTextBox from '@/components/layout/achievementTextBox';
|
||||
import SectionTitle from '@/components/layout/sectionTitle';
|
||||
import Button from '@/components/uikit/button';
|
||||
import { t } from '@/locales/translates';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function AboutTopInfo() {
|
||||
const t = useTranslations();
|
||||
const params = useParams();
|
||||
const locale = params.locale as string;
|
||||
const routes = routeFactory(t, locale);
|
||||
|
||||
const topInfoAchievementTitles = [
|
||||
t('com_about_info_achievements_1') as string,
|
||||
t('com_about_info_achievements_2') as string,
|
||||
t('com_about_info_achievements_3') as string,
|
||||
t('com_about_info_achievements_4') as string,
|
||||
t('com_about_info_achievements_1'),
|
||||
t('com_about_info_achievements_2'),
|
||||
t('com_about_info_achievements_3'),
|
||||
t('com_about_info_achievements_4'),
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -30,7 +38,7 @@ export default function AboutTopInfo() {
|
||||
<div className="flex items-center justify-center gap-5 pb-5">
|
||||
<span className="text-primary text-5xl">+25</span>
|
||||
<span className="text-base text-gray-300">
|
||||
{t('com_about_info_years_experience') as string}
|
||||
{t('com_about_info_years_experience')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,14 +53,14 @@ export default function AboutTopInfo() {
|
||||
</div>
|
||||
<div className="flex flex-col pt-16 pb-20">
|
||||
<SectionTitle
|
||||
title={t('pages_about_title') as string}
|
||||
description={t('com_about_info_title') as string}
|
||||
description_bold={t('com_about_info_title_bold') as string}
|
||||
title={t('pages_about_title')}
|
||||
description={t('com_about_info_title')}
|
||||
description_bold={t('com_about_info_title_bold')}
|
||||
/>
|
||||
|
||||
<div className="mt-5">
|
||||
<p className="text-base font-light text-gray-300">
|
||||
{t('com_about_info_description') as string}
|
||||
{t('com_about_info_description')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-10 flex flex-col gap-4">
|
||||
@@ -61,8 +69,8 @@ export default function AboutTopInfo() {
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-10">
|
||||
<Button endIcon="showMore" link={routeFactory.contact.route()}>
|
||||
{t('pages_contact_title') as string}
|
||||
<Button endIcon="showMore" link={routes.contact.route()}>
|
||||
{t('pages_contact_title')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import images from '@/assets/images/images';
|
||||
import SectionTitle from '@/components/layout/sectionTitle';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function HomeStorySection({
|
||||
className = '',
|
||||
}: {
|
||||
className?: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
const statisticsData = [
|
||||
{
|
||||
title: t('com_home_story_projects_count') as string,
|
||||
title: t('com_home_story_projects_count'),
|
||||
count: '10K',
|
||||
},
|
||||
{
|
||||
title: t('com_home_story_customer_count') as string,
|
||||
title: t('com_home_story_customer_count'),
|
||||
count: '500',
|
||||
},
|
||||
{
|
||||
title: t('com_home_story_experience') as string,
|
||||
title: t('com_home_story_experience'),
|
||||
count: '25',
|
||||
},
|
||||
];
|
||||
@@ -27,9 +31,9 @@ export default function HomeStorySection({
|
||||
<div className={`container mx-auto flex flex-col gap-12 ${className}`}>
|
||||
<div className="grid grid-cols-2 gap-10">
|
||||
<SectionTitle
|
||||
title={t('com_home_story_title') as string}
|
||||
description={t('com_home_story_slogan') as string}
|
||||
description_bold={t('com_home_story_slogan_bold') as string}
|
||||
title={t('com_home_story_title')}
|
||||
description={t('com_home_story_slogan')}
|
||||
description_bold={t('com_home_story_slogan_bold')}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[images.homeBanner, images.aboutImg_1].map((e, i) => (
|
||||
@@ -53,7 +57,7 @@ export default function HomeStorySection({
|
||||
</div>
|
||||
<div className="flex flex-col py-8">
|
||||
<p className="text-base font-light text-gray-500">
|
||||
{t('com_home_story_description') as string}
|
||||
{t('com_home_story_description')}
|
||||
</p>
|
||||
<hr className="my-10 text-gray-100/50" />
|
||||
<div className="grid grid-cols-3 justify-between gap-1">
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
import images from '@/assets/images/images';
|
||||
import SectionTitle from '@/components/layout/sectionTitle';
|
||||
import { t } from '@/locales/translates';
|
||||
import type { IProductCategoryCardProps } from '../productCategories/productCategoryCard.d';
|
||||
import { getProductCategories } from '@/services/products';
|
||||
import Link from 'next/link';
|
||||
import routeFactory from '@/assets/constants/routeFactory';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { ILayoutLocaleParams } from '@/models/layout';
|
||||
import { TLocales } from '@/locales/translates';
|
||||
|
||||
export default async function HomePageProducts() {
|
||||
interface Props {
|
||||
locale: TLocales;
|
||||
}
|
||||
|
||||
export default async function HomePageProducts({ locale }: Props) {
|
||||
const t = await getTranslations({ locale });
|
||||
const productCategories: IProductCategoryCardProps[] =
|
||||
await getProductCategories();
|
||||
const routes = routeFactory(t, locale);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
@@ -19,12 +27,12 @@ export default async function HomePageProducts() {
|
||||
<div className="absolute inset-0 z-10 bg-black opacity-50" />
|
||||
<div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
|
||||
<SectionTitle
|
||||
title={t('pages_product_categories_title') as string}
|
||||
description={t('com_home_products_title') as string}
|
||||
title={t('pages_product_categories_title')}
|
||||
description={t('com_home_products_title')}
|
||||
reverseColor
|
||||
/>
|
||||
<h4 className="pt-10 text-base font-extralight tracking-normal text-white">
|
||||
{t('com_home_products_description') as string}
|
||||
{t('com_home_products_description')}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,16 +40,17 @@ export default async function HomePageProducts() {
|
||||
<div className="relative top-[-100px] z-20 container mx-auto w-full">
|
||||
<div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
|
||||
{productCategories.map((category, index) => (
|
||||
<Link href={routeFactory.products.route(category.id)}>
|
||||
<Link key={category.id} href={routes.products.route(category.id)}>
|
||||
<div
|
||||
key={index}
|
||||
className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
|
||||
>
|
||||
<h3 className="text-xl font-bold text-gray-500">
|
||||
{category.title}
|
||||
</h3>
|
||||
<p className="text-lg font-light text-gray-400">
|
||||
{`Includes ${category.typesCount} Products`}
|
||||
{t('com_products_category_types_count', {
|
||||
count: category.typesCount,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { Icon } from '@/components/uikit/icons';
|
||||
import type { IProductCategoryCardProps } from './productCategoryCard.d';
|
||||
import AchievementTextBox from '@/components/layout/achievementTextBox';
|
||||
import { t } from '@/locales/translates';
|
||||
import Button from '@/components/uikit/button';
|
||||
import routeFactory from '@/assets/constants/routeFactory';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function ProductsCategoryCard({
|
||||
icon,
|
||||
@@ -13,6 +16,11 @@ export default function ProductsCategoryCard({
|
||||
bestForTitle,
|
||||
id,
|
||||
}: IProductCategoryCardProps) {
|
||||
const t = useTranslations();
|
||||
const params = useParams();
|
||||
const locale = params.locale as string;
|
||||
const routes = routeFactory(t, locale);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-4xl bg-gray-100 p-3 sm:p-6 md:p-10">
|
||||
<div className="absolute -end-2 -top-2">
|
||||
@@ -22,22 +30,18 @@ export default function ProductsCategoryCard({
|
||||
<div className="flex flex-col gap-4 pt-32">
|
||||
<h2 className="text-xl font-semibold text-gray-500">{title}</h2>
|
||||
<AchievementTextBox
|
||||
title={
|
||||
t('com_products_category_types_count', {
|
||||
count: typesCount,
|
||||
}) as string
|
||||
}
|
||||
title={t('com_products_category_types_count', { count: typesCount })}
|
||||
/>
|
||||
<AchievementTextBox title={priceTypeTitle} />
|
||||
<AchievementTextBox title={bestForTitle} />
|
||||
</div>
|
||||
<div className="mt-24 w-auto">
|
||||
<Button
|
||||
link={routeFactory.products.route(id)}
|
||||
link={routes.products.route(id)}
|
||||
endIcon="showMore"
|
||||
className="w-fit"
|
||||
>
|
||||
{t('com_products_category_show_all_CTA') as string}
|
||||
{t('com_products_category_show_all_CTA')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import AchievementTextBox from '@/components/layout/achievementTextBox';
|
||||
import type { IProductCategoryCardProps } from './productCategoryCard.d';
|
||||
import { t } from '@/locales/translates';
|
||||
import { Icon } from '@/components/uikit/icons';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function ProductCategoryCardInProducts({
|
||||
productCategory,
|
||||
@@ -10,6 +12,8 @@ export default function ProductCategoryCardInProducts({
|
||||
productCategory: IProductCategoryCardProps;
|
||||
className?: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div
|
||||
@@ -23,19 +27,15 @@ export default function ProductCategoryCardInProducts({
|
||||
</div>
|
||||
<div className="flex flex-col gap-5">
|
||||
<h1 className="text-2xl font-semibold text-white">
|
||||
{
|
||||
t('com_products_products_category_title', {
|
||||
title: productCategory.title,
|
||||
}) as string
|
||||
}
|
||||
{t('com_products_products_category_title', {
|
||||
title: productCategory.title,
|
||||
})}
|
||||
</h1>
|
||||
<AchievementTextBox
|
||||
reverseColor
|
||||
title={
|
||||
t('com_products_category_types_count', {
|
||||
count: productCategory.typesCount,
|
||||
}) as string
|
||||
}
|
||||
title={t('com_products_category_types_count', {
|
||||
count: productCategory.typesCount,
|
||||
})}
|
||||
/>
|
||||
<AchievementTextBox
|
||||
reverseColor
|
||||
|
||||
Reference in New Issue
Block a user