fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -0,0 +1,99 @@
+---
+import type { ImageMetadata } from "astro"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
+    }[]
+    rating: number
+    text: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+} = Astro.props
+---
+
+<Section variant="floating" class={cn("", className)}>
+  <SectionContainer class="items-center text-center">
+    {
+      socialProof && (
+        <div class="flex flex-col items-center gap-3">
+          <AvatarGroup>
+            {socialProof.avatars.map((avatar) => (
+              <Avatar class="ring-background size-11 ring">
+                <AvatarImage
+                  src={avatar.image}
+                  alt={avatar.name ?? avatar.initials}
+                />
+                <AvatarFallback>{avatar.initials}</AvatarFallback>
+              </Avatar>
+            ))}
+          </AvatarGroup>
+          <div class="flex items-center gap-2">
+            <Rating value={socialProof.rating} />
+            <span class="text-muted-foreground text-sm">
+              {socialProof.text}
+            </span>
+          </div>
+        </div>
+      )
+    }
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      <h2
+        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+        {description}
+      </p>
+    </div>
+    {
+      buttons?.length && (
+        <div class="flex flex-wrap justify-center gap-3">
+          {buttons.map(({ href, label, ...button }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={
+                button.variant ?? (index === 0 ? "default" : "secondary")
+              }
+              {...button}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    }
+  </SectionContainer>
+</Section>

package/src/components/blocks/cta-2.astro

@@ -0,0 +1,114 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
+    }[]
+    rating: number
+    text: string
+  }
+  image: {
+    src: ImageMetadata
+    alt: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+  image,
+} = Astro.props
+---
+
+<Section variant="floating" class={cn("", className)}>
+  <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h2
+          class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        <p class="text-muted-foreground text-lg leading-relaxed">
+          {description}
+        </p>
+      </div>
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                size="lg"
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "outline")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+      {
+        socialProof && (
+          <div class="flex items-center gap-3">
+            <AvatarGroup>
+              {socialProof.avatars.map((avatar) => (
+                <Avatar class="ring-background size-10 ring">
+                  <AvatarImage
+                    src={avatar.image}
+                    alt={avatar.name ?? avatar.initials}
+                  />
+                  <AvatarFallback>{avatar.initials}</AvatarFallback>
+                </Avatar>
+              ))}
+            </AvatarGroup>
+            <div class="flex flex-col gap-0.5">
+              <Rating value={socialProof.rating} />
+              <span class="text-muted-foreground text-xs">
+                {socialProof.text}
+              </span>
+            </div>
+          </div>
+        )
+      }
+    </div>
+    <Image
+      src={image.src}
+      alt={image.alt}
+      class="aspect-4/3 w-full rounded-xl border object-cover"
+      widths={[640, 960, 1280]}
+      sizes="(min-width: 1024px) 50vw, 100vw"
+    />
+  </SectionContainer>
+</Section>

package/src/components/blocks/cta-3.astro

@@ -0,0 +1,103 @@
+---
+import type { ImageMetadata } from "astro"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
+    }[]
+    rating: number
+    text: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+} = Astro.props
+---
+
+<Section variant="floating" class={cn("bg-accent/50 shadow-none", className)}>
+  <SectionContainer
+    class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
+  >
+    <div class="flex flex-col gap-5">
+      <h2
+        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed">
+        {description}
+      </p>
+    </div>
+    <div class="flex flex-col gap-6 lg:items-end">
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                size="lg"
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "secondary")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+      {
+        socialProof && (
+          <div class="flex items-center gap-3">
+            <AvatarGroup>
+              {socialProof.avatars.map((avatar) => (
+                <Avatar class="ring-background size-11 ring">
+                  <AvatarImage
+                    src={avatar.image}
+                    alt={avatar.name ?? avatar.initials}
+                  />
+                  <AvatarFallback>{avatar.initials}</AvatarFallback>
+                </Avatar>
+              ))}
+            </AvatarGroup>
+            <div class="flex flex-col gap-0.5">
+              <Rating value={socialProof.rating} />
+              <span class="text-muted-foreground text-xs">
+                {socialProof.text}
+              </span>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,113 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
+    }[]
+    rating: number
+    text: string
+  }
+  image: {
+    src: ImageMetadata
+    alt: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+  image,
+} = Astro.props
+---
+
+<Section
+  variant="floating"
+  class={cn("dark bg-background overflow-hidden", className)}
+>
+  <Image
+    src={image.src}
+    alt={image.alt}
+    class="absolute inset-0 size-full object-cover opacity-50"
+    widths={[640, 960, 1280, 1536]}
+    sizes="(min-width: 80rem) 80rem, 100vw"
+  />
+  <SectionContainer class="items-center text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      <h2
+        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+        {description}
+      </p>
+    </div>
+    {
+      buttons?.length && (
+        <div class="flex flex-wrap justify-center gap-3">
+          {buttons.map(({ href, label, ...button }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={button.variant ?? (index === 0 ? "default" : "outline")}
+              {...button}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    }
+    {
+      socialProof && (
+        <div class="flex items-center gap-3">
+          <AvatarGroup>
+            {socialProof.avatars.map((avatar) => (
+              <Avatar class="ring-background size-11 ring">
+                <AvatarImage
+                  src={avatar.image}
+                  alt={avatar.name ?? avatar.initials}
+                />
+                <AvatarFallback>{avatar.initials}</AvatarFallback>
+              </Avatar>
+            ))}
+          </AvatarGroup>
+          <div class="flex flex-col gap-0.5">
+            <Rating value={socialProof.rating} />
+            <span class="text-muted-foreground text-sm">
+              {socialProof.text}
+            </span>
+          </div>
+        </div>
+      )
+    }
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,89 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  features?: string[]
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  image: {
+    src: ImageMetadata
+    alt: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  features,
+  buttons,
+  image,
+} = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h2
+          class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        <p class="text-muted-foreground text-lg leading-relaxed">
+          {description}
+        </p>
+      </div>
+      {
+        features?.length && (
+          <ul class="flex flex-col gap-3">
+            {features.map((feature) => (
+              <li class="flex items-center gap-3 text-sm">
+                <Icon name="check" class="text-primary size-4 shrink-0" />
+                {feature}
+              </li>
+            ))}
+          </ul>
+        )
+      }
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                size="lg"
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "outline")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+    <Image
+      src={image.src}
+      alt={image.alt}
+      class="aspect-4/3 w-full rounded-xl border object-cover"
+      widths={[640, 960, 1280]}
+      sizes="(min-width: 1024px) 50vw, 100vw"
+    />
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,114 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Rating } from "@/components/ui/rating"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
+    }[]
+    rating: number
+    text: string
+  }
+  image: {
+    src: ImageMetadata
+    alt: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+  image,
+} = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
+    <Image
+      src={image.src}
+      alt={image.alt}
+      class="aspect-4/3 w-full rounded-xl border object-cover"
+      widths={[640, 960, 1280]}
+      sizes="(min-width: 1024px) 50vw, 100vw"
+    />
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h2
+          class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        <p class="text-muted-foreground text-lg leading-relaxed">
+          {description}
+        </p>
+      </div>
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                size="lg"
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "outline")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+      {
+        socialProof && (
+          <div class="flex items-center gap-3">
+            <AvatarGroup>
+              {socialProof.avatars.map((avatar) => (
+                <Avatar class="ring-background size-10 ring">
+                  <AvatarImage
+                    src={avatar.image}
+                    alt={avatar.name ?? avatar.initials}
+                  />
+                  <AvatarFallback>{avatar.initials}</AvatarFallback>
+                </Avatar>
+              ))}
+            </AvatarGroup>
+            <div class="flex flex-col gap-0.5">
+              <Rating value={socialProof.rating} />
+              <span class="text-muted-foreground text-xs">
+                {socialProof.text}
+              </span>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  </SectionContainer>
+</Section>