Merge pull request #229 from Sahil-Connect/SAH-107

[SAH-107]: Website Refactor

apps/website/src/app/about/page.tsx

@@ -1,4 +1,6 @@
-import { ComingSoon, GridContainer, PageTitle } from "@/components/shared";
+import { Card, GridContainer, JourneySection, PageTitle, SectionWrapper } from "@/components/shared";
+import about from "../../../public/delivery.jpg";
+import { Cta } from "@/components/segments";
 
 export const metadata = {
   title: "About Us - Sahil App",
@@ -15,8 +17,52 @@ export default function AboutPage() {
         description="Get to know us better! Learn more about our mission, our vision, and the values that guide our work."
       />
       <GridContainer>
-        <ComingSoon />
+        <JourneySection />
+        <SectionWrapper>
+          <div className="pb-12">
+            <h1 className="text-2xl font-medium font-inter">
+              <span className="text-zinc-900">
+                We are a groundbreaking supply chain management platform that empowers small and medium-sized enterprises 
+                (SMEs) in challenging business environments.
+              </span> {''}
+              <span className="text-zinc-500">
+                Our platform is committed to providing a seamless 
+                experience for all our users, ensuring they can focus on what matters most - growing their 
+                business.
+              </span>
+            </h1>
+            <div className="mt-16 flex flex-col gap-3 lg:flex-row w-full lg:max-w-fit">
+              <Card
+                subtitle="Satisfied Clients"
+                title="100+"
+                description="Our devotion to quality and innovation propels us forward"
+                className="h-96 justify-end bg-blue-50 lg:h-auto"
+              />
+              <div className="flex flex-col gap-3 lg:justify-between">
+                <Card
+                  subtitle="Reduction in Supply Chain Costs"
+                  title="45%"
+                  description="Through our optimized inventory and procurement processes"
+                  className="bg-red-50"
+                />
+                <Card
+                  subtitle="Suppliers and Manufacturers"
+                  title="20+"
+                  description="We connect trusted suppliers with the right customers"
+                  className="bg-orange-50"
+                />
+              </div>
+              <Card
+                subtitle="On-time Deliveries"
+                description="Thanks to our route optimization for seamless logistics"
+                className="hidden h-96 bg-green-50 md:w-96 lg:h-auto lg:flex"
+                image={about}
+              />
+            </div>
+          </div>
+        </SectionWrapper>
       </GridContainer>
+      <Cta />
     </>
   );
 }

apps/website/src/app/contact/page.tsx

@@ -1,21 +1,81 @@
-import { ComingSoon, GridContainer, PageTitle } from "@/components/shared";
+import { 
+  ContactCard,
+  ContactCardProps,
+  GridContainer, 
+  PageTitle, 
+} from "@/components/shared";
+import { Cta, Faqs } from "@/components/segments";
+import { HiEnvelope, HiMapPin, HiPhone } from "react-icons/hi2";
 
 export const metadata = {
   title: "Contact Us - Sahil App",
   description: "We’re here to help and would love to hear from you.",
 };
 
