fulldev-ui 0.7.0 → 0.9.0

package/src/components/blocks/reviews-4.astro

@@ -1,103 +1,111 @@
 ---
+import type { ImageMetadata } from "astro"
+
 import { cn } from "@/lib/utils"
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/components/ui/item"
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Card, CardContent } from "@/components/ui/card"
+import { Marquee } from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-} from "@/components/ui/section"
-import {
-  Tile,
-  TileContent,
-  TileDescription,
-  TileTitle,
-} from "@/components/ui/tile"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
-  }[]
-  items?: {
-    title?: string
-    description?: string
-    rating?: number
-    image?: {
-      src: string
-      alt: string
-    }
-    item?: {
-      title?: string
-      description?: string
-      image?: {
-        src: string
-        alt: string
-      }
-    }
+  title?: string
+  description?: string
+  reviews: {
+    rating: number
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
   }[]
 }
 
-const { class: className, id, links, items = [] } = Astro.props
+const { class: className, title, description, reviews } = Astro.props
+
+const half = Math.ceil(reviews.length / 2)
+const topRow = reviews.slice(0, half)
+const bottomRow = reviews.slice(half)
 ---
 
-<Section class={cn("gap-6", className)} id={id}>
-  <SectionContent class="mb-10">
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <div class="flex flex-col gap-6 overflow-x-hidden py-1">
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1rem"
+      class="py-1 [&>div]:items-stretch"
+    >
       {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
+        topRow.map((item) => (
+          <Card class="flex w-[22rem] shrink-0 self-stretch">
+            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+              <Rating value={item.rating} />
+              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="mt-auto flex items-center gap-3 pt-1">
+                <Avatar>
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  {
-    (["left", "right"] as const).map((direction) => (
-      <Marquee class="-mx-(--section-px)">
-        <MarqueeContent direction={direction} pauseOnHover>
-          {[...items, ...items]?.map(({ title, description, rating, item }) => (
-            <Tile class="shadow-none" variant="floating">
-              <Item class="p-0">
-                <ItemMedia>
-                  <Avatar class="size-10">
-                    <AvatarImage {...item?.image} />
-                  </Avatar>
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>{item?.title}</ItemTitle>
-                  <ItemDescription>{item?.description}</ItemDescription>
-                </ItemContent>
-              </Item>
-              <Rating rating={rating} />
-              <TileContent>
-                <TileTitle>{title}</TileTitle>
-                <TileDescription>{description}</TileDescription>
-              </TileContent>
-            </Tile>
-          ))}
-        </MarqueeContent>
-      </Marquee>
-    ))
-  }
+    </Marquee>
+    <Marquee
+      direction="right"
+      pauseOnHover
+      infinite
+      gap="1rem"
+      class="py-1 [&>div]:items-stretch"
+    >
+      {
+        bottomRow.map((item) => (
+          <Card class="flex w-[22rem] shrink-0 self-stretch">
+            <CardContent class="flex min-w-0 flex-1 flex-col gap-3">
+              <Rating value={item.rating} />
+              <p class="text-muted-foreground min-w-0 text-sm leading-relaxed">
+                {item.quote}
+              </p>
+              <div class="mt-auto flex items-center gap-3 pt-1">
+                <Avatar>
+                  <AvatarImage src={item.image} alt={item.name} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      }
+    </Marquee>
+  </div>
 </Section>

package/src/components/blocks/reviews-5.astro

@@ -1,103 +1,172 @@
 ---
+import type { ImageMetadata } from "astro"
+
 import { cn } from "@/lib/utils"
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Icon } from "@/components/ui/icon"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/components/ui/item"
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
+import { Marquee } from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-} from "@/components/ui/section"
-import {
-  Tile,
-  TileContent,
-  TileDescription,
-  TileTitle,
-} from "@/components/ui/tile"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
-  }[]
-  items?: {
-    title?: string
-    description?: string
-    rating?: number
-    image?: {
-      src: string
-      alt: string
-    }
-    item?: {
-      title?: string
-      description?: string
-      image?: {
-        src: string
-        alt: string
-      }
-    }
+  title?: string
+  description?: string
+  reviews: {
+    quote: string
+    image?: ImageMetadata
+    initials: string
+    name: string
+    role: string
+    rating: number
   }[]
 }
 
-const { class: className, id, links, items = [] } = Astro.props
+const { class: className, title, description, reviews } = Astro.props
+
+const third = Math.ceil(reviews.length / 3)
+const row1 = reviews.slice(0, third)
+const row2 = reviews.slice(third, third * 2)
+const row3 = reviews.slice(third * 2)
 ---
 
-<Section class={cn("gap-6", className)} id={id}>
-  <SectionContent class="mb-10 items-center text-center">
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
+<Section class={cn("", className)}>
+  {
+    (title || description) && (
+      <SectionContainer class="items-center gap-4 text-center">
+        {title && (
+          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )}
+      </SectionContainer>
+    )
+  }
+  <div class="flex flex-col gap-5">
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
       {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
+        row1.map((item) => (
+          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
+            <div class="flex min-w-0 flex-1 flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </div>
+                <Rating value={item.rating} />
+              </div>
+              <div class="flex min-w-0 gap-2.5">
+                <Icon
+                  name="quote"
+                  class="text-primary/30 mt-0.5 size-5 shrink-0"
+                />
+                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  {
-    (["left", "right"] as const).map((direction) => (
-      <Marquee class="mask-x-from-95%">
-        <MarqueeContent direction={direction} pauseOnHover>
-          {[...items, ...items]?.map(({ title, description, rating, item }) => (
-            <Tile class="shadow-none" variant="floating">
-              <Item class="p-0">
-                <ItemMedia>
-                  <Avatar class="size-10">
-                    <AvatarImage {...item?.image} />
+    </Marquee>
+    <Marquee
+      direction="right"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
+      {
+        row2.map((item) => (
+          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
+            <div class="flex min-w-0 flex-1 flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
                   </Avatar>
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>{item?.title}</ItemTitle>
-                  <ItemDescription>{item?.description}</ItemDescription>
-                </ItemContent>
-              </Item>
-              <Rating rating={rating} />
-              <TileContent>
-                <TileTitle>{title}</TileTitle>
-                <TileDescription>{description}</TileDescription>
-              </TileContent>
-            </Tile>
-          ))}
-        </MarqueeContent>
-      </Marquee>
-    ))
-  }
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </div>
+                <Rating value={item.rating} />
+              </div>
+              <div class="flex min-w-0 gap-2.5">
+                <Icon
+                  name="quote"
+                  class="text-primary/30 mt-0.5 size-5 shrink-0"
+                />
+                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </Marquee>
+    <Marquee
+      direction="left"
+      pauseOnHover
+      infinite
+      gap="1.25rem"
+      class="[&>div]:items-stretch"
+    >
+      {
+        row3.map((item) => (
+          <div class="bg-muted/50 flex w-104 shrink-0 rounded-2xl p-6">
+            <div class="flex min-w-0 flex-1 flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <Avatar size="lg">
+                    <AvatarImage src={item.image} alt={item.name} />
+                    <AvatarFallback>{item.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p class="text-foreground text-sm font-semibold">
+                      {item.name}
+                    </p>
+                    <p class="text-muted-foreground text-xs">{item.role}</p>
+                  </div>
+                </div>
+                <Rating value={item.rating} />
+              </div>
+              <div class="flex min-w-0 gap-2.5">
+                <Icon
+                  name="quote"
+                  class="text-primary/30 mt-0.5 size-5 shrink-0"
+                />
+                <p class="text-foreground/80 min-w-0 text-sm leading-relaxed">
+                  {item.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </Marquee>
+  </div>
 </Section>

package/src/components/blocks/services-1.astro

@@ -1,93 +1,104 @@
 ---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
-import {
-  Tile,
-  TileContent,
-  TileDescription,
-  TileMedia,
-  TileSpread,
-  TileTitle,
-} from "@/components/ui/tile"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    text?: string
-    href?: string
+  badge?: string
+  title: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  items?: {
-    href?: string
-    tagline?: string
-    title?: string
-    description?: string
-    image?: {
-      src: string
+  services: {
+    image: {
+      src: ImageMetadata
       alt: string
     }
-    links?: {
-      icon?: string
-      text?: string
-      href?: string
-      target?: string
-    }[]
+    label?: string
+    title: string
+    description: string
+    href?: string
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, badge, title, buttons, services } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSpread class="@5xl:items-end">
-    <SectionContent>
-      <SectionProse>
-        <slot />
-      </SectionProse>
-    </SectionContent>
-    <SectionActions>
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-8">
+    <div
+      class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
+    >
+      <div class="max-w-2xl">
+        {badge && <Badge variant="secondary">{badge}</Badge>}
+        <h2
+          class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+      </div>
       {
-        links?.map(({ text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {text}
-          </Button>
-        ))
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }) => (
+              <Button as="a" href={href} variant={button.variant}>
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
       }
-    </SectionActions>
-  </SectionSpread>
-  <SectionGrid>
-    {
-      items?.map(({ title, tagline, description, href, image }) => (
-        <Tile href={href}>
-          <TileMedia>
-            <Image sizes="600px" {...image} />
-          </TileMedia>
-          <TileSpread>
-            <TileContent>
-              <TileDescription class="text-primary text-xs font-medium">
-                {tagline}
-              </TileDescription>
-              <TileTitle>{title}</TileTitle>
-              <TileDescription>{description}</TileDescription>
-            </TileContent>
-            {href && (
-              <Icon
-                name="arrow-right"
-                class="mr-2 size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
+    </div>
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {
+        services.map((service) => {
+          const Wrapper = service.href ? "a" : "div"
+          return (
+            <Wrapper
+              href={service.href}
+              class={cn(
+                "group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow",
+                service.href && "hover:shadow-md"
+              )}
+            >
+              <Image
+                src={service.image.src}
+                alt={service.image.alt}
+                class="aspect-4/3 w-full object-cover"
+                widths={[320, 480, 640]}
+                sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
               />
-            )}
-          </TileSpread>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
+              <div class="flex flex-1 flex-col gap-2 px-5 pb-5">
+                {service.label && (
+                  <span class="text-primary text-xs font-medium">
+                    {service.label}
+                  </span>
+                )}
+                <h3 class="text-base font-medium">{service.title}</h3>
+                <p class="text-muted-foreground text-sm leading-relaxed">
+                  {service.description}
+                </p>
+                {service.href && (
+                  <span class="mt-auto pt-2">
+                    <Icon
+                      name="arrow-right"
+                      class="text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1"
+                    />
+                  </span>
+                )}
+              </div>
+            </Wrapper>
+          )
+        })
+      }
+    </div>
+  </SectionContainer>
 </Section>