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}
|
||||
|
||||
Reference in New Issue
Block a user