@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/navbars/navbar-4-product-grid.tsx

@@ -1,219 +0,0 @@
-'use client'
-
-import type { JSX } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Flame, ShoppingBag, Sparkles, Star, Trophy } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-
-import { Navbar4LikeButton } from './navbar-4-like-button'
-
-export interface CatalogProduct {
-  id: string
-  title: string
-  subtitle: string
-  image: string
-  price: number
-  originalPrice: number
-  rating: number
-  reviewCount: number
-  discountPercentage: number
-  isLowStock?: boolean
-  badge?: {
-    text: string
-    variant: 'trending' | 'bestseller' | 'new'
-  }
-}
-
-export interface Navbar4ProductGridProps {
-  products: CatalogProduct[]
-  searchQuery: string
-  /** When omitted, the section heading is hidden. */
-  heading?: string
-  currencySymbol?: string
-  onAddToCart?: (product: CatalogProduct) => void
-}
-
-const filterEase = [0.22, 1, 0.36, 1] as const
-
-interface BadgeStyle {
-  bg: string
-  icon: JSX.Element | null
-}
-
-const badgeStyles: Record<string, BadgeStyle> = {
-  trending: {
-    bg: 'bg-black',
-    icon: <Flame className='size-3' />,
-  },
-  bestseller: {
-    bg: 'bg-black',
-    icon: <Trophy className='size-3' />,
-  },
-  new: {
-    bg: 'bg-black',
-    icon: <Sparkles className='size-3' />,
-  },
-}
-
-interface Navbar4ProductCardProps {
-  product: CatalogProduct
-  currencySymbol?: string
-  onAddToCart?: (product: CatalogProduct) => void
-}
-
-function Navbar4ProductCard({
-  product,
-  currencySymbol = '$',
-  onAddToCart,
-}: Navbar4ProductCardProps) {
-  const badgeStyle = product.badge ? badgeStyles[product.badge.variant] || badgeStyles.new : null
-
-  return (
-    <Card className='relative overflow-hidden rounded-md py-0 shadow-none transition-shadow hover:shadow-md'>
-      <CardContent className='px-0'>
-        <div className='relative aspect-square w-full overflow-hidden'>
-          <img src={product.image || undefined} alt={product.title} className='size-full object-cover' loading='lazy' />
-
-          {product.badge && badgeStyle ? (
-            <div className='absolute start-2 top-2 z-20'>
-              <Badge
-                className={cn(
-                  'flex h-auto items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs',
-                  badgeStyle.bg,
-                )}
-              >
-                {badgeStyle.icon}
-                <span className='text-xs font-medium'>{product.badge.text}</span>
-              </Badge>
-            </div>
-          ) : null}
-
-          {product.rating > 0 ? (
-            <div className='bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs'>
-              <Star className='fill-foreground text-foreground size-4' />
-              <span>{product.rating}</span>
-              {product.reviewCount > 0 ? (
-                <span className='text-muted-foreground'>
-                  |{' '}
-                  {product.reviewCount >= 1000
-                    ? `${(product.reviewCount / 1000).toFixed(1)}k`
-                    : product.reviewCount}
-                </span>
-              ) : null}
-            </div>
-          ) : null}
-
-          <Navbar4LikeButton className='absolute end-2 top-2 z-20' />
-        </div>
-
-        <div className='flex flex-col gap-3 p-4'>
-          <div className='flex flex-col gap-1.5'>
-            <h3 className='font-medium text-balance'>{product.title}</h3>
-            <p className='text-muted-foreground text-sm text-balance'>{product.subtitle}</p>
-          </div>
-
-          <div className='flex items-center gap-2'>
-            <span className='font-semibold'>
-              {currencySymbol}
-              {product.price}
-            </span>
-            <span className='text-muted-foreground text-sm line-through'>
-              {currencySymbol}
-              {product.originalPrice}
-            </span>
-            <span className='text-sm'>({product.discountPercentage}% OFF)</span>
-          </div>
-
-          {product.isLowStock ? <p className='text-destructive text-sm'>Only few items left!</p> : null}
-
-          <Button className='w-full' onClick={onAddToCart ? () => onAddToCart(product) : undefined}>
-            <ShoppingBag data-icon='inline-start' />
-            Add to cart
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function Navbar4ProductGrid({
-  products,
-  searchQuery,
-  heading,
-  currencySymbol,
-  onAddToCart,
-}: Navbar4ProductGridProps) {
-  const reduceMotion = useReducedMotion()
-  const query = searchQuery.trim().toLowerCase()
-  const filtered = query
-    ? products.filter(
-        product =>
-          product.title.toLowerCase().includes(query) || product.subtitle.toLowerCase().includes(query),
-      )
-    : products
-
-  return (
-    <section aria-label='Featured products' className='mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8'>
-      <div className='mb-6 flex items-end justify-between gap-4'>
-        <div>
-          {heading ? (
-            <h2 className='text-lg font-semibold tracking-tight'>{heading}</h2>
-          ) : null}
-          <p className='text-muted-foreground text-sm'>
-            {query
-              ? `${filtered.length} ${filtered.length === 1 ? 'result' : 'results'} for “${searchQuery.trim()}”`
-              : 'Shop the latest pieces — add anything to your bag.'}
-          </p>
-        </div>
-      </div>
-
-      {filtered.length === 0 ? (
-        <div className='border-border bg-muted/30 flex min-h-64 items-center justify-center rounded-xl border border-dashed px-6 text-center'>
-          <div>
-            <p className='font-medium'>No products match your search</p>
-            <p className='text-muted-foreground mt-1 text-sm'>Try a different keyword or clear the search.</p>
-          </div>
-        </div>
-      ) : (
-        <motion.ul
-          layout
-          className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'
-          transition={{ duration: 0.28, ease: filterEase }}
-        >
-          <AnimatePresence mode='popLayout'>
-            {filtered.map(product => (
-              <motion.li
-                key={product.id}
-                layout={!reduceMotion}
-                initial={reduceMotion ? false : { opacity: 0, y: 12, scale: 0.97 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={
-                  reduceMotion
-                    ? undefined
-                    : {
-                        opacity: 0,
-                        y: -8,
-                        scale: 0.98,
-                        filter: 'blur(4px)',
-                        transition: { duration: 0.2, ease: 'easeIn' },
-                      }
-                }
-                transition={{ duration: 0.28, ease: filterEase }}
-              >
-                <Navbar4ProductCard
-                  product={product}
-                  currencySymbol={currencySymbol}
-                  onAddToCart={onAddToCart}
-                />
-              </motion.li>
-            ))}
-          </AnimatePresence>
-        </motion.ul>
-      )}
-    </section>
-  )
-}

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