chore: added new reusable contact & partner cards

Sahil-Connect · Dec 4, 2024 · 2720883 · 2720883
1 parent 41aa970
commit 2720883
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 106 deletions.
diff --git a/apps/website/src/app/contact/page.tsx b/apps/website/src/app/contact/page.tsx
@@ -1,4 +1,5 @@
 import { 
+  ContactCard,
   GridContainer, 
   PageTitle, 
 } from "@/components/shared";
@@ -29,47 +30,31 @@ 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">
-                <div className="group relative px-5 py-10 w-full flex flex-col gap-2 justify-between items-center border rounded-lg text-center overflow-hidden transition duration-300 ease-in hover:bg-green-50 hover:border-green-300">
-                  <div className="flex items-center justify-center rounded-full">
-                    <span className="text-3xl group-hover:text-green-700">
-                      <HiEnvelope />
-                    </span>
-                  </div>
-                  <div className="z-50">
-                    <h3 className="text-lg font-bold group-hover:text-green-700">Drop us a line</h3>
-                    <a href="mailto:[email protected]" className="text-gray-500 group-hover:text-green-400">[email protected]</a>
-                  </div>
-                  <div className="hidden absolute w-20 h-20 bottom-0 right-0 bg-green-200 rounded-tl-full rounded-tr-none z-0 delay-100 ease-in-out group-hover:block"></div>
-                  <div className="hidden absolute w-16 h-16 bottom-0 right-0 bg-green-300 rounded-tl-full rounded-tr-none z-0 delay-200 ease-in-out group-hover:block"></div>
-                </div>
-
-                <div className="group relative px-5 py-10 w-full flex flex-col gap-2 justify-between items-center border rounded-lg text-center overflow-hidden transition duration-300 ease-in hover:bg-blue-50 hover:border-blue-300">
-                  <div className="flex items-center justify-center rounded-full">
-                    <span className="text-3xl group-hover:text-blue-700">
-                      <HiMapPin />
-                    </span>
-                  </div>
-                  <div className="z-50">
-                    <h3 className="text-lg font-bold group-hover:text-blue-700">Our Head Office</h3>
-                    <p className="text-gray-500 group-hover:text-blue-400">Norrsken House Kigali <br/> 1 KN 78 St, Kigali - Rwanda</p>
-                  </div>
-                  <div className="hidden absolute w-20 h-20 bottom-0 right-0 bg-blue-200 rounded-tl-full rounded-tr-none z-0 delay-100 ease-in-out group-hover:block"></div>
-                  <div className="hidden absolute w-16 h-16 bottom-0 right-0 bg-blue-300 rounded-tl-full rounded-tr-none z-0 delay-200 ease-in-out group-hover:block"></div>
-                </div>
-
-                <div className="group relative px-5 py-10 w-full flex flex-col gap-2 justify-between items-center border rounded-lg text-center overflow-hidden transition duration-300 ease-in hover:bg-purple-50 hover:border-purple-300">
-                  <div className="flex items-center justify-center rounded-full">
-                    <span className="text-3xl group-hover:text-purple-700">
-                      <HiPhone />
-                    </span>
-                  </div>
-                  <div className="z-50">
-                    <h3 className="text-lg font-bold group-hover:text-purple-700">Book a Call</h3>
-                    <a href="tel:+250790336525" className="text-gray-500 group-hover:text-purple-400">+250-790-336-525</a>
-                  </div>
-                  <div className="hidden absolute w-20 h-20 bottom-0 right-0 bg-purple-200 rounded-tl-full rounded-tr-none z-0 delay-100 ease-in-out group-hover:block"></div>
-                  <div className="hidden absolute w-16 h-16 bottom-0 right-0 bg-purple-300 rounded-tl-full rounded-tr-none z-0 delay-200 ease-in-out group-hover:block"></div>
-                </div>
+                <ContactCard
+                  icon={HiEnvelope}
+                  title="Drop us a line"
+                  content="[email protected]"
+                  linkHref="mailto:[email protected]"
+                  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"
+                />
               </div>
             </div>
           </div>

