fix: homepage revamp

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

components/banner.tsx

@@ -3,7 +3,7 @@ import Tooltip from './tooltip';
 
 function Banner() {
   return (
-    <div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-dark md:flex-row md:p-0">
+    <div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-white md:flex-row md:p-0">
       <span>
         Speak to a Specialist Now:{' '}
         <a href={`tel:${8882422605}`} className="ml-1">

components/hero.tsx

@@ -4,6 +4,7 @@ import { Suspense } from 'react';
 import HomePageFilters, { HomePageFiltersPlaceholder } from './filters/hompage-filters';
 import DynamicHeroIcon from './hero-icon';
 import ImageDisplay from './page/image-display';
+import TrustPilot from './trust-pilot';
 
 const Hero = async () => {
   const [offers, heroImage] = await Promise.all([
@@ -63,12 +64,25 @@ const Hero = async () => {
               />
             )}
           </div>
-          <div aria-hidden="true" className="absolute inset-0 bg-gray-900 opacity-60" />
-
-          <div className="relative mx-auto flex max-w-4xl flex-col items-center px-6 py-32 text-center sm:py-64 lg:px-0">
-            <Suspense fallback={<HomePageFiltersPlaceholder />}>
-              <HomePageFilters />
-            </Suspense>
+          <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="mx-auto hidden max-w-[800px] items-center justify-between gap-10 md:flex">
+              <div className="relative flex items-center">
+                <Image src="/best-price.svg" alt="Best Price" width={100} height={90} />
+                <div className="ml-4 text-left text-white">
+                  <p className="tracking-wide">Best Price Guarantee</p>
+                  <p className="max-w-[200px] text-sm tracking-wide">
+                    We will match or beat any competitor&apos;s pricing.
+                  </p>
+                </div>
+              </div>
+              <TrustPilot />
+            </div>
+            <div className="relative mx-auto flex max-w-4xl flex-col items-center ">
+              <Suspense fallback={<HomePageFiltersPlaceholder />}>
+                <HomePageFilters />
+              </Suspense>
+            </div>
           </div>
         </div>
       </div>

components/home-page/about.tsx

@@ -0,0 +1,42 @@
+import Image from 'next/image';
+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
+          src="/about.png"
+          alt="About Us"
+          sizes="(min-width: 1920px) 588px, (min-width: 770px) 50vw, 100vw"
+          width={588}
+          height={405}
+          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">
+            {`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">
+            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
+            transmissions for GM, Chevrolet, Dodge, Ford, Chrysler, Jeep, Nissan, Toyota, Honda, and
+            many other manufacturers.
+          </p>
+        </div>
+        <ButtonLink link={{ text: 'Learn More', url: '/about' }} />
+      </div>
+    </div>
+  );
+};
+
+export default About;

components/home-page/button-link.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+const ButtonLink = ({ link }: { link: { text: string; url: string } }) => {
+  return (
+    <Link href={link.url} className="relative w-fit px-5 py-2 text-white">
+      <Image
+        src="background.svg"
+        alt="button background"
+        className="absolute inset-0 -z-10 h-full w-full rounded object-cover"
+        fill
+      />
+      <div className="text-sm font-medium leading-5 tracking-wide">{link.text}</div>
+    </Link>
+  );
+};
+
+export default ButtonLink;

components/home-page/tag.tsx

@@ -0,0 +1,7 @@
+const Tag = ({ text }: { text: string }) => {
+  return (
+    <div className="w-fit border-l-4 border-l-primary bg-gray-100 px-2 py-0.5 text-sm">{text}</div>
+  );
+};
+
+export default Tag;

components/layout/footer.tsx

@@ -20,16 +20,13 @@ export default async function Footer() {
       <div className="mx-auto flex w-full max-w-7xl flex-row flex-wrap items-start gap-6 px-6 py-12 text-sm md:gap-12 md:px-4 min-[1320px]:px-0">
         <div className="flex flex-col gap-1">
           <Link className="flex items-center text-white md:pt-1" href="/">
-            <LogoSquare sm />
-            <span className="font-league-spartan text-xl leading-tight tracking-tight">
-              {SITE_NAME}
-            </span>
+            <LogoSquare dark />
           </Link>
-          <a href={`tel:${8882422605}`} className="ml-4 text-white">
+          <a href={`tel:${8882422605}`} className="ml-16 text-white">
             (888) 242-2605
           </a>
-          <p className="ml-4">Monday - Friday 9:00am - 8:00pm EST</p>
-          <p className="ml-4">Saturday 11:00am - 4:00pm EST</p>
+          <p className="ml-16">Monday - Friday 9:00am - 8:00pm EST</p>
+          <p className="ml-16">Saturday 11:00am - 4:00pm EST</p>
         </div>
         <Suspense
           fallback={

components/layout/navbar/index.tsx

@@ -9,7 +9,6 @@ import { Suspense } from 'react';
 import MainMenu from './main-menu';
 import MobileMenu from './mobile-menu';
 import Search, { SearchSkeleton } from './search';
-const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
   const menu = await getMenu('main-menu');
@@ -26,12 +25,9 @@ export default async function Navbar() {
           <div className="flex w-full md:w-1/3">
             <Link
               href="/"
-              className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+              className="flex w-full items-center justify-center pl-3 sm:pl-0 md:w-auto lg:mr-6"
             >
               <LogoSquare />
-              <div className="flex-none font-league-spartan text-xl font-semibold tracking-tight text-dark dark:text-white md:hidden md:text-2xl lg:block lg:text-3xl lg:leading-tight">
-                {SITE_NAME}
-              </div>
             </Link>
           </div>
           <div className="hidden justify-center md:flex md:w-1/3">

components/logo-square.tsx

@@ -1,15 +1,13 @@
-import clsx from 'clsx';
-import LogoIcon from './icons/logo';
+import Image from 'next/image';
 
-export default function LogoSquare({ sm }: { sm?: boolean }) {
+export default function LogoSquare({ dark = false }: { dark?: boolean }) {
   return (
-    <div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
-      <LogoIcon
-        className={clsx('h-[20px] w-[20px]', {
-          'lg:h-[26px] lg:w-[26px]': !sm,
-          'lg:h-[20px]lg:w-[20px]': sm
-        })}
-      />
+    <div className="h-12 md:h-[55px]">
+      {dark ? (
+        <Image src="/dark-logo.svg" alt="Logo" width={327} height={61} className="h-full w-full" />
+      ) : (
+        <Image src="/logo.svg" alt="Logo" width={327} height={61} className="h-full w-full" />
+      )}
     </div>
   );
 }

components/trust-pilot.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+const TrustPilot = () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    // @ts-ignore
+    if (window.Trustpilot) {
+      // @ts-ignore
+      window.Trustpilot.loadFromElement(ref.current);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-locale="en-US"
+      data-template-id="53aa8807dec7e10d38f59f32"
+      data-businessunit-id="58af38df0000ff00059d3de2"
+      data-style-height="120px"
+      data-style-width="100%"
+      data-style-font-size="10px"
+      data-theme="dark"
+    >
+      <a href="https://www.trustpilot.com/review/carpartplanet.com" target="_blank" rel="noopener">
+        Trustpilot
+      </a>
+    </div>
+  );
+};
+
+export default TrustPilot;