fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,34 +1,50 @@
 ---
 import { cn } from "@/lib/utils"
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
-import { Section, SectionGrid, SectionProse } from "@/components/ui/section"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  logos?: {
-    src: string
-    alt: string
-    text?: string
+  title: string
+  description?: string
+  brands: {
+    name: string
     href?: string
   }[]
 }
 
-const { class: className, id, logos } = Astro.props
+const { class: className, title, description, brands } = Astro.props
 ---
 
-<Section class={cn("gap-12", className)} id={id}>
-  <SectionProse size="sm">
-    <slot />
-  </SectionProse>
-  <SectionGrid size="sm">
-    {
-      logos?.map(({ src, alt, text, href }) => (
-        <Logo href={href}>
-          <LogoImage src={src} alt={alt} />
-          <LogoText>{text}</LogoText>
-        </Logo>
-      ))
-    }
-  </SectionGrid>
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center gap-10 text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-4">
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      {
+        description && (
+          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )
+      }
+    </div>
+    <div
+      class="text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6"
+    >
+      {
+        brands.map((brand) => (
+          <Logo
+            class="hover:text-foreground grayscale transition-all hover:grayscale-0"
+            href={brand.href}
+          >
+            <LogoText>{brand.name}</LogoText>
+          </Logo>
+        ))
+      }
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,41 +1,55 @@
 ---
 import { cn } from "@/lib/utils"
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
-import { Marquee, MarqueeContent } from "@/components/ui/marquee"
-import { Section, SectionProse } from "@/components/ui/section"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Marquee } from "@/components/ui/marquee"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  logos?: {
-    src: string
-    alt: string
-    text?: string
+  title?: string
+  description?: string
+  brands: {
+    name: string
     href?: string
   }[]
 }
 
-const { class: className, id, logos } = Astro.props
+const { class: className, title, description, brands } = Astro.props
 ---
 
-<Section
-  class={cn("gap-12", className)}
-  id={id}
-  style={{ "--container": "768px" }}
->
-  <SectionProse class="mx-auto text-center" size="sm">
-    <slot />
-  </SectionProse>
-  <Marquee class="mask-x-from-95%">
-    <MarqueeContent>
-      {
-        logos?.map(({ src, alt, text, href }) => (
-          <Logo href={href}>
-            <LogoImage src={src} alt={alt} />
-            <LogoText>{text}</LogoText>
-          </Logo>
-        ))
-      }
-    </MarqueeContent>
+<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>
+    )
+  }
+  <Marquee
+    class="text-muted-foreground mask-x-from-90%"
+    gap="3rem"
+    duration="30s"
+    pauseOnHover
+    infinite
+  >
+    {
+      brands.map((brand) => (
+        <Logo
+          class="hover:text-foreground grayscale transition-all hover:grayscale-0"
+          href={brand.href}
+        >
+          <LogoText>{brand.name}</LogoText>
+        </Logo>
+      ))
+    }
   </Marquee>
 </Section>

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

@@ -1,33 +1,34 @@
 ---
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
-import { Section, SectionGrid, SectionProse } from "@/components/ui/section"
+import { cn } from "@/lib/utils"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  logos?: {
-    src: string
-    alt: string
-    text?: string
+  brands: {
+    name: string
     href?: string
   }[]
 }
 
-const { class: className, id, logos } = Astro.props
+const { class: className, brands } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionProse class="mx-auto text-center" size="sm">
-    <slot />
-  </SectionProse>
-  <SectionGrid class="flex flex-wrap justify-center">
-    {
-      logos?.map(({ src, alt, text, href }) => (
-        <Logo href={href}>
-          <LogoImage src={src} alt={alt} />
-          <LogoText>{text}</LogoText>
-        </Logo>
-      ))
-    }
-  </SectionGrid>
+<Section class={cn("py-12 lg:py-16", className)}>
+  <SectionContainer>
+    <div
+      class="text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6"
+    >
+      {
+        brands.map((brand) => (
+          <Logo
+            class="hover:text-foreground grayscale transition-all hover:grayscale-0"
+            href={brand.href}
+          >
+            <LogoText>{brand.name}</LogoText>
+          </Logo>
+        ))
+      }
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -0,0 +1,106 @@
+---
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Icon } from "@/components/ui/icon"
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
+
+type Props = {
+  class?: string
+  title: string
+  description?: string
+  plans: {
+    name: string
+    description: string
+    price: number
+    currency: string
+    unit: string
+    featured?: boolean
+    features: string[]
+    button: {
+      label: string
+      href: string
+      variant?: "default" | "outline" | "secondary" | "ghost"
+    }
+  }[]
+}
+
+const { class: className, title, description, plans } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center gap-8 text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-4">
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      {
+        description && (
+          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )
+      }
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <div
+      class="mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]"
+    >
+      {
+        plans.map((plan) => (
+          <Card
+            class={cn("flex flex-col", plan.featured && "ring-primary ring-2")}
+          >
+            <CardHeader>
+              <div class="flex items-center gap-2">
+                <CardTitle>{plan.name}</CardTitle>
+                {plan.featured && <Badge>Popular</Badge>}
+              </div>
+              <CardDescription>{plan.description}</CardDescription>
+            </CardHeader>
+            <CardContent class="flex flex-col gap-6">
+              <Price>
+                <PriceValue price={plan.price} currency={plan.currency} />
+                <PriceUnit>{plan.unit}</PriceUnit>
+              </Price>
+              <Separator />
+              <ul class="flex flex-col gap-3">
+                {plan.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>
+            </CardContent>
+            <CardFooter class="mt-auto">
+              <Button
+                as="a"
+                href={plan.button.href}
+                variant={
+                  plan.button.variant ?? (plan.featured ? "default" : "outline")
+                }
+                class="w-full"
+              >
+                {plan.button.label}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,100 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Icon } from "@/components/ui/icon"
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  plans: {
+    name: string
+    description: string
+    price: number
+    compareAt?: number
+    currency: string
+    unit: string
+    features: string[]
+    button: {
+      label: string
+      href: string
+      variant?: "default" | "outline" | "secondary" | "ghost"
+    }
+  }[]
+}
+
+const { class: className, title, description, plans } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-8">
+    <div class="mx-auto max-w-2xl text-center">
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p
+        class="text-muted-foreground mt-4 text-lg leading-relaxed text-balance"
+      >
+        {description}
+      </p>
+    </div>
+    <div
+      class="mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]"
+    >
+      {
+        plans.map((plan, index) => (
+          <Card class="flex flex-col border-none shadow-none">
+            <CardHeader>
+              <CardTitle>{plan.name}</CardTitle>
+              <CardDescription>{plan.description}</CardDescription>
+            </CardHeader>
+            <CardContent class="flex flex-col gap-6">
+              <Price>
+                <PriceValue
+                  price={plan.price}
+                  compareAt={plan.compareAt}
+                  currency={plan.currency}
+                />
+                <PriceUnit>{plan.unit}</PriceUnit>
+              </Price>
+              <Separator />
+              <ul class="flex flex-col gap-3">
+                {plan.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>
+            </CardContent>
+            <CardFooter class="mt-auto">
+              <Button
+                as="a"
+                href={plan.button.href}
+                variant={
+                  plan.button.variant ?? (index === 0 ? "outline" : "default")
+                }
+                class="w-full"
+              >
+                {plan.button.label}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

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

@@ -0,0 +1,92 @@
+---
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Icon } from "@/components/ui/icon"
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
+
+type Props = {
+  class?: string
+  badge?: string
+  title: string
+  description?: string
+  offer: {
+    name: string
+    description: string
+    price: number
+    currency: string
+    unit: string
+    features: string[]
+    button: {
+      label: string
+      href: string
+      variant?: "default" | "outline" | "secondary" | "ghost"
+    }
+  }
+}
+
+const { class: className, badge, title, description, offer } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center gap-8 text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-4">
+      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      {
+        description && (
+          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+            {description}
+          </p>
+        )
+      }
+    </div>
+    <Card class="ring-primary w-full max-w-md ring-2">
+      <CardHeader class="text-left">
+        <CardTitle>{offer.name}</CardTitle>
+        <CardDescription>{offer.description}</CardDescription>
+      </CardHeader>
+      <CardContent class="flex flex-col gap-6 text-left">
+        <Price>
+          <PriceValue price={offer.price} currency={offer.currency} />
+          <PriceUnit>{offer.unit}</PriceUnit>
+        </Price>
+        <Separator />
+        <ul class="flex flex-col gap-3">
+          {
+            offer.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>
+      </CardContent>
+      <CardFooter>
+        <Button
+          as="a"
+          href={offer.button.href}
+          variant={offer.button.variant ?? "default"}
+          class="w-full"
+        >
+          {offer.button.label}
+        </Button>
+      </CardFooter>
+    </Card>
+  </SectionContainer>
+</Section>

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

@@ -1,103 +1,76 @@
 ---
+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 { List, ListItem } from "@/components/ui/list"
-import {
-  NativeCarousel,
-  NativeCarouselContent,
-  NativeCarouselItem,
-  NativeCarouselNext,
-  NativeCarouselPrevious,
-} from "@/components/ui/native-carousel"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  title?: string
-  description?: string
-  list?: string[]
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
-  }[]
-  image?: {
-    src: string
+  badge: string
+  title: string
+  description: string
+  image: {
+    src: ImageMetadata
     alt: string
   }
-  images?: {
-    src: string
-    alt: string
+  price: {
+    value: number
+    currency: string
+    unit: string
+  }
+  note: string
+  buttons: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
 const {
   class: className,
-  id,
+  badge,
   title,
   description,
-  list,
-  links,
-  images,
+  image,
+  price,
+  note,
+  buttons,
 } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit class="items-start @5xl:gap-24">
-    <NativeCarousel>
-      <NativeCarouselContent>
-        {
-          images?.map((image) => (
-            <NativeCarouselItem>
-              <Image
-                class="object-contain"
-                sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
-                {...image}
-              />
-            </NativeCarouselItem>
-          ))
-        }
-      </NativeCarouselContent>
-      <NativeCarouselPrevious class="left-6" />
-      <NativeCarouselNext class="right-6" />
-    </NativeCarousel>
-    <SectionContent>
-      <SectionProse>
-        {title && <h1>{title}</h1>}
-        {description && <p>{description}</p>}
-      </SectionProse>
-      <SectionActions>
+<Section class={cn("", className)}>
+  <SectionContainer class="grid gap-8 lg:grid-cols-2 lg:items-center">
+    <Image
+      src={image.src}
+      alt={image.alt}
+      class="aspect-[16/11] rounded-lg object-cover"
+    />
+    <div class="flex flex-col gap-5">
+      <Badge variant="secondary" class="w-fit">{badge}</Badge>
+      <h1
+        class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl"
+      >
+        {title}
+      </h1>
+      <p class="text-muted-foreground text-lg leading-8">{description}</p>
+      <Price>
+        <PriceValue price={price.value} currency={price.currency} />
+        <PriceUnit>{price.unit}</PriceUnit>
+      </Price>
+      <p class="border-y py-4 text-sm leading-7">{note}</p>
+      <div class="flex flex-wrap gap-3">
         {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "default" : "outline"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
+          buttons.map(({ href, label, ...button }) => (
+            <Button as="a" href={href} variant={button.variant}>
+              {label}
             </Button>
           ))
         }
-      </SectionActions>
-      <List>
-        {
-          list?.map((item) => (
-            <ListItem>
-              <Icon name="check" />
-              {item}
-            </ListItem>
-          ))
-        }
-      </List>
-      <SectionProse>
-        <slot />
-      </SectionProse>
-    </SectionContent>
-  </SectionSplit>
+      </div>
+    </div>
+  </SectionContainer>
 </Section>