Merge pull request #648 from hngprojects/layobright-clean

src/app/(landing-routes)/privacy-policy/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { Breadcrumb } from "~/components/common/breadcrumb";
+import privacyPolicyData, {
+  getTableOfContents,
+} from "~/components/layouts/Legal/PrivacyPolicy/constants/privacyPolicyData";
+import PrivacyPolicyContent from "~/components/layouts/Legal/PrivacyPolicy/PrivacyPolicyContent";
+import TableOfContent from "~/components/layouts/Legal/TableOfContent";
+import SubPageHero from "~/components/layouts/Legal/Terms&Conditions/SubPageHero";
+
+export default function PrivacyPolicy() {
+  const tableOfContents = getTableOfContents(privacyPolicyData);
+
+  useEffect(() => {
+    const scrollClasses = [
+      "scroll-smooth",
+      "scroll-pt-24",
+      "md:scroll-pt-[108px]",
+    ];
+
+    const htmlElement = document.documentElement;
+    htmlElement.classList.add(...scrollClasses);
+
+    return () => {
+      htmlElement.classList.remove(...scrollClasses);
+    };
+  }, []);
+
+  return (
+    <main className="">
+      <SubPageHero
+        heading="Privacy Policy"
+        description="Achieve your dreams with us today"
+      />
+
+      <div className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10">
+        <Breadcrumb variant="primary" />
+
+        <section className="my-[70px] flex max-w-full flex-col-reverse items-start justify-between pb-10 lg:flex-row">
+          <PrivacyPolicyContent
+            content={privacyPolicyData}
+            className="text-neutral-dark-1 lg:w-[750px]"
+          />
+
+          <TableOfContent
+            listOfContent={tableOfContents}
+            className="p-[10px] text-neutral-dark-1 max-lg:mb-14 lg:sticky lg:top-20 lg:w-[350px]"
+          />
+        </section>
+      </div>
+    </main>
+  );
+}

src/app/(landing-routes)/terms-and-conditions/page.tsx

