"use client"
import { Button } from '@/components/ui/button'
import React, { useEffect, useState } from 'react'
import { motion } from 'motion/react'
import { IconArrowNarrowRight, IconPhoneCall } from '@tabler/icons-react'

const LaunchPage = () => {
  const titles = ["beautiful", "amazing", "wonderful", "fantastic", "marvelous"]
  const [titleNumber, setTitleNumber] = useState(0)

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (titleNumber == titles.length - 1) {
        setTitleNumber(0)
      } else {
        setTitleNumber(titleNumber + 1)
      }
    }, 2000)
    return () => clearTimeout(timeoutId)
  }, [titleNumber, titles])

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      className='flex flex-col items-center justify-center space-y-10'>
      <div className='bg-neutral-200/50 px-3 py-1 rounded-sm text-neutral-900 flex items-center gap-2 dark:bg-neutral-700/50 dark:text-neutral-100'>
        Read our launch article <IconArrowNarrowRight size={16} />
      </div>
      <div className='flex flex-col gap-2 items-center justify-center'>
        <div className='text-7xl tracking-tight'>This is something</div>
        <div className='text-6xl font-bold relative flex items-center justify-center overflow-hidden w-full'>
          &nbsp;
          {titles.map((title, index) => (
            <motion.span
              key={index}
              initial={{ opacity: 0, y: "-100%" }}
              animate={
                titleNumber == index
                  ? { opacity: 1, y: 0 }
                  : { y: titleNumber > index ? -150 : 150, opacity: 0 }
              }
              transition={{ type: "spring", stiffness: 50 }}
              className='absolute text-center'
            >{title}</motion.span>
          ))}
        </div>
      </div>
      <div className='text-neutral-600 text-lg text-center dark:text-neutral-300/70 leading-relaxed tracking-tight max-w-2xl'>
        Managing a small business today is already tough. Avoid further complications by ditching outdated, tedious trade methods. Our goal is to streamline SMB trade, making it easier and faster than ever.
      </div>
      <div className='flex gap-2'>
        <Button variant="secondary" className='border'>
          Jump on a call <IconPhoneCall size={16} />
        </Button>
        <Button>
          Read up here <IconArrowNarrowRight size={16} />
        </Button>
      </div>
    </motion.div>
  )
}

export default LaunchPage
Launch Page

Installation
