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-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>
  )
}