implement about-services tab

.vscode/settings.json

@@ -3,5 +3,6 @@
     "Dasani",
     "languagedetector",
     "turbopack"
-  ]
+  ],
+  "editor.formatOnSave": true
 }

app/[locale]/about/page.tsx

@@ -23,9 +23,7 @@ const About: FC<IPage> = async (props) => {
         <Intro t={t} />
         <MissionVision t={t} />
         <Services t={t} />
-        <div className='bg-zinc-50'>
-          <Projects />
-        </div>
+        <Projects />
       </div>
     </Providers>
   )

app/[locale]/services/page.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+
+import { IPage } from '@/app/global.interface'
+import { Providers } from '@/app/providers/Providers'
+import { Hero } from '@/app/sections/services/Hero/Hero'
+import { Process } from '@/app/sections/services/Process/Process'
+import { ServicesSection } from '@/app/sections/services/Services/ServicesSection'
+import { initTranslations } from '@/i18n'
+
+const namespaces = ['default', 'services']
+
+const Services: FC<IPage> = async (props) => {
+  const { params } = props
+  const { locale } = await params
+  const { t, resources } = await initTranslations({ locale, namespaces })
+
+  return (
+    <Providers namespaces={namespaces} locale={locale} resources={resources}>
+      <div>
+        <Hero t={t} />
+        <ServicesSection t={t} />
+        <Process t={t} />
+      </div>
+    </Providers>
+  )
+}
+
+export default Services

app/components/NavigationButton/NavigationButton.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+import ArrowUpIcon from '@/public/images/icons/ArrowUpIcon'
+
+const NavigationButton = ({ href = '' }: { href?: string }) => {
+  return (
+    <Link href={href} className='ml-auto flex h-[60px] max-h-[60px] w-[60px] max-w-[60px] items-center justify-center'>
+      <ArrowUpIcon />
+    </Link>
+  )
+}
+
+export default NavigationButton

app/sections/about/Hero/Hero.tsx

