Building blocks for content-driven sites.

src/pages/blocks/navigation-headers/navbar-1.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
import { Button } from "@bejamas/ui/components/button";
4
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
5
import {
6
  DropdownMenu,
7
  DropdownMenuTrigger,
8
  DropdownMenuContent,
9
  DropdownMenuItem,
10
  DropdownMenuGroup,
11
  DropdownMenuLabel,
12
  DropdownMenuSeparator,
13
  DropdownMenuShortcut,
14
} from "@bejamas/ui/components/dropdown-menu";
15
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
16
---
17

18
<BlockExampleLayout>
19
  <div class="bg-muted min-h-[1500px]">
20
    <StickySurface
21
      threshold="1rem"
22
      observeStuck
23
      class="top-5 [&.is-stuck]:shadow-sm [&.is-stuck]:max-w-2xl max-w-5xl rounded-2xl h-16 mx-auto"
24
      effects={["elevate"]}
25
      style="--stuck-shadow: var(--shadow-sm)"
26
    >
27
      <NavigationMenu
28
        class="rounded-2xl bg-transparent group-[.is-stuck]/surface:bg-white/40 h-16 backdrop-blur-sm mx-auto transition-all duration-200 ease-out"
29
      >
30
        <div slot="logo" class="flex items-center h-full">
31
          <img
32
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
33
            alt="Acme, Inc."
34
            class="h-7"
35
          />
36
        </div>
37
        <ul slot="links" class="flex items-center space-x-2">
38
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
39
          <li>
40
            <DropdownMenu>
41
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
42
              <DropdownMenuContent class="grid grid-cols-12 gap-2 w-120">
43
                <ul class="col-span-5">
44
                  <li>
45
                    <a
46
                      href="#"
47
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
48
                    >
49
                      <p class="font-medium">About</p>
50
                      <div class="text-muted-foreground text-sm">
51
                        Read more about our company
52
                      </div>
53
                    </a>
54
                  </li>
55
                  <li>
56
                    <a
57
                      href="#"
58
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
59
                    >
60
                      <p class="font-medium w-full">Team</p>
61
                      <div class="text-muted-foreground text-sm">
62
                        Meet our heroes
63
                      </div>
64
                    </a>
65
                  </li>
66
                  <li>
67
                    <a
68
                      href="#"
69
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
70
                    >
71
                      <p class="font-medium w-full">Blog</p>
72
                      <div class="text-muted-foreground text-sm">
73
                        Read our latest news
74
                      </div>
75
                    </a>
76
                  </li>
77
                  <li>
78
                    <a
79
                      href="#"
80
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
81
                    >
82
                      <p class="font-medium w-full">Careers</p>
83
                      <div class="text-muted-foreground text-sm">
84
                        Join our team
85
                      </div>
86
                    </a>
87
                  </li>
88
                </ul>
89
                <div
90
                  class="bg-accent p-4 rounded-lg flex items-end relative col-span-7"
91
                >
92
                  <p class="font-medium relative z-10 text-white">Company</p>
93
                  <img
94
                    src="https://plus.unsplash.com/premium_photo-1755155931545-87b694f49769?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
95
                    class="w-full h-full object-cover absolute top-0 left-0 rounded-lg"
96
                  />
97
                </div>
98
              </DropdownMenuContent>
99
            </DropdownMenu>
100
          </li>
101
          <li>
102
            <Button as="a" href="#" variant="ghost">Contact</Button>
103
          </li>
104
        </ul>
105
        <div slot="actions" class="flex items-center gap-2">
106
          <Button
107
            variant="outline"
108
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
109
            >Log in</Button
110
          >
111
          <Button
112
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
113
          >
114
            <span
115
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
116
              >Contact</span
117
            >
118
            <span
119
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
120
              >Get a demo</span
121
            >
122
          </Button>
123
        </div>
124
      </NavigationMenu>
125
    </StickySurface>
126
  </div>
127
</BlockExampleLayout>

src/pages/blocks/navigation-headers/navbar-2.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3

