added styling for cards, and more

src/app/header/header.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 export default function Header() {
   return (
-    <div className="header-bg-gradient-radial-right flex h-[80px] w-[100vw] flex-col items-center  text-center ">
+    <div className="header-bg-gradient-radial-right flex h-[80px]  flex-col items-center  text-center ">
       <div className="flex h-[100%] w-[75%]  flex-row items-center justify-between  text-center">
         <Link href="/home" className="flex h-[36px] flex-row items-end justify-end text-end">
           <p className="nav-text-logo"> 2D/G/TS</p>

src/app/home/components/cards.tsx

@@ -1,5 +1,32 @@
 import React from 'react';
 
-export default function cards() {
-  return <div className="w-[100%] "></div>;
+import Image from 'next/image';
+
+export default function Cards() {
+  return (
+    <div className="flex h-[840px] w-[100%] flex-col  items-center justify-center bg-white">
+      <div className="ga-[32px]  flex h-[540px] w-[75%] flex-col justify-between bg-black">
+        <h1 className=" m-0 p-0 font-Barlow text-[48px] font-bold">De nieuwste blogs</h1>
+        <div className=" flex flex-row items-center justify-center gap-[31px] text-center">
+          <div className=" flex h-[442px] w-[349px] flex-col gap-[24px] bg-slate-500 text-start">
+            <Image src="" alt="card image" className="h-[240px] w-[100%] rounded-[6px]" />
+            <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="h-[442px] w-[349px] bg-white"></div>
+          <div className="h-[442px] w-[349px] bg-white"></div>
+        </div>
+      </div>
+    </div>
+  );
 }

src/app/home/page.tsx

@@ -4,24 +4,30 @@ import Image from 'next/image';
 
 import HomeBanner from 'public/Home_Banner.png';
 
+import Cards from './components/cards';
+
 export default function body() {
   return (
-    <div className=" mt-[1px] flex h-[600px]  flex-col items-center justify-center gap-2 overflow-hidden border-t-2 border-white text-center">
-      <Image
-        src={HomeBanner}
-        alt="Home Banner"
-        className="  -z-20 h-[100%] w-[100%] bg-center object-cover"
-      />
-      <div className=" absolute flex w-[100%] flex-col items-center justify-center gap-[32px] text-center">
-        <h1 className=" z-10  w-[60%] font-Barlow text-[72px] font-bold leading-[72px] text-white">
-          WELCOME TO THE 2DIGITS CASE!
-        </h1>
-        <p className="w-[70%] text-[18px] font-bold leading-[24px]">
-          This case dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Magnis dis parturient montes nascetur ridiculus mus mauris
-          vitae ultricies. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus.
-        </p>
+    <div>
+      <div className=" mt-[1px] flex h-[600px]  flex-col items-center justify-center gap-2 overflow-hidden border-t-2 border-white text-center">
+        <Image
+          src={HomeBanner}
+          alt="Home Banner"
+          className="  -z-20 h-[100%] w-[100%] bg-center object-cover"
+        />
+        <div className=" absolute flex w-[100%] flex-col items-center justify-center gap-[32px] text-center">
+          <h1 className=" z-10  w-[60%] font-Barlow text-[72px] font-bold leading-[72px] text-white">
+            WELCOME TO THE 2DIGITS CASE!
+          </h1>
+          <p className="w-[70%] text-[18px] font-bold leading-[24px]">
+            This case dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna aliqua. Magnis dis parturient montes nascetur ridiculus mus
+            mauris vitae ultricies. Commodo odio aenean sed adipiscing diam donec adipiscing
+            tristique risus.
+          </p>
+        </div>
       </div>
+      <Cards />
     </div>
   );
 }