fulldev-ui 0.10.0 → 0.11.0

package/public/r/reviews-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "reviews-1",
+  "title": "Reviews 1",
+  "description": "Testimonial and review sections for social proof, trust, and product validation.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && (\n          <h2 class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </SectionContainer>\n    )\n  }\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {\n        reviews.map((item) => (\n          <Card>\n            <CardContent class=\"flex flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {description && (\n          <SectionDescription class=\"max-w-2xl\">\n            {description}\n          </SectionDescription>\n        )}\n      </SectionContainer>\n    )\n  }\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {\n        reviews.map((item) => (\n          <Card>\n            <CardContent class=\"flex flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/reviews/",
+  "categories": [
+    "reviews"
+  ],
   "type": "registry:block"
 }

package/public/r/reviews-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "reviews-2",
+  "title": "Reviews 2",
+  "description": "Testimonial and review sections for social proof, trust, and product validation.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = {\n  class?: string\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer\n    class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\"\n  >\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote\n        class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\"\n      >\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {\n        reviews.map((item) => (\n          <article class=\"flex flex-col\">\n            <Separator />\n            <div class=\"flex flex-col gap-3 pt-6\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </article>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\"\n  >\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote\n        class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\"\n      >\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {\n        reviews.map((item) => (\n          <article class=\"flex flex-col\">\n            <Separator />\n            <div class=\"flex flex-col gap-3 pt-6\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </article>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/reviews/",
+  "categories": [
+    "reviews"
+  ],
   "type": "registry:block"
 }

package/public/r/reviews-3.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "reviews-3",
+  "title": "Reviews 3",
+  "description": "Testimonial and review sections for social proof, trust, and product validation.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && (\n          <h2 class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </SectionContainer>\n    )\n  }\n  <SectionContainer>\n    <Carousel opts={{ loop: true, align: \"center\" }} class=\"mx-auto max-w-3xl\">\n      <CarouselContent>\n        {\n          reviews.map((item) => (\n            <CarouselItem>\n              <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n                <QuoteIcon class=\"text-primary size-10\" />\n                <Rating value={item.rating} />\n                <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                  {item.quote}\n                </blockquote>\n                <div class=\"flex items-center gap-3 pt-2\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div class=\"text-left\">\n                    <p class=\"text-foreground text-sm font-medium\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n              </div>\n            </CarouselItem>\n          ))\n        }\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {description && (\n          <SectionDescription class=\"max-w-2xl\">\n            {description}\n          </SectionDescription>\n        )}\n      </SectionContainer>\n    )\n  }\n  <SectionContainer>\n    <Carousel opts={{ loop: true, align: \"center\" }} class=\"mx-auto max-w-3xl\">\n      <CarouselContent>\n        {\n          reviews.map((item) => (\n            <CarouselItem>\n              <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n                <QuoteIcon class=\"text-primary size-10\" />\n                <Rating value={item.rating} />\n                <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                  {item.quote}\n                </blockquote>\n                <div class=\"flex items-center gap-3 pt-2\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div class=\"text-left\">\n                    <p class=\"text-foreground text-sm font-medium\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n              </div>\n            </CarouselItem>\n          ))\n        }\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/reviews/",
+  "categories": [
+    "reviews"
+  ],
   "type": "registry:block"
 }

