Footer Blocks

1import { Github, Sparkles } from "lucide-react";
2 
3import { Button } from "@/components/ui/atoms/button";
4import {
5  Footer,
6  FooterBottom,
7  FooterBrand,
8  FooterGrid,
9  FooterHeading,
10  FooterLink,
11  FooterSection,
12  FooterSocialLink,
13  FooterSocials,
14} from "@/components/ui/organisms/footer";
15import { FooterNewsletter } from "@/components/ui/organisms/footer-newsletter";
16 
17function CompactFooterBlock() {
18  return (
19    <div data-slot="compact-footer-block" className="@container/footer-block">
20      <Footer variant="compact">
21        <FooterBottom className="m-0 border-0 pt-0">
22          <span>Poyraz UI</span>
23          <span>Open source under MIT.</span>
24        </FooterBottom>
25      </Footer>
26    </div>
27  );
28}
29 
30function CenteredFooterBlock() {
31  return (
32    <div data-slot="centered-footer-block" className="@container/footer-block">
33      <Footer variant="centered">
34        <FooterBrand className="mx-auto items-center">
35          <Sparkles className="size-5 text-primary" />
36          <p className="text-sm font-semibold">Poyraz UI</p>
37        </FooterBrand>
38        <div className="mt-4 flex flex-wrap justify-center gap-4">
39          <FooterLink href="#">Components</FooterLink>
40          <FooterLink href="#">Blocks</FooterLink>
41          <FooterLink href="#">Docs</FooterLink>
42        </div>
43      </Footer>
44    </div>
45  );
46}
47 
48function BrandedFooterBlock() {
49  return (
50    <div data-slot="branded-footer-block" className="@container/footer-block">
51      <Footer variant="branded">
52        <div className="grid gap-8 @lg/footer:grid-cols-[1.3fr_2fr]">
53          <div>
54            <FooterBrand>
55              <p className="text-lg font-semibold">Poyraz UI</p>
56              <p className="text-sm text-muted-foreground">
57                Open React components with a restrained soft glass language.
58              </p>
59              <FooterSocials>
60                <FooterSocialLink href="#" aria-label="GitHub">
61                  <Github className="size-4" />
62                </FooterSocialLink>
63              </FooterSocials>
64            </FooterBrand>
65            <FooterNewsletter className="mt-5" />
66          </div>
67          <FooterGrid className="@lg/footer:grid-cols-2">
68            <FooterSection>
69              <FooterHeading>Product</FooterHeading>
70              <FooterLink href="#">Components</FooterLink>
71              <FooterLink href="#">Blocks</FooterLink>
72            </FooterSection>
73            <FooterSection>
74              <FooterHeading>Start</FooterHeading>
75// … truncated