4
import { Button } from "@bejamas/ui/components/button";
5
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
6
import {
7
  DropdownMenu,
8
  DropdownMenuTrigger,
9
  DropdownMenuContent,
10
  DropdownMenuItem,
11
  DropdownMenuGroup,
12
  DropdownMenuLabel,
13
  DropdownMenuSeparator,
14
  DropdownMenuShortcut,
15
} from "@bejamas/ui/components/dropdown-menu";
16
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
17
---
18

19
<BlockExampleLayout>
20
  <div class="bg-muted min-h-[1500px]">
21
    <div class="bg-muted text-muted-foreground p-4 w-full text-center">
22
      New release available! See the <a
23
        href="#"
24
        class="text-primary">changelog</a
25
      > for more details.
26
    </div>
27
    <StickySurface effects={["line"]} threshold="1rem" observeStuck>
28
      <NavigationMenu>
29
        <div slot="logo" class="flex items-center h-full">
30
          <img
31
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
32
            alt="Acme, Inc."
33
            class="h-8"
34
          />
35
        </div>
36
        <ul slot="links" class="flex items-center space-x-2">
37
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
38
          <li>
39
            <DropdownMenu>
40
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
41
              <DropdownMenuContent>
42
                <ul>
43
                  <li>
44
                    <Button
45
                      href="#"
46
                      as="a"
47
                      variant="ghost"
48
                      class="w-full justify-start">About</Button
49
                    >
50
                  </li>
51
                  <li>
52
                    <Button
53
                      href="#"
54
                      as="a"
55
                      variant="ghost"
56
                      class="w-full justify-start">Team</Button
57
                    >
58
                  </li>
59
                  <li>
60
                    <Button
61
                      href="#"
62
                      as="a"
63
                      variant="ghost"
64
                      class="w-full justify-start">Blog</Button
65
                    >
66
                  </li>
67
                  <li>
68
                    <Button
69
                      href="#"
70
                      as="a"
71
                      variant="ghost"
72
                      class="w-full justify-start">Careers</Button
73
                    >
74
                  </li>
75
                </ul>
76
              </DropdownMenuContent>
77
            </DropdownMenu>
78
          </li>
79
          <li>
80
            <Button as="a" href="#" variant="ghost">Contact</Button>
81
          </li>
82
        </ul>
83
        <div slot="actions" class="flex items-center gap-2">
84
          <Button
85
            variant="outline"
86
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
87
            >Log in</Button
88
          >
89
          <Button
90
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
91
          >
92
            <span
93
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
94
              >Contact</span
95
            >
96
            <span
97
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
98
              >Get a demo</span
99
            >
100
          </Button>
101
        </div>
102
      </NavigationMenu>
103
    </StickySurface>
104
  </div>
105
</BlockExampleLayout>

src/pages/blocks/features/01.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
import { Button } from "@bejamas/ui/components/button";
4
import { Card, CardMedia, CardHeader, CardTitle, CardDescription, CardOverlay } from "@bejamas/ui/components/card";
5
import { ArrowRight } from "@lucide/astro";
6
---
7

8
<BlockExampleLayout>
9
  <div
10
    class="max-w-5xl py-20 mx-auto [container-type:inline-size] text-foreground"
11
  >
12
    <h2 class="font-medium mb-5 leading-none text-[clamp(2rem,12cqw,6rem)]">
13
      you can just eat eggs
14
    </h2>
15

16
    <div class="grid grid-cols-4 gap-4">
17
      <Card variant="ghost" orientation="horizontal">
18
        <CardMedia class="relative">
19
          <img
20
            src="https://pbs.twimg.com/media/G0x-gkSbcAAaH3Z?format=jpg&name=large"
21
            class="rounded-xl"
22
          />
23
          <span
24
            class="absolute top-4 left-4 bg-primary text-primary-foreground px-2 py-1 text-sm font-mono rounded-md"
25
          >
26
            01
27
          </span>
28
        </CardMedia>
29
        <CardHeader variant="ghost">
30
          <CardTitle> Healthy breakfast </CardTitle>
31
          <CardDescription> Eggs are a great source of protein. </CardDescription>