@@ -0,0 +1,42 @@
+import { Breadcrumb } from "~/components/common/breadcrumb";
+import Main from "~/components/layouts/Legal/Terms&Conditions/Main";
+import SubPageHero from "~/components/layouts/Legal/Terms&Conditions/SubPageHero";
+
+const TermsConditions = () => {
+  return (
+    <div className="" data-testid="terms-conditions">
+      <div data-testid="subpage-hero">
+        <SubPageHero
+          heading="Terms and Conditions"
+          description="Achieve your dreams with us today"
+        />
+      </div>
+
+      <div
+        className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10"
+        data-testid="breadcrumb-container"
+      >
+        <div data-testid="breadcrumb">
+          <Breadcrumb
+            pages={[
+              { name: "Home", href: "/" },
+              { name: "Legal Terms", href: "/" },
+              {
+                name: "Terms and Conditions",
+                href: "/terms-and-conditions",
+                isCurrent: true,
+              },
+            ]}
+            variant="primary"
+          />
+        </div>
+
+        <div data-testid="main-content">
+          <Main />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermsConditions;

src/app/guides/page.tsx

@@ -3,7 +3,7 @@
 import { Orbit, Plus } from "lucide-react";
 import { FC } from "react";
 
-import CustomButton from "~/components/common/button/button";
+import CustomButton from "~/components/common/common-button/common-button";
 
 const StyleGuide: FC = () => {
   return (

src/components/layouts/Legal/PrivacyPolicy/PrivacyPolicyContent.tsx

@@ -41,7 +41,10 @@ export default function PrivacyPolicyContent({
   };
 
   return (
-    <div className={cn("space-y-6 md:space-y-10", className)}>
+    <div
+      data-testid="privacy-policy-content"
+      className={cn("space-y-6 md:space-y-10", className)}
+    >
       {content.map((section) => (
         <div key={section.id} className="space-y-[10px]">
           <h4

src/components/layouts/Legal/TableOfContent.tsx

@@ -11,7 +11,10 @@ export default function TableOfContent({
   listOfContent,
 }: TableOfContentProperties) {
   return (
-    <aside className={cn("space-y-2", className)}>
+    <aside
+      data-testid="table-of-content"
+      className={cn("space-y-2", className)}
+    >
       <h3 className="text-2xl font-bold leading-[29.05px] text-neutral-dark-1 md:text-[28px] md:leading-[33.89px]">
         Table of Content
       </h3>

src/components/layouts/Legal/Terms&Conditions/Main.tsx

@@ -38,6 +38,7 @@ const formattedDate = (date: Date) => {
 
 const Main = () => {
   const lastUpdate = new Date("2024-07-20");
+
   useEffect(() => {
     document.documentElement.style.scrollPaddingTop = "80px";
     document.documentElement.style.scrollBehavior = "smooth";
@@ -46,14 +47,14 @@ const Main = () => {
       document.documentElement.style.scrollBehavior = "";
     };
   }, []);
+
+  //
+
   return (
-    <section className="relative mx-[222px] my-[64px] max-w-full scroll-smooth text-left max-xl:mx-20 max-lg:mx-12 max-sm:mx-6">
+    <section className="relative my-[70px] scroll-smooth text-left">
       <div className="flex max-w-full flex-col-reverse items-start justify-between pb-10 lg:flex-row">
-        <div className="text-neutral-dark-1 lg:w-[612px]">
-          <div
-            className="max-w-full self-stretch xl:w-[612px]"
-            id="introduction"
-          >
+        <div className="text-neutral-dark-1 lg:w-[750px]">
+          <div className="max-w-full self-stretch" id="introduction">
             <h2 className="relative mb-[10px] self-stretch text-2xl font-bold sm:text-[28px]">
               Introduction
             </h2>

src/components/layouts/Legal/Terms&Conditions/SubPageHero.tsx

@@ -0,0 +1,25 @@
+interface SubPageHeroProperty {
+  heading?: string;
+  description?: string;
+}
+
+const SubPageHero = ({
+  heading = "Build Your Product Faster",
+  description = "Get Your Free Boilerplate Samples!",
+}: SubPageHeroProperty) => {
+  return (
+    <div
+      data-testid="subpage-hero"
+      className="relative box-border flex h-[13.438rem] w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-black px-[0rem] py-[4.687rem] text-center text-[2rem] text-white md:h-[20.25rem] md:text-[2.75rem] lg:text-[3.75rem]"
+    >
+      <div className="flex flex-col items-center justify-start gap-[0.25rem]">
+        <b className="relative">{heading}</b>
+        <div className="relative self-stretch text-[1.25rem] md:text-[1.75rem]">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubPageHero;

src/components/layouts/Legal/Terms&Conditions/TableOfContents.tsx

@@ -9,7 +9,7 @@ interface ContentProperties {
 
 const TableOfContents = () => {
   return (
-    <div className="p-[10px] text-neutral-dark-1 max-lg:mb-14 lg:sticky lg:top-20 lg:w-[282px]">
+    <div className="p-[10px] text-neutral-dark-1 max-lg:mb-14 lg:sticky lg:top-20 lg:w-[350px]">
       <h2 className="text-2xl font-bold sm:text-[28px]">Table of Contents</h2>
       <ul className="pl-6">
         {Contents.map((list: ContentProperties) => (

src/components/layouts/footer/index.tsx

@@ -29,15 +29,15 @@ const Footer = () => {
         { route: "Help center", link: "/" },
         { route: "FAQ", link: "/faqs" },
         { route: "waiting list", link: "/waitlist" },
-        { route: "Pricing Experience", link: "/" },
-        { route: "Contact Us", link: "/contact-us" },
+        { route: "Pricing Experience", link: "/pricing" },
+        { route: "Contact Us", link: "/" },
       ],
     },
     {
       title: "Legal",
       links: [
-        { route: "Privacy Policy", link: "/" },
-        { route: "Terms and condition", link: "/" },
+        { route: "Privacy Policy", link: "/privacy-policy" },
+        { route: "Terms and condition", link: "/terms-and-conditions" },
       ],
     },
   ];