Stats Section

'use client'
import React from 'react'
import { motion } from 'motion/react'

const stats = [
  { label: 'Founded', value: '2023' },
  { label: 'Remote', value: '100%' },
  { label: 'Capital', value: '$2.5M' },
  { label: 'Partners', value: '50+' },
]

export const StatsSection = () => {
  return (
    <section className="py-32 px-6 bg-neutral-950 text-white min-h-screen relative">
      <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,255,255,0)_40%,rgba(102,51,238,1)_100%)] pointer-events-none"></div>
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-24 items-center ">
          <div className="space-y-10">
            <span className="inline-flex px-4 py-1.5 text-xs font-semibold border border-zinc-800 rounded-full text-zinc-500 uppercase tracking-[0.2em] bg-zinc-900/50">
              Agency Metrics
            </span>
            <h2 className="text-6xl md:text-7xl font-bold font-dmSans tracking-tighter text-balance leading-none">
              Our Existence <br />
              <span className="text-zinc-600">Explained.</span>
            </h2>
            <div className="grid grid-cols-2 gap-x-12 gap-y-16 pt-12">
              {stats.map((stat, i) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, x: -10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{
                    duration: 0.3,
                    delay: i * 0.05,
                    ease: 'easeOut',
                  }}
                >
                  <div className="text-5xl font-semibold mb-2 tracking-tighter">
                    {stat.value}
                  </div>
                  <div className="text-sm font-medium text-zinc-500 uppercase tracking-widest">
                    {stat.label}
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          <div className="relative group">
            <div className="absolute -inset-20 bg-linear-to-tr from-white/15 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-1000 blur-3xl pointer-events-none" />
            <div className="space-y-8 relative z-10">
              <p className="text-xl md:text-2xl text-zinc-400 leading-relaxed text-pretty font-medium">
                We recognized a demand for solutions that empower enterprises to
                distill exponential information into its purest and most
                simplistic form.
              </p>
              <div className="h-px w-20 bg-zinc-800" />
              <p className="text-lg text-zinc-500 leading-relaxed text-pretty">
                Looking at the market, we encountered software solutions that
                struggled to handle considerable, ever-changing data
                complexities. We saw tools that needed to be faster, more
                convenient, and more precise for effective deployment.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

import type { Variants } from 'motion/react';
import { type HTMLMotionProps, motion, useInView } from 'motion/react';
import type React from 'react';

type TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {
  children?: React.ReactNode;
  animationNum: number;
  className?: string;
  timelineRef: React.RefObject<HTMLElement | null>;
  as?: T;
  customVariants?: Variants;
  once?: boolean;
} & HTMLMotionProps<T>;

export const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({
  children,
  animationNum,
  timelineRef,
  className,
  as,
  customVariants,
  once = true,
  ...props
}: TimelineContentProps<T>) => {
  const defaultSequenceVariants = {
    visible: (i: number) => ({
      filter: 'blur(0px)',
      y: 0,
      opacity: 1,
      transition: {
        delay: i * 0.5,
        duration: 0.5,
      },
    }),
    hidden: {
      filter: 'blur(20px)',
      y: 0,
      opacity: 0,
    },
  };

  const sequenceVariants = customVariants || defaultSequenceVariants;

  const isInView = useInView(timelineRef, {
    once,
  });

  const MotionComponent = motion[as || 'div'] as React.ElementType;

  return (
    <MotionComponent
      initial='hidden'
      animate={isInView ? 'visible' : 'hidden'}
      custom={animationNum}
      variants={sequenceVariants}
      className={className}
      {...props}
    >
      {children}
    </MotionComponent>
  );
};