fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,96 +1,96 @@
 ---
+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,
-  SectionSplit,
-} 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
+  description?: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  items?: {
+  services: {
+    icon?: string
+    title: string
+    description: string
     href?: string
-    tagline?: string
-    title?: string
-    description?: string
-    image?: {
-      src: string
-      alt: string
-    }
-    links?: {
-      text?: string
-      href?: string
-    }[]
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  buttons,
+  services,
+} = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit
-    class="items-start @5xl:grid-cols-[1fr_2fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
-  >
-    <SectionContent>
-      <SectionProse class="text-balance!">
-        <slot />
-      </SectionProse>
-      <SectionActions>
-        {
-          links?.map(({ text, ...link }, i) => (
-            <Button variant={i === 0 ? "outline" : "ghost"} {...link}>
-              {text}
-            </Button>
-          ))
-        }
-      </SectionActions>
-    </SectionContent>
-    <SectionGrid class="@5xl:grid-cols-2">
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-12">
+    <div class="mx-auto max-w-2xl text-center">
+      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <h2
+        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      {
+        description && (
+          <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+            {description}
+          </p>
+        )
+      }
+      {
+        buttons?.length && (
+          <div class="mt-6 flex flex-wrap justify-center gap-3">
+            {buttons.map(({ href, label, ...button }) => (
+              <Button as="a" href={href} variant={button.variant}>
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+    <div
+      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"
+    >
       {
-        items?.map(({ title, description, href, image }) => (
-          <Tile
-            href={href}
-            class="dark aspect-[1/1] bg-black!"
-            variant="floating"
-          >
-            <TileMedia class="absolute inset-0 size-full bg-black mask-t-from-0% mask-t-to-black/10">
-              <Image sizes="600px" {...image} />
-            </TileMedia>
-            <TileSpread class="relative">
-              <TileContent>
-                <TileTitle>{title}</TileTitle>
-                <TileDescription class="text-foreground">
-                  {description}
-                </TileDescription>
-              </TileContent>
-              {href && (
+        services.map((service) => (
+          <div class="bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors">
+            <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">
+              <Icon name={service.icon ?? "layout-grid"} class="size-5" />
+            </div>
+            <h3 class="text-base font-medium tracking-tight">
+              {service.title}
+            </h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              {service.description}
+            </p>
+            {service.href && (
+              <a
+                href={service.href}
+                class="text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium"
+              >
+                Learn more
                 <Icon
                   name="arrow-right"
-                  class="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
+                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
                 />
-              )}
-            </TileSpread>
-          </Tile>
+              </a>
+            )}
+          </div>
         ))
       }
-    </SectionGrid>
-  </SectionSplit>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,87 +1,103 @@
 ---
+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 {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
-import {
-  Tile,
-  TileContent,
-  TileDescription,
-  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
+  description?: 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?: {
-      text?: string
-      href?: string
-    }[]
+    title: string
+    description: string
+    href?: string
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  buttons,
+  services,
+} = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit
-    class="items-start @5xl:grid-cols-[1fr_2fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
+<Section class={cn("", className)}>
+  <SectionContainer
+    class="grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start"
   >
-    <SectionContent>
-      <SectionProse class="text-balance!">
-        <slot />
-      </SectionProse>
-      <SectionActions>
-        {
-          links?.map(({ text, ...link }, i) => (
-            <Button variant={i === 0 ? "outline" : "ghost"} {...link}>
-              {text}
-            </Button>
-          ))
-        }
-      </SectionActions>
-    </SectionContent>
-    <SectionGrid class="@5xl:grid-cols-2">
+    <div class="lg:sticky lg:top-28">
+      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance">
+        {title}
+      </h2>
+      {
+        description && (
+          <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
+            {description}
+          </p>
+        )
+      }
+      {
+        buttons?.length && (
+          <div class="mt-6 flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }) => (
+              <Button as="a" href={href} variant={button.variant}>
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+    <div class="grid gap-6 sm:grid-cols-2">
       {
-        items?.map(({ title, description, href }) => (
-          <Tile href={href} variant="floating">
-            <TileSpread>
-              <TileContent>
-                <TileTitle>{title}</TileTitle>
-                <TileDescription class="text-foreground">
-                  {description}
-                </TileDescription>
-              </TileContent>
-              {href && (
-                <Icon
-                  name="arrow-right"
-                  class="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
-                />
+        services.map((service) => (
+          <div class="group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black">
+            <Image
+              src={service.image.src}
+              alt={service.image.alt}
+              class="absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105"
+              widths={[320, 480, 640]}
+              sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
+            />
+            <div class="absolute inset-0 -z-10 bg-linear-to-t from-black/70 to-transparent" />
+            <div class="flex items-end justify-between gap-4 p-5 text-white">
+              <div class="flex flex-col gap-1">
+                <h3 class="text-lg font-semibold">{service.title}</h3>
+                <p class="text-sm leading-relaxed text-white/75">
+                  {service.description}
+                </p>
+              </div>
+              {service.href && (
+                <a
+                  href={service.href}
+                  class="shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25"
+                >
+                  <Icon name="arrow-right" class="size-4 text-white" />
+                </a>
               )}
-            </TileSpread>
-          </Tile>
+            </div>
+          </div>
         ))
       }
-    </SectionGrid>
-  </SectionSplit>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,93 +1,131 @@
 ---
+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
+  description?: 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,
+  description,
+  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>
+        {
+          description && (
+            <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+              {description}
+            </p>
+          )
+        }
+      </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} variant="floating">
-          <TileMedia class="-mx-6 -mt-6 aspect-4/3">
-            <Image class="size-full! object-cover" 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="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
-              />
+    </div>
+    <div class="grid gap-6 lg:grid-cols-3">
+      {
+        services.map((service, index) => (
+          <a
+            href={service.href ?? "#"}
+            class={cn(
+              "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md",
+              index === 0 && "lg:col-span-2 lg:row-span-2"
             )}
-          </TileSpread>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
+          >
+            <Image
+              src={service.image.src}
+              alt={service.image.alt}
+              class={cn(
+                "w-full object-cover",
+                index === 0 ? "aspect-video" : "aspect-16/10"
+              )}
+              widths={[320, 480, 640, 960]}
+              sizes={
+                index === 0
+                  ? "(min-width: 1024px) 66vw, 100vw"
+                  : "(min-width: 1024px) 33vw, 100vw"
+              }
+            />
+            <div class="flex flex-1 flex-col gap-2 p-5">
+              {service.label && (
+                <Badge variant="secondary" class="w-fit">
+                  {service.label}
+                </Badge>
+              )}
+              <h3
+                class={cn("font-medium", index === 0 ? "text-xl" : "text-base")}
+              >
+                {service.title}
+              </h3>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {service.description}
+              </p>
+              <div
+                class={cn(
+                  "text-primary flex items-center gap-1.5 pt-2 text-sm font-medium",
+                  index !== 0 && "mt-auto"
+                )}
+              >
+                Learn more
+                <Icon
+                  name="arrow-right"
+                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
+                />
+              </div>
+            </div>
+          </a>
+        ))
+      }
+    </div>
+  </SectionContainer>
 </Section>