@@ -7,10 +7,13 @@ import { IComponent } from '@/app/global.interface'
 export const Hero: FC<IComponent> = (props) => {
   const { t } = props
   return (
-    <div className='flex h-[35.625rem] items-center bg-white bg-aboutHero bg-cover bg-fixed bg-center bg-no-repeat px-10 lg:h-[34.5rem]'>
+    <div className='relative flex h-[35.625rem] items-center bg-white bg-aboutHero bg-cover bg-fixed bg-center bg-no-repeat px-10 lg:h-[34.5rem]'>
+      <div className='absolute inset-0 z-0 bg-black/70' />
       <div className='relative z-10 flex flex-col gap-3 px-[0.875rem] py-10 text-white sm:px-10 sm:py-20 lg:gap-5'>
-        <p className='text-sm font-semibold underline lg:text-lg'>{t('about_gbs')}</p>
-        <h3 className='mb-2 text-3xl font-semibold leading-9 lg:mb-5 lg:text-7xl lg:leading-none'>{t('hero_desc')}</h3>
+        <p className='text-sm font-semibold underline lg:text-lg'>#{t('about_gbs')}</p>
+        <h3 className='mb-2 text-3xl font-semibold leading-9 lg:mb-5 lg:text-7xl lg:leading-none'>
+          {t('about_hero_desc')}
+        </h3>
         <Link className='flex items-center gap-1 font-semibold lg:gap-2' href='#'>
           <span className='text-base underline underline-offset-4 lg:text-xl'>{t('contact_us')}</span>
           <ArrowUpRightIcon className='h-4 w-4 lg:h-6 lg:w-6' />

app/sections/about/Services/Services.tsx

@@ -8,7 +8,7 @@ import { SERVICES } from '@/app/utils/constants'
 export const Services: FC<IComponent> = (props) => {
   const { t } = props
   return (
-    <Section className='flex flex-col gap-5 lg:gap-10'>
+    <Section className='flex flex-col gap-5 bg-slate-50 lg:gap-10'>
       <p className='text-2xl font-semibold leading-9 lg:text-4xl lg:leading-none'>{t('services_title')}</p>
       <div className='flex w-full flex-wrap gap-2 lg:gap-5'>
         {SERVICES.map(({ i18nKey, href }, index) => (

app/sections/services/Hero/Hero.tsx

@@ -0,0 +1,24 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
+import Link from 'next/link'
+import { FC } from 'react'
+
+import { IComponent } from '@/app/global.interface'
+
+export const Hero: FC<IComponent> = (props) => {
+  const { t } = props
+  return (
+    <div className='relative flex h-[35.625rem] items-center bg-white bg-servicesHero bg-cover bg-fixed bg-center bg-no-repeat px-10 lg:h-[34.5rem]'>
+      <div className='absolute inset-0 z-0 bg-black/70' />
+      <div className='relative z-10 flex flex-col gap-3 px-[0.875rem] py-10 text-white sm:px-10 sm:py-20 lg:gap-5'>
+        <p className='text-sm font-semibold underline lg:text-lg'>#{t('services_gbs')}</p>
+        <h3 className='mb-2 text-3xl font-semibold leading-9 lg:mb-5 lg:text-7xl lg:leading-none'>
+          {t('services_title')}
+        </h3>
+        <Link className='flex items-center gap-1 font-semibold lg:gap-2' href='#'>
+          <span className='text-base underline underline-offset-4 lg:text-xl'>{t('contact_us')}</span>
+          <ArrowUpRightIcon className='h-4 w-4 lg:h-6 lg:w-6' />
+        </Link>
+      </div>
+    </div>
+  )
+}

app/sections/services/Process/Process.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image'
+import { FC } from 'react'
+
+import { Section } from '@/app/components/Section/Section'
+import { FlashCircle } from '@/app/components/ui/icons/FlashCircle'
+import { IComponent } from '@/app/global.interface'
+import { PROJECTS_SECTION } from '@/app/utils/constants'
+
+export const Process: FC<IComponent> = (props) => {
+  const { t } = props
+  return (
+    <Section className='flex flex-col !items-start justify-between gap-6 bg-slate-50 lg:flex-row lg:gap-[94]'>
+      <div className='flex flex-col !items-start gap-2 lg:max-w-[650px] lg:gap-5'>
+        <p className='text-xl font-medium leading-7 lg:leading-none'>{t('our_process')}</p>
+        <div className='flex w-full flex-wrap gap-8 lg:gap-10'>
+          <p className='text-xl font-semibold lg:text-4xl'>{t('process_title')}</p>
+          <div className='flex w-full flex-col gap-8 lg:gap-10'>
+            {PROJECTS_SECTION.map(({ i18n_heading, i18n_desc }, index) => (
+              <div key={index} className='flex w-full gap-3'>
+                <FlashCircle className='mt-1 size-5 shrink-0 text-gray-700' />
+                <div className='flex w-full flex-col gap-3'>
+                  <p className='text-xl font-semibold leading-7'>{t(i18n_heading)}</p>
+                  <p className='text-sm font-normal leading-5'>{t(i18n_desc)}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <Image
+        className='h-full min-h-[674px] w-full rounded-xl object-cover lg:max-w-[576px]'
+        src='/images/our-process.jpg'
+        alt='man welding'
+        width={3840}
+        height={2560}
+      />
+    </Section>
+  )
+}

app/sections/services/Services/ServicesSection.tsx

@@ -0,0 +1,31 @@
+import { Divider } from '@nextui-org/react'
+import { FC } from 'react'
+
+import NavigationButton from '@/app/components/NavigationButton/NavigationButton'
+import { Section } from '@/app/components/Section/Section'
+import { IComponent } from '@/app/global.interface'
+import { SERVICES_SECTION } from '@/app/utils/constants'
+
+export const ServicesSection: FC<IComponent> = (props) => {
+  const { t } = props
+  return (
+    <Section className='flex flex-col !items-start gap-2 lg:gap-5'>
+      <p className='text-xl font-medium leading-7 lg:leading-none'>{t('services_section_title')}</p>
+      <div className='flex w-full flex-wrap gap-8 lg:gap-10'>
+        <p className='text-4xl font-semibold leading-10'>{t('services_section_desc')}</p>
+        {SERVICES_SECTION.map(({ i18n_heading, i18n_desc }, index) => (
+          <div key={i18n_heading} className='flex w-full flex-col gap-10'>
+            <div className='flex w-full'>
+              <div className='flex flex-col gap-x-[60px] gap-y-3 lg:flex-row'>
+                <p className='w-[298px] flex-shrink-0 text-xl font-medium leading-7'>{t(i18n_heading)}</p>
+                <p className='max-w-[534px] text-sm font-normal leading-5'>{t(i18n_desc)}</p>
+              </div>
+              <NavigationButton />
+            </div>
+            {index !== SERVICES_SECTION.length - 1 && <Divider />}
+          </div>
+        ))}
+      </div>
+    </Section>
+  )
+}

app/utils/constants.tsx

@@ -99,6 +99,25 @@ export const GOALS = [
   { i18n_heading: 'goals_tailored', i18n_desc: 'goals_tailored_desc' },
 ]
 
+export const PROJECTS_SECTION = [
+  {
+    i18n_heading: 'projects_section_initial',
+    i18n_desc: 'projects_section_desc_initial',
+  },
+  {
+    i18n_heading: 'projects_section_design',
+    i18n_desc: 'projects_section_desc_design',
+  },
+  {
+    i18n_heading: 'projects_section_installation',
+    i18n_desc: 'projects_section_desc_installation',
+  },
+  {
+    i18n_heading: 'projects_section_maintenance',
+    i18n_desc: 'projects_section_desc_maintenance',
+  },
+]
+
 export const LOGOS: ILogo[] = [
   {
     src: '/images/logos/aquafina.png',
@@ -137,3 +156,22 @@ export const LOGOS: ILogo[] = [
     height: 582,
   },
 ]
+
+export const SERVICES_SECTION = [
+  {
+    i18n_heading: 'services_installation',
+    i18n_desc: 'services_installation_desc',
+  },
+  {
+    i18n_heading: 'services_relocation',
+    i18n_desc: 'services_relocation_desc',
+  },
+  {
+    i18n_heading: 'services_support',
+    i18n_desc: 'services_support_desc',
+  },
+  {
+    i18n_heading: 'services_consultation',
+    i18n_desc: 'services_consultation_desc',
+  },
+]

locales/en/services.json

@@ -0,0 +1,24 @@
+{
+	"services_gbs":"GBS Services",
+	"services_title":"Maximizing Efficiency Minimizing Downtown", 
+	"services_section_title":"Our Services", 
+	"services_section_desc":"Trusted service, For your different goals",
+	"services_installation":"Installation Of New Production Lines",
+	"services_installation_desc":"We specialize in installing state-of-the-art production lines for new facilities or expansions. We ensure efficient, precise management from start to finish, complying with all industry standards.",
+	"services_relocation":"Production Line Relocation",
+	"services_relocation_desc":"We specialize in relocating beverage production lines with minimal disruption. Our team handles disassembly, transport, reassembly, and calibration, ensuring your production line is operational efficiently.",
+	"services_support":"Technical Support & Maintenance",
+	"services_support_desc":"Our commitment doesn’t end with installation. We offer ongoing technical support and regular maintenance services to keep your production lines running at peak performance.",
+	"services_consultation":"Consultation & Project Planning",
+	"services_consultation_desc":"Leveraging our beverage industry experience, we offer consultation and project planning to optimize setups and design cost-effective, future-proof production solutions.",
+	"our_process":"Our Process",
+	"process_title":"Building Trust Through Transparency, Development, and Obligation",
+	"projects_section_initial":"Initial Consultation & Needs Assessment",
+	"projects_section_desc_initial":"We begin by understanding your unique production requirements and challenges. Our team collaborates closely with you to develop a tailored solution.",
+	"projects_section_design": "Customized Solution Design",
+	"projects_section_desc_design":"Based on your needs, we create a detailed plan for either relocating or installing your production lines, ensuring the highest level of precision.",
+	"projects_section_installation":"Efficient Execution & Installation",
+	"projects_section_desc_installation":"Our experienced team handles the entire process, from disassembly and transport to reassembly and calibration, ensuring your equipment is operational in record time.",
+	"projects_section_maintenance":"Post-Installation Support & Maintenance",
+	"projects_section_desc_maintenance":"After installation or relocation, we provide ongoing technical support and maintenance to ensure long-term success."
+}    

public/images/icons/ArrowUpIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const ArrowUpIcon = (): JSX.Element => (
+	<svg
+		width={48}
+		height={48}
+		viewBox="0 0 48 48"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#155E75" />
+		<path d="M30.1896 26.7618L30.1896 18.1775L21.6053 18.1775" stroke="#155E75" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+		<path d="M17.9871 30.0074L29.8877 18.1068" stroke="#155E75" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+	</svg>
+);
+
+export default ArrowUpIcon;
+

tailwind.config.ts

@@ -12,7 +12,9 @@ module.exports = {
     extend: {
       backgroundImage: {
         factory: "url('/images/factory.jpg')",
-        aboutHero: "url('/images/factory.jpg')",
+        aboutHero: "url('/images/interior-factory.jpg')",
+        servicesHero: "url('/images/worker-image.jpg')",
+        ourProcess: "url('/images/our-process.jpg')",
       },
     },
   },