Merge pull request #673 from hngprojects/layobright-clean

Layobright clean

src/app/(landing-routes)/about-us/page.tsx

@@ -1,5 +1,25 @@
-const page = () => {
-  return <div>page</div>;
+import Blog from "~/components/layouts/aboutUs/Blog";
+import CoreValues from "~/components/layouts/aboutUs/CoreValues";
+import ExecutiveTeam from "~/components/layouts/aboutUs/ExecutiveTeam";
+import Hero from "~/components/layouts/aboutUs/Hero";
+import Join from "~/components/layouts/aboutUs/Join";
+import Mission from "~/components/layouts/aboutUs/Mission";
+import OurServices from "~/components/layouts/aboutUs/OurServices";
+import Vision from "~/components/layouts/aboutUs/Vision";
+
+const AboutUs = () => {
+  return (
+    <>
+      <Hero />
+      <Blog />
+      <OurServices />
+      <Mission />
+      <Vision />
+      <CoreValues />
+      <ExecutiveTeam />
+      <Join />
+    </>
+  );
 };
 
-export default page;
+export default AboutUs;

src/app/(landing-routes)/career/[slug]/page.tsx

@@ -24,17 +24,17 @@ const JobDetails = () => {
         { name: "Career", href: "/career" },
         {
           name: "Job Details",
-          href: "/job-details",
+          href: "/career/2",
           isCurrent: true,
           style: { color: "hsl(25, 95%, 53%)" },
         },
       ]
     : [
         { name: "Home", href: "/" },
-        { name: "Job Listings", href: "/job-listings" },
+        { name: "Job Listings", href: "/career" },
         {
           name: "Job Details",
-          href: "/job-listings/job-detail",
+          href: "/career/2",
           isCurrent: true,
         },
       ];

src/app/(landing-routes)/help-center/page.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import { Search } from "lucide-react";
+import Link from "next/link";
 
-import { Button } from "~/components/common/common-button";
 import { Input } from "~/components/common/input";
 import FaqAccordion from "~/components/layouts/accordion/FaqsAccordion";
 import TopicsAccordions from "~/components/layouts/accordion/TopicAccordion";
 import { faqData } from "~/constants/faqsdata";
 
 //
-const handleButtonClickTest = () => {
-  alert("Contact Button Click Test");
-};
 
 const HelpCenter = () => {
   //
@@ -86,14 +83,12 @@ const HelpCenter = () => {
                 {` We couldn’t answer your question?`}
               </p>
 
-              <Button
-                onClick={handleButtonClickTest}
-                variant="outline"
-                className="h-[50px] w-[150px]"
-                size="lg"
+              <Link
+                href="/contact-us"
+                className="align-center flex w-[150px] justify-center rounded-md bg-primary py-4 text-background"
               >
                 Contact us
-              </Button>
+              </Link>
             </div>
 
             <FaqAccordion faqs={faqData} containerClassName="px-0 py-0 " />
@@ -110,14 +105,12 @@ const HelpCenter = () => {
             Contact us for more inquiries and information about our services.
           </p>
 
-          <Button
-            onClick={handleButtonClickTest}
-            variant="primary"
-            size="lg"
-            className="h-[50px] w-[150px]"
+          <Link
+            href="/contact-us"
+            className="mt-4 inline-block rounded-md bg-primary px-10 py-4 text-background"
           >
-            Contact Us
-          </Button>
+            Contact us
+          </Link>
         </div>
       </div>
     </div>

src/components/common/TeamCard/teamcard.tsx

@@ -0,0 +1,90 @@
+import { Facebook, Instagram, Twitter } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
+
+interface TeamCardProperties {
+  name: string;
+  imageSrc: string;
+  imageAlt: string;
+  role: string;
+  description: string;
+  facebookURL?: string;
+  instagramURL?: string;
+  twitterURL?: string;
+}
+
+const TeamCard: React.FC<TeamCardProperties> = ({
+  name,
+  imageSrc,
+  imageAlt,
+  role,
+  description,
+  facebookURL,
+  instagramURL,
+  twitterURL,
+}) => {
+  return (
+    <Card className="flex h-[400px] w-[277px] flex-col gap-4 border-none bg-subtle shadow-none">
+      <div className="relative h-[205px] bg-neutral-300">
+        <Image
+          src={imageSrc}
+          alt={imageAlt}
+          fill={true}
+          className="object-cover"
+        />
+      </div>
+
+      <CardContent className="flex flex-col justify-between gap-5 px-[14.31px] pb-3.5">
+        <div>
+          <CardTitle className="pb-1 text-lg font-bold leading-[21.78px] text-neutral-600 md:font-semibold">
+            {name}
+          </CardTitle>
+          <p className="pb-[7.16px] text-[12.53px] leading-[15.16px] text-neutral-600">
+            {role}
+          </p>
+          <p className="md:text-normal line-clamp-3 text-sm font-medium leading-[19.36px] text-neutral-600 md:font-normal">
+            {description}
+          </p>
+        </div>
+
+        <CardFooter className="flex h-8 gap-3.5 p-0">
+          {facebookURL && (
+            <Link
+              href={facebookURL}
+              aria-label="Facebook"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <Facebook strokeWidth={1} />
+            </Link>
+          )}
+
+          {instagramURL && (
+            <Link
+              href={instagramURL}
+              aria-label="Instagram"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <Instagram strokeWidth={1} />
+            </Link>
+          )}
+          {twitterURL && (
+            <Link
+              href={twitterURL}
+              target="_blank"
+              aria-label="Twitter"
+              rel="noreferrer noopener"
+            >
+              <Twitter strokeWidth={1} />
+            </Link>
+          )}
+        </CardFooter>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TeamCard;

src/components/layouts/aboutUs/Blog.tsx

@@ -0,0 +1,44 @@
+const Blog = () => {
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10">
+        <div className="mx-auto flex flex-wrap items-center justify-around gap-5 rounded-2xl bg-[#f974161a] p-5 sm:gap-10 md:gap-20">
+          <div className="flex w-[133px] flex-col items-center justify-center text-primary max-sm:h-[72px] sm:w-[147px] md:w-[205px]">
+            <h2 className="text-[28px] font-[700] sm:text-[32px] md:text-[40px]">
+              10 years
+            </h2>
+            <p className="text-[12px] font-[500] sm:text-[14px] md:text-[18px]">
+              In Business
+            </p>
+          </div>
+          <div className="flex w-[133px] flex-col items-center justify-center text-primary max-sm:h-[72px] sm:w-[147px] md:w-[205px]">
+            <h2 className="text-[28px] font-[700] sm:text-[32px] md:text-[40px]">
+              75,000+
+            </h2>
+            <p className="text-[12px] font-[500] sm:text-[14px] md:text-[18px]">
+              Customers
+            </p>
+          </div>
+          <div className="flex w-[133px] flex-col items-center justify-center text-primary max-sm:h-[72px] sm:w-[147px] md:w-[205px]">
+            <h2 className="text-[28px] font-[700] sm:text-[32px] md:text-[40px]">
+              100k+
+            </h2>
+            <p className="text-[12px] font-[500] leading-[16px] sm:text-[14px] md:text-[18px]">
+              Monthly Blog Readers
+            </p>
+          </div>
+          <div className="flex w-[133px] flex-col items-center justify-center text-primary max-sm:h-[72px] sm:w-[147px] md:w-[205px]">
+            <h2 className="text-[28px] font-[700] sm:text-[32px] md:text-[40px]">
+              1.2m+
+            </h2>
+            <p className="text-[12px] font-[500] sm:text-[14px] md:text-[18px]">
+              Social Followers
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Blog;

src/components/layouts/aboutUs/CoreValues.tsx

@@ -0,0 +1,80 @@
+const CoreValues = () => {
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-5 py-20 md:px-10 lg:px-10 xl:px-10">
+        <div className="flex flex-col items-center justify-center">
+          <div className="mb-4 flex w-[300px] flex-col items-center sm:w-[400px] md:w-[500px]">
+            <h3 className="mb-2 text-[28px] font-[700] text-neutral-600 sm:text-[32px] md:text-[36px] lg:text-[40px] xl:text-[44px]">
+              Our Core Values
+            </h3>
+            <p className="text-center text-[14px] text-neutral-600 md:text-[16px] lg:text-[18px]">
+              Our Value shapes the core of our organization, and defines the
+              character of our industry
+            </p>
+          </div>
+
+          <div className="mt-[20px] grid w-full grid-cols-1 gap-[20px] sm:w-[500px] md:w-[750px] md:grid-cols-2 lg:w-[1000px] xl:w-[1200px]">
+            <div className="rounded-[10px] bg-[#f974161a] p-6 sm:p-8">
+              <h3
+                className="text-[18px] font-[700] text-primary sm:text-[20px] lg:text-[23px]"
+                data-testid="integrity"
+              >
+                Integrity
+              </h3>
+              <p className="text-[14px] font-[400] text-neutral-600 md:text-[16px] lg:text-[18px]">
+                We uphold the highest ethical standards in everything we do,
+                fostering trust and transparency with our clients, partners, and
+                employees. We believe that honesty and integrity are the
+                foundation of lasting success.
+              </p>
+            </div>
+
+            <div className="rounded-[10px] bg-[#f974161a] p-6 sm:p-8">
+              <h3 className="text-[18px] font-[700] text-primary sm:text-[20px] lg:text-[23px]">
+                Customer Centricity
+              </h3>
+              <p className="text-[14px] font-[400] text-neutral-600 md:text-[16px] lg:text-[18px]">
+                Our customers are at the heart of our business. We strive to
+                understand their needs, exceed their expectations, and build
+                lasting relationships based on trust and mutual respect. We
+                believe that putting our customers first is the key to long-term
+                success.
+              </p>
+            </div>
+
+            <div className="rounded-[10px] bg-[#f974161a] p-6 sm:p-8">
+              <h3
+                className="text-[18px] font-[700] text-primary sm:text-[20px] lg:text-[23px]"
+                data-testid="innovation"
+              >
+                Innovation
+              </h3>
+              <p className="text-[14px] font-[400] text-neutral-600 md:text-[16px] lg:text-[18px]">
+                We embrace a culture of continuous improvement and creativity,
+                constantly seeking new ways to evolve and enhance our products,
+                services, and processes. We encourage experimentation and
+                risk-taking, recognizing that innovation is essential for
+                growth.
+              </p>
+            </div>
+
+            <div className="rounded-[10px] bg-[#f974161a] p-6 sm:p-8">
+              <h3 className="text-[18px] font-[700] text-primary sm:text-[20px] lg:text-[23px]">
+                Excellence
+              </h3>
+              <p className="text-[14px] font-[400] text-neutral-600 md:text-[16px] lg:text-[18px]">
+                We are committed to delivering exceptional quality in everything
+                we do, from our products and services to our customer
+                interactions and internal processes. We strive for continuous
+                improvement and hold ourselves to the highest standards of
+                performance.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CoreValues;