Building blocks for content-driven sites.

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>