From a356148ed394757d3be0ed0666866604c07056e7 Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 5 Jun 2024 11:33:44 +0700 Subject: [PATCH] feat: add why choose us section Signed-off-by: Chloe --- app/page.tsx | 12 ++-- components/display-tabs.tsx | 32 +++++++++ components/hero.tsx | 2 +- components/home-page/about.tsx | 26 +++---- components/home-page/why-choose.tsx | 104 ++++++++++++++++++++++++++++ components/{home-page => }/tag.tsx | 0 lib/styles.ts | 6 +- public/icons/customer-support.png | Bin 0 -> 4226 bytes public/icons/replacement.png | Bin 0 -> 3096 bytes public/icons/shipping.png | Bin 0 -> 3196 bytes public/icons/team.png | Bin 0 -> 3251 bytes 11 files changed, 161 insertions(+), 21 deletions(-) create mode 100644 components/display-tabs.tsx create mode 100644 components/home-page/why-choose.tsx rename components/{home-page => }/tag.tsx (100%) create mode 100644 public/icons/customer-support.png create mode 100644 public/icons/replacement.png create mode 100644 public/icons/shipping.png create mode 100644 public/icons/team.png diff --git a/app/page.tsx b/app/page.tsx index d4a041f15..73e8ba86f 100644 --- a/app/page.tsx +++ b/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 { - const page = await getPage('home-page'); - return { - title: page?.seo?.title || page?.title, - description: page?.seo?.description || page?.bodySummary, + title: SITE_NAME, + 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() { -
+
+
diff --git a/components/display-tabs.tsx b/components/display-tabs.tsx new file mode 100644 index 000000000..5063881de --- /dev/null +++ b/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 ( +
+ {items.map((item, index) => ( + + ))} +
+ ); +}; + +export default DisplayTabs; diff --git a/components/hero.tsx b/components/hero.tsx index 15086bcd3..cc7d35698 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -64,7 +64,7 @@ const Hero = async () => { )}