Skip to content

Commit

Permalink
Merge branch 'clean' of https://github.com/hngprojects/hng_boilerplat…
Browse files Browse the repository at this point in the history 
…e_nextjs into Vxrcel-clean
  • Loading branch information
@kleenpulse
kleenpulse committed Jul 25, 2024
2 parents 280b61e + b3286e0 commit 25f90f7
Show file tree
Hide file tree
Showing 9 changed files with 208 additions and 48 deletions.
70 changes: 35 additions & 35 deletions src/app/(landing-routes)/career/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ const JobDetails = () => {
</h1>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<h3 className="mt-4 text-[18px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
<h3 className="mt-4 text-[16px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
Job Description
</h3>
<p className="text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
We are looking for a talented and passionate Product Designer
to join our dynamic team. As a Product Designer at the
Company, you will play a critical role in shaping the user
Expand All @@ -66,64 +66,64 @@ const JobDetails = () => {
</p>
</div>
<div className="flex flex-col gap-2">
<h3 className="text-[18px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
<h3 className="text-[16px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
Key Responsibilities
</h3>
<ul className="styled-list list-disc pl-8">
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Conduct user research and gather insights to inform design
decisions
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Create wireframes, prototypes, and high-fidelity mockups for
new features and product enhancements
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Collaborate with the product team to define design
requirements and ensure alignment with business objectives
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Develop and maintain design systems to ensure consistency
across all products
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Conduct usability testing and iterate on designs based on
user feedback
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Stay up-to-date with industry trends and best practices in
design and user experience
</li>
</ul>
</div>
<div className="flex flex-col gap-2">
<h3 className="text-[18px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
<h3 className="text-[16px] font-bold text-neutral-dark-1 md:text-[25px] md:text-neutral-dark-2">
Qualifications
</h3>
<ul className="styled-list list-disc pl-8">
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Bachelor&apos;s degree in Design, Human-Computer
Interaction, or a related field
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
3+ years of experience in product design or a similar role
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Proficiency in design tools such as Figma, Sketch, Adobe XD,
or similar
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Strong portfolio showcasing your design process,
problem-solving skills, and final products
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Excellent communication and collaboration skills
</li>
<li className="mb-3 text-[18px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Ability to think critically and solve complex design
challenges
</li>
<li className="text-[18px] font-normal text-neutral-dark-1 md:text-neutral-dark-2">
<li className="text-[16px] font-normal text-neutral-dark-1 md:text-neutral-dark-2">
Knowledge of HTML, CSS, and JavaScript is a plus
</li>
</ul>
Expand All @@ -133,73 +133,73 @@ const JobDetails = () => {
</div>
<div className="col-span-1 flex flex-col gap-5 self-start xl:ml-[6rem]">
<div className="flex max-w-[282px] flex-col items-start justify-start rounded-sm border border-stroke-colors-stroke px-6 py-6 sm:max-w-full">
<h5 className="mb-3 text-[18px] font-semibold text-neutral-dark-1 md:md:text-neutral-dark-2">
<h5 className="mb-3 text-[16px] font-semibold text-neutral-dark-1 md:md:text-neutral-dark-2">
About the job
</h5>

<div className="mb-2 flex flex-col">
<p className="text-[16px] text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] text-neutral-dark-1 md:text-neutral-dark-2">
<b> Deadline</b>
</p>
<p className="text-[16px] md:text-neutral-dark-2">
<p className="text-[14px] md:text-neutral-dark-2">
July 19th, 2024
</p>
</div>

<div className="mb-2 flex flex-col">
<p className="text-[16px] text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] text-neutral-dark-1 md:text-neutral-dark-2">
<b>Work mode</b>
</p>
<p className="text-[16px] md:text-neutral-dark-2">On-site</p>
<p className="text-[14px] md:text-neutral-dark-2">On-site</p>
</div>

<div className="mb-2 flex flex-col">
<p className="text-[16px] text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] text-neutral-dark-1 md:text-neutral-dark-2">
<b>Job-type</b>
</p>
<p className="text-[16px] md:text-neutral-dark-2">Internship</p>
<p className="text-[14px] md:text-neutral-dark-2">Internship</p>
</div>

<div className="mb-2 flex flex-col">
<p className="text-[16px] text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] text-neutral-dark-1 md:text-neutral-dark-2">
<b>Experience level</b>
</p>
<p className="text-[16px] md:text-neutral-dark-2">2-3years</p>
<p className="text-[14px] md:text-neutral-dark-2">2-3years</p>
</div>

<div className="mb-2 flex flex-col">
<p className="text-[16px] text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] text-neutral-dark-1 md:text-neutral-dark-2">
<b>Salary</b>
</p>
<p className="text-[16px] md:text-neutral-dark-2">$500k-$900k</p>
<p className="text-[14px] md:text-neutral-dark-2">$500k-$900k</p>
</div>
</div>

<div className="flex max-w-[282px] flex-col items-start justify-start rounded-[6px] border border-stroke-colors-stroke px-6 py-6 sm:max-w-full">
<h5 className="mb-3 text-[18px] font-semibold text-neutral-dark-1 md:text-neutral-dark-2">
<h5 className="mb-3 text-[16px] font-semibold text-neutral-dark-1 md:text-neutral-dark-2">
What we offer
</h5>
<ul className="styled-list list-disc pl-6">
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[14px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Competitive salary and benefits
</li>
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[14px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Flexible working hours and remote work options
</li>
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[14px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Opportunities for professional growth and development
</li>
<li className="mb-3 text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<li className="mb-3 text-[14px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
A collaborative and inclusive work environment
</li>
</ul>
</div>
<div className="flex max-w-[282px] flex-col items-start justify-start rounded-[6px] border border-stroke-colors-stroke px-6 py-6 sm:max-w-full">
<h5 className="mb-3 text-[18px] font-semibold text-neutral-dark-1 md:text-neutral-dark-2">
<h5 className="mb-3 text-[16px] font-semibold text-neutral-dark-1 md:text-neutral-dark-2">
How to Apply
</h5>

<p className="text-[16px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
<p className="text-[14px] font-normal leading-relaxed text-neutral-dark-1 md:text-neutral-dark-2">
Send your CV and cover letter to this email{" "}
<span className="font-medium text-neutral-dark-1 md:text-neutral-dark-2">
[email protected]
Expand Down
12 changes: 12 additions & 0 deletions src/app/(landing-routes)/help-center/page.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { render } from "~/test/utils";
import Page from "./page";

describe("page tests", () => {
it("should render correctly", () => {
expect.assertions(1);

render(<Page />);

expect(true).toBeTruthy();
});
});
127 changes: 127 additions & 0 deletions src/app/(landing-routes)/help-center/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
"use client";

import { Search } from "lucide-react";

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 = () => {
//

return (
<div className="w-full bg-background">
<div className="w-full bg-primary/10">
<div className="mx-auto w-full max-w-[1349px]">
<section
className="flex w-full flex-col items-center justify-center gap-4 px-6 py-[24px] text-center md:px-0 md:py-24"
aria-labelledby="help-center-heading"
>
<span
id="help-center-heading"
className="font-inter text-xl font-medium text-neutral-600"
>
Help Center
</span>
<div className="flex h-48 flex-col items-center justify-center gap-5 self-stretch">
<h1
className="text-4xl font-bold text-neutral-950 md:text-5xl lg:text-6xl"
role="heading"
aria-level={1}
>
How can we help You?
</h1>
<p className="text-center text-base font-normal text-neutral-600 md:text-lg">
Find advice and answers from our support team
</p>
<div className="group flex h-[45px] w-full items-center justify-start overflow-hidden rounded-full border border-slate-300 bg-white px-2 py-[2px] text-xs font-normal leading-none text-neutral-600 focus-within:ring-1 focus-within:ring-primary focus-within:ring-offset-0 md:w-[600px]">
<Search className="flex h-8 w-8 items-center justify-center p-1 text-muted-foreground" />
<Input
isButtonVisible={false}
className="w-full border-none bg-transparent px-2 py-2 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
type="text"
placeholder="Search on any topic..."
aria-label="Search on any topic"
/>
</div>
</div>
</section>
</div>
</div>

<div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
<section
className="flex flex-col items-center justify-start gap-7 py-24"
aria-labelledby="browse-topics-heading"
>
<span
id="browse-topics-heading"
className="mb-4 text-center text-2xl font-bold text-orange-500"
>
Browse by topics
</span>

<TopicsAccordions />
</section>

<section className="pt-12">
<div className="mb-20 grid w-full grid-cols-1 gap-y-10 lg:grid-cols-2">
<div className="flex flex-col gap-3">
<h1
className="self-stretch text-4xl font-semibold text-neutral-600"
role="heading"
aria-level={1}
>
Frequently Asked Questions
</h1>

<p className="mb-3 text-[18px] text-neutral-600">
{` We couldn’t answer your question?`}
</p>

<Button
onClick={handleButtonClickTest}
variant="outline"
className="h-[50px] w-[150px]"
size="lg"
>
Contact us
</Button>
</div>

<FaqAccordion faqs={faqData} containerClassName="px-0 py-0 " />
</div>
</section>
</div>

<div className="bg-white py-40">
<div className="mx-auto max-w-7xl px-5 text-center md:px-10 lg:px-10 xl:px-10">
<h1 className="mg-4 text-3xl font-bold text-orange-500">
Didn’t find an answer?
</h1>
<p className="mb-3 text-lg font-normal text-neutral-600">
Contact us for more inquiries and information about our services.
</p>

<Button
onClick={handleButtonClickTest}
variant="primary"
size="lg"
className="h-[50px] w-[150px]"
>
Contact Us
</Button>
</div>
</div>
</div>
);
};

export default HelpCenter;
11 changes: 9 additions & 2 deletions src/components/common/CareerCard/CareerCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Link from "next/link";
import { FC } from "react";

import { Card, CardContent, CardFooter } from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton";
import CustomButton from "../common-button/common-button";

//
interface CareerCardProperties {
Expand All @@ -20,6 +20,8 @@ const CareerCard: FC<CareerCardProperties> = ({
description,
amount,
}) => {
//

return (
<Card className="max-w-full text-foreground">
<CardContent className="pt-6">
Expand Down Expand Up @@ -55,7 +57,12 @@ const CareerCard: FC<CareerCardProperties> = ({
{amount}
<span className="font-normal">/month</span>
</span>
<CustomButton variant="primary">View Details</CustomButton>
<Link
href={`/career/${jobTitle}`}
className="rounded bg-primary px-4 py-2 text-[14px] text-background"
>
View Details
</Link>
</>
)}
</CardFooter>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Footer = () => {
{
title: "Support",
links: [
{ route: "Help center", link: "/" },
{ route: "Help center", link: "/help-center" },
{ route: "FAQ", link: "/faqs" },
{ route: "waiting list", link: "/waitlist" },
{ route: "Pricing Experience", link: "/pricing" },
Expand Down
12 changes: 8 additions & 4 deletions src/components/layouts/homepage/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import "swiper/css/scrollbar";
import Link from "next/link";

const Hero = () => {
//

return (
<div className="py-14 sm:py-20">
<div className="mx-auto max-w-7xl px-5 md:px-10">
Expand All @@ -38,10 +40,12 @@ const Hero = () => {
and optimal productivity.
</p>

<Link href="/register">
<button className="rounded bg-primary px-8 py-4 text-background">
Get Started
</button>
<Link
href="/register"
className="rounded bg-primary px-8 py-4 text-background"
data-testid="get-started"
>
Get Started
</Link>
</div>

Expand Down
Loading

0 comments on commit 25f90f7

Please sign in to comment.