fix lang
parent
aec8ff2fe6
commit
e3c332123c
|
|
@ -1,4 +1,6 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
import createNextIntlPlugin from 'next-intl/plugin';
|
||||
const withNextIntl = createNextIntlPlugin();
|
||||
const nextConfig = {
|
||||
images: {
|
||||
remotePatterns: [
|
||||
|
|
@ -10,4 +12,4 @@ const nextConfig = {
|
|||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
export default withNextIntl(nextConfig);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"framer-motion": "^12.4.2",
|
||||
"lucide-react": "^0.475.0",
|
||||
"next": "15.1.6",
|
||||
"next-intl": "^3.26.4",
|
||||
"react": "^19.0.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^19.0.0",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ dependencies:
|
|||
next:
|
||||
specifier: 15.1.6
|
||||
version: 15.1.6(react-dom@19.0.0)(react@19.0.0)
|
||||
next-intl:
|
||||
specifier: ^3.26.4
|
||||
version: 3.26.4(next@15.1.6)(react@19.0.0)
|
||||
react:
|
||||
specifier: ^19.0.0
|
||||
version: 19.0.0
|
||||
|
|
@ -143,6 +146,48 @@ packages:
|
|||
levn: 0.4.1
|
||||
dev: true
|
||||
|
||||
/@formatjs/ecma402-abstract@2.3.3:
|
||||
resolution: {integrity: sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==}
|
||||
dependencies:
|
||||
'@formatjs/fast-memoize': 2.2.6
|
||||
'@formatjs/intl-localematcher': 0.6.0
|
||||
decimal.js: 10.5.0
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@formatjs/fast-memoize@2.2.6:
|
||||
resolution: {integrity: sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==}
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@formatjs/icu-messageformat-parser@2.11.1:
|
||||
resolution: {integrity: sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==}
|
||||
dependencies:
|
||||
'@formatjs/ecma402-abstract': 2.3.3
|
||||
'@formatjs/icu-skeleton-parser': 1.8.13
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@formatjs/icu-skeleton-parser@1.8.13:
|
||||
resolution: {integrity: sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==}
|
||||
dependencies:
|
||||
'@formatjs/ecma402-abstract': 2.3.3
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@formatjs/intl-localematcher@0.5.10:
|
||||
resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@formatjs/intl-localematcher@0.6.0:
|
||||
resolution: {integrity: sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==}
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/@humanfs/core@0.19.1:
|
||||
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
|
||||
engines: {node: '>=18.18.0'}
|
||||
|
|
@ -1051,6 +1096,10 @@ packages:
|
|||
ms: 2.1.3
|
||||
dev: true
|
||||
|
||||
/decimal.js@10.5.0:
|
||||
resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
|
||||
dev: false
|
||||
|
||||
/deep-is@0.1.4:
|
||||
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
|
||||
dev: true
|
||||
|
|
@ -1879,6 +1928,15 @@ packages:
|
|||
side-channel: 1.1.0
|
||||
dev: true
|
||||
|
||||
/intl-messageformat@10.7.15:
|
||||
resolution: {integrity: sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==}
|
||||
dependencies:
|
||||
'@formatjs/ecma402-abstract': 2.3.3
|
||||
'@formatjs/fast-memoize': 2.2.6
|
||||
'@formatjs/icu-messageformat-parser': 2.11.1
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/is-array-buffer@3.0.5:
|
||||
resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
|
@ -2288,6 +2346,24 @@ packages:
|
|||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
dev: true
|
||||
|
||||
/negotiator@1.0.0:
|
||||
resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
|
||||
engines: {node: '>= 0.6'}
|
||||
dev: false
|
||||
|
||||
/next-intl@3.26.4(next@15.1.6)(react@19.0.0):
|
||||
resolution: {integrity: sha512-/kFFR7WYJGisOR0xKoC930e6oTOOWf8rbHviQgte5zIn6OgJ6mKFvXI94RWAW3ksCZJCvE4zblIuYwHCSbbw7g==}
|
||||
peerDependencies:
|
||||
next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
|
||||
dependencies:
|
||||
'@formatjs/intl-localematcher': 0.5.10
|
||||
negotiator: 1.0.0
|
||||
next: 15.1.6(react-dom@19.0.0)(react@19.0.0)
|
||||
react: 19.0.0
|
||||
use-intl: 3.26.4(react@19.0.0)
|
||||
dev: false
|
||||
|
||||
/next@15.1.6(react-dom@19.0.0)(react@19.0.0):
|
||||
resolution: {integrity: sha512-Hch4wzbaX0vKQtalpXvUiw5sYivBy4cm5rzUKrBnUB/y436LGrvOUqYvlSeNVCWFO/770gDlltR9gqZH62ct4Q==}
|
||||
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
|
||||
|
|
@ -3226,6 +3302,16 @@ packages:
|
|||
punycode: 2.3.1
|
||||
dev: true
|
||||
|
||||
/use-intl@3.26.4(react@19.0.0):
|
||||
resolution: {integrity: sha512-5DhN+YfsocNO7LiLpns7/pxRcMHA4DgBZQo5Z6uw3LvX9XIZyPAdRBdFPE2eBKTAwhY77k5eBhxqDtx8wzUaBg==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
|
||||
dependencies:
|
||||
'@formatjs/fast-memoize': 2.2.6
|
||||
intl-messageformat: 10.7.15
|
||||
react: 19.0.0
|
||||
dev: false
|
||||
|
||||
/util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
dev: true
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
import { NextIntlClientProvider } from "next-intl";
|
||||
import { getMessages } from "next-intl/server";
|
||||
import { notFound } from "next/navigation";
|
||||
import { routing } from "src/i18n/routing";
|
||||
import "../../styles/globals.css";
|
||||
|
||||
export default async function LocaleLayout({
|
||||
children,
|
||||
params: { locale }
|
||||
}) {
|
||||
// Ensure that the incoming `locale` is valid
|
||||
if (!routing.locales.includes(locale)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Providing all messages to the client
|
||||
// side is the easiest way to get started
|
||||
const messages = await getMessages();
|
||||
console.log("messager",messages)
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
<body>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
{children}
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
import graphql from "src/utils/graphql";
|
||||
import Landing from "src/view/Landing";
|
||||
|
||||
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import "../styles/globals.css";
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,9 +8,10 @@ import { useContext, useEffect, useRef, useState } from "react";
|
|||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
import logo from "../../assets/images/logo.png";
|
||||
import { useLocale } from "next-intl";
|
||||
|
||||
const Navbar = ({ theme }) => {
|
||||
const router = useRouter();
|
||||
|
|
@ -87,7 +88,22 @@ const Navbar = ({ theme }) => {
|
|||
}, []);
|
||||
|
||||
|
||||
const locale = useLocale()
|
||||
const pathname = usePathname()
|
||||
|
||||
const changeLocale = () => {
|
||||
console.log(locale)
|
||||
let link = ''
|
||||
if (locale === "en") {
|
||||
|
||||
link = 'ar-OM' + (pathname.includes("/en") ? pathname.replace("en", "") : pathname)
|
||||
}
|
||||
else {
|
||||
link = pathname.replace("ar-OM", "")
|
||||
}
|
||||
|
||||
router.push(link)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
|
|
@ -108,6 +124,28 @@ const Navbar = ({ theme }) => {
|
|||
>
|
||||
<div className="w-full rtl p-4 mr-2">
|
||||
<div className="flex">
|
||||
|
||||
{/* <div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0"> </p>
|
||||
</div> */}
|
||||
{/* <div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">Industrial </p>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
|
||||
|
||||
|
||||
<button onClick={changeLocale} className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">{locale === "en" ? "Arabic" : "English"}</p>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex ltr ">
|
||||
|
||||
<div className="size-[50px] relative bg-white rounded-lg flex flex-col items-center rounded-tl-2xl justify-center my-auto">
|
||||
<Image
|
||||
src={logo}
|
||||
|
|
@ -117,23 +155,6 @@ const Navbar = ({ theme }) => {
|
|||
/>
|
||||
|
||||
</div>
|
||||
{/* <div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0"> </p>
|
||||
</div> */}
|
||||
{/* <div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">Industrial </p>
|
||||
</div>
|
||||
|
||||
<div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">en</p>
|
||||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex ltr ">
|
||||
|
||||
|
||||
|
||||
{NavBarData.map((e, index) => (
|
||||
<>
|
||||
|
|
@ -214,6 +235,9 @@ const Navbar = ({ theme }) => {
|
|||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<button onClick={changeLocale} className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">{locale === "en" ? "Arabic" : "English"}</p>
|
||||
</button>
|
||||
</div>
|
||||
{/* </Link> */}
|
||||
<div
|
||||
|
|
@ -286,6 +310,7 @@ const Navbar = ({ theme }) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* </Link> */}
|
||||
|
||||
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import {getRequestConfig} from 'next-intl/server';
|
||||
import {routing} from './routing';
|
||||
|
||||
export default getRequestConfig(async ({requestLocale}) => {
|
||||
// This typically corresponds to the `[locale]` segment
|
||||
let locale = await requestLocale;
|
||||
|
||||
// Ensure that a valid locale is used
|
||||
if (!locale || !routing.locales.includes(locale)) {
|
||||
locale = routing.defaultLocale;
|
||||
}
|
||||
|
||||
return {
|
||||
locale,
|
||||
messages: (await import(`../messages/${locale}.json`)).default
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineRouting } from "next-intl/routing";
|
||||
import {createNavigation} from 'next-intl/navigation';
|
||||
|
||||
|
||||
export const routing = defineRouting({
|
||||
locales: ["en", "ar-OM"],
|
||||
defaultLocale: "en",
|
||||
localePrefix: "as-needed",
|
||||
localeDetection: false,
|
||||
});
|
||||
|
||||
// Lightweight wrappers around Next.js' navigation APIs
|
||||
// that will consider the routing configuration
|
||||
export const {Link, redirect, usePathname, useRouter, getPathname} =
|
||||
createNavigation(routing);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"HomePage": {
|
||||
"AboutUs": {
|
||||
"brandName": "منتجات خدمات الأفق المتقدمة ش.م.م",
|
||||
"description": [
|
||||
"شريكك الموثوق لحلول سلاسل التوريد بالجملة",
|
||||
"خدمات الأفق المتقدمة هي شركة تجارية رائدة متخصصة في حلول سلاسل التوريد بالجملة لمجموعة متنوعة من المنتجات، بما في ذلك المنظفات عالية الجودة والمواد الغذائية. مع سنوات من الخبرة والعلاقات الواسعة في الصناعة، نفخر بالتزامنا بالتميز والموثوقية ورضا العملاء.",
|
||||
"في AHS، نفهم تعقيدات سلسلة التوريد ونسعى لتبسيط العملية لشركائنا. شبكتنا الواسعة من الموردين والمصنعين تمكننا من الحصول على منتجات عالية الجودة بأسعار تنافسية، مما يضمن حصولك على أفضل قيمة لاستثمارك."
|
||||
]
|
||||
},
|
||||
"Sides": {
|
||||
"title": "اكتشف خبراتنا",
|
||||
"fmcg": {
|
||||
"title": "السلع الاستهلاكية سريعة الحركة",
|
||||
"subtitle": "السلع الاستهلاكية سريعة الحركة",
|
||||
"description": "قسم السلع الاستهلاكية سريعة الحركة لدينا متخصص في توزيع وتسويق المنتجات الاستهلاكية اليومية. نضمن سرعة دوران المنتجات، وسلاسل توريد فعالة، واستراتيجيات تسويقية مبتكرة لتلبية الطلبات المتغيرة باستمرار للمستهلكين."
|
||||
},
|
||||
"construction": {
|
||||
"title": "الإنشاءات",
|
||||
"subtitle": "نبني المستقبل",
|
||||
"description": "ذراع الإنشاءات لدينا مكرس لخلق بنية تحتية دائمة وحلول بناء مبتكرة. من المشاريع السكنية إلى المجمعات التجارية، نقدم الخبرة والجودة والاستدامة في كل مشروع بناء."
|
||||
}
|
||||
}
|
||||
},
|
||||
"Footer": {
|
||||
"address": "مسقط، السيب، موالح الشمالية، شارع الموج، رقم المجمع ٣٥٨، رقم المبنى ١/٢٠٣، مكتب رقم ٥٣، صندوق البريد: ٥٧ء"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"HomePage": {
|
||||
"AboutUs": {
|
||||
"brandName": "ADVANCED HORIZON SERVICES LLC Products",
|
||||
"description": [
|
||||
"Your Trusted Partner in Wholesale Supply Chain Solutions",
|
||||
"Advanced Horizon Services is a leading trade company specializing in wholesale supply chain solutions for a diverse range of products, including high-quality detergents and food items. With years of experience and extensive relations in the industry, we pride ourselves on our commitment to excellence, reliability, and customer satisfaction.",
|
||||
" At AHS, we understand the complexities of the supply chain and strive to simplify the process for our partners. Our extensive network of suppliers and manufacturers allows us to source top-notch products at competitive prices, ensuring that you receive the best value for your investment."
|
||||
]
|
||||
},
|
||||
"Sides": {
|
||||
"title": "Discover Our Expertise",
|
||||
"fmcg": {
|
||||
"title": "FMCG",
|
||||
"subtitle": "Fast-Moving Consumer Goods",
|
||||
"description": "Our FMCG division specializes in the distribution and marketing of everyday consumer products. We ensure rapid turnover, efficient supply chains, and innovative marketing strategies to meet the ever-changing demands of consumers."
|
||||
},
|
||||
"construction": {
|
||||
"title": "Construction",
|
||||
"subtitle": "Building the Future",
|
||||
"description": "Our Construction arm is dedicated to creating lasting infrastructure and innovative building solutions.From residential projects to commercial complexes, we bring expertise, quality, and sustainability to every construction endeavor."
|
||||
}
|
||||
}
|
||||
},
|
||||
"Footer": {
|
||||
"address": " Unit No. 53, Building No 203, Complex No.308 , Mawaleh North ,Road No. 108 Al Mouj Street , Muscat Uman.F.o.0ox.our.F.C.ll Muscat Airport"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import createMiddleware from 'next-intl/middleware';
|
||||
import { routing } from "./i18n/routing";
|
||||
export default createMiddleware(routing);
|
||||
|
||||
export const config = {
|
||||
// Match only internationalized pathnames
|
||||
matcher: ['/', '/(ar-OM|en)/:path*',"/((?!_next/static|_next/image|api|images|icons|fonts|video|audio|favicon.ico).*)",],
|
||||
};
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
|
||||
const AboutUs = () => {
|
||||
const t = useTranslations("HomePage.AboutUs")
|
||||
const locale = useLocale()
|
||||
return (
|
||||
<div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative">
|
||||
<div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative ">
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
|
||||
<pattern id="diagonalLines" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="0" x2="0" y2="10" stroke="#e2e8f0" stroke-width="1" />
|
||||
|
|
@ -12,29 +15,27 @@ const AboutUs = () => {
|
|||
<rect width="100%" height="100%" fill="url(#diagonalLines)" />
|
||||
</svg>
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto ">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 rtl items-center ">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 items-center " dir={locale == "en" ? "rtl" : "ltr"} >
|
||||
<div className="mx-auto">
|
||||
<Image src={"/images/logo-en.png?v=1"} width={350} height={350} className="xs:w-[200px] lg:w-auto" />
|
||||
<Image src={`/images/logo-${locale}.png?v=1`} width={350} height={350} className="xs:w-[200px] lg:w-auto" />
|
||||
</div>
|
||||
<div className="text-left relative mb-10 col-span-2">
|
||||
<h2 className="text-4xl font-bold relative z-10 xs:text-center lg:text-left">
|
||||
ADVANCED HORIZON SERVICES LLC Products{" "}
|
||||
<h2 className={
|
||||
`text-4xl font-bold relative z-10 xs:text-center lg:text-left ${locale === "en" ? "lg:text-left" : "lg:text-right"}`
|
||||
}>
|
||||
{t("brandName")}
|
||||
|
||||
</h2>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
|
||||
</p>
|
||||
|
||||
<p className="mb-0 text-base mt-5 text-center lg:text-left ltr leading-7">
|
||||
<p className={`mb-0 text-base mt-5 text-center ${locale === "en" ? "lg:text-left" : "lg:text-right"} leading-7`}>
|
||||
<span className="text-primary-800 font-semibold text-lg">
|
||||
Your Trusted Partner in Wholesale Supply Chain Solutions
|
||||
{t("description.0")}
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
Advanced Horizon Services is a leading trade company specializing in wholesale supply chain solutions for a diverse range of products, including high-quality detergents and food items. With years of experience and extensive relations in the industry, we pride ourselves on our commitment to excellence, reliability, and customer satisfaction.
|
||||
{t("description.1")} <br />
|
||||
<br />
|
||||
<br />
|
||||
At AHS, we understand the complexities of the supply chain and strive to simplify the process for our partners. Our extensive network of suppliers and manufacturers allows us to source top-notch products at competitive prices, ensuring that you receive the best value for your investment.
|
||||
|
||||
{t("description.2")}
|
||||
</p>
|
||||
{/*
|
||||
<div className="flex gap-2 mx-auto mt-5 w-full justify-center lg:justify-end">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { useState } from "react";
|
||||
import CountUp from "react-countup";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
const CounterDetail = () => {
|
||||
const CounterDetail = ({ stats }) => {
|
||||
const [startCounting, setStartCounting] = useState(false);
|
||||
const { ref, inView } = useInView({
|
||||
triggerOnce: true, // Trigger counting only once
|
||||
|
|
@ -17,45 +17,21 @@ const CounterDetail = () => {
|
|||
|
||||
<div className="w-full bg-couner-data-landing py-32 mb-44">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3">
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
{
|
||||
stats.map(s => (
|
||||
<div className="xs:my-10 lg:my-20" key={s.documentId}>
|
||||
<p className="mb-0 text-[12px] text-gray-300">{s.subtitle} </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Shipping
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 "> +<CountUp
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 "><CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={4300}
|
||||
end={s.stat}
|
||||
duration={2.75}
|
||||
/></p>
|
||||
</div>
|
||||
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Happy Clients
|
||||
</h3>
|
||||
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
+<CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={469}
|
||||
duration={2.75}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Destinations
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
<CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={32}
|
||||
duration={2.75}
|
||||
/> </p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@ import logo from "../../../assets/images/logo.png";
|
|||
import { MapPinHouse } from "lucide-react";
|
||||
import { Mail } from "lucide-react";
|
||||
import { PhoneCall } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const Footer = () => {
|
||||
const t = useTranslations("Footer")
|
||||
return (
|
||||
<div className="bg-secondary-700 ">
|
||||
<div className="lg:w-7/12 xs:w-full mx-auto py-20">
|
||||
|
|
@ -31,8 +33,7 @@ const Footer = () => {
|
|||
<MapPinHouse size={20} />
|
||||
<p>
|
||||
|
||||
Unit No. 53, Building No 203, Complex No.308 , Mawaleh North ,Road No. 108 Al Mouj Street , Muscat
|
||||
Uman.F.o.0ox.our.F.C.ll Muscat Airport
|
||||
{t("address")}
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Products = ({ products }) => {
|
|||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<div className="text-left relative mb-10">
|
||||
<h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
|
||||
ADVANCED HORIZON SERVICES LLC Products{" "}
|
||||
|
||||
</h2>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
import React from 'react';
|
||||
import { ShoppingCart, Building2 } from 'lucide-react'; // Assuming you're using lucide-react for icons
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
const Sides = () => {
|
||||
|
||||
const t = useTranslations("HomePage.Sides")
|
||||
return (
|
||||
<section className="w-full py-12 md:py-24 lg:py-32 bg-background text-sm bg-primary-800/40 ">
|
||||
<div className="container px-4 md:px-6 mx-auto">
|
||||
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-12">
|
||||
Discover Our Expertise
|
||||
{t("title")}
|
||||
</h2>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* First Card */}
|
||||
<div className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<ShoppingCart className="w-12 h-12 mb-4 text-primary" />
|
||||
<h3 className="text-2xl font-bold">FMCG</h3>
|
||||
<p className="text-muted-foreground">Fast-Moving Consumer Goods</p>
|
||||
<h3 className="text-2xl font-bold">{t("fmcg.title")}</h3>
|
||||
<p className="text-muted-foreground">{t("fmcg.subtitle")}</p>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-muted-foreground text-base">
|
||||
Our FMCG division specializes in the distribution and marketing of everyday consumer products. We ensure
|
||||
rapid turnover, efficient supply chains, and innovative marketing strategies to meet the ever-changing
|
||||
demands of consumers.
|
||||
{t("fmcg.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,14 +30,12 @@ const Sides = () => {
|
|||
<div className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<Building2 className="w-12 h-12 mb-4 text-primary" />
|
||||
<h3 className="text-2xl font-bold">Construction</h3>
|
||||
<p className="text-muted-foreground">Building the Future</p>
|
||||
<h3 className="text-2xl font-bold">{t("construction.title")}</h3>
|
||||
<p className="text-muted-foreground">{t("construction.subtitle")}</p>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-muted-foreground text-base">
|
||||
Our Construction arm is dedicated to creating lasting infrastructure and innovative building solutions.
|
||||
From residential projects to commercial complexes, we bring expertise, quality, and sustainability to
|
||||
every construction endeavor.
|
||||
{t("construction.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import Footer from "./components/Footer";
|
|||
import Products from "./components/Products";
|
||||
import Sides from "./components/Sides";
|
||||
import graphql from "src/utils/graphql";
|
||||
import CounterDetail from "./components/CounterDetail";
|
||||
import { getLocale } from "next-intl/server";
|
||||
|
||||
const gql = `
|
||||
query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int) {
|
||||
|
|
@ -37,11 +39,34 @@ query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int) {
|
|||
|
||||
`
|
||||
|
||||
const gql_stats = `
|
||||
query Stats($locale:I18NLocaleCode) {
|
||||
stats(locale: $locale) {
|
||||
title
|
||||
stat
|
||||
subtitle
|
||||
documentId
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
const getStats = async () => {
|
||||
const locale =await getLocale()
|
||||
console.log("locale",locale)
|
||||
const stats = await graphql(gql_stats, {
|
||||
locale: locale
|
||||
})
|
||||
|
||||
return stats.stats
|
||||
|
||||
}
|
||||
const getProducts = async () => {
|
||||
const locale =await getLocale()
|
||||
const products = await graphql(gql, {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
locale: "en"
|
||||
locale:locale
|
||||
})
|
||||
|
||||
return products.products_connection.nodes;
|
||||
|
|
@ -50,7 +75,8 @@ const getProducts = async () => {
|
|||
|
||||
const Landing = async () => {
|
||||
const products = await getProducts()
|
||||
console.log(products)
|
||||
const stats = await getStats()
|
||||
|
||||
return (
|
||||
<div className=" text-center text-6xl">
|
||||
{" "}
|
||||
|
|
@ -58,7 +84,7 @@ const Landing = async () => {
|
|||
{/* <HeroSection /> */}
|
||||
<AboutUs />
|
||||
<Sides />
|
||||
{/* <CounterDetail /> */}
|
||||
<CounterDetail stats={stats} />
|
||||
<Products products={products} />
|
||||
{/* <WhyHorizon/> */}
|
||||
<Footer />
|
||||
|
|
|
|||
Loading…
Reference in New Issue