package/public/r/reviews-4.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "reviews-4",
+  "title": "Reviews 4",
+  "description": "Testimonial and review sections for social proof, trust, and product validation.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/card",
@@ -11,9 +13,13 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && (\n          <h2 class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </SectionContainer>\n    )\n  }\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {\n        topRow.map((item) => (\n          <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n            <CardContent class=\"flex flex-1 flex-col gap-3\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"mt-auto flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {\n        bottomRow.map((item) => (\n          <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n            <CardContent class=\"flex flex-1 flex-col gap-3\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"mt-auto flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {description && (\n          <SectionDescription class=\"max-w-2xl\">\n            {description}\n          </SectionDescription>\n        )}\n      </SectionContainer>\n    )\n  }\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {\n        topRow.map((item) => (\n          <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n            <CardContent class=\"flex flex-1 flex-col gap-3\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"mt-auto flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {\n        bottomRow.map((item) => (\n          <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n            <CardContent class=\"flex flex-1 flex-col gap-3\">\n              <Rating value={item.rating} />\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n              <div class=\"mt-auto flex items-center gap-3 pt-1\">\n                <Avatar>\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))\n      }\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/reviews/",
+  "categories": [
+    "reviews"
+  ],
   "type": "registry:block"
 }

package/public/r/reviews-5.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "reviews-5",
+  "title": "Reviews 5",
+  "description": "Testimonial and review sections for social proof, trust, and product validation.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && (\n          <h2 class=\"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </SectionContainer>\n    )\n  }\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row1.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row2.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row3.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {\n    (title || description) && (\n      <SectionContainer class=\"items-center gap-4 text-center\">\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {description && (\n          <SectionDescription class=\"max-w-2xl\">\n            {description}\n          </SectionDescription>\n        )}\n      </SectionContainer>\n    )\n  }\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row1.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row2.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {\n        row3.map((item) => (\n          <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n            <div class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <Avatar size=\"lg\">\n                    <AvatarImage src={item.image} alt={item.name} />\n                    <AvatarFallback>{item.initials}</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p class=\"text-foreground text-sm font-semibold\">\n                      {item.name}\n                    </p>\n                    <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                  </div>\n                </div>\n                <Rating value={item.rating} />\n              </div>\n              <div class=\"flex gap-2.5\">\n                <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                  {item.quote}\n                </p>\n              </div>\n            </div>\n          </div>\n        ))\n      }\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/reviews/",
+  "categories": [
+    "reviews"
+  ],
   "type": "registry:block"
 }

package/public/r/section.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "section",
+  "title": "Section",
+  "description": "A layout component for organizing page content into sections.",
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
@@ -9,14 +11,28 @@
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-7xl flex-col gap-8 px-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"section-container\"\n  class={cn(\n    \"relative mx-auto flex w-full max-w-7xl flex-col gap-8 px-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/index.ts",
-      "content": "export { default as Section } from \"./section.astro\"\nexport { default as SectionContainer } from \"./section-container.astro\"\n",
+      "content": "export { default as Section } from \"./section.astro\"\nexport { default as SectionContainer } from \"./section-container.astro\"\nexport { default as SectionDescription } from \"./section-description.astro\"\nexport { default as SectionTitle } from \"./section-title.astro\"\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/section/section-title.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props<Tag extends HTMLTag = \"h2\"> = Polymorphic<{ as: Tag }>\n\nconst { as: Tag = \"h2\", class: className, ...props } = Astro.props\n---\n\n<Tag\n  data-slot=\"section-title\"\n  class={cn(\n    \"text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/section/section-description.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"p\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<p\n  data-slot=\"section-description\"\n  class={cn(\n    \"text-muted-foreground text-lg leading-relaxed text-balance\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</p>\n",
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/section/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/select.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "select",
+  "title": "Select",
+  "description": "Displays a list of options for the user to pick from, triggered by a button.",
   "dependencies": [
     "@data-slot/select",
     "@lucide/astro"
@@ -52,5 +54,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/select/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/separator.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "separator",
+  "title": "Separator",
+  "description": "Visually or semantically separates content.",
   "files": [
     {
       "path": "src/components/ui/separator/separator.astro",
@@ -13,5 +15,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/separator/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/services-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-1",
+  "title": "Services 1",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -12,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst { class: className, badge, title, buttons, services } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <h2\n          class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        services.map((service) => {\n          const Wrapper = service.href ? \"a\" : \"div\"\n          return (\n            <Wrapper\n              href={service.href}\n              class={cn(\n                \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n                service.href && \"hover:shadow-md\"\n              )}\n            >\n              <Image\n                src={service.image?.src ?? PlaceholderImage}\n                alt={service.image?.alt ?? service.title}\n                class=\"aspect-[4/3] w-full object-cover\"\n                widths={[320, 480, 640]}\n                sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n              />\n              <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n                {service.label && (\n                  <span class=\"text-primary text-xs font-medium\">\n                    {service.label}\n                  </span>\n                )}\n                <h3 class=\"text-base font-medium\">{service.title}</h3>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {service.description}\n                </p>\n                {service.href && (\n                  <span class=\"mt-auto pt-2\">\n                    <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                  </span>\n                )}\n              </div>\n            </Wrapper>\n          )\n        })\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">\n          {title}\n        </SectionTitle>\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        services.map((service) => {\n          const Wrapper = service.href ? \"a\" : \"div\"\n          return (\n            <Wrapper\n              href={service.href}\n              class={cn(\n                \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n                service.href && \"hover:shadow-md\"\n              )}\n            >\n              <Image\n                src={service.image?.src ?? PlaceholderImage}\n                alt={service.image?.alt ?? service.title}\n                class=\"aspect-[4/3] w-full object-cover\"\n                widths={[320, 480, 640]}\n                sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n              />\n              <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n                {service.label && (\n                  <span class=\"text-primary text-xs font-medium\">\n                    {service.label}\n                  </span>\n                )}\n                <h3 class=\"text-base font-medium\">{service.title}</h3>\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                  {service.description}\n                </p>\n                {service.href && (\n                  <span class=\"mt-auto pt-2\">\n                    <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                  </span>\n                )}\n              </div>\n            </Wrapper>\n          )\n        })\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -22,5 +24,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-2",
+  "title": "Services 2",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "registryDependencies": [
     "@fulldev/badge",
     "@fulldev/button",
@@ -9,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {\n        services.map((service) => (\n          <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n              widths={[320, 480]}\n              sizes=\"(min-width: 768px) 16rem, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-lg font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.button && (\n                <Button\n                  as=\"a\"\n                  href={service.button.href}\n                  variant=\"secondary\"\n                  class=\"mt-1 w-fit\"\n                >\n                  {service.button.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">\n        {title}\n      </SectionTitle>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {\n        services.map((service) => (\n          <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n              widths={[320, 480]}\n              sizes=\"(min-width: 768px) 16rem, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-lg font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.button && (\n                <Button\n                  as=\"a\"\n                  href={service.button.href}\n                  variant=\"secondary\"\n                  class=\"mt-1 w-fit\"\n                >\n                  {service.button.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -19,5 +21,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-3.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-3",
+  "title": "Services 3",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "registryDependencies": [
     "@fulldev/badge",
     "@fulldev/button",
@@ -9,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {\n        services.map((service) => (\n          <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n              widths={[480, 640, 960]}\n              sizes=\"(min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n            <div class=\"flex flex-col gap-2 p-6 text-white\">\n              <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/80\">\n                {service.description}\n              </p>\n              {service.button && (\n                <Button\n                  as=\"a\"\n                  href={service.button.href}\n                  variant=\"secondary\"\n                  class=\"mt-2 w-fit\"\n                >\n                  {service.button.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">\n        {title}\n      </SectionTitle>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {\n        services.map((service) => (\n          <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n              widths={[480, 640, 960]}\n              sizes=\"(min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n            <div class=\"flex flex-col gap-2 p-6 text-white\">\n              <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/80\">\n                {service.description}\n              </p>\n              {service.button && (\n                <Button\n                  as=\"a\"\n                  href={service.button.href}\n                  variant=\"secondary\"\n                  class=\"mt-2 w-fit\"\n                >\n                  {service.button.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -19,5 +21,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-4.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-4",
+  "title": "Services 4",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -11,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, services } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        <h2\n          class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n        {\n          description && (\n            <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n              {description}\n            </p>\n          )\n        }\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        services.map((service) => (\n          <article class=\"group/service flex flex-col gap-4\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-1\">\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </a>\n            )}\n          </article>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n        {\n          description && (\n            <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n              {description}\n            </p>\n          )\n        }\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {\n        services.map((service) => (\n          <article class=\"group/service flex flex-col gap-4\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-1\">\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </a>\n            )}\n          </article>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -21,5 +23,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-5.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-5",
+  "title": "Services 5",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -12,9 +14,13 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div\n      class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\"\n    >\n      {\n        services.map((service) => (\n          <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n            <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n              <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n            </div>\n            <h3 class=\"text-base font-medium tracking-tight\">\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </a>\n            )}\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">\n        {title}\n      </SectionTitle>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div\n      class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\"\n    >\n      {\n        services.map((service) => (\n          <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n            <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n              <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n            </div>\n            <h3 class=\"text-base font-medium tracking-tight\">\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </a>\n            )}\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-6.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-6",
+  "title": "Services 6",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -12,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer\n    class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\"\n  >\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {\n        services.map((service) => (\n          <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n            <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n              <div class=\"flex flex-col gap-1\">\n                <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n                <p class=\"text-sm leading-relaxed text-white/75\">\n                  {service.description}\n                </p>\n              </div>\n              {service.href && (\n                <a\n                  href={service.href}\n                  class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n                >\n                  <ArrowRightIcon class=\"size-4 text-white\" />\n                </a>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\"\n  >\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {\n        description && (\n          <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n            {description}\n          </p>\n        )\n      }\n      {\n        buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {\n        services.map((service) => (\n          <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n            <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n              <div class=\"flex flex-col gap-1\">\n                <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n                <p class=\"text-sm leading-relaxed text-white/75\">\n                  {service.description}\n                </p>\n              </div>\n              {service.href && (\n                <a\n                  href={service.href}\n                  class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n                >\n                  <ArrowRightIcon class=\"size-4 text-white\" />\n                </a>\n              )}\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -22,5 +24,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }

package/public/r/services-7.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "services-7",
+  "title": "Services 7",
+  "description": "Service section layouts for agencies, consultancies, and internal platform teams.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -12,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <h2\n          class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n        {\n          description && (\n            <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n              {description}\n            </p>\n          )\n        }\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {\n        services.map((service, index) => (\n          <a\n            href={service.href ?? \"#\"}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              {service.label && (\n                <Badge variant=\"secondary\" class=\"w-fit\">\n                  {service.label}\n                </Badge>\n              )}\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              <div\n                class={cn(\n                  \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                  index !== 0 && \"mt-auto\"\n                )}\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.webp\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div\n      class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\"\n    >\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">\n          {title}\n        </SectionTitle>\n        {\n          description && (\n            <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n              {description}\n            </p>\n          )\n        }\n      </div>\n      {\n        buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }) => (\n              <Button as=\"a\" href={href} variant={button.variant}>\n                {label}\n              </Button>\n            ))}\n          </div>\n        )\n      }\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {\n        services.map((service, index) => (\n          <a\n            href={service.href ?? \"#\"}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              {service.label && (\n                <Badge variant=\"secondary\" class=\"w-fit\">\n                  {service.label}\n                </Badge>\n              )}\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              <div\n                class={cn(\n                  \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                  index !== 0 && \"mt-auto\"\n                )}\n              >\n                Learn more\n                <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
@@ -22,5 +24,9 @@
       "target": "src/assets/placeholder.webp"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/services/",
+  "categories": [
+    "services"
+  ],
   "type": "registry:block"
 }