diff --git a/apps/website/src/components/segments/ParterWithUs.tsx b/apps/website/src/components/segments/ParterWithUs.tsx
@@ -14,27 +14,27 @@ export const ParterWithUs = () => {
           title="Partner with Us" 
           textCentered={true}
         />
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-5 sm:overflow-hidden">
-          <PartnerCard 
+        <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."
-            link="/partners/couriers"
-            className="col-span-1"
+            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="flex flex-col justify-between col-span-1 gap-4 lg:gap-8">
-            <PartnerCard 
-              title="Businesses"
-              description="Join 100+ businesses (retailers) working with Sahil. Work with trusted suppliers to reduce costs and focus on serving your customers"
-              link="/partners/businesses"
-            />
-            <PartnerCard 
-              title="Suppliers"
-              description="Join 15+ suppliers (manufacturers) and expand your market reach. Access a diverse network of businesses and streamline your sales"
-              link="/partners/suppliers"
-            />
-          </div>
         </div>
       </GridContainer>
     </SectionWrapper>
   );
-};
+};
diff --git a/apps/website/src/components/shared/Card.tsx b/apps/website/src/components/shared/Card.tsx
@@ -1,7 +1,5 @@
 import Image, { StaticImageData } from "next/image";
-import Link from "next/link";
 import { twMerge } from "tailwind-merge";