32
        </CardHeader>
33
      </Card>
34

35
      <Card variant="ghost">
36
        <CardMedia class="relative">
37
          <img
38
            src="https://pbs.twimg.com/media/G0x-gj6bAAAJkHH?format=jpg&name=large"
39
            class="rounded-xl"
40
          />
41
          <span
42
            class="absolute top-4 left-4 bg-primary text-primary-foreground px-2 py-1 text-sm font-mono rounded-md"
43
          >
44
            02
45
          </span>
46
        </CardMedia>
47
        <CardHeader>
48
          <CardTitle>Healthy lunch</CardTitle>
49
          <CardDescription>
50
            Egg benefits your heart and brain.
51
          </CardDescription>
52
        </CardHeader>
53
        <CardOverlay variant="glass">
54
          <p>Egg benefits your heart and brain.</p>
55
        </CardOverlay>
56
      </Card>
57

58
      <Card variant="ghost">
59
        <CardMedia class="relative">
60
          <img
61
            src="https://pbs.twimg.com/media/G0x-gkLaUAA1pnb?format=jpg&name=large"
62
            class="rounded-xl"
63
          />
64
          <span
65
            class="absolute top-4 left-4 bg-primary text-primary-foreground px-2 py-1 text-sm font-mono rounded-md"
66
          >
67
            03
68
          </span>
69
        </CardMedia>
70
        <CardHeader>
71
          <CardTitle>Healthy dinner</CardTitle>
72
          <CardDescription>
73
            Egg is a good source of protein.
74
          </CardDescription>
75
        </CardHeader>
76
      </Card>
77

78
      <Card variant="ghost">
79
        <CardMedia class="relative">
80
          <img
81
            src="https://pbs.twimg.com/media/G0x-gkXbcAQMBaT?format=jpg&name=large"
82
            class="rounded-xl"
83
          />
84
          <span
85
            class="absolute top-4 left-4 bg-primary text-primary-foreground px-2 py-1 text-sm font-mono rounded-md"
86
          >
87
            04
88
          </span>
89
        </CardMedia>
90
        <CardHeader>
91
          <CardTitle>Healthy snack</CardTitle>
92
          <CardDescription>
93
            Egg is a good base for a snack.
94
          </CardDescription>
95
        </CardHeader>
96
      </Card>
97
    </div>
98
    <div
99
      class="border-t border-border pt-3 mt-1 flex justify-between items-center gap-4"
100
    >
101
      <p class="text-sm">It's time to eat some eggs</p>
102
      <Button variant="secondary">
103
        Make omelette <ArrowRight class="size-4" />
104
      </Button>
105
    </div>
106
  </div>
107
</BlockExampleLayout>

src/pages/blocks/footers/footer-1/index.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
// import {
4
//   Footer,
5
//   FooterTop,
6
//   FooterMain,
7
//   FooterBottom,
8
//   FooterContainer,
9
//   FooterGrid,
10
//   FooterRow,
11
//   FooterLogo,
12
// } from "../../../ui-next/footer";
13
import {
14
  LinkGroup,
15
  LinkGroupTitle,
16
  LinkGroupList,
17
  LinkGroupItem,
18
} from "@bejamas/ui/components/link-group";
19
import CTA from "./components/cta.astro";
20
import { Button } from "@bejamas/ui/components/button";
21
---
22

23
<BlockExampleLayout>
24
  <!-- <Footer>
25
    <FooterTop>
26
      <FooterContainer>
27
        <div class="text-center py-10">
28
          <h2 class="text-3xl font-medium mb-4">Ready to get started?</h2>
29
          <Button>Get Started</Button>
30
        </div>
31
      </FooterContainer>
32
    </FooterTop>
33
    <FooterMain>
34
      <FooterContainer>
35
        <FooterGrid columns={4}>
36
          <div>
37
            <img src="/logo.svg" alt="Acme" class="h-8" />
38
          </div>
39
          <LinkGroup>
40
            <LinkGroupTitle>Resources</LinkGroupTitle>
41
            <LinkGroupList>
42
              <LinkGroupItem><a href="/blog">Blog</a></LinkGroupItem>
