import HeroSection from "@/components/hero-section";  
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 (
    <>
        <HeroSection />
        <PicWithText {...picWithText} />
        
        <div className="w-full m-auto">
          <ContentCardCarousel cards={contentCards} />
        </div>
    </>
  )
}