Gwk-Cultural-Park/components/Sections/FunctionsSection.tsx

// SECTION: FUNCTIONS
import axios from 'axios'
import Container from 'components/BlogContainer'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'
import { projectId } from 'lib/sanity.api'
import { createClient } from 'next-sanity'

const client = projectId
  ? createClient({
      projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
      dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
      apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION,
      useCdn: true,
      token: process.env.SANITY_API_READ_TOKEN,
    })
  : null

const FunctionsSection = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          '/api/homepageSection/functionsSectionData'
        )
        setData(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [])

  return (
    <Container>
      <Fade duration={2000} fraction={0} damping={0.5} triggerOnce>
        <Container>
          <div className="mb-2 grid grid-cols-3 gap-0 pt-5">
            <div className="col-span-2">
              <Fade
                direction={'up'}
                duration={700}
                fraction={1}
                delay={300}
                triggerOnce
              >
                {data.map((item) => (
                  <h2
                    key={item._id}
                    className="mb-0 pb-0 text-left font-serif text-lg font-semibold leading-tight text-yellow-500 sm:pb-0 sm:text-3xl sm:leading-tight "
                  >
                    {item.heading}
                  </h2>
                ))}
              </Fade>
              <Fade duration={3000} fraction={0} delay={1000} triggerOnce>
                {data.map((item) => (
                  <h3
                    key={item._id}
                    className="text-stone-700 dura pb-3 text-left text-2xl font-bold leading-tight tracking-normal sm:pb-0 sm:text-6xl sm:leading-normal"
                  >
                    {item.subheading}
                  </h3>
                ))}
              </Fade>
            </div>
          </div>
        </Container>

        <div className="mx-auto w-full">
          <div className="">
            <Fade duration={700} fraction={0} delay={1000} triggerOnce cascade>
              <div className="bg-slate-100 relative w-full">
                {data.map((item) => (
                  <Link key={item._id} href={item.url}>
                    <Image
                      key={item._id}
                      src={item.mainImage}
                      alt={item.mainimage.alt}
                      width={1440}
                      height={600}
                      sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                      quality={75}
                      placeholder="empty"
                      className="duration-500 ease-in-out hover:contrast-125 hover:transition"
                    />
                  </Link>
                ))}
              </div>
            </Fade>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-0 sm:grid-cols-3">
          <Fade duration={700} fraction={0} delay={1000} triggerOnce cascade>
            {/* BANNER 1 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerSatu.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerSatuImgURL}
                    alt={item.bannerSatu.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerSatu.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerSatu.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>
            {/* BANNER 2 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerDua.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerDuaImgURL}
                    alt={item.bannerDua.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerDua.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerDua.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>

            {/* BANNER 3 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerTiga.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerTigaImgURL}
                    alt={item.bannerTiga.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerTiga.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerTiga.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>
          </Fade>
        </div>
      </Fade>
    </Container>
  )
}

export default FunctionsSection