@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/marketing/statistics/statistic-1.tsx

@@ -1,93 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Badge } from '../../../ui/badge'
-import { Progress } from '../../../ui/progress'
-import { BarChart3 } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-export interface StatisticItem {
-  id: string
-  title: string
-  value: string
-  description: string
-  progress: number
-  progressLabel: string
-  icon: LucideIcon
-}
-
-export interface Statistic1Props {
-  items: StatisticItem[]
-  badge?: string
-  title?: string
-  description?: string
-}
-
-export function Statistic1({ items, badge, title, description }: Statistic1Props) {
-  return (
-    <section className='py-16 md:py-20'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='flex flex-col gap-16'>
-          {(badge || title || description) && (
-            <div className='flex flex-col gap-6 text-center'>
-              {badge && (
-                <Badge
-                  variant='outline'
-                  className='h-auto [&>svg]:size-4! rounded-md inline-flex items-center gap-2 px-4 py-2 text-sm font-medium self-center'
-                >
-                  <BarChart3 />
-                  {badge}
-                </Badge>
-              )}
-              {title && (
-                <h2 className='text-4xl font-bold tracking-tight text-balance lg:text-5xl'>
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className='text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed'>
-                  {description}
-                </p>
-              )}
-            </div>
-          )}
-
-          <div className='grid gap-6 sm:grid-cols-2 md:grid-cols-3'>
-            {items.map(item => (
-              <Card
-                key={item.id}
-                className='group relative gap-2 overflow-hidden py-6 transition-all duration-300 hover:shadow-lg'
-              >
-                <CardHeader className='px-6'>
-                  <div className='flex items-start justify-between'>
-                    <div className='flex-1'>
-                      <CardTitle className='text-muted-foreground text-sm font-medium text-balance'>
-                        {item.title}
-                      </CardTitle>
-                      <div className='mt-2'>
-                        <div className='text-2xl font-bold'>{item.value}</div>
-                      </div>
-                    </div>
-                    <div className='bg-muted rounded-xl p-3'>
-                      <item.icon className='text-muted-foreground size-6' />
-                    </div>
-                  </div>
-                  <p className='text-muted-foreground mt-1 text-xs'>{item.description}</p>
-                </CardHeader>
-                <CardContent className='pt-0 px-6'>
-                  <div className='flex flex-col gap-2'>
-                    <div className='flex items-center justify-between text-xs'>
-                      <span className='text-muted-foreground'>{item.progressLabel}</span>
-                      <span className='font-medium'>{item.progress}%</span>
-                    </div>
-                    <Progress value={item.progress} className='h-2' />
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default Statistic1

package/src/blocks/marketing/testimonials/testimonial-1.tsx

@@ -1,141 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Star } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-import { Card, CardContent, CardHeader, CardFooter, CardTitle } from '../../../ui/card'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  type CarouselApi,
-} from '../../../ui/carousel'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Button } from '../../../ui/button'
-
-export interface Testimonial1Item {
-  id: string
-  name: string
-  role: string
-  avatar: string
-  content: string
-  rating: number
-}
-
-export interface Testimonial1Props {
-  items: Testimonial1Item[]
-  title?: string
-  prevLabel?: string
-  nextLabel?: string
-  slideAriaLabel?: string
-}
-
-function RatingStars({ rating }: { rating: number }) {
-  return (
-    <div className='flex items-center gap-1'>
-      {[...Array(5)].map((_, index) => (
-        <Star
-          key={index}
-          className={cn('size-4', index < Math.floor(rating) ? 'fill-foreground' : 'fill-none')}
-        />
-      ))}
-      <span className='text-muted-foreground ms-2 text-sm'>({rating})</span>
-    </div>
-  )
-}
-
-export function Testimonial1({
-  items,
-  title = 'Lo que dicen nuestros clientes',
-  prevLabel = 'Anterior',
-  nextLabel = 'Siguiente',
-  slideAriaLabel = 'Ir a la diapositiva {n}',
-}: Testimonial1Props) {
-  const [api, setApi] = React.useState<CarouselApi | null>(null)
-  const [current, setCurrent] = React.useState(0)
-
-  React.useEffect(() => {
-    if (!api) return
-
-    const onSelect = () => {
-      setCurrent(api.selectedScrollSnap())
-    }
-
-    api.on('select', onSelect)
-    return () => {
-      api.off('select', onSelect)
-    }
-  }, [api])
-
-  return (
-    <section className='py-12 lg:py-20'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <header className='mb-16 text-center'>
-          <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>
-        </header>
-
-        <Carousel className='w-full' setApi={setApi} opts={{ align: 'start', loop: true }}>
-          <CarouselContent className='-ml-1'>
-            {items.map(testimonial => (
-              <CarouselItem
-                key={testimonial.id}
-                className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'
-              >
-                <Card className='h-full overflow-hidden border border-border py-6'>
-                  <CardHeader className='gap-0 px-6'>
-                    <div className='flex items-center gap-4'>
-                      <Avatar className='bg-muted size-12'>
-                        <AvatarImage src={testimonial.avatar || undefined} alt={testimonial.name} className='size-12' />
-                        <AvatarFallback className='bg-card'>{testimonial.name[0]}</AvatarFallback>
-                      </Avatar>
-                      <div>
-                        <CardTitle className='text-foreground font-semibold'>{testimonial.name}</CardTitle>
-                        <p className='text-muted-foreground text-sm'>{testimonial.role}</p>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent className='px-6'>
-                    <p className='text-muted-foreground text-base'>{testimonial.content}</p>
-                  </CardContent>
-                  <CardFooter className='bg-transparent border-t-0 px-6 pb-6'>
-                    <RatingStars rating={testimonial.rating} />
-                  </CardFooter>
-                </Card>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious
-            variant='outline'
-            className='hidden cursor-pointer lg:flex'
-            aria-label={prevLabel}
-          />
-          <CarouselNext
-            variant='outline'
-            className='hidden cursor-pointer lg:flex'
-            aria-label={nextLabel}
-          />
-          <div className='mt-8 flex items-center justify-center gap-2'>
-            {items.map((_, index) => (
-              <Button
-                variant='ghost'
-                key={index}
-                onClick={() => api?.scrollTo(index)}
-                className={cn(
-                  'h-9 px-4 py-2',
-                  'size-2 cursor-pointer rounded-full !p-0 transition-all',
-                  current === index ? 'bg-foreground w-6' : 'bg-muted',
-                )}
-                aria-label={slideAriaLabel.replace('{n}', String(index + 1))}
-                aria-current={current === index ? 'true' : 'false'}
-              />
-            ))}
-          </div>
-        </Carousel>
-      </div>
-    </section>
-  )
-}
-
-export default Testimonial1

package/src/blocks/marketing/testimonials/testimonial-2.tsx

@@ -1,108 +0,0 @@
-import { Quote } from 'lucide-react'
-import { Card, CardContent, CardHeader } from '../../../ui/card'
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-
-export interface Testimonial2Item {
-  id: string
-  name: string
-  role: string
-  avatar: string
-  content: string
-}
-
-export interface Testimonial2Props {
-  items: Testimonial2Item[]
-  title?: string
-  description?: string
-}
-
-const bentoGridClasses = [
-  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',
-  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',
-  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
-  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
-]
-
-const contentClasses = [
-  '',
-  'h-full px-6',
-  'h-full pt-6 px-6',
-  'h-full pt-6 px-6',
-]
-
-const textClasses = [
-  'text-xl text-balance',
-  'text-base text-balance',
-  'text-base text-balance',
-  'text-base text-balance',
-]
-
-function initials(name: string) {
-  return name
-    .split(' ')
-    .map(n => n[0])
-    .join('')
-}
-
-export function Testimonial2({
-  items,
-  title = 'Con la confianza de quienes construyen',
-  description,
-}: Testimonial2Props) {
-  /** El diseño bento consume exactamente 4 tarjetas: la primera ocupa la celda
-   * grande (lg:row-span-2) y las tres restantes completan la cuadrícula. */
-  const bentoItems = items.slice(0, 4)
-
-  return (
-    <section className='py-12 md:py-16'>
-      <div className='mx-auto w-full max-w-7xl flex flex-col gap-8 px-4 sm:px-6 lg:px-8 md:gap-16'>
-        <div className='relative z-10 mx-auto max-w-4xl flex flex-col gap-6 text-center md:gap-12'>
-          <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>
-          {description && (
-            <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>
-              {description}
-            </p>
-          )}
-        </div>
-
-        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>
-          {bentoItems.map((testimonial, index) => (
-            <Card key={testimonial.id} className={bentoGridClasses[index]}>
-              {index === 0 && (
-                <CardHeader className='pb-6'>
-                  <div className='flex items-center justify-start'>
-                    <Quote className='text-muted-foreground/30 size-16 rotate-180' />
-                  </div>
-                </CardHeader>
-              )}
-              <CardContent className={contentClasses[index]}>
-                <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>
-                  <p className={textClasses[index]}>{testimonial.content}</p>
-
-                  <div className='grid grid-cols-[auto_1fr] items-center gap-3'>
-                    <Avatar className='bg-muted size-12'>
-                      <AvatarImage
-                        src={testimonial.avatar || undefined}
-                        alt={testimonial.name}
-                        height='400'
-                        width='400'
-                        loading='lazy'
-                      />
-                      <AvatarFallback>{initials(testimonial.name)}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <cite className='text-sm font-medium not-italic'>{testimonial.name}</cite>
-                      <span className='text-muted-foreground block text-sm'>{testimonial.role}</span>
-                    </div>
-                  </div>
-                </blockquote>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default Testimonial2

package/src/blocks/shared/reaction-toggle.tsx

@@ -1,145 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentType } from 'react'
-
-import { cn } from '../../lib/utils'
-
-const PARTICLE_COUNT = 8
-
-const STYLE_MARKER = 'data-reaction-toggle-keyframes'
-const STYLES = `
-@keyframes reaction-toggle-pop {
-  0% { transform: scale(1); }
-  30% { transform: scale(0.82); }
-  100% { transform: scale(1); }
-}
-@keyframes reaction-toggle-burst {
-  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
-  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
-  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
-}
-.reaction-toggle-pop {
-  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
-}
-.reaction-toggle-burst {
-  animation-name: reaction-toggle-burst;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .reaction-toggle-pop,
-  .reaction-toggle-burst { animation: none !important; }
-}
-`
-
-function useReactionToggleStyles() {
-  useEffect(() => {
-    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
-
-    const style = document.createElement('style')
-    style.setAttribute(STYLE_MARKER, '')
-    style.textContent = STYLES
-    document.head.append(style)
-  }, [])
-}
-
-type ReactionIconProps = {
-  className?: string
-}
-
-type Particle = {
-  rx: number
-  ry: number
-  duration: number
-  delay: number
-  size: number
-}
-
-function buildParticles(): Particle[] {
-  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
-    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
-    const dist = 16 + Math.random() * 10
-
-    return {
-      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
-      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
-      duration: Math.round(500 + Math.random() * 200),
-      delay: Math.round(Math.random() * 60),
-      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
-    }
-  })
-}
-
-type ReactionToggleProps = {
-  active: boolean
-  icon: ComponentType<ReactionIconProps>
-  className?: string
-  iconClassName?: string
-  activeColorClassName?: string
-}
-
-export function ReactionToggle({
-  active,
-  icon: Icon,
-  className,
-  iconClassName,
-  activeColorClassName = 'text-primary',
-}: ReactionToggleProps) {
-  const [isBursting, setIsBursting] = useState(false)
-  const wasActive = useRef(active)
-  const particlesRef = useRef<Particle[]>(buildParticles())
-
-  useReactionToggleStyles()
-
-  useEffect(() => {
-    if (active && !wasActive.current) {
-      particlesRef.current = buildParticles()
-      setIsBursting(true)
-      const timeout = setTimeout(() => setIsBursting(false), 700)
-      wasActive.current = active
-      return () => clearTimeout(timeout)
-    }
-
-    wasActive.current = active
-  }, [active])
-
-  return (
-    <span className={cn('relative inline-flex', className)}>
-      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
-        <Icon
-          className={cn(
-            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
-            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
-            iconClassName
-          )}
-        />
-      </span>
-
-      {isBursting && (
-        <span
-          aria-hidden='true'
-          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
-        >
-          {particlesRef.current.map((particle, index) => (
-            <i
-              key={index}
-              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
-              style={
-                {
-                  '--rx': `${particle.rx}px`,
-                  '--ry': `${particle.ry}px`,
-                  animationDuration: `${particle.duration}ms`,
-                  animationDelay: `${particle.delay}ms`,
-                  width: `${2.5 * particle.size}px`,
-                  height: `${2.5 * particle.size}px`,
-                  left: `${-1.25 * particle.size}px`,
-                  top: `${-1.25 * particle.size}px`,
-                } as React.CSSProperties
-              }
-            />
-          ))}
-        </span>
-      )}
-    </span>
-  )
-}

package/src/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}