43
              <LinkGroupItem><a href="/docs">Documentation</a></LinkGroupItem>
44
            </LinkGroupList>
45
          </LinkGroup>
46
          <LinkGroup>
47
            <LinkGroupTitle>Company</LinkGroupTitle>
48
            <LinkGroupList>
49
              <LinkGroupItem><a href="#">About</a></LinkGroupItem>
50
              <LinkGroupItem><a href="#">Careers</a></LinkGroupItem>
51
            </LinkGroupList>
52
          </LinkGroup>
53
          <LinkGroup>
54
            <LinkGroupTitle>Legal</LinkGroupTitle>
55
            <LinkGroupList>
56
              <LinkGroupItem><a href="/privacy">Privacy</a></LinkGroupItem>
57
              <LinkGroupItem><a href="/terms">Terms</a></LinkGroupItem>
58
            </LinkGroupList>
59
          </LinkGroup>
60
        </FooterGrid>
61
      </FooterContainer>
62
    </FooterMain>
63
    <FooterBottom separator="soft">
64
      <FooterContainer>
65
        <FooterRow align="between">
66
          <span>© 2025 Acme Inc. All rights reserved.</span>
67
          <nav class="flex gap-4">
68
            <a href="/privacy">Privacy</a>
69
            <a href="/terms">Terms</a>
70
          </nav>
71
        </FooterRow>
72

73
        <FooterLogo size="xl" bleed="full">
74
          <svg
75
            xmlns="http://www.w3.org/2000/svg"
76
            width="1536"
77
            height="485"
78
            viewBox="0 0 1536 485"
79
            fill="none"
80
          >
81
            <path
82
              d="M1145.23 484.473H1020.39L1182.97 3.82764H1337.16L1499.42 484.473H1374.9L1262 124.795H1258.13L1145.23 484.473ZM1129.1 295.118H1390.07V383.505H1129.1V295.118Z"
83
              fill="#1B1B1B"></path>
84
            <path
85
              d="M667.345 484.473V3.82764H865.409C901.538 3.82764 932.721 10.3868 958.958 23.5051C985.194 36.4083 1005.41 54.9029 1019.6 78.9889C1034.01 102.86 1041.22 131.139 1041.22 163.828C1041.22 197.161 1033.9 225.441 1019.28 248.666C1004.87 271.892 984.226 289.634 957.345 301.892C930.463 313.935 898.743 319.957 862.183 319.957H736.7V228.344H840.571C857.99 228.344 872.614 226.086 884.441 221.57C896.485 217.053 905.517 210.064 911.538 200.602C917.775 190.924 920.893 178.666 920.893 163.828C920.893 148.989 917.775 136.731 911.538 127.053C905.517 117.161 896.485 109.849 884.441 105.118C872.614 100.172 857.882 97.6986 840.248 97.6986H783.151V484.473H667.345ZM930.571 484.473L813.474 264.795H937.667L1057.67 484.473H930.571Z"
86
              fill="#1B1B1B"></path>
87
            <path
88
              d="M611.849 3.82764V484.473H496.043V3.82764H611.849Z"
89
              fill="#1B1B1B"></path>
90
            <path
91
              d="M136.452 3.82764L243.226 355.763H247.742L355.161 3.82764H484.839L322.581 484.473H168.387L5.80664 3.82764H136.452Z"
92
              fill="#1B1B1B"></path>
93
            <path