+const contactDetails: ContactCardProps[] = [
+  {
+    icon: HiEnvelope,
+    title: "Drop us a line",
+    content: "[email protected]",
+    linkHref: "mailto:[email protected]",
+    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 (
     <>
       <PageTitle
-        title="Contact Us"
-        subtitle="Get in Touch"
+        subtitle="Contact Us"
+        title="Get in Touch"
         description="Have questions? We'd love to hear from you. Get in touch with us."
       />
       <GridContainer>
-        <ComingSoon />
+        <section className="pt-16 pb-8">
+          <div className="w-full">
+            <div>
+              <h3 className="text-xl font-semibold mb-8 lg:text-2xl">
+                <span className="yellow-line">Reach Us</span>
+              </h3>
+              <p className="mb-2 text-gray-500 lg:mb-12">
+                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">
+                {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>
+        </section>
       </GridContainer>
+      <Faqs />
+      <Cta />
     </>
   );
 }

apps/website/src/app/features/page.tsx

@@ -1,4 +1,5 @@
-import { PageTitle, GridContainer, ComingSoon } from "@/components/shared";
+import { Benefits, Cta, Features } from "@/components/segments";
+import { PageTitle } from "@/components/shared";
 
 export const metadata = {
   title: "Features - Sahil App",
@@ -14,9 +15,9 @@ export default function FeaturesPage() {
         subtitle="Our Services"
         description="Explore the wide range of features we offer to help you revolutionize your business operations."
       />
-      <GridContainer>
-        <ComingSoon />
-      </GridContainer>
+      <Features />
+      <Benefits />
+      <Cta />
     </>
   );
 }

apps/website/src/app/layout.tsx

@@ -1,12 +1,11 @@
 import "../styles/globals.css";
 import type { Metadata } from "next";
-import { Alata, Plus_Jakarta_Sans } from "next/font/google";
+import { Inter, Plus_Jakarta_Sans } from "next/font/google";
 import { Navbar, Footer } from "@/components/layout";
 
-const alata = Alata({
-  weight: "400",
+const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-alata",
+  variable: "--font-inter",
   display: "swap",
 });
 
@@ -29,7 +28,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${alata.variable} ${jakarta.variable} font-alata font-medium antialiased text-zinc-900 min-h-full leading-normal`}
+        className={`${inter.variable} ${jakarta.variable} font-inter antialiased text-zinc-900 min-h-full leading-normal`}
       >
         <Navbar />
         {children}

apps/website/src/app/page.tsx

@@ -3,9 +3,9 @@ import {
   Features,
   About,
   Benefits,
-  RegistrationRole,
   Cta,
   Faqs,
+  ParterWithUs,
 } from "../components/segments";
 
 export default function Page() {
@@ -15,7 +15,7 @@ export default function Page() {
       <Features />
       <About />
       <Benefits />
-      <RegistrationRole />
+      <ParterWithUs />
       <Cta />
       <Faqs />
     </main>

apps/website/src/app/partners/businesses/page.tsx

@@ -0,0 +1,62 @@
+import { Input, PartnerTitle } from "@/components/shared";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+
+export const metadata = {
+  title: "Partners - Sahil App",
+  description:
+    "We foster a culture of partnership and building strong, collaborative relationships. Partner with Sahil. Sahil logistics.",
+};
+
+export default function BusinessesPage() {
+  return (
+    <>
+      <div className="mt-16 w-full max-w-xl mx-auto px-8 md:px-0 md:mt-20">
+        <PartnerTitle 
+          title="Businesses"
+          description="Join 100+ businesses (retailers) working with Sahil. Work with trusted suppliers to reduce costs and focus on serving your customers"
+        />
+        <form>
+          <div className="flex flex-col space-y-8">
+            <Input 
+              type="text"
+              label="Name"
+              placeholder="John Doe"
+              required={true}
+            />
+            <div className="grid md:grid-cols-2 gap-3">
+              <Input 
+                type="email"
+                label="Email"
+                placeholder="[email protected]"
+                required={true}
+              />
+              <Input 
+                type="phone"
+                label="Phone Number (optional)"
+                placeholder="070*****00"
+                required={false}
+              />
+            </div>
+            <Input 
+              type="text"
+              label="Company Name"
+              placeholder="Sunset Restaurant"
+              required={true}
+            />
+          </div>
+          <div className="buttonss mt-8 flex items-center md:justify-end">
+            <button
+              type="submit" 
+              className="group btn btn-primary font-medium text-white rounded-full" 
+            >
+              Submit
+              <span className="relative group flex justify-center items-center rounded-full">
+                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+              </span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}

apps/website/src/app/partners/couriers/page.tsx

@@ -0,0 +1,59 @@
+import { Input, PartnerTitle, Select } from "@/components/shared";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+
+export const metadata = {
+  title: "Partners - Sahil App",
+  description:
+    "We foster a culture of partnership and building strong, collaborative relationships. Partner with Sahil. Sahil logistics.",
+};
+
+export default function CouriersPage() {
+  return (
+    <>
+      <div className="mt-16 w-full max-w-xl mx-auto px-8 md:px-0 md:mt-20">
+        <PartnerTitle 
+          title="Couriers"
+          description="Become a courier rider at Sahil, delivery goods and packages from suppliers to businesses or directly to consumers."
+        />
+        <form>
+          <div className="flex flex-col space-y-8">
+            <Input 
+              type="text"
+              label="Name"
+              placeholder="John Doe"
+              required={true}
+            />
+            <div className="grid md:grid-cols-2 gap-3">
+              <Input 
+                type="email"
+                label="Email"
+                placeholder="[email protected]"
+                required={true}
+              />
+              <Input 
+                type="phone"
+                label="Phone Number (optional)"
+                placeholder="070*****00"
+                required={false}
+              />
+            </div>
+            <Select 
+              label="Do you own a vehicle?"
+            />
+          </div>
+          <div className="buttonss mt-8 flex items-center md:justify-end">
+            <button
+              type="submit" 
+              className="group btn btn-primary font-medium text-white rounded-full" 
+            >
+              Submit
+              <span className="relative group flex justify-center items-center rounded-full">
+                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+              </span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}

apps/website/src/app/partners/page.tsx

@@ -0,0 +1,27 @@
+import { 
+  Benefits, 
+  Cta,  
+  ParterWithUs
+} from "@/components/segments";
+import { PageTitle } from "@/components/shared";
+
+export const metadata = {
+  title: "Partners - Sahil App",
+  description:
+    "We foster a culture of partnership and building strong, collaborative relationships. Partner with Sahil. Sahil logistics.",
+};
+
+export default function PartnersPage() {
+  return (
+    <>
+      <PageTitle
+        subtitle="Partners"
+        title="Work with Us"
+        description="We foster a culture of partnership and building strong, collaborative relationships."
+      />
+      <ParterWithUs />
+      <Benefits />
+      <Cta />
+    </>
+  );
+}