chore: create array list and map on contact & partner card details

Sahil-Connect · Dec 7, 2024 · af2084c · af2084c
1 parent 2720883
commit af2084c
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 80 deletions.
diff --git a/apps/website/src/app/contact/page.tsx b/apps/website/src/app/contact/page.tsx
@@ -1,5 +1,6 @@
 import { 
   ContactCard,
+  ContactCardProps,
   GridContainer, 
   PageTitle, 
 } from "@/components/shared";
@@ -11,6 +12,34 @@ export const metadata = {
   description: "We’re here to help and would love to hear from you.",
 };
 
+const contactDetails: ContactCardProps[] = [
+  {
+    icon: HiEnvelope,
+    title: "Drop us a line",
+    content: "sahil.business@gmail.com",
+    linkHref: "mailto:sahil.business@gmail.com",
+    colorScheme: "neutral"
+  },
+  {
+    icon: HiMapPin,
+    title: "Our Head Office",
+    content: (
+      <>
+        Norrsken House Kigali <br/> 
+        1 KN 78 St, Kigali - Rwanda
+      </>
+    ),
+    colorScheme: "gray"
+  },
+  {
+    icon: HiPhone,
+    title: "Book a Call",
+    content: "+250-790-336-525",
+    linkHref: "tel:+250790336525",
+    colorScheme: "slate"
+  }
+];
+
 export default function ContactPage() {
   return (
     <>
@@ -30,31 +59,16 @@ export default function ContactPage() {
                 If you have any questions or need assistance, feel free to reach out to us through our contact details below.
               </p>
               <div className="mt-12 grid lg:grid-cols-3 gap-3">
-                <ContactCard
-                  icon={HiEnvelope}
-                  title="Drop us a line"
-                  content="sahil.business@gmail.com"
-                  linkHref="mailto:sahil.business@gmail.com"
-                  colorScheme="green"
-                />
-                <ContactCard
-                  icon={HiMapPin}
-                  title="Our Head Office"
-                  content={
-                    <>
-                      Norrsken House Kigali <br/> 
-                      1 KN 78 St, Kigali - Rwanda
-                    </>
-                  }
-                  colorScheme="blue"
-                />
-                <ContactCard
-                  icon={HiPhone}
-                  title="Book a Call"
-                  content="+250-790-336-525"
-                  linkHref="tel:+250790336525"
-                  colorScheme="purple"
-                />
+                {contactDetails.map((contact, index) => (
+                  <ContactCard
+                    key={index}
+                    icon={contact.icon}
+                    title={contact.title}
+                    content={contact.content}
+                    linkHref={contact.linkHref}
+                    colorScheme={contact.colorScheme}
+                  />
+                ))}
               </div>
             </div>
           </div>

diff --git a/apps/website/src/components/segments/ParterWithUs.tsx b/apps/website/src/components/segments/ParterWithUs.tsx
@@ -3,8 +3,30 @@ import {
   GridContainer,
   SectionTitle,
   PartnerCard,
+  PartnerCardProps,
 } from "@/components/shared";
 
+const partnerDetails: PartnerCardProps[] = [
+  {
+    title: "Couriers",
+    description: "Become a courier rider at Sahil, delivery goods and packages from suppliers to businesses or directly to consumers.",
+    linkHref: "/partners/couriers",
+    colorScheme: "slate"
+  },
+  {
+    title: "Businesses",
+    description: "Join 100+ businesses (retailers) working with Sahil. Work with trusted suppliers to reduce costs and focus on serving your customers.",
+    linkHref: "/partners/businesses",
+    colorScheme: "neutral"
+  },
+  {
+    title: "Suppliers",
+    description: "Join 15+ suppliers (manufacturers) and expand your market reach. Access a diverse network of businesses and streamline your sales.",
+    linkHref: "/partners/suppliers",
+    colorScheme: "gray"
+  }
+];
+
 export const ParterWithUs = () => {
   return (
     <SectionWrapper>
@@ -14,25 +36,16 @@ export const ParterWithUs = () => {
           title="Partner with Us" 
           textCentered={true}
         />
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:grid-cols-3 lg:gap-8">
-          <PartnerCard
-            title="Couriers"
-            description="Become a courier rider at Sahil, delivery goods and packages from suppliers to businesses or directly to consumers."
-            linkHref="/partners/couriers"
-            colorScheme="purple"
-          />
-          <PartnerCard
-            title="Businesses"
-            description="Join 100+ businesses (retailers) working with Sahil. Work with trusted suppliers to reduce costs and focus on serving your customers"
-            linkHref="/partners/businesses"
-            colorScheme="neutral"
-          />
-          <PartnerCard
-            title="Suppliers"
-            description="Join 15+ suppliers (manufacturers) and expand your market reach. Access a diverse network of businesses and streamline your sales"
-            linkHref="/partners/suppliers"
-            colorScheme="blue"
-          />
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:grid-cols-3 lg:gap-4">
+          {partnerDetails.map((partner, index) => (
+            <PartnerCard
+              key={index}
+              title={partner.title}
+              description={partner.description}
+              linkHref={partner.linkHref}
+              colorScheme={partner.colorScheme}
+            />
+          ))}
         </div>
       </GridContainer>
     </SectionWrapper>

diff --git a/apps/website/src/components/shared/ContactCard.tsx b/apps/website/src/components/shared/ContactCard.tsx
@@ -1,41 +1,41 @@
 import { IconType } from 'react-icons';
 
-interface ContactCardProps {
+export interface ContactCardProps {
   icon: IconType;
   title: string;
   content: string | React.ReactNode;
   linkHref?: string;
-  colorScheme?: 'green' | 'blue' | 'purple';
+  colorScheme?: 'neutral' | 'gray' | 'slate';
 }
 
 export const ContactCard = ({ 
   icon: Icon,
   title,
   content,
   linkHref,
-  colorScheme = 'green'
+  colorScheme = 'neutral'
 }: ContactCardProps) => {
   const colorVariants = {
-    green: {
-      hover: 'hover:bg-green-50 hover:border-green-300',
-      iconHover: 'group-hover:text-green-700',
-      titleHover: 'group-hover:text-green-700',
-      contentHover: 'group-hover:text-green-700',
-      bgColors: ['bg-green-200', 'bg-green-300']
+    neutral: {
+      hover: 'hover:bg-neutral-50 hover:border-neutral-300',
+      iconHover: 'group-hover:text-neutral-700',
+      titleHover: 'group-hover:text-neutral-700',
+      contentHover: 'group-hover:text-neutral-700',
+      bgColors: ['bg-neutral-200', 'bg-neutral-300']
     },
-    blue: {
-      hover: 'hover:bg-blue-50 hover:border-blue-300',
-      iconHover: 'group-hover:text-blue-700',
-      titleHover: 'group-hover:text-blue-700',
-      contentHover: 'group-hover:text-blue-400',
-      bgColors: ['bg-blue-200', 'bg-blue-300']
+    gray: {
+      hover: 'hover:bg-gray-50 hover:border-gray-300',
+      iconHover: 'group-hover:text-gray-700',
+      titleHover: 'group-hover:text-gray-700',
+      contentHover: 'group-hover:text-gray-400',
+      bgColors: ['bg-gray-200', 'bg-gray-300']
     },
-    purple: {
-      hover: 'hover:bg-purple-50 hover:border-purple-300',
-      iconHover: 'group-hover:text-purple-700',
-      titleHover: 'group-hover:text-purple-700',
-      contentHover: 'group-hover:text-purple-400',
-      bgColors: ['bg-purple-200', 'bg-purple-300']
+    slate: {
+      hover: 'hover:bg-slate-50 hover:border-slate-300',
+      iconHover: 'group-hover:text-slate-700',
+      titleHover: 'group-hover:text-slate-700',
+      contentHover: 'group-hover:text-slate-400',
+      bgColors: ['bg-slate-200', 'bg-slate-300']
     }
   };
 

diff --git a/apps/website/src/components/shared/PartnerCard.tsx b/apps/website/src/components/shared/PartnerCard.tsx
@@ -1,11 +1,11 @@
 import Link from "next/link";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 
-interface PartnerCardProps {
+export interface PartnerCardProps {
   title: string;
   description: string;
   linkHref: string;
-  colorScheme?: 'purple' | 'blue' | 'neutral';
+  colorScheme?: 'slate' | 'gray' | 'neutral';
 }
 
 interface PartnerTitleProps {
@@ -17,22 +17,22 @@ export const PartnerCard = ({
   title,
   description,
   linkHref,
-  colorScheme = 'purple'
+  colorScheme = 'slate'
 }: PartnerCardProps) => {
   const colorVariants = {
-    purple: {
-      hover: 'hover:bg-purple-50 hover:border-purple-300',
-      titleHover: 'group-hover:text-purple-700',
-      descHover: 'group-hover:text-purple-400',
-      btnHover: 'group-hover:bg-purple-600',
-      bgColors: ['bg-purple-200', 'bg-purple-300']
+    slate: {
+      hover: 'hover:bg-slate-50 hover:border-slate-300',
+      titleHover: 'group-hover:text-slate-700',
+      descHover: 'group-hover:text-slate-400',
+      btnHover: 'group-hover:bg-slate-600',
+      bgColors: ['bg-slate-200', 'bg-slate-300']
     },
-    blue: {
-      hover: 'hover:bg-blue-50 hover:border-blue-300',
-      titleHover: 'group-hover:text-blue-700',
-      descHover: 'group-hover:text-blue-400',
-      btnHover: 'group-hover:bg-blue-600',
-      bgColors: ['bg-blue-200', 'bg-blue-300']
+    gray: {
+      hover: 'hover:bg-gray-50 hover:border-gray-300',
+      titleHover: 'group-hover:text-gray-700',
+      descHover: 'group-hover:text-gray-400',
+      btnHover: 'group-hover:bg-gray-600',
+      bgColors: ['bg-gray-200', 'bg-gray-300']
     },
     neutral: {
       hover: 'hover:bg-neutral-50 hover:border-neutral-300',