@thorprovider/blocks 1.0.0 → 2.0.0

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