Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home page #2

Merged
merged 15 commits into from
May 17, 2024
Merged

Home page #2

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4774d6d
added few files and folders for the routing
Ameer2000Mzori May 16, 2024
4692108
added gradient to the header
Ameer2000Mzori May 16, 2024
cd2ecc7
added more styling
Ameer2000Mzori May 16, 2024
861b6bf
added header logo
Ameer2000Mzori May 16, 2024
844c724
added few other files
Ameer2000Mzori May 16, 2024
5489c18
added small changes and border
Ameer2000Mzori May 16, 2024
15ffe07
added fixed more styling in home page
Ameer2000Mzori May 17, 2024
345cd20
added styling for cards, and more
Ameer2000Mzori May 17, 2024
cf83db3
added footer with styling and added more changes to the card
Ameer2000Mzori May 17, 2024
bd6325b
changed the hero and added hero component witch is reuseable and adde…
Ameer2000Mzori May 17, 2024
2a49d91
added few other changes
Ameer2000Mzori May 17, 2024
735bb2c
added the card data inside the card file
Ameer2000Mzori May 17, 2024
49defc9
added more cards for example
Ameer2000Mzori May 17, 2024
6225298
changed names and fixed imports
Ameer2000Mzori May 17, 2024
3de2e90
changed images import typing
Ameer2000Mzori May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added more cards for example
  • Loading branch information
@Ameer2000Mzori
Ameer2000Mzori committed May 17, 2024
commit 49defc98e029a040ecaa0694f23ae5fffaf0305f
80 changes: 64 additions & 16 deletions src/app/home/components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,76 @@ import cardImg from 'public/card_Img.png';

export default function Card() {
return (
<div className=" flex h-[440px] w-[349px] cursor-pointer flex-col gap-[24px] text-start">
<div className=" relative h-[240px] w-[100%] overflow-hidden rounded-[6px] bg-black">
<Image src={cardImg} alt="card image" className=" -z-10 h-[100%] w-[100%] object-cover" />
<div className=" absolute bottom-[8px] left-[8px] flex h-[32px] w-[91px] flex-col items-center justify-center rounded-[4px] bg-[#EFEFF8] text-center ">
<p className=" mb-[4px] ml-[16px] mr-[16px] mt-[4px] text-[12px] font-medium leading-[24px] text-[#0E1527]">
INTERVIEW
<>
<div className=" flex h-[440px] w-[349px] cursor-pointer flex-col gap-[24px] text-start">
<div className=" relative h-[240px] w-[100%] overflow-hidden rounded-[6px] bg-black">
<Image src={cardImg} alt="card image" className=" -z-10 h-[100%] w-[100%] object-cover" />
<div className=" absolute bottom-[8px] left-[8px] flex h-[32px] w-[91px] flex-col items-center justify-center rounded-[4px] bg-[#EFEFF8] text-center ">
<p className=" mb-[4px] ml-[16px] mr-[16px] mt-[4px] text-[12px] font-medium leading-[24px] text-[#0E1527]">
INTERVIEW
</p>
</div>
</div>

<div className=" flex flex-col items-start justify-between gap-[14px] text-start">
<h2 className="h-[50px] w-[100%] font-Barlow text-[21px] font-bold leading-[23px]">
Werken bij Social Brothers, volgens developer Ryence
</h2>

<p className="h-[72px] w-[100%] text-[16px] leading-[19px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus velit id ex
vestibulum, in tristique risus tincidunt.
</p>

<button>Lees meer =</button>
</div>
</div>
<div className=" flex h-[440px] w-[349px] cursor-pointer flex-col gap-[24px] text-start">
<div className=" relative h-[240px] w-[100%] overflow-hidden rounded-[6px] bg-black">
<Image src={cardImg} alt="card image" className=" -z-10 h-[100%] w-[100%] object-cover" />
<div className=" absolute bottom-[8px] left-[8px] flex h-[32px] w-[91px] flex-col items-center justify-center rounded-[4px] bg-[#EFEFF8] text-center ">
<p className=" mb-[4px] ml-[16px] mr-[16px] mt-[4px] text-[12px] font-medium leading-[24px] text-[#0E1527]">
INTERVIEW
</p>
</div>
</div>

<div className=" flex flex-col items-start justify-between gap-[14px] text-start">
<h2 className="h-[50px] w-[100%] font-Barlow text-[21px] font-bold leading-[23px]">
Werken bij Social Brothers, volgens developer Ryence
</h2>

<p className="h-[72px] w-[100%] text-[16px] leading-[19px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus velit id ex
vestibulum, in tristique risus tincidunt.
</p>

<button>Lees meer =</button>
</div>
</div>
<div className=" flex h-[440px] w-[349px] cursor-pointer flex-col gap-[24px] text-start">
<div className=" relative h-[240px] w-[100%] overflow-hidden rounded-[6px] bg-black">
<Image src={cardImg} alt="card image" className=" -z-10 h-[100%] w-[100%] object-cover" />
<div className=" absolute bottom-[8px] left-[8px] flex h-[32px] w-[91px] flex-col items-center justify-center rounded-[4px] bg-[#EFEFF8] text-center ">
<p className=" mb-[4px] ml-[16px] mr-[16px] mt-[4px] text-[12px] font-medium leading-[24px] text-[#0E1527]">
INTERVIEW
</p>
</div>
</div>

<div className=" flex flex-col items-start justify-between gap-[14px] text-start">
<h2 className="h-[50px] w-[100%] font-Barlow text-[21px] font-bold leading-[23px]">
Werken bij Social Brothers, volgens developer Ryence
</h2>
<div className=" flex flex-col items-start justify-between gap-[14px] text-start">
<h2 className="h-[50px] w-[100%] font-Barlow text-[21px] font-bold leading-[23px]">
Werken bij Social Brothers, volgens developer Ryence
</h2>

<p className="h-[72px] w-[100%] text-[16px] leading-[19px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus velit id ex
vestibulum, in tristique risus tincidunt.
</p>
<p className="h-[72px] w-[100%] text-[16px] leading-[19px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus velit id ex
vestibulum, in tristique risus tincidunt.
</p>

<button>Lees meer =</button>
<button>Lees meer =</button>
</div>
</div>
</div>
</>
);
}