94
              d="M1452.49 55.0532C1452.49 49.7008 1453.78 44.8502 1456.36 40.5014C1458.99 36.1525 1462.5 32.6878 1466.9 30.1072C1471.29 27.4788 1476.14 26.1646 1481.45 26.1646C1486.13 26.1646 1490.43 27.1921 1494.35 29.247C1498.32 31.3019 1501.57 34.0976 1504.1 37.634C1506.68 41.1704 1508.21 45.1847 1508.69 49.6769H1492.34C1491.82 47.383 1490.5 45.5192 1488.4 44.0855C1486.35 42.6041 1484.03 41.8634 1481.45 41.8634C1479.06 41.8634 1476.86 42.4607 1474.85 43.6554C1472.85 44.8024 1471.24 46.3794 1470.05 48.3866C1468.86 50.3459 1468.26 52.5203 1468.26 54.9098C1468.26 57.3471 1468.86 59.5693 1470.05 61.5764C1471.24 63.5358 1472.85 65.1128 1474.85 66.3075C1476.86 67.5023 1479.06 68.0996 1481.45 68.0996C1484.08 68.0996 1486.37 67.3828 1488.33 65.9491C1490.34 64.4677 1491.58 62.6039 1492.06 60.3578H1508.47C1507.99 64.8022 1506.49 68.7926 1503.96 72.329C1501.47 75.8654 1498.27 78.661 1494.35 80.716C1490.43 82.7709 1486.13 83.8223 1481.45 83.8701C1476.14 83.8223 1471.29 82.5081 1466.9 79.9275C1462.5 77.3468 1458.99 73.8821 1456.36 69.5333C1453.78 65.1367 1452.49 60.31 1452.49 55.0532ZM1480.95 110.106C1473.4 110.106 1466.27 108.673 1459.58 105.805C1452.94 102.938 1447.09 98.9954 1442.02 93.9775C1436.96 88.9118 1432.99 83.0577 1430.12 76.415C1427.3 69.7723 1425.89 62.6517 1425.89 55.0532C1425.94 47.4547 1427.4 40.3341 1430.27 33.6914C1433.13 27.0009 1437.08 21.1467 1442.09 16.1289C1447.16 11.0632 1453.01 7.12059 1459.66 4.30103C1466.3 1.43368 1473.4 0 1480.95 0C1488.59 0 1495.74 1.43368 1502.38 4.30103C1509.02 7.12059 1514.85 11.0632 1519.87 16.1289C1524.94 21.1467 1528.88 27.0009 1531.7 33.6914C1534.57 40.3341 1536 47.4547 1536 55.0532C1536.05 62.6517 1534.64 69.7723 1531.77 76.415C1528.95 83.0577 1525.01 88.9118 1519.94 93.9775C1514.92 98.9954 1509.07 102.938 1502.38 105.805C1495.74 108.673 1488.59 110.106 1480.95 110.106ZM1480.95 90.8951C1485.92 90.8951 1490.58 89.9632 1494.92 88.0994C1499.32 86.2356 1503.17 83.6789 1506.47 80.4292C1509.76 77.1318 1512.34 73.3326 1514.21 69.0315C1516.07 64.6827 1517 60.0233 1517 55.0532C1517 50.0831 1516.07 45.4236 1514.21 41.0748C1512.34 36.6782 1509.74 32.8312 1506.39 29.5337C1503.1 26.2363 1499.27 23.6796 1494.92 21.8636C1490.62 19.9998 1485.96 19.0679 1480.95 19.0679C1476.02 19.0679 1471.39 19.9998 1467.04 21.8636C1462.74 23.7273 1458.94 26.308 1455.64 29.6054C1452.34 32.9029 1449.76 36.726 1447.9 41.0748C1446.04 45.4236 1445.1 50.0831 1445.1 55.0532C1445.1 59.9755 1446.01 64.611 1447.83 68.9598C1449.69 73.3087 1452.27 77.1318 1455.57 80.4292C1458.87 83.7267 1462.67 86.3073 1466.97 88.1711C1471.32 89.9871 1475.98 90.8951 1480.95 90.8951Z"
95
              fill="#1B1B1B"></path>
96
          </svg>
97
        </FooterLogo>
98
      </FooterContainer>
99
    </FooterBottom>
100
  </Footer> -->
101
</BlockExampleLayout>

src/pages/blocks/footers/footer-1/components/cta.astro

1
---
2
import { Button } from "@bejamas/ui/components/button";
3
---
4

5
<div
6
  class="flex flex-col items-center gap-4 py-20 border-b border-footer-border"
7
>
8
  <h3 class="text-4xl mb-2">Get started with ChatGPT</h3>
9
  <Button size="lg">Download</Button>
10
</div>