fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,72 +1,75 @@
 ---
+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,
-  TileDescription,
-  TileSplit,
-  TileTitle,
-} from "@/components/ui/tile"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
 
-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
-    href?: string
-    links?: {
-      icon?: string
-      text?: string
-      href?: string
-      target?: string
-    }[]
+  features: {
+    title: string
+    description: 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>
+    <div class="flex max-w-2xl flex-col gap-4">
+      <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>
       {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button variant={i === 0 ? "default" : "outline"} {...link}>
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
+        buttons?.length && (
+          <div class="mt-2 flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }, index) => (
+              <Button
+                as="a"
+                href={href}
+                variant={
+                  button.variant ?? (index === 0 ? "default" : "outline")
+                }
+                {...button}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        features.map((feature) => (
+          <div>
+            <Separator />
+            <div class="pt-6">
+              <h3 class="text-foreground text-lg font-medium">
+                {feature.title}
+              </h3>
+              <p class="text-muted-foreground mt-2 text-sm leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          </div>
         ))
       }
-    </SectionActions>
-  </SectionContent>
-  <SectionGrid class="grid-cols-1! gap-12">
-    {
-      items?.map(({ title, description }) => (
-        <Tile class="border-t pt-12">
-          <TileSplit>
-            <TileTitle>{title}</TileTitle>
-            <TileDescription>{description}</TileDescription>
-          </TileSplit>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
+    </div>
+  </SectionContainer>
 </Section>

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

@@ -1,92 +1,94 @@
 ---
-import {
-  Footer,
-  FooterDescription,
-  FooterGrid,
-  FooterGroup,
-  FooterGroupLabel,
-  FooterMenu,
-  FooterMenuItem,
-  FooterMenuLink,
-  FooterSplit,
-} from "@/components/ui/footer"
+import { cn } from "@/lib/utils"
 import { Icon } from "@/components/ui/icon"
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
 
-interface Props {
-  logo?: {
-    src?: string
-    alt?: string
-    text?: string
-    href?: string
-  }
-  description?: string
-  socials?: string[]
-  menus?: {
-    text?: string
-    href?: string
-    links?: {
-      text?: string
-      href?: string
-    }[]
+type Props = {
+  class?: string
+  brandName: string
+  brandHref: string
+  description: string
+  socials?: {
+    label: string
+    href: string
+    icon: string
   }[]
-  links?: {
-    href?: string
-    text?: string
-    icon?: string
+  columns: {
+    title: string
+    links: {
+      label: string
+      href: string
+    }[]
   }[]
+  copyright: string
 }
 
-const { logo, description, links, socials, menus } = Astro.props
+const {
+  class: className,
+  brandName,
+  brandHref,
+  description,
+  socials,
+  columns,
+  copyright,
+} = Astro.props
 ---
 
-<Footer>
-  <FooterSplit class="@5xl:grid-cols-[1fr_3fr]">
-    <FooterGroup>
-      <Logo href={logo?.href || "/"}>
-        <LogoImage src={logo?.src} alt={logo?.alt} />
-        <LogoText>{logo?.text}</LogoText>
-      </Logo>
-      <FooterDescription>{description}</FooterDescription>
-      <FooterMenu>
-        {
-          links?.map(({ href, icon, text }) => (
-            <FooterMenuItem>
-              <FooterMenuLink href={href}>
-                <Icon href={href} name={icon} />
-                {text}
-              </FooterMenuLink>
-            </FooterMenuItem>
-          ))
-        }
-      </FooterMenu>
-      <FooterMenu orientation="horizontal">
-        {
-          socials?.map((social) => (
-            <FooterMenuItem>
-              <FooterMenuLink href={social}>
-                <Icon href={social} />
-              </FooterMenuLink>
-            </FooterMenuItem>
-          ))
-        }
-      </FooterMenu>
-    </FooterGroup>
-    <FooterGrid class="@5xl:justify-end">
-      {
-        menus?.map((menu) => (
-          <FooterGroup>
-            <FooterGroupLabel>{menu.text}</FooterGroupLabel>
-            <FooterMenu>
-              {menu.links?.map(({ href, text }) => (
-                <FooterMenuItem>
-                  <FooterMenuLink href={href}>{text}</FooterMenuLink>
-                </FooterMenuItem>
-              ))}
-            </FooterMenu>
-          </FooterGroup>
-        ))
-      }
-    </FooterGrid>
-  </FooterSplit>
-</Footer>
+<footer class={cn("", className)}>
+  <Section class="py-16 lg:py-20">
+    <SectionContainer>
+      <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
+        <div class="flex flex-col gap-5">
+          <Logo href={brandHref}>
+            <LogoText>{brandName}</LogoText>
+          </Logo>
+          <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
+            {description}
+          </p>
+          {
+            socials && socials.length > 0 && (
+              <div class="flex items-center gap-3">
+                {socials.map((social) => (
+                  <a
+                    href={social.href}
+                    class="text-muted-foreground hover:text-foreground transition-colors"
+                    aria-label={social.label}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <Icon name={social.icon} class="size-4" />
+                  </a>
+                ))}
+              </div>
+            )
+          }
+        </div>
+        <div class="grid gap-8 sm:grid-cols-3">
+          {
+            columns.map((column) => (
+              <div class="flex flex-col gap-3">
+                <p class="text-sm font-medium">{column.title}</p>
+                <ul class="flex flex-col gap-2.5">
+                  {column.links.map((link) => (
+                    <li>
+                      <a
+                        href={link.href}
+                        class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <Separator />
+      <p class="text-muted-foreground text-sm">{copyright}</p>
+    </SectionContainer>
+  </Section>
+</footer>

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

@@ -1,61 +1,80 @@
 ---
-import {
-  Footer,
-  FooterCopyright,
-  FooterDescription,
-  FooterGroup,
-  FooterMenu,
-  FooterMenuItem,
-  FooterMenuLink,
-} from "@/components/ui/footer"
+import { cn } from "@/lib/utils"
 import { Icon } from "@/components/ui/icon"
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
 
-interface Props {
-  logo?: {
-    src?: string
-    alt?: string
-    text?: string
-    href?: string
-  }
-  description?: string
+type Props = {
+  class?: string
+  brandName: string
+  brandHref: string
+  description: string
   links?: {
-    text?: string
-    href?: string
+    label: string
+    href: string
   }[]
-  socials?: string[]
+  socials?: {
+    label: string
+    href: string
+    icon: string
+  }[]
+  copyright: string
 }
 
-const { logo, description, links, socials } = Astro.props
+const {
+  class: className,
+  brandName,
+  brandHref,
+  description,
+  links,
+  socials,
+  copyright,
+} = Astro.props
 ---
 
-<Footer class="items-center">
-  <FooterGroup class="items-center">
-    <Logo href={logo?.href || "/"}>
-      <LogoImage src={logo?.src} alt={logo?.alt} />
-      <LogoText>{logo?.text}</LogoText>
-    </Logo>
-    <FooterDescription>{description}</FooterDescription>
-    <FooterMenu orientation="horizontal">
+<footer class={cn("", className)}>
+  <Section class="py-12 lg:py-16">
+    <SectionContainer class="items-center text-center">
+      <Logo href={brandHref}>
+        <LogoText>{brandName}</LogoText>
+      </Logo>
+      <p class="text-muted-foreground max-w-md text-sm leading-relaxed">
+        {description}
+      </p>
       {
-        links?.map(({ href, text }) => (
-          <FooterMenuItem>
-            <FooterMenuLink href={href}>{text}</FooterMenuLink>
-          </FooterMenuItem>
-        ))
+        links && links.length > 0 && (
+          <nav class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+            {links.map((link) => (
+              <a
+                href={link.href}
+                class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        )
       }
-    </FooterMenu>
-    <FooterMenu orientation="horizontal">
       {
-        socials?.map((social) => (
-          <FooterMenuItem>
-            <FooterMenuLink href={social}>
-              <Icon href={social} />
-            </FooterMenuLink>
-          </FooterMenuItem>
-        ))
+        socials && socials.length > 0 && (
+          <div class="flex items-center justify-center gap-3">
+            {socials.map((social) => (
+              <a
+                href={social.href}
+                class="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label={social.label}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Icon name={social.icon} class="size-4" />
+              </a>
+            ))}
+          </div>
+        )
       }
-    </FooterMenu>
-  </FooterGroup>
-  <FooterCopyright>{logo?.text}</FooterCopyright>
-</Footer>
+      <Separator />
+      <p class="text-muted-foreground text-sm">{copyright}</p>
+    </SectionContainer>
+  </Section>
+</footer>

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

@@ -1,102 +1,117 @@
 ---
-import {
-  Footer,
-  FooterCopyright,
-  FooterDescription,
-  FooterGrid,
-  FooterGroup,
-  FooterGroupLabel,
-  FooterMenu,
-  FooterMenuItem,
-  FooterMenuLink,
-  FooterSplit,
-  FooterSpread,
-} from "@/components/ui/footer"
+import { cn } from "@/lib/utils"
 import { Icon } from "@/components/ui/icon"
-import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+import { Logo, LogoText } from "@/components/ui/logo"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Separator } from "@/components/ui/separator"
 
-interface Props {
-  logo?: {
-    src?: string
-    alt?: string
-    text?: string
-    href?: string
-  }
-  description?: string
-  socials?: string[]
-  menus?: {
-    text?: string
-    href?: string
-    links?: {
-      text?: string
-      href?: string
+type Props = {
+  class?: string
+  brandName: string
+  brandHref: string
+  description: string
+  socials?: {
+    label: string
+    href: string
+    icon: string
+  }[]
+  columns: {
+    title: string
+    links: {
+      label: string
+      href: string
     }[]
   }[]
-  links?: {
-    href?: string
-    text?: string
-    icon?: string
+  copyright: string
+  bottomLinks?: {
+    label: string
+    href: string
   }[]
 }
 
-const { logo, description, links, socials, menus } = Astro.props
+const {
+  class: className,
+  brandName,
+  brandHref,
+  description,
+  socials,
+  columns,
+  copyright,
+  bottomLinks,
+} = Astro.props
 ---
 
-<Footer>
-  <FooterSplit class="@5xl:grid-cols-[1fr_3fr]">
-    <FooterDescription class="text-base">{description}</FooterDescription>
-    <FooterGrid class="@5xl:justify-end">
-      {
-        menus?.map((menu) => (
-          <FooterGroup>
-            <FooterGroupLabel>{menu.text}</FooterGroupLabel>
-            <FooterMenu>
-              {menu.links?.map(({ href, text }) => (
-                <FooterMenuItem>
-                  <FooterMenuLink href={href}>{text}</FooterMenuLink>
-                </FooterMenuItem>
+<footer class={cn("", className)}>
+  <Section class="py-16 lg:py-20">
+    <SectionContainer>
+      <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
+        <div class="flex flex-col gap-5">
+          <Logo href={brandHref}>
+            <LogoText>{brandName}</LogoText>
+          </Logo>
+          <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
+            {description}
+          </p>
+          {
+            socials && socials.length > 0 && (
+              <div class="flex items-center gap-3">
+                {socials.map((social) => (
+                  <a
+                    href={social.href}
+                    class="text-muted-foreground hover:text-foreground transition-colors"
+                    aria-label={social.label}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <Icon name={social.icon} class="size-4" />
+                  </a>
+                ))}
+              </div>
+            )
+          }
+        </div>
+        <div class="grid gap-8 sm:grid-cols-3">
+          {
+            columns.map((column) => (
+              <div class="flex flex-col gap-3">
+                <p class="text-sm font-medium">{column.title}</p>
+                <ul class="flex flex-col gap-2.5">
+                  {column.links.map((link) => (
+                    <li>
+                      <a
+                        href={link.href}
+                        class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <Separator />
+      <div
+        class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+      >
+        <p class="text-muted-foreground text-sm">{copyright}</p>
+        {
+          bottomLinks && bottomLinks.length > 0 && (
+            <nav class="flex flex-wrap items-center gap-x-5 gap-y-2">
+              {bottomLinks.map((link) => (
+                <a
+                  href={link.href}
+                  class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                >
+                  {link.label}
+                </a>
               ))}
-            </FooterMenu>
-          </FooterGroup>
-        ))
-      }
-    </FooterGrid>
-  </FooterSplit>
-  <Logo class="h-auto max-h-none w-full max-w-none" href={logo?.href || "/"}>
-    <LogoImage
-      src={logo?.src}
-      alt={logo?.alt}
-      sizes="(min-width: 1536px) 1536px, 100vw"
-      class="h-auto max-h-none w-full max-w-none object-contain"
-    />
-    <LogoText>{logo?.text}</LogoText>
-  </Logo>
-  <FooterSpread>
-    <FooterCopyright>{logo?.text}</FooterCopyright>
-    <FooterMenu
-      orientation="horizontal"
-      class="@5xl:absolute @5xl:left-1/2 @5xl:-translate-x-1/2"
-    >
-      {
-        socials?.map((social) => (
-          <FooterMenuItem>
-            <FooterMenuLink href={social}>
-              <Icon href={social} />
-            </FooterMenuLink>
-          </FooterMenuItem>
-        ))
-      }
-    </FooterMenu>
-    <FooterMenu orientation="horizontal">
-      {
-        links?.map(({ href, text }) => (
-          <FooterMenuItem>
-            <FooterMenuLink class="text-xs" href={href}>
-              {text}
-            </FooterMenuLink>
-          </FooterMenuItem>
-        ))
-      }
-    </FooterMenu>
-  </FooterSpread>
-</Footer>
+            </nav>
+          )
+        }
+      </div>
+    </SectionContainer>
+  </Section>
+</footer>