Function ImageSection

src/showcase/blocks/features/FeaturesWIthImage.tsx:5–112

()

import React, { useState } from 'react'

const ImageSection = () => {
  const [activeImage, setActiveImage] = useState(1)

  const ImageTabs = [
    {
      name: 'UI Library',
      description:
        'Build faster. Launch sooner. Build your next project with SyntaxUI.',
      icon: <Rss />,
    },
    {
      name: 'Templates',
      description:
        'Get templates made with Next.js and Tailwind CSS for your next project.',
      icon: <BadgeDollarSign />,
    },
    {
      name: 'Ui Blocks',
      description: 'Get UI blocks and components for your next project.',
      icon: <BookOpenText />,
    },
  ]

  // Images taken from https://dashboardsdesign.com/

  const Images = [
    {
      imageNumber: 1,
      imageSource:
        'https://dashboardsdesign.com/img/dashboards/dashboard-05-custom.png',
    },
    {
      imageNumber: 2,
      imageSource:
        'https://dashboardsdesign.com/img/dashboards/dashboard-02.png',
    },
    {
      imageNumber: 3,
      imageSource:
        'https://dashboardsdesign.com/img/dashboards/dashboard-03.png',
    },
  ]

  const handleImageChange = (index: number) => {
    setActiveImage(index)
  }

  return (
    <div className="bg-white py-16">
      <div className="mx-auto max-w-2xl space-y-4 sm:text-center">
        <p className="mt-2 text-3xl font-semibold tracking-tight text-gray-800 sm:text-4xl">
          See SyntaxUI in action
        </p>
        <p className="text-md text-gray-600">
          Watch how SyntaxUI can help you get started with your project in
          seconds with our pre-built components and blocks.
        </p>
      </div>