-import { HiOutlineArrowUpRight } from "react-icons/hi2";
 
 interface ShortCardProps {
   subtitle?: string;
@@ -11,13 +9,6 @@ interface ShortCardProps {
   image?: StaticImageData;
 }
 
-interface PartnerCardProps {
-  title?: string;
-  description?: string;
-  link?: string;
-  className?: string;
-}
-
 export const Card = ({ title, subtitle, description, className, image }: ShortCardProps) => {
   const defaultClass="mt-8 flex w-auto pt-0 flex-col items-start justify-center rounded-lg lg:mt-0";
   const mergedClass=twMerge(defaultClass, className);
@@ -42,42 +33,3 @@ export const Card = ({ title, subtitle, description, className, image }: ShortCa
     </div>
   );
 };
-
-export const PartnerCard = ({ title, description, link, className }: PartnerCardProps) => {
-  const defaultClass="h-full p-8 border border-zinc-200 rounded-lg bg-gray-50";
-  const mergedClass=twMerge(defaultClass, className);
-  return (
-    <div className={mergedClass}>
-      <div className="h-full flex flex-col items-start justify-between gap-8">
-        <div className="flex flex-col flex-1 items-start justify-end">
-          <h3 className="text-xl font-bold mb-4 pb-0 md:text-2xl">{title}</h3>
-          <p className="text-sm text-zinc-500 pt-0 mb-5 mt-0">
-            {description} 
-          </p>
-          {link && (
-            <Link
-              href={link}
-              className="group px-6 btn border border-gray-200 bg-white text-zinc-900 font-medium rounded-full hover:bg-white hover:text-zinc-900"
-            >
-              Continue
-              <span className="relative group flex justify-center items-center rounded-full">
-                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
-              </span>
-            </Link>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const PartnerTitle = ({ title, description }: PartnerCardProps) => {
-  return (
-    <div className="my-8">
-      <h3 className="text-xl font-bold mb-4 pb-0 md:text-2xl">{title}</h3>
-      <p className="text-sm text-zinc-500 pt-0 mb-5 mt-0">
-        {description} 
-      </p>
-    </div>
-  );
-};
diff --git a/apps/website/src/components/shared/ContactCard.tsx b/apps/website/src/components/shared/ContactCard.tsx
@@ -0,0 +1,95 @@
+import { IconType } from 'react-icons';
+
+interface ContactCardProps {
+  icon: IconType;
+  title: string;
+  content: string | React.ReactNode;
+  linkHref?: string;
+  colorScheme?: 'green' | 'blue' | 'purple';
+}
+
+export const ContactCard = ({ 
+  icon: Icon,
+  title,
+  content,
+  linkHref,
+  colorScheme = 'green'
+}: 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']
+    },
+    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']
+    },
+    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']
+    }
+  };
+
+  const colors = colorVariants[colorScheme];
+
+  const renderContent = () => {
+    if (typeof content === 'string' && linkHref) {
+      return (
+        <a 
+          href={linkHref} 
+          className={`text-gray-500 ${colors.contentHover}`}
+        >
+          {content}
+        </a>
+      );
+    }
+    return (
+      <p className={`text-gray-500 ${colors.contentHover}`}>
+        {content}
+      </p>
+    );
+  };
+
+  return (
+    <div 
+      className={`
+        group relative px-5 py-10 w-full flex flex-col gap-2 justify-between items-center border rounded-lg 
+        text-center overflow-hidden transition duration-300 
+        ease-in-out ${colors.hover}
+      `}
+    >
+      <div className="flex items-center justify-center rounded-full">
+        <span className={`text-3xl ${colors.iconHover}`}>
+          <Icon />
+        </span>
+      </div>
+      <div className="z-50">
+        <h3 className={`text-lg font-bold ${colors.titleHover}`}>
+          {title}
+        </h3>
+        {renderContent()}
+      </div>
+      {colors.bgColors.map((bgColor, index) => (
+        <div
+          key={bgColor}
+          className={`
+            hidden absolute w-${index === 0 ? '20' : '16'} 
+            h-${index === 0 ? '20' : '16'} bottom-0 right-0 
+            ${bgColor} rounded-tl-full rounded-tr-none 
+            z-0 delay-${index === 0 ? '100' : '200'} 
+            ease-in-out group-hover:block
+          `}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/website/src/components/shared/PartnerCard.tsx b/apps/website/src/components/shared/PartnerCard.tsx
@@ -0,0 +1,113 @@
+import Link from "next/link";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+
+interface PartnerCardProps {
+  title: string;
+  description: string;
+  linkHref: string;
+  colorScheme?: 'purple' | 'blue' | 'neutral';
+}
+
+interface PartnerTitleProps {
+  title: string;
+  description: string;
+}
+
+export const PartnerCard = ({ 
+  title,
+  description,
+  linkHref,
+  colorScheme = 'purple'
+}: 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']
+    },
+    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']
+    },
+    neutral: {
+      hover: 'hover:bg-neutral-50 hover:border-neutral-300',
+      titleHover: 'group-hover:text-neutral-700',
+      descHover: 'group-hover:text-neutral-400',
+      btnHover: 'group-hover:bg-neutral-600',
+      bgColors: ['bg-neutral-200', 'bg-neutral-300']
+    }
+  };
+
+  const colors = colorVariants[colorScheme];
+
+  return (
+    <div 
+      className={`
+        group relative h-full flex flex-col items-start justify-between gap-8 p-8 border border-zinc-200 
+        rounded-lg bg-gray-50 overflow-hidden transition duration-300 ease-in-out 
+        ${colors.hover}
+      `}
+    >
+      <div className="flex flex-col flex-1 items-start justify-end">
+        <h3 
+          className={`
+            text-xl font-bold mb-4 pb-0 md:text-2xl 
+            ${colors.titleHover}
+          `}
+        >
+          {title}
+        </h3>
+        <p 
+          className={`
+            text-sm text-zinc-500 pt-0 mb-5 mt-0 
+            ${colors.descHover}
+          `}
+        >
+          {description}
+        </p>
+        <Link
+          href={linkHref}
+          className={`
+            group px-6 btn border border-gray-200 
+            bg-white text-zinc-900 font-medium 
+            rounded-full ease-in-out 
+            ${colors.btnHover} group-hover:text-white
+          `}
+        >
+          Continue
+          <span className="relative group flex justify-center items-center rounded-full">
+            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          </span>
+        </Link>
+      </div>
+      {colors.bgColors.map((bgColor, index) => (
+        <div
+          key={bgColor}
+          className={`
+            hidden absolute w-${index === 0 ? '20' : '16'} 
+            h-${index === 0 ? '20' : '16'} bottom-0 right-0 
+            ${bgColor} rounded-tl-full rounded-tr-none 
+            z-0 delay-${index === 0 ? '100' : '200'} 
+            ease-in-out group-hover:block
+          `}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const PartnerTitle = ({ title, description }: PartnerTitleProps) => {
+  return (
+    <div className="my-8">
+      <h3 className="text-xl font-bold mb-4 pb-0 md:text-2xl">{title}</h3>
+      <p className="text-sm text-zinc-500 pt-0 mb-5 mt-0">
+        {description} 
+      </p>
+    </div>
+  );
+};