feat: add why choose us section

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -1,18 +1,17 @@
 import Hero from 'components/hero';
 import About from 'components/home-page/about';
+import WhyChoose from 'components/home-page/why-choose';
 import Footer from 'components/layout/footer';
-import { getPage } from 'lib/shopify';
 import { Metadata } from 'next';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
+const { SITE_NAME } = process.env;
 
 export async function generateMetadata(): Promise<Metadata> {
-  const page = await getPage('home-page');
-
   return {
-    title: page?.seo?.title || page?.title,
+    title: SITE_NAME,
-    description: page?.seo?.description || page?.bodySummary,
+    description: `${SITE_NAME} is your ultimate destination for all your drivetrain replacement needs.`,
     openGraph: {
       type: 'website'
     }
@@ -25,8 +24,9 @@ export default async function HomePage() {
       <Suspense>
         <Hero />
       </Suspense>
-      <div className="mx-auto flex min-h-96 max-w-7xl flex-col space-y-16 px-6 py-12 lg:px-8">
+      <div className="mx-auto flex min-h-96 max-w-7xl flex-col space-y-14 px-6 py-16 sm:space-y-28 lg:px-8">
         <About />
+        <WhyChoose />
       </div>
       <Suspense>
         <Footer />

components/display-tabs.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import clsx from 'clsx';
+import { useState } from 'react';
+
+type DisplayTabsProps = {
+  items: string[];
+};
+const DisplayTabs = ({ items }: DisplayTabsProps) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <div className="flex w-fit items-center rounded bg-gray-100 p-1">
+      {items.map((item, index) => (
+        <button
+          onClick={() => setSelectedIndex(index)}
+          key={item}
+          className={clsx(
+            'min-w-[130px] cursor-pointer rounded py-1 text-center text-sm font-medium',
+            {
+              'bg-white text-primary': index === selectedIndex,
+              'bg-transparent text-gray-600': index !== selectedIndex
+            }
+          )}
+        >
+          {item}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default DisplayTabs;

components/hero.tsx

@@ -64,7 +64,7 @@ const Hero = async () => {
             )}
           </div>
           <div aria-hidden="true" className="absolute inset-0 bg-dark opacity-80" />
-          <div className="flex flex-col gap-10 px-6 py-32 text-center sm:py-64 lg:px-0">
+          <div className="flex flex-col gap-10 px-6 py-32 text-center sm:py-56 lg:px-0">
             <div className="relative mx-auto hidden flex-col items-center justify-center text-white md:flex">
               <Image src="/best-price.svg" alt="Best Price" width={100} height={90} />
               <p className="tracking-wide">Best Price Guarantee</p>

components/home-page/about.tsx

@@ -1,31 +1,31 @@
+import DisplayTabs from 'components/display-tabs';
 import Image from 'next/image';
+import Tag from '../tag';
 import ButtonLink from './button-link';
-import Tag from './tag';
 
 const About = () => {
   return (
     <div className="grid grid-cols-1 items-start gap-x-0 gap-y-10 lg:grid-cols-2 lg:gap-x-10">
-      <div className="col-span-1">
+      <Image
-        <Image
+        src="/about.png"
-          src="/about.png"
+        alt="About Us"
-          alt="About Us"
+        sizes="(min-width: 1920px) 588px, (min-width: 770px) 50vw, 100vw"
-          sizes="(min-width: 1920px) 588px, (min-width: 770px) 50vw, 100vw"
+        width={588}
-          width={588}
+        height={468}
-          height={405}
+        className="col-span-1 h-full w-full object-contain"
-          className="w-full object-contain"
+      />
-        />
-      </div>
       <div className="flex h-full flex-col justify-between pb-2">
         <div className="mb-3 flex flex-col gap-3">
           <Tag text="About Us" />
           <h3 className="text-3xl font-semibold lg:text-4xl">Engine & Transmission Experts</h3>
-          <p className="leading-6 text-slate-500">
+          <p className="tracking-wide text-blue-200">
             {`Car Part Planet is your ultimate destination for all your drivetrain replacement needs.
             Whether you're searching for a used engine, a remanufactured engine, a used
             transmission, a remanufactured transmission, or seeking expert drivetrain fitment
             guidance for your DIY replacement project, we've got you covered.`}
           </p>
-          <p className="leading-6 text-slate-500">
+          <DisplayTabs items={['Range', 'Quality', 'Knowledge']} />
+          <p className="tracking-wide text-blue-200">
             Our dedicated team is committed to sourcing top-quality parts at affordable prices for a
             wide range of gasoline and diesel vehicles, including those from American, Japanese, and
             various other manufacturers. Our extensive inventory includes popular engines and

components/home-page/why-choose.tsx

@@ -0,0 +1,104 @@
+import Image from 'next/image';
+import Tag from '../tag';
+
+const { SITE_NAME } = process.env;
+const WhyChoose = () => {
+  return (
+    <div className="grid grid-cols-1 gap-y-5 lg:grid-cols-5 lg:gap-y-0">
+      <div className="col-span-1 flex flex-col gap-3">
+        <Tag text="Benefits" />
+        <h3 className="text-3xl font-semibold lg:text-4xl">Why choose {SITE_NAME}?</h3>
+      </div>
+      <div className="col-span-1 grid grid-cols-subgrid gap-x-6 gap-y-12 lg:col-span-4">
+        <div className="col-span-1 flex lg:col-span-2">
+          <Image
+            src="/icons/team.png"
+            alt="Team"
+            width={60}
+            height={60}
+            className="h-[60px] w-[60px]"
+          />
+          <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />
+          <div className="ml-2 flex flex-col gap-3">
+            <h4 className="text-xl font-medium text-blue-800">Advanced Team</h4>
+            <p className="text-justify leading-6 text-blue-200">
+              We specialize in procuring high-quality used transmissions and engines as well as
+              remanufactured engines and transmissions for the majority of truck and car makes and
+              models. Whatever components you might need to repair or upgrade your vehicle, our
+              advanced team of customer support specialists, sales leads, and automotive gurus can
+              help you source the perfect quality engine or transmission for your needs.
+            </p>
+          </div>
+        </div>
+        <div className="col-span-1 flex lg:col-span-2">
+          <Image
+            src="/icons/customer-support.png"
+            alt="Customer Support"
+            width={60}
+            height={60}
+            className="h-[60px] w-[60px]"
+          />
+          <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />
+          <div className="ml-2 flex flex-col gap-3">
+            <h4 className="text-xl font-medium text-blue-800">Customer Support Staff</h4>
+            <p className="text-justify leading-6 text-blue-200">
+              With more than 20 years of experience providing support to our customers, our
+              representatives have deep knowledge about all aspects of vehicles. We will quickly
+              help you locate the exact compatible engine or transmission you need and get it to
+              your commercial or residential address quickly. Our customer service team undergoes
+              extensive training so that no matter what your problem is, we can fix it.
+            </p>
+          </div>
+        </div>
+        <div className="col-span-1 flex lg:col-span-2">
+          <Image
+            src="/icons/replacement.png"
+            alt="Replacement Process"
+            width={60}
+            height={60}
+            className="h-[60px] w-[60px]"
+          />
+          <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />
+          <div className="ml-2 flex flex-col gap-3">
+            <h4 className="text-xl font-medium text-blue-800">Replacement Process</h4>
+            <p className="text-justify leading-6 text-blue-200">
+              Car Part Planet is a partner with the most prominent automotive parts manufacturers
+              and suppliers. The advanced online catalog we’ve created to support the customers of
+              Car Part Planet is what you will use to find your exact part. Simply by using our
+              Search Tool, you can find the exact engine or transmission swap for your ride. You can
+              shop our smart catalog 24/7, no matter what time zone you’re in, for sourcing anything
+              from a complete transmission replacement to a completely rebuilt engine, all at
+              low-cost prices.
+            </p>
+          </div>
+        </div>
+        <div className="col-span-1 flex lg:col-span-2">
+          <Image
+            src="/icons/shipping.png"
+            alt="Fast Shipping & Exclusive Warranty"
+            width={60}
+            height={60}
+            className="h-[60px] w-[60px]"
+          />
+          <div className="mx-3 h-[100px] min-w-0.5 bg-gray-200" />
+          <div className="ml-2 flex flex-col gap-3">
+            <h4 className="text-xl font-medium text-blue-800">
+              Fast Shipping & Exclusive Warranty
+            </h4>
+            <p className="text-justify leading-6 text-blue-200">
+              We can offer great prices because we operate more efficiently as an online retailer,
+              so we pass this benefit to you with fast flat-rate shipping straight to your
+              commercial or residential address when you order with us. You deserve proper coverage
+              for your purchases from Car Part Planet, which is why we are proud to offer unlimited
+              mile warranty protection for up to five years, depending on what you purchase. Give us
+              a call today to discuss the details about our outstanding warranty terms or check out
+              our designated warranty page for complete information.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WhyChoose;

lib/styles.ts

@@ -1,5 +1,9 @@
 export const colors = {
   primary: '#EF6C02',
   dark: '#091242',
-  secondary: '#EF6C02'
+  secondary: '#EF6C02',
+  blue: {
+    800: '#1C1F35',
+    200: '#666C89'
+  }
 };