fulldev-ui 0.7.0 → 0.9.1

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

@@ -1,4 +1,5 @@
 ---
+import { cn } from "@/lib/utils"
 import {
   Accordion,
   AccordionContent,
@@ -6,56 +7,71 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  faqs: {
+    id: string
+    question: string
+    answer: string
   }[]
-  items?: {
-    title?: string
-    description?: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, title, description, faqs, buttons } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionContent>
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
-      {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
-        ))
-      }
-    </SectionActions>
-  </SectionContent>
-  <Accordion>
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      <h2
+        class="text-foreground text-3xl 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>
     {
-      items?.map(({ title, description }) => (
-        <AccordionItem>
-          <AccordionTrigger>{title}</AccordionTrigger>
-          <AccordionContent>{description}</AccordionContent>
-        </AccordionItem>
-      ))
+      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>
+      )
     }
-  </Accordion>
+  </SectionContainer>
+  <SectionContainer>
+    <div class="mx-auto w-full max-w-3xl">
+      <Accordion collapsible>
+        {
+          faqs.map((item) => (
+            <AccordionItem value={item.id}>
+              <AccordionTrigger>{item.question}</AccordionTrigger>
+              <AccordionContent>{item.answer}</AccordionContent>
+            </AccordionItem>
+          ))
+        }
+      </Accordion>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,4 +1,5 @@
 ---
+import { cn } from "@/lib/utils"
 import {
   Accordion,
   AccordionContent,
@@ -6,59 +7,76 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  faqs: {
+    id: string
+    question: string
+    answer: string
   }[]
-  items?: {
-    title?: string
-    description?: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, title, description, faqs, buttons } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSplit>
-    <SectionContent>
-      <SectionProse>
-        <slot />
-      </SectionProse>
-      <SectionActions>
+<Section class={cn("", className)}>
+  <SectionContainer>
+    <div
+      class="grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16"
+    >
+      <div class="lg:sticky lg:top-24 lg:self-start">
+        <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-base leading-relaxed text-balance"
+        >
+          {description}
+        </p>
         {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button variant={i === 0 ? "default" : "outline"} {...link}>
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
+          buttons?.length && (
+            <div class="mt-8 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>
+          )
         }
-      </SectionActions>
-    </SectionContent>
-    <Accordion>
-      {
-        items?.map(({ title, description }) => (
-          <AccordionItem>
-            <AccordionTrigger>{title}</AccordionTrigger>
-            <AccordionContent>{description}</AccordionContent>
-          </AccordionItem>
-        ))
-      }
-    </Accordion>
-  </SectionSplit>
+      </div>
+
+      <div>
+        <Accordion collapsible>
+          {
+            faqs.map((item) => (
+              <AccordionItem value={item.id}>
+                <AccordionTrigger>{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))
+          }
+        </Accordion>
+      </div>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,61 +1,55 @@
 ---
+import { cn } from "@/lib/utils"
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
-import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Section,
-  SectionActions,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
+import { Badge } from "@/components/ui/badge"
+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
+  badge?: string
+  title: string
+  description: string
+  faqs: {
+    id: string
+    question: string
+    answer: string
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, badge, title, description, faqs } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionSpread class="@5xl:items-end">
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
-      {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
-        ))
-      }
-    </SectionActions>
-  </SectionSpread>
-  <Accordion>
-    {
-      items?.map(({ title, description }) => (
-        <AccordionItem>
-          <AccordionTrigger>{title}</AccordionTrigger>
-          <AccordionContent>{description}</AccordionContent>
-        </AccordionItem>
-      ))
-    }
-  </Accordion>
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground text-base leading-relaxed text-balance">
+        {description}
+      </p>
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <div class="mx-auto w-full max-w-3xl rounded-xl border px-6 py-2">
+      <Accordion collapsible>
+        {
+          faqs.map((item) => (
+            <AccordionItem value={item.id}>
+              <AccordionTrigger>{item.question}</AccordionTrigger>
+              <AccordionContent>{item.answer}</AccordionContent>
+            </AccordionItem>
+          ))
+        }
+      </Accordion>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,61 +1,46 @@
 ---
+import { cn } from "@/lib/utils"
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
-import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-} from "@/components/ui/section"
+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
+  title: string
+  faqs: {
+    id: string
+    question: string
+    answer: string
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, title, faqs } = Astro.props
 ---
 
-<Section class={className} id={id} style="--section-width: 672px;">
-  <SectionContent>
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
-      {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
-        ))
-      }
-    </SectionActions>
-  </SectionContent>
-  <Accordion>
-    {
-      items?.map(({ title, description }) => (
-        <AccordionItem>
-          <AccordionTrigger>{title}</AccordionTrigger>
-          <AccordionContent>{description}</AccordionContent>
-        </AccordionItem>
-      ))
-    }
-  </Accordion>
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center">
+    <div class="mx-auto w-full max-w-3xl">
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <div class="mt-10">
+        <Accordion collapsible>
+          {
+            faqs.map((item) => (
+              <AccordionItem value={item.id}>
+                <AccordionTrigger>{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))
+          }
+        </Accordion>
+      </div>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,90 +1,89 @@
 ---
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-} from "@/components/ui/section"
-import {
-  Tile,
-  TileActions,
-  TileContent,
-  TileDescription,
-  TileMedia,
-  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
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  items?: {
-    title?: string
-    description?: string
-    icon?: string
+  features: {
+    title: string
+    description: string
+    icon: string
     href?: string
-    links?: {
-      icon?: string
-      text?: string
-      href?: string
-      target?: string
-    }[]
+    linkText?: string
   }[]
 }
 
-const { class: className, id, links, items } = Astro.props
+const { class: className, title, description, buttons, features } = Astro.props
 ---
 
-<Section class={className} id={id}>
-  <SectionContent>
-    <SectionProse>
-      <slot />
-    </SectionProse>
-    <SectionActions>
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center gap-6 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>
+      <p
+        class="text-muted-foreground max-w-2xl 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}
+              variant={button.variant ?? (index === 0 ? "default" : "outline")}
+              {...button}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    }
+  </SectionContainer>
+  <SectionContainer>
+    <div class="grid gap-6 sm:grid-cols-2">
       {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
+        features.map((feature) => (
+          <div class="group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors">
+            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
+              <Icon name={feature.icon} class="size-5" />
+            </div>
+            <div class="flex flex-col gap-1.5">
+              <h3 class="text-foreground text-base font-medium">
+                {feature.title}
+              </h3>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+            {feature.href && feature.linkText && (
+              <a
+                href={feature.href}
+                class="text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline"
+              >
+                {feature.linkText}
+                <Icon name="arrow-right" class="size-3.5" />
+              </a>
+            )}
+          </div>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  <SectionGrid>
-    {
-      items?.map(({ title, description, icon, links }) => (
-        <Tile>
-          <TileMedia variant="icon">
-            <Icon name={icon} />
-          </TileMedia>
-          <TileContent>
-            <TileTitle>{title}</TileTitle>
-            <TileDescription>{description}</TileDescription>
-          </TileContent>
-          <TileActions>
-            {links?.map(({ icon, text, href, target }) => (
-              <Button
-                class="h-auto p-0"
-                variant="link"
-                href={href}
-                target={target}
-              >
-                {icon && <Icon name={icon} />}
-                {text}
-              </Button>
-            ))}
-          </TileActions>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
+    </div>
+  </SectionContainer>
 </Section>