Merge pull request #366 from OWK50GA/feat/HNG-36-external-static-page…

…=pricing-page-payment-page

Feat/hng 36 external static page=pricing page payment page

app/components/BreadCrumbs.tsx

@@ -0,0 +1,125 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  forwardRef,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "~/lib/utils/cn";
+
+const Breadcrumb = forwardRef<
+  HTMLElement,
+  ComponentPropsWithoutRef<"nav"> & {
+    separator?: ReactNode;
+  }
+>(({ ...properties }, reference) => (
+  <nav ref={reference} aria-label="breadcrumb" {...properties} />
+));
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<
+  HTMLOListElement,
+  ComponentPropsWithoutRef<"ol">
+>(({ className, ...properties }, reference) => (
+  <ol
+    ref={reference}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-xs text-foreground sm:gap-3",
+      className,
+    )}
+    {...properties}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<
+  HTMLLIElement,
+  ComponentPropsWithoutRef<"li">
+>(({ className, ...properties }, reference) => (
+  <li
+    ref={reference}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...properties}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...properties }, reference) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={reference}
+      className={cn(
+        "text-breadcrumb-foreground hover:text-neutral-dark-2 capitalize transition-colors",
+        className,
+      )}
+      {...properties}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<
+  HTMLSpanElement,
+  ComponentPropsWithoutRef<"span">
+>(({ className, ...properties }, reference) => (
+  <span
+    ref={reference}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("text-breadcrumb-page/50 font-normal capitalize", className)}
+    {...properties}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...properties
+}: ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("text-breadcrumb-page [&>svg]:size-3.5", className)}
+    {...properties}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...properties
+}: ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...properties}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

app/components/PaymentForm.tsx

@@ -57,7 +57,7 @@ const PaymentForm = (properties: PaymentFormProperties) => {
             name="radioGroup"
             id=""
             value={"Debit/Credit Card"}
-            className="h-5 w-5 border accent-primary checked:bg-white"
+            className="h-5 w-5 border bg-white checked:border-primary checked:accent-primary"
           />
           <label htmlFor="">Debit/Credit Card</label>
         </div>

app/components/PricingPaymentBreadCrumb.tsx

@@ -0,0 +1,40 @@
+import { ChevronRight } from "lucide-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "./BreadCrumbs";
+
+const PricingPaymentBreadCrumb = () => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList className="mx-auto flex w-5/6 place-items-start text-sm">
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+          <BreadcrumbSeparator>
+            <ChevronRight />
+          </BreadcrumbSeparator>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Pricing</BreadcrumbLink>
+          <BreadcrumbSeparator>
+            <ChevronRight />
+          </BreadcrumbSeparator>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#" className="text-primary">
+            Payment
+          </BreadcrumbLink>
+          <BreadcrumbSeparator>
+            <ChevronRight />
+          </BreadcrumbSeparator>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export default PricingPaymentBreadCrumb;

app/routes/faq.tsx

@@ -1,37 +1,142 @@
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, SearchIcon, SlashIcon } from "lucide-react";
 
-import QuestionForm from "~/components/faq/form";
+import Header from "~/components/ui/header";
 
-function FAQPage() {
+const items = [
+  { text: "What is EcoClean?" },
+  { text: "How does EcoClean work?" },
+  { text: "What are the key features of EcoClean?" },
+  { text: "Who can benefit from using EcoClean?" },
+  { text: "What are the system requirements for EcoClean?" },
+  { text: "How do I use EcoClean?" },
+  { text: "How do I store EcoClean?" },
+  { text: "How much does EcoClean cost?" },
+  { text: "Are there any discounts available?" },
+];
+
+function Faq() {
   return (
-    <div className="font-inter bg-white px-6 pb-16 pt-11 md:px-20 md:pt-9 lg:px-24 xl:px-32">
-      <div className="flex flex-col-reverse gap-20 md:flex-col">
-        <ul className="flex items-center gap-3 pl-2 text-xs capitalize leading-4 md:pl-0 md:text-base md:leading-5">
-          <li className="text-[#7D7D7D]">Contact us</li>
-          <span>
-            <ChevronRight className="size-3 text-[#6A6A6A] md:size-4" />
-          </span>
-          <li className="text-primary">FAQ</li>
-        </ul>
-        <div className="text-center">
-          <h2 className="text-[28px] font-bold leading-8 text-[#525252] md:text-6xl">
+    <div className="bg-white">
+      <Header />
+      <section className="mx-auto w-full p-2 md:w-[900px] lg:w-[1200px]">
+        <div className="hidden text-[16px] font-normal text-[#000000] md:block">
+          <p className="flex items-center space-x-2">
+            <a href="/contact" className="opacity-50">
+              Contact us
+            </a>
+            <SlashIcon className="h-[12px] w-[12px] opacity-50" />
+            <span className="font-normal text-[#F97316]"> FAQ</span>
+          </p>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-[12px] p-20 px-4 text-center text-[#525252]">
+          <h1 className="text-[34px] font-bold md:text-[48px] lg:text-[60px]">
             Frequently asked questions
-          </h2>
-          <h6 className="mt-2.5 text-lg font-medium leading-5 text-[#525252] md:mt-3 md:text-[28px] md:leading-8">
+          </h1>
+          <p className="text-[18px] font-normal md:text-[24px] lg:text-[28px]">
             Questions you might ask about our product
-          </h6>
+          </p>
+        </div>
+
+        <div className="p-5 text-[12px] font-normal text-[#000000] md:hidden">
+          <p className="flex items-center space-x-2">
+            <a href="/contact" className="opacity-50">
+              Contact us
+            </a>
+            <ChevronRight className="h-[12px] w-[12px] opacity-50" />
+            <span className="font-normal text-[#F97316]"> faq</span>
+          </p>
+        </div>
+
+        <div className="mx-auto my-5 flex h-[44px] w-full items-center gap-[12px] rounded-[32px] border-[1px] border-[#CBD5E1] bg-white px-3 md:w-[470px]">
+          <SearchIcon className="h-[16px] w-[16px] text-[#525252]" />
+          <input
+            className="flex-1 border-none px-1 text-[12px] outline-none md:text-[14px] lg:text-[16px]"
+            type="text"
+            placeholder="What do you want to know about?"
+          />
+        </div>
+      </section>
+
+      <section className="flex h-auto w-full items-center justify-center gap-[10px] bg-[#FAFAFA] px-4 py-8">
+        <div className="mx-auto grid w-full grid-cols-1 gap-x-4 gap-y-5 md:w-[900px] md:grid-cols-2 md:gap-x-7 lg:w-[1200px] lg:grid-cols-3 lg:gap-x-7">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="flex h-[128px] w-full items-center justify-between bg-[#FFFFFF] p-4 md:p-6 lg:p-10"
+            >
+              <h2 className="text-[16px] font-medium leading-loose text-[#0F172A] md:text-[18px] lg:text-[20px]">
+                {item.text}
+              </h2>
+              <ChevronDown className="h-4 w-6 md:h-4 md:w-8" />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="mx-auto w-full px-4 py-8 lg:w-[676px]">
+        <div className="pb-8 text-center md:pb-12 lg:pb-16">
+          <h3 className="text-[24px] font-bold text-[#F97316] md:text-[28px]">
+            Still have questions?
+          </h3>
+          <p className="text-[16px] font-normal text-[#525252] md:text-[18px]">
+            Fill the form and enter your message
+          </p>
+        </div>
+        <form
+          className="space-y-4 text-[20px] font-normal text-[#434343] md:space-y-3"
+          method="post"
+          action="/your-action-route"
+        >
+          <div>
+            <label className="block py-2" htmlFor="email">
+              Email
+            </label>
+            <input
+              className="h-[48px] w-full rounded-[8px] border-[1px] p-[12px] text-[14px] outline-none hover:border-[#F97316] md:h-[64px] md:p-[16px] md:text-[18px]"
+              type="email"
+              id="email"
+              name="email"
+              placeholder="Enter email address"
+              required
+            />
+          </div>
+          <div>
+            <label className="block py-2" htmlFor="name">
+              Name
+            </label>
+            <input
+              className="h-[48px] w-full rounded-[8px] border-[1px] p-[12px] text-[14px] outline-none hover:border-[#F97316] md:h-[64px] md:p-[16px] md:text-[18px]"
+              type="text"
+              id="name"
+              name="name"
+              placeholder="Enter full name"
+              required
+            />
+          </div>
+          <div>
+            <label className="block py-2" htmlFor="message">
+              Message
+            </label>
+            <textarea
+              className="h-[160px] w-full rounded-[8px] border-[1px] p-[12px] text-[14px] outline-none hover:border-[#F97316] md:h-[204px] md:p-[16px] md:text-[18px]"
+              id="message"
+              name="message"
+              placeholder="Message..."
+              required
+            ></textarea>
+          </div>
+        </form>
+        <div className="mt-20">
+          <button
+            className="h-[48px] w-full rounded-md bg-[#F97316] text-[16px] font-normal text-white md:h-[60px] md:text-[18px]"
+            type="submit"
+          >
+            Send
+          </button>
         </div>
-      </div>
-      <div className="mt-12 md:mt-36">
-        <h2 className="text-center text-6xl leading-[1.2]">
-          Search Component Goes here
-        </h2>
-      </div>
-      <div className="mt-11 bg-white md:mt-7">
-        <QuestionForm />
-      </div>
+      </section>
     </div>
   );
 }
 
-export default FAQPage;
+export default Faq;

app/routes/pricing.payment.tsx

@@ -2,17 +2,21 @@ import { useState } from "react";
 
 import DetailsForm from "~/components/DetailsForm";
 import PaymentForm from "~/components/PaymentForm";
+import PricingPaymentBreadCrumb from "~/components/PricingPaymentBreadCrumb";
 
 const Payment = () => {
   const [showSecondForm, setShowSecondForm] = useState(false);
 
   return (
     <div>
+      <div className="mx-auto w-full">
+        <PricingPaymentBreadCrumb />
+      </div>
       <div className="max-w-screen mx-auto flex justify-between gap-20 bg-[#ffffff]">
         <div className="mx-auto flex w-10/12 flex-col gap-6 py-[5%] md:flex-row md:justify-between">
           <div className="w-full">
             <h2 className="mb-4">Order Details</h2>
-            <div className="w-full rounded bg-[#ffffff] px-6 py-3">
+            <div className="w-full rounded bg-[#fff] px-6 py-3">
               <h2 className="text-lg font-semibold">Basic Plan</h2>
               <div className="flex justify-between leading-loose md:w-full">
                 <span className="leading-loose">Monthly Subscription</span>