improved site header, added contact form, content card carousel, footer, and more photos

app/page.tsx

@@ -1,25 +1,60 @@
-import Image from "next/image";
 import HeroSection from "@/components/hero-section";  
-import ContentCard from "@/components/ui/content-cards";
+import ContentCardCarousel from "@/components/content-card-carousel";
+import Footer from "@/components/footer";
 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"
+import logo from "../assets/milaoktasafitri-astronomy-9746537_1920.png"
+import { title } from "process";
+import { reverse } from "dns";
 
 export default function Home() {
+  const contentCards = [
+    {
+      heading: "Michala Art Shop",
+      card_text: "This case study was for a small business selling artwork",
+      button_text: "click me",
+      src: pictureOne.src
+    },
+    {
+      heading: "Athlito",
+      card_text: "This was an Ecommerce padel shop",
+      button_text: "click me",
+      src: pictureTwo.src
+    },
+    {
+      heading: "Birchover Reclamation",
+      card_text: "This case study was for a stone yard company",
+      button_text: "click me",
+      src: pictureThree.src
+    },
+    {
+      heading: "Michala Art Shop",
+      card_text: "This case study was for a small business selling artwork",
+      button_text: "click me",
+      src: pictureOne.src
+    }
+  ]
+
+  const picWithText = {
+    title: "Building a better web, one pixel at a time",
+    text: "At Sculpted Arc, we are passionate about crafting exceptional web solutions that empower businesses to thrive in the digital landscape. With a team of skilled developers and designers, we specialize in creating stunning websites that not only captivate audiences but also drive results. Whether you're a startup looking to establish your online presence or an established company seeking to revamp your website, we have the expertise to bring your vision to life. Our commitment to quality, innovation, and customer satisfaction sets us apart as a trusted partner in your web development journey.",    
+    src: logo.src,
+    reverse: false
+  }
+
   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-8 bg-white dark:bg-black sm:items-start">
+    <div className="flex min-h-screen flex-col bg-zinc-50 font-sans dark:bg-black">
+      <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-between bg-white px-8 py-32 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}/>
+        <PicWithText {...picWithText} />
+        
+        <div className="w-full m-auto">
+          <ContentCardCarousel cards={contentCards} />
         </div>
-        <PicWithText />
       </main>
     </div>
   )