added content cards and picture with text section. also added hero section

app/page.tsx

@@ -1,13 +1,26 @@
 import Image from "next/image";
 import HeroSection from "@/components/hero-section";  
+import ContentCard from "@/components/ui/content-cards";
+import PicWithText from "@/components/pic-with-text";
+
+import pictureOne from "../assets/hero-picture-1.png"
+import pictureTwo from "../assets/hero-picture-2.png"
+import pictureThree from "../assets/hero-picture-3.png"
 
 export default function Home() {
   return (
     <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-7xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <main className="flex flex-1 w-full max-w-7xl flex-col items-center justify-between py-32 px-8 bg-white dark:bg-black sm:items-start">
 
         <HeroSection />
+        <div className="flex flex-row flex-wrap justify-center m-auto">
+          <ContentCard heading="Michala Art Shop" card_text="This case study was for a small business selling artwork" button_text="click me" src={pictureOne.src}/>
+          <ContentCard heading="Athlito" card_text="This was an Ecommerce padel shop" button_text="click me" src={pictureTwo.src}/>
+          <ContentCard heading="Birchover Reclamation" card_text="This case study was for a stone yard company" button_text="click me" src={pictureThree.src}/>
+          <ContentCard heading="Michala Art Shop" card_text="This case study was for a small business selling artwork" button_text="click me" src={pictureOne.src}/>
+        </div>
+        <PicWithText />
       </main>
     </div>
-  );
+  )
 }

components/hero-section.css

@@ -2,11 +2,14 @@
 
 .hero-main {
   width: 100%;
-    height: 400px;
+  min-height: 400px;
 }
 
-.hero-left {
+.hero-picture-stack {
+  position: relative;
   width: 50%;
+  min-height: 320px;
+  flex-shrink: 0;
 }
 
 .hero-right {
@@ -15,14 +18,39 @@
 }
 
 .hero-picture {
-    border-radius: 20px;
   position: absolute;
-    width: 20%;
+  left: 50%;
+  top: 50%;
+  width: 70%;
+  max-width: 280px;
+  height: auto;
+  border-radius: 20px;
+  object-fit: cover;
+  transform: translate(-50%, -50%);
+}
+
+.hero-picture--tilt-20 {
+  transform: translate(-50%, -50%) rotate(20deg);
+}
+
+.hero-picture--tilt-40 {
+  transform: translate(-50%, -50%) rotate(40deg);
 }
 
 @media (max-width: 750px) {
+  .hero-picture-stack {
+    width: 100%;
+    min-height: 260px;
+  }
+
+  .hero-picture {
+    width: 75%;
+    max-width: 240px;
+  }
+
   .hero-right {
     width: 100%;
-        padding-top: 20px;
+    padding-left: 0;
+    padding-top: 60px;
   }
 }

components/hero-section.tsx

@@ -8,10 +8,10 @@ export default function HeroSection() {
     return(
         <>
             <div className="hero-main flex flex-wrap">
-                <div className="grid grid-cols-1 grid-rows-1 p-4 w-1/2">
-                    <img className="not-last-of-type:col-start-1 row-start-1 w-full h-auto object-cover hero-picture" src={heroPictureOne.src}/>
-                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-20" src={heroPictureTwo.src}/>
-                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-40" src={heroPictureThree.src}/>
+                <div className="hero-picture-stack p-4">
+                    <img className="hero-picture" src={heroPictureOne.src} alt="" />
+                    <img className="hero-picture hero-picture--tilt-20" src={heroPictureTwo.src} alt="" />
+                    <img className="hero-picture hero-picture--tilt-40" src={heroPictureThree.src} alt="" />
                 </div>
                 <div className="hero-right">
                     <h1 className="mb-4 text-5xl font-bold text-heading md:text-6xl lg:text-7xl"><span className="text-transparent bg-clip-text bg-gradient-to-r bg-violet-800 from-sky-400">Sculpted Arc</span><br/> Web Solutions</h1>

components/pic-with-text.tsx

@@ -0,0 +1,27 @@
+import picOne from "../assets/hero-picture-1.png";
+
+export default function PicWithText(){
+    return (
+        <div className="flex flex-col md:flex-row items-center md:items-start gap-8 w-full mt-10">
+            <div className="w-full md:w-1/2 shrink-0">
+                <img
+                    className="w-full h-auto rounded-2xl object-cover"
+                    src={picOne.src}
+                    alt=""
+                />
+            </div>
+            <div className="w-full md:w-1/2">
+                <h1 className="mb-4 text-5xl font-bold">Title of this section</h1>
+                <p className="text-lg font-normal text-body lg:text-xl">This is the paragraph for this section. This is also just random filler text to see how things look. here are some extra words htat make no sence!</p>
+                <div className="flex items-center w-full my-8">
+                    <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
+                    <div className="px-3">
+                        <svg className="w-6 h-6 text-neutral-400 dark:text-neutral-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
+                    </div>
+                    <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
+                </div>
+                <p>This is more text, however, this is actually a quote, yes, a quote indeed!</p>
+            </div>
+        </div>
+    )
+}

components/ui/content-cards.tsx

@@ -2,16 +2,27 @@
 interface cardProps {
   src?: string
   button_link?: string
+  heading?: string
   button_text?: string
+  card_text?: string
 }
 
-export default function ContentCard(buttonProps: cardProps) {
+export default function ContentCard(CardProps: cardProps) {
     return (
     <>
-            <img src={buttonProps.src}></img>
-            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
-                {buttonProps.button_text}
-            </button>
+    <div className="bg-neutral-primary-soft shadow-lg shadow-blue-500/50 rounded-3xl block p-6 border-2 border-blue-500 rounded-base m-3 min-w-60 max-w-80">
+        <a href="#">
+            <img className="rounded-2xl" src={CardProps.src} alt="" />
+        </a>
+        <a href="#">
+            <h5 className="mt-6 mb-2 text-2xl font-semibold tracking-tight text-heading">{CardProps.heading}</h5>
+        </a>
+        <p className="mb-6 text-body">{CardProps.card_text}</p>
+        <a href="#" className="inline-flex rounded-3xl items-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
+            {CardProps.button_text}
+            <svg className="w-3 h-3 ms-1.5 rtl:rotate-180 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </a>
+    </div>
     </>
     )
 } 

components/ui/hr-with-text.tsx

@@ -0,0 +1,11 @@
+export default function hrWithText() {
+    return (
+    <>
+        <div className="flex items-center w-full my-4 md:my-10">
+          <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
+          <span className="px-4 text-2xl text-neutral-400 dark:text-neutral-500 select-none">scroll down</span>
+          <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
+        </div>
+    </>
+    )
+}