iftrace: rebuild site with fulldev ui astro
This commit is contained in:
root
parent
8d3610b5d8
commit
e70d1ead43
395 changed files with 23806 additions and 15151 deletions
18
ifttt-src/.gitignore
vendored
Normal file
18
ifttt-src/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
node_modules/
|
||||
.astro/
|
||||
|
||||
# build output (written to ../ifttt)
|
||||
dist/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# env
|
||||
.env
|
||||
.env.*
|
||||
|
||||
# OS/editor
|
||||
.DS_Store
|
||||
14
ifttt-src/astro.config.mjs
Normal file
14
ifttt-src/astro.config.mjs
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "astro/config";
|
||||
|
||||
export default defineConfig({
|
||||
site: "https://infrafabric.io",
|
||||
output: "static",
|
||||
outDir: "../ifttt",
|
||||
build: {
|
||||
assets: "assets/_astro",
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
6264
ifttt-src/package-lock.json
generated
Normal file
6264
ifttt-src/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
25
ifttt-src/package.json
Normal file
25
ifttt-src/package.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "iftrace-site",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"astro": "^5.16.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-static": "^0.546.0",
|
||||
"sharp": "^0.34.5",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.8.1",
|
||||
"typescript": "^5.9.3"
|
||||
}
|
||||
}
|
||||
BIN
ifttt-src/public/assets/eyes-only-dave.png
Normal file
BIN
ifttt-src/public/assets/eyes-only-dave.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
ifttt-src/public/assets/fonts/inter/InterVariable-Italic.woff2
Normal file
BIN
ifttt-src/public/assets/fonts/inter/InterVariable-Italic.woff2
Normal file
Binary file not shown.
BIN
ifttt-src/public/assets/fonts/inter/InterVariable.woff2
Normal file
BIN
ifttt-src/public/assets/fonts/inter/InterVariable.woff2
Normal file
Binary file not shown.
92
ifttt-src/public/assets/fonts/inter/LICENSE.txt
Normal file
92
ifttt-src/public/assets/fonts/inter/LICENSE.txt
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION AND CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
60
ifttt-src/public/assets/if-logo-simple.svg
Normal file
60
ifttt-src/public/assets/if-logo-simple.svg
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1024"
|
||||
height="1024"
|
||||
viewBox="0 0 512 512"
|
||||
role="img"
|
||||
aria-labelledby="title desc"
|
||||
>
|
||||
<title id="title">if. mark</title>
|
||||
<desc id="desc">Stylized “if.” mark with subtle gradient and shadow.</desc>
|
||||
|
||||
<defs>
|
||||
<linearGradient id="ifBlue" x1="70" y1="0" x2="440" y2="0" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#0b253b" />
|
||||
<stop offset="0.44" stop-color="#164d7a" />
|
||||
<stop offset="0.56" stop-color="#1b5a8e" />
|
||||
<stop offset="1" stop-color="#0b253b" />
|
||||
</linearGradient>
|
||||
|
||||
<filter id="ifShadow" x="-40%" y="-40%" width="180%" height="180%">
|
||||
<feOffset in="SourceAlpha" dx="0" dy="14" result="off" />
|
||||
<feGaussianBlur in="off" stdDeviation="12" result="blur" />
|
||||
<feColorMatrix
|
||||
in="blur"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0.28 0"
|
||||
result="shadow"
|
||||
/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadow" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!--
|
||||
Mark group:
|
||||
- i (stem + dot)
|
||||
- f (stem + top bar + crossbar)
|
||||
- period dot
|
||||
-->
|
||||
<g filter="url(#ifShadow)" transform="translate(75 15)" fill="url(#ifBlue)">
|
||||
<!-- i -->
|
||||
<circle cx="35" cy="125" r="32" />
|
||||
<rect x="0" y="170" width="70" height="220" rx="8" />
|
||||
|
||||
<!-- f -->
|
||||
<rect x="120" y="140" width="86" height="250" rx="10" />
|
||||
<rect x="120" y="110" width="150" height="90" rx="45" />
|
||||
<rect x="120" y="240" width="140" height="80" rx="28" />
|
||||
|
||||
<!-- . -->
|
||||
<circle cx="330" cy="358" r="32" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
72
ifttt-src/public/assets/ifttt-quotes.json
Normal file
72
ifttt-src/public/assets/ifttt-quotes.json
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
[
|
||||
{
|
||||
"text": "Footnotes aren't decorations. They're load-bearing walls.",
|
||||
"source": "IF.Trace paper (v2.3)",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "If there's no IF.Trace trace, it didn't happen—or shouldn't be trusted.",
|
||||
"source": "IF.Trace doctrine",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "No trace, no trust. Simple as that.",
|
||||
"source": "IF.Trace doctrine",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "Trust isn't claimed. It's proven.",
|
||||
"source": "IF.Trace paper (v2.3)",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "We don’t claim trust. We publish receipts.",
|
||||
"source": "IF.Trace stance",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "Your auditor shouldn’t need your credentials.",
|
||||
"source": "IF.Trace public receipts",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
},
|
||||
{
|
||||
"text": "Third parties verify. We just publish the math.",
|
||||
"source": "IF.Trace posture",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
},
|
||||
{
|
||||
"text": "Receipts must be readable and verifiable without credentials.",
|
||||
"source": "IF.Trace public receipt surface",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
},
|
||||
{
|
||||
"text": "Design constraint: black/white clarity. No “maybe”.",
|
||||
"source": "IF.Trace ops (full stack)",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/api/"
|
||||
},
|
||||
{
|
||||
"text": "We do not claim “quantum-secure”. We claim “quantum-ready”.",
|
||||
"source": "IF.Trace tech stack",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/api/"
|
||||
},
|
||||
{
|
||||
"text": "The stenographer doesn't make the therapy cold. The stenographer makes it accountable.",
|
||||
"source": "IF.emotion on IF.Trace",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "That's the moat.",
|
||||
"source": "IF.Trace paper (v2.3)",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "The moat is not the AI. The moat is the proof.",
|
||||
"source": "IF.Trace paper (v2.3)",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "If it’s not verifiable, label it as a gap. Do not endorse it.",
|
||||
"source": "IF.Trace stance",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
}
|
||||
]
|
||||
BIN
ifttt-src/public/assets/red-team-doc-1024-559.jpg
Normal file
BIN
ifttt-src/public/assets/red-team-doc-1024-559.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
ifttt-src/public/assets/red-team-stamp-600.png
Normal file
BIN
ifttt-src/public/assets/red-team-stamp-600.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
66
ifttt-src/public/review/index.md
Normal file
66
ifttt-src/public/review/index.md
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
# IF.Trace Website — External Review Packet
|
||||
|
||||
- Generated: `2025-12-30`
|
||||
- Owner: Danny Stocker (`ds@infrafabric.io`)
|
||||
|
||||
This packet is for external reviewers to evaluate the IF.Trace website (copy, structure, and claims) without needing to crawl or guess context.
|
||||
|
||||
## What this is
|
||||
|
||||
- A public-facing explanation of IF.Trace: “confidential documents → open verification”.
|
||||
- A set of pages that describe who this is for, how verification works, and what the proof does/does not claim.
|
||||
- A request for critical feedback on clarity, honesty, and missing pieces.
|
||||
|
||||
## What this is not
|
||||
|
||||
- Not a claim that IF.Trace guarantees compliance, intent, or correctness of interpretation.
|
||||
- Not a request for marketing language or hype.
|
||||
- Not a request to “agree” or be supportive — please be direct.
|
||||
|
||||
## Response metadata (required)
|
||||
|
||||
Please include:
|
||||
|
||||
- `llm_name`:
|
||||
- `probable_model`:
|
||||
- `cutoff_date`:
|
||||
- `response_date_utc`:
|
||||
- `web_access_used`: yes/no (list any URLs you relied on)
|
||||
|
||||
## Live entry points
|
||||
|
||||
- https://infrafabric.io/
|
||||
- https://infrafabric.io/verticals/
|
||||
- https://infrafabric.io/pricing/
|
||||
- https://infrafabric.io/api/
|
||||
- https://infrafabric.io/whitepaper/
|
||||
- https://infrafabric.io/about/
|
||||
- https://infrafabric.io/governance/
|
||||
- https://infrafabric.io/fr/
|
||||
|
||||
## Core demo links (used throughout)
|
||||
|
||||
- https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n
|
||||
- https://infrafabric.io/static/pack/6qRgcR01kw_qNo63Dbs_ob9n
|
||||
- https://infrafabric.io/static/pack/6qRgcR01kw_qNo63Dbs_ob9n.md
|
||||
- https://infrafabric.io/static/hosted/review/trace-bundles/b6547c03/index.html
|
||||
- https://infrafabric.io/static/hosted/iftrace.html
|
||||
- https://infrafabric.io/static/hosted/iftrace.py
|
||||
- https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html
|
||||
|
||||
## Questions for reviewers
|
||||
|
||||
1. In your own words: what does IF.Trace do?
|
||||
2. What feels unclear, hand-wavy, or like “compliance theater”?
|
||||
3. Where do we over-claim (even accidentally)?
|
||||
4. What is missing to make a third party comfortable verifying a claim?
|
||||
5. Which page is strongest? Which page is weakest?
|
||||
6. Does the site make it obvious what is verified vs not verified?
|
||||
7. What would you remove to make it more honest?
|
||||
8. What would you add to make it more useful for real reviewers (audit/legal/security/research)?
|
||||
|
||||
## Bias notice
|
||||
|
||||
This packet intentionally avoids conversion stats, testimonials, and “success stories”.
|
||||
Please focus on falsifiability, clarity, and what a skeptical third party would challenge.
|
||||
|
||||
64
ifttt-src/src/components/blocks/article-1.astro
Normal file
64
ifttt-src/src/components/blocks/article-1.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, title, description, image, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} style={{ "--container": "672px" }}>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
{title && <h1>{title}</h1>}
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={item?.image?.src} alt={item?.image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 672px) 672px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</Section>
|
||||
64
ifttt-src/src/components/blocks/article-2.astro
Normal file
64
ifttt-src/src/components/blocks/article-2.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, title, description, image, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} style={{ "--container": "672px" }}>
|
||||
<SectionContent class="items-center">
|
||||
<SectionProse class="text-center text-balance">
|
||||
{title && <h1>{title}</h1>}
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={image?.src} alt={image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 672px) 672px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</Section>
|
||||
103
ifttt-src/src/components/blocks/articles-1.astro
Normal file
103
ifttt-src/src/components/blocks/articles-1.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, image, href, item }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia class="aspect-video">
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle class="line-clamp-2">{title}</TileTitle>
|
||||
<TileDescription class="line-clamp-2">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={item?.image?.src} alt={item?.image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
104
ifttt-src/src/components/blocks/articles-2.astro
Normal file
104
ifttt-src/src/components/blocks/articles-2.astro
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="@5xl:grid-cols-[2fr_3fr]">
|
||||
<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>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, description, image, href, item }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia>
|
||||
<Image sizes="820px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={item?.image?.src} alt={item?.image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
101
ifttt-src/src/components/blocks/articles-3.astro
Normal file
101
ifttt-src/src/components/blocks/articles-3.astro
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="-mx-3 -my-2">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }) => (
|
||||
<Button variant="link" {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, image, href, item }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia>
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={item?.image?.src} alt={item?.image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
103
ifttt-src/src/components/blocks/articles-4.astro
Normal file
103
ifttt-src/src/components/blocks/articles-4.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
description?: string
|
||||
item?: {
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, image, href, item }) => (
|
||||
<Tile href={href} variant="floating">
|
||||
<TileMedia class="-mx-6 -mt-6 aspect-video">
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle class="line-clamp-2">{title}</TileTitle>
|
||||
<TileDescription class="line-clamp-2">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage src={item?.image?.src} alt={item?.image?.alt} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
25
ifttt-src/src/components/blocks/banner-1.astro
Normal file
25
ifttt-src/src/components/blocks/banner-1.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import {
|
||||
Banner,
|
||||
BannerContent,
|
||||
BannerDescription,
|
||||
BannerTitle,
|
||||
} from "@/components/ui/banner"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
|
||||
interface Props {
|
||||
icon?: string
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const { icon, title, description } = Astro.props
|
||||
---
|
||||
|
||||
<Banner>
|
||||
<BannerContent>
|
||||
<Icon class="size-5" name={icon} />
|
||||
<BannerTitle>{title}</BannerTitle>
|
||||
<BannerDescription>{description}</BannerDescription>
|
||||
</BannerContent>
|
||||
</Banner>
|
||||
25
ifttt-src/src/components/blocks/banner-2.astro
Normal file
25
ifttt-src/src/components/blocks/banner-2.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import {
|
||||
Banner,
|
||||
BannerContent,
|
||||
BannerDescription,
|
||||
BannerTitle,
|
||||
} from "@/components/ui/banner"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
|
||||
interface Props {
|
||||
icon?: string
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const { icon, title, description } = Astro.props
|
||||
---
|
||||
|
||||
<Banner>
|
||||
<BannerContent class="justify-center pr-6">
|
||||
<Icon class="size-5" name={icon} />
|
||||
<BannerTitle>{title}</BannerTitle>
|
||||
<BannerDescription>{description}</BannerDescription>
|
||||
</BannerContent>
|
||||
</Banner>
|
||||
66
ifttt-src/src/components/blocks/blocks-1.astro
Normal file
66
ifttt-src/src/components/blocks/blocks-1.astro
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Section, SectionContent } from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
const { class: className, id, ...props } = Astro.props
|
||||
|
||||
const allBlocks = import.meta.glob("src/components/blocks/**/*.astro", {
|
||||
eager: true,
|
||||
})
|
||||
|
||||
const sortedBlocks = Object.entries(allBlocks).sort(([a], [b]) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" })
|
||||
)
|
||||
---
|
||||
|
||||
<Section class={cn("@container flex flex-col px-4 py-8", className)} id={id}>
|
||||
<SectionContent
|
||||
class="grid grid-cols-1 gap-6 @3xl:grid-cols-2 @5xl:grid-cols-3"
|
||||
>
|
||||
{
|
||||
sortedBlocks.map(([path, block]: [string, any]) => {
|
||||
const id = path.split("/").pop()?.split(".")[0]
|
||||
const BlockComponent = block.default
|
||||
return BlockComponent ? (
|
||||
<div class="no-scrollbar flex flex-col gap-2">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<Badge variant="secondary" href={`/blocks/${id}/`}>
|
||||
{id}
|
||||
</Badge>
|
||||
</div>
|
||||
<div
|
||||
id={id}
|
||||
class="relative overflow-hidden rounded-lg border-2 border-dashed"
|
||||
>
|
||||
<div class="bg-background no-scrollbar relative aspect-video overflow-x-hidden">
|
||||
<div class="@container h-full w-[200%] origin-top-left scale-50">
|
||||
<BlockComponent {...props}>
|
||||
<Fragment set:html={props?.html} />
|
||||
</BlockComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
})
|
||||
}
|
||||
</SectionContent>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
ifttt-src/src/components/blocks/blocks-2.astro
Normal file
95
ifttt-src/src/components/blocks/blocks-2.astro
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
import fs from "fs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import Block from "@/components/block.astro"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
items?: any[]
|
||||
}
|
||||
|
||||
const { class: className, id, title, description, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("", className)} id={id}>
|
||||
<SectionSpread>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
{title && <h1>{title}</h1>}
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<SectionGrid class="grid-cols-1 sm:grid-cols-1 @6xl:grid-cols-2">
|
||||
{
|
||||
items?.map(({ block, href, ...props }) => {
|
||||
if (!block) return null
|
||||
const fileContent = fs.readFileSync(
|
||||
`src/components/blocks/${block}.astro`,
|
||||
"utf8"
|
||||
)
|
||||
return (
|
||||
<div class="group relative aspect-video overflow-hidden rounded-lg border">
|
||||
<div class="bg-background @container h-full w-[400%] origin-top-left scale-25 @xl:w-[200%] @xl:scale-50">
|
||||
<Block block={block} {...props} />
|
||||
</div>
|
||||
<div class="bg-background absolute bottom-0 left-0 hidden w-full items-center justify-between border-t p-4 text-sm shadow-lg group-hover:flex">
|
||||
<Button variant="outline" size="sm" href={href}>
|
||||
<Icon name="eye" class="[&:is(.copied_&)]:hidden" />
|
||||
{block}
|
||||
</Button>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={fileContent}
|
||||
>
|
||||
<Icon name="copy" class="[&:is(.copied_&)]:hidden" />
|
||||
<Icon name="check" class="hidden [&:is(.copied_&)]:block" />
|
||||
Copy code
|
||||
</Button>
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={`npx shadcn@latest add @fulldev/${block}`}
|
||||
>
|
||||
<Icon name="terminal" class="[&:is(.copied_&)]:hidden" />
|
||||
<Icon name="check" class="hidden [&:is(.copied_&)]:block" />
|
||||
npx shadcn add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
|
||||
<script>
|
||||
const buttons = document.querySelectorAll("button.copy")
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const copy = button.getAttribute("data-copy") || ""
|
||||
navigator.clipboard.writeText(copy)
|
||||
button.classList.add("copied")
|
||||
})
|
||||
})
|
||||
|
||||
sessionStorage.removeItem("closedBanners")
|
||||
</script>
|
||||
93
ifttt-src/src/components/blocks/blocks-3.astro
Normal file
93
ifttt-src/src/components/blocks/blocks-3.astro
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
import fs from "fs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Marquee, MarqueeContent } from "@/components/ui/marquee"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import Block from "@/components/block.astro"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
items?: any[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("", className)} id={id}>
|
||||
<SectionSpread>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<Marquee class="-mx-(--section-px)">
|
||||
<MarqueeContent pauseOnHover>
|
||||
{
|
||||
items?.map(({ block, href, ...props }) => {
|
||||
if (!block) return null
|
||||
const fileContent = fs.readFileSync(
|
||||
`src/components/blocks/${block}.astro`,
|
||||
"utf8"
|
||||
)
|
||||
return (
|
||||
<div class="group relative aspect-video w-[320px] overflow-hidden rounded-lg border @5xl:w-[640px]">
|
||||
<div class="bg-background @container h-full w-[400%] origin-top-left scale-25 @5xl:w-[200%] @5xl:scale-50">
|
||||
<Block block={block} {...props} />
|
||||
</div>
|
||||
<div class="bg-background absolute bottom-0 left-0 hidden w-full items-center justify-between border-t p-4 text-sm shadow-lg group-hover:flex">
|
||||
<h3 class="text-sm font-medium">
|
||||
<a href={href}>{block}</a>
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={fileContent}
|
||||
>
|
||||
<Icon name="copy" class="[&:is(.copied_&)]:hidden" />
|
||||
<Icon name="check" class="hidden [&:is(.copied_&)]:block" />
|
||||
Copy code
|
||||
</Button>
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={`npx shadcn add @fulldev/${block}`}
|
||||
>
|
||||
<Icon name="terminal" class="[&:is(.copied_&)]:hidden" />
|
||||
<Icon name="check" class="hidden [&:is(.copied_&)]:block" />
|
||||
npx shadcn add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</MarqueeContent>
|
||||
</Marquee>
|
||||
</Section>
|
||||
|
||||
<script>
|
||||
const buttons = document.querySelectorAll("button.copy")
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const copy = button.getAttribute("data-copy") || ""
|
||||
navigator.clipboard.writeText(copy)
|
||||
button.classList.add("copied")
|
||||
})
|
||||
})
|
||||
</script>
|
||||
110
ifttt-src/src/components/blocks/blocks-4.astro
Normal file
110
ifttt-src/src/components/blocks/blocks-4.astro
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
---
|
||||
import fs from "fs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Marquee, MarqueeContent } from "@/components/ui/marquee"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import Block from "@/components/block.astro"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
items?: any[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("", className)} id={id}>
|
||||
<SectionSpread>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<div class="flex flex-col gap-6">
|
||||
{
|
||||
(["left", "right"] as const).map((direction) => (
|
||||
<Marquee class="-mx-(--section-px) mask-x-from-95%">
|
||||
<MarqueeContent
|
||||
class="animation-duration-80000"
|
||||
direction={direction}
|
||||
pauseOnHover
|
||||
>
|
||||
{items?.map(({ block, href, ...props }) => {
|
||||
if (!block) return null
|
||||
const fileContent = fs.readFileSync(
|
||||
`src/components/blocks/${block}.astro`,
|
||||
"utf8"
|
||||
)
|
||||
return (
|
||||
<div class="group relative aspect-video w-[320px] overflow-hidden rounded-lg border @5xl:w-[640px]">
|
||||
<div class="bg-background @container h-full w-[400%] origin-top-left scale-25 @5xl:w-[200%] @5xl:scale-50">
|
||||
<Block block={block} {...props} />
|
||||
</div>
|
||||
<div class="bg-background absolute bottom-0 left-0 hidden w-full items-center justify-between border-t p-4 text-sm shadow-lg group-hover:flex">
|
||||
<h3 class="text-sm font-medium">
|
||||
<a href={href}>{block}</a>
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={fileContent}
|
||||
>
|
||||
<Icon name="copy" class="[&:is(.copied_&)]:hidden" />
|
||||
<Icon
|
||||
name="check"
|
||||
class="hidden [&:is(.copied_&)]:block"
|
||||
/>
|
||||
Copy code
|
||||
</Button>
|
||||
<Button
|
||||
class="copy"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
data-copy={`npx shadcn@latest add @fulldev/${block}`}
|
||||
>
|
||||
<Icon
|
||||
name="terminal"
|
||||
class="[&:is(.copied_&)]:hidden"
|
||||
/>
|
||||
<Icon
|
||||
name="check"
|
||||
class="hidden [&:is(.copied_&)]:block"
|
||||
/>
|
||||
npx shadcn add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</MarqueeContent>
|
||||
</Marquee>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<script>
|
||||
const buttons = document.querySelectorAll("button.copy")
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const copy = button.getAttribute("data-copy") || ""
|
||||
navigator.clipboard.writeText(copy)
|
||||
button.classList.add("copied")
|
||||
})
|
||||
})
|
||||
</script>
|
||||
55
ifttt-src/src/components/blocks/contact-1.astro
Normal file
55
ifttt-src/src/components/blocks/contact-1.astro
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
import { AutoForm } from "@/components/ui/auto-form"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
form?: any
|
||||
items?: {
|
||||
icon?: string
|
||||
title?: string
|
||||
description?: string
|
||||
href?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, form, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} style="--section-width: 672px;">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ icon, title, description, href }) => (
|
||||
<Item href={href} variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<Icon href={href} name={icon} />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{title}</ItemTitle>
|
||||
<ItemDescription>{description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
<AutoForm {...form} />
|
||||
</Section>
|
||||
60
ifttt-src/src/components/blocks/contact-2.astro
Normal file
60
ifttt-src/src/components/blocks/contact-2.astro
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
import { AutoForm } from "@/components/ui/auto-form"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
form?: any
|
||||
items?: {
|
||||
icon?: string
|
||||
title?: string
|
||||
description?: string
|
||||
href?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, form, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:grid-cols-[3fr_2fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid class="flex max-w-md flex-col">
|
||||
{
|
||||
items?.map(({ icon, title, description, href }) => (
|
||||
<Item href={href} variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<Icon href={href} name={icon} />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{title}</ItemTitle>
|
||||
<ItemDescription>{description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionContent>
|
||||
<AutoForm {...form} />
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
69
ifttt-src/src/components/blocks/contact-3.astro
Normal file
69
ifttt-src/src/components/blocks/contact-3.astro
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
import { AutoForm } from "@/components/ui/auto-form"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
form?: any
|
||||
items?: {
|
||||
icon?: string
|
||||
title?: string
|
||||
description?: string
|
||||
href?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, form, items, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="gap-x-32">
|
||||
<SectionContent class="gap-16">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid class="max-w-2xl grid-cols-1!">
|
||||
{
|
||||
items?.map(({ icon, title, description, href }) => (
|
||||
<Item href={href} variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<Icon href={href} name={icon} />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{title}</ItemTitle>
|
||||
<ItemDescription>{description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
<AutoForm {...form} />
|
||||
</SectionContent>
|
||||
<SectionMedia
|
||||
class="-mr-(--section-px) p-1 @5xl:z-90 @5xl:-mt-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<Image {...image} />
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
62
ifttt-src/src/components/blocks/content-1.astro
Normal file
62
ifttt-src/src/components/blocks/content-1.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
68
ifttt-src/src/components/blocks/content-2.astro
Normal file
68
ifttt-src/src/components/blocks/content-2.astro
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="@5xl:items-center">
|
||||
<SectionContent class="max-w-xl">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
67
ifttt-src/src/components/blocks/content-3.astro
Normal file
67
ifttt-src/src/components/blocks/content-3.astro
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
</SectionContent>
|
||||
<SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
68
ifttt-src/src/components/blocks/content-4.astro
Normal file
68
ifttt-src/src/components/blocks/content-4.astro
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="@5xl:grid-cols-[1fr_2fr] @5xl:items-center">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 1024px, (min-width: 1024px) 66vw, 100vw"
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
76
ifttt-src/src/components/blocks/content-5.astro
Normal file
76
ifttt-src/src/components/blocks/content-5.astro
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn(
|
||||
"border-primary/20 my-0 -mt-px rounded-none shadow-none",
|
||||
className
|
||||
)}
|
||||
id={id}
|
||||
variant="floating"
|
||||
>
|
||||
<SectionSplit class="@5xl:items-center">
|
||||
<SectionContent class="max-w-xl">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
76
ifttt-src/src/components/blocks/content-6.astro
Normal file
76
ifttt-src/src/components/blocks/content-6.astro
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn(
|
||||
"border-primary/20 my-0 -mt-px rounded-none shadow-none",
|
||||
className
|
||||
)}
|
||||
id={id}
|
||||
variant="floating"
|
||||
>
|
||||
<SectionSplit class="@5xl:items-center">
|
||||
<SectionContent class="max-w-xl">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia class="@5xl:order-first">
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
78
ifttt-src/src/components/blocks/cta-1.astro
Normal file
78
ifttt-src/src/components/blocks/cta-1.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} variant="floating">
|
||||
<SectionContent class="items-center">
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<SectionProse class="text-center" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
</Section>
|
||||
88
ifttt-src/src/components/blocks/cta-2.astro
Normal file
88
ifttt-src/src/components/blocks/cta-2.astro
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} variant="floating">
|
||||
<SectionSplit class="@5xl:items-center">
|
||||
<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>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-4">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-10 ring-2">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia
|
||||
class="-mx-(--section-px) rounded-none @5xl:-my-(--section-py) @5xl:-ml-0"
|
||||
>
|
||||
<Image sizes="(1536px) 768px, (1024px) 50vw, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
82
ifttt-src/src/components/blocks/cta-3.astro
Normal file
82
ifttt-src/src/components/blocks/cta-3.astro
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("bg-accent/50 shadow-none", className)}
|
||||
id={id}
|
||||
variant="floating"
|
||||
>
|
||||
<SectionSpread class="@5xl:items-center">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "secondary"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
</Section>
|
||||
83
ifttt-src/src/components/blocks/cta-4.astro
Normal file
83
ifttt-src/src/components/blocks/cta-4.astro
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} variant="floating">
|
||||
<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>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription class="text-foreground">
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia class="absolute inset-0 size-full opacity-50">
|
||||
<Image sizes="(1536px) 1536px, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
88
ifttt-src/src/components/blocks/cta-5.astro
Normal file
88
ifttt-src/src/components/blocks/cta-5.astro
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} variant="floating">
|
||||
<SectionSpread class="@5xl:items-center">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription class="text-foreground">
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<SectionMedia class="absolute inset-0 size-full opacity-50">
|
||||
<Image sizes="(1536px) 1536px, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
78
ifttt-src/src/components/blocks/cta-6.astro
Normal file
78
ifttt-src/src/components/blocks/cta-6.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("bg-accent/50", className)} id={id}>
|
||||
<SectionSpread class="@5xl:items-center">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "secondary"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
</Section>
|
||||
90
ifttt-src/src/components/blocks/cta-7.astro
Normal file
90
ifttt-src/src/components/blocks/cta-7.astro
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} size="lg">
|
||||
<SectionMedia class="absolute inset-0 size-full rounded-none mask-y-from-0%">
|
||||
<Image sizes="(1536px) 1536px, 100vw" {...image} />
|
||||
</SectionMedia>
|
||||
<SectionSpread class="relative @5xl:items-center">
|
||||
<SectionProse size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionContent class="shrink-0">
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription class="text-foreground">
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
</Section>
|
||||
91
ifttt-src/src/components/blocks/cta-8.astro
Normal file
91
ifttt-src/src/components/blocks/cta-8.astro
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn(
|
||||
"border-primary/20 my-0 -mt-px rounded-none shadow-none",
|
||||
className
|
||||
)}
|
||||
id={id}
|
||||
variant="floating"
|
||||
size="lg"
|
||||
>
|
||||
<SectionContent
|
||||
class={cn(
|
||||
"before:from-primary/20 relative items-center before:absolute before:top-full before:left-0 before:-z-10 before:h-[200%] before:w-full before:animate-pulse before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl"
|
||||
)}
|
||||
>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<SectionProse class="text-center" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
</Section>
|
||||
61
ifttt-src/src/components/blocks/faqs-1.astro
Normal file
61
ifttt-src/src/components/blocks/faqs-1.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
{
|
||||
items?.map(({ title, description }) => (
|
||||
<AccordionItem>
|
||||
<AccordionTrigger>{title}</AccordionTrigger>
|
||||
<AccordionContent>{description}</AccordionContent>
|
||||
</AccordionItem>
|
||||
))
|
||||
}
|
||||
</Accordion>
|
||||
</Section>
|
||||
64
ifttt-src/src/components/blocks/faqs-2.astro
Normal file
64
ifttt-src/src/components/blocks/faqs-2.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
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,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit>
|
||||
<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>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
61
ifttt-src/src/components/blocks/faqs-3.astro
Normal file
61
ifttt-src/src/components/blocks/faqs-3.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
61
ifttt-src/src/components/blocks/faqs-4.astro
Normal file
61
ifttt-src/src/components/blocks/faqs-4.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
90
ifttt-src/src/components/blocks/features-1.astro
Normal file
90
ifttt-src/src/components/blocks/features-1.astro
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
href?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<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>
|
||||
</Section>
|
||||
90
ifttt-src/src/components/blocks/features-2.astro
Normal file
90
ifttt-src/src/components/blocks/features-2.astro
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
href?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent class="items-center">
|
||||
<SectionProse class="text-center">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, icon, links }) => (
|
||||
<Tile class="items-center">
|
||||
<TileMedia variant="icon">
|
||||
<Icon name={icon} />
|
||||
</TileMedia>
|
||||
<TileContent class="items-center text-center text-balance">
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<TileActions class="justify-center">
|
||||
{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>
|
||||
</Section>
|
||||
58
ifttt-src/src/components/blocks/features-3.astro
Normal file
58
ifttt-src/src/components/blocks/features-3.astro
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSplit,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent class="@5xl:items-center">
|
||||
<SectionProse class="@5xl:text-center">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, href, image }) => (
|
||||
<Tile href={href}>
|
||||
<TileSplit class="items-center">
|
||||
<TileMedia>
|
||||
<Image sizes="230px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
</TileSplit>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
95
ifttt-src/src/components/blocks/features-4.astro
Normal file
95
ifttt-src/src/components/blocks/features-4.astro
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileActions,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
href?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="@5xl:grid-cols-[1fr_2fr]">
|
||||
<SectionContent
|
||||
class="@5xl:sticky @5xl:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<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>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
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}
|
||||
>
|
||||
{text}
|
||||
{icon && <Icon name={icon} />}
|
||||
</Button>
|
||||
))}
|
||||
</TileActions>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
100
ifttt-src/src/components/blocks/features-5.astro
Normal file
100
ifttt-src/src/components/blocks/features-5.astro
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
href?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn(
|
||||
"border-primary/20 my-0 -mt-px rounded-none shadow-none",
|
||||
className
|
||||
)}
|
||||
id={id}
|
||||
variant="floating"
|
||||
>
|
||||
<SectionContent class="items-center">
|
||||
<SectionProse class="text-center">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, icon, links }) => (
|
||||
<Tile class="items-center">
|
||||
<TileMedia class="bg-primary/5 border-primary/20" variant="icon">
|
||||
<Icon class="text-primary" name={icon} />
|
||||
</TileMedia>
|
||||
<TileContent class="items-center text-center text-balance">
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription class="text-foreground">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
<TileActions class="justify-center">
|
||||
{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>
|
||||
</Section>
|
||||
72
ifttt-src/src/components/blocks/features-6.astro
Normal file
72
ifttt-src/src/components/blocks/features-6.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
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"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
href?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<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>
|
||||
</Section>
|
||||
92
ifttt-src/src/components/blocks/footer-1.astro
Normal file
92
ifttt-src/src/components/blocks/footer-1.astro
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
import {
|
||||
Footer,
|
||||
FooterDescription,
|
||||
FooterGrid,
|
||||
FooterGroup,
|
||||
FooterGroupLabel,
|
||||
FooterMenu,
|
||||
FooterMenuItem,
|
||||
FooterMenuLink,
|
||||
FooterSplit,
|
||||
} from "@/components/ui/footer"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
|
||||
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
|
||||
}[]
|
||||
}[]
|
||||
links?: {
|
||||
href?: string
|
||||
text?: string
|
||||
icon?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { logo, description, links, socials, menus } = 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>
|
||||
61
ifttt-src/src/components/blocks/footer-2.astro
Normal file
61
ifttt-src/src/components/blocks/footer-2.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
import {
|
||||
Footer,
|
||||
FooterCopyright,
|
||||
FooterDescription,
|
||||
FooterGroup,
|
||||
FooterMenu,
|
||||
FooterMenuItem,
|
||||
FooterMenuLink,
|
||||
} from "@/components/ui/footer"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
|
||||
interface Props {
|
||||
logo?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
text?: string
|
||||
href?: string
|
||||
}
|
||||
description?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
socials?: string[]
|
||||
}
|
||||
|
||||
const { logo, description, links, socials } = 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">
|
||||
{
|
||||
links?.map(({ href, text }) => (
|
||||
<FooterMenuItem>
|
||||
<FooterMenuLink href={href}>{text}</FooterMenuLink>
|
||||
</FooterMenuItem>
|
||||
))
|
||||
}
|
||||
</FooterMenu>
|
||||
<FooterMenu orientation="horizontal">
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<FooterMenuItem>
|
||||
<FooterMenuLink href={social}>
|
||||
<Icon href={social} />
|
||||
</FooterMenuLink>
|
||||
</FooterMenuItem>
|
||||
))
|
||||
}
|
||||
</FooterMenu>
|
||||
</FooterGroup>
|
||||
<FooterCopyright>{logo?.text}</FooterCopyright>
|
||||
</Footer>
|
||||
102
ifttt-src/src/components/blocks/footer-3.astro
Normal file
102
ifttt-src/src/components/blocks/footer-3.astro
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
import {
|
||||
Footer,
|
||||
FooterCopyright,
|
||||
FooterDescription,
|
||||
FooterGrid,
|
||||
FooterGroup,
|
||||
FooterGroupLabel,
|
||||
FooterMenu,
|
||||
FooterMenuItem,
|
||||
FooterMenuLink,
|
||||
FooterSplit,
|
||||
FooterSpread,
|
||||
} from "@/components/ui/footer"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
|
||||
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
|
||||
}[]
|
||||
}[]
|
||||
links?: {
|
||||
href?: string
|
||||
text?: string
|
||||
icon?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { logo, description, links, socials, menus } = 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>
|
||||
))}
|
||||
</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>
|
||||
200
ifttt-src/src/components/blocks/header-1.astro
Normal file
200
ifttt-src/src/components/blocks/header-1.astro
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
---
|
||||
import MenuIcon from "lucide-static/icons/menu.svg"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible"
|
||||
import { Header, HeaderActions } from "@/components/ui/header"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuSub,
|
||||
NavigationMenuSubItem,
|
||||
NavigationMenuSubLink,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { ThemeToggle } from "@/components/ui/theme-toggle"
|
||||
|
||||
interface Props {
|
||||
logo?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
text?: string
|
||||
href?: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
socials?: string[]
|
||||
menus?: {
|
||||
text?: string
|
||||
href?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { logo, menus, links, socials } = Astro.props
|
||||
---
|
||||
|
||||
<Header>
|
||||
<Logo href={logo?.href || "/"}>
|
||||
<LogoImage src={logo?.src} alt={logo?.alt} />
|
||||
<LogoText>{logo?.text}</LogoText>
|
||||
</Logo>
|
||||
<NavigationMenu class="mr-auto @max-5xl:hidden">
|
||||
<NavigationMenuList>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<NavigationMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<>
|
||||
<NavigationMenuTrigger
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<NavigationMenuSubItem>
|
||||
<NavigationMenuSubLink href={link.href}>
|
||||
{link.text}
|
||||
</NavigationMenuSubLink>
|
||||
</NavigationMenuSubItem>
|
||||
))}
|
||||
</NavigationMenuSub>
|
||||
</NavigationMenuContent>
|
||||
</>
|
||||
) : (
|
||||
<NavigationMenuLink
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
variant="trigger"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuLink>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
))
|
||||
}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<HeaderActions class="@max-5xl:hidden">
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<>
|
||||
<Button variant="ghost" size="icon-sm" href={social} target="_blank">
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
</>
|
||||
))
|
||||
}
|
||||
<ThemeToggle />
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "outline"}
|
||||
size="sm"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
<Sheet class="first:ml-auto">
|
||||
<SheetTrigger
|
||||
class="@5xl:hidden"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
name="open-menu-button"
|
||||
>
|
||||
<MenuIcon class="size-5" />
|
||||
</SheetTrigger>
|
||||
<SheetContent class="overflow-y-auto px-4 py-12">
|
||||
<SidebarMenu>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<SidebarMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger>
|
||||
<SidebarMenuButton class="h-10 rounded-md px-4 text-xl">
|
||||
{menu.text}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<SidebarMenuSubItem>
|
||||
<SidebarMenuSubButton href={link.href}>
|
||||
{link.text}
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<SidebarMenuButton
|
||||
class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
}
|
||||
</SidebarMenu>
|
||||
<HeaderActions class="flex flex-col gap-2">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "secondary"}
|
||||
class="w-full"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
<HeaderActions>
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<Button variant="ghost" size="icon" href={social}>
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</Header>
|
||||
195
ifttt-src/src/components/blocks/header-2.astro
Normal file
195
ifttt-src/src/components/blocks/header-2.astro
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
---
|
||||
import MenuIcon from "lucide-static/icons/menu.svg"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible"
|
||||
import { Header, HeaderActions } from "@/components/ui/header"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuSub,
|
||||
NavigationMenuSubItem,
|
||||
NavigationMenuSubLink,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { ThemeToggle } from "@/components/ui/theme-toggle"
|
||||
|
||||
interface Props {
|
||||
logo?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
text?: string
|
||||
href?: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
socials?: string[]
|
||||
menus?: {
|
||||
text?: string
|
||||
href?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { logo, menus, links, socials } = Astro.props
|
||||
---
|
||||
|
||||
<Header>
|
||||
<Logo href={logo?.href || "/"}>
|
||||
<LogoImage src={logo?.src} alt={logo?.alt} />
|
||||
<LogoText>{logo?.text}</LogoText>
|
||||
</Logo>
|
||||
<NavigationMenu class="absolute left-1/2 -translate-x-1/2 @max-5xl:hidden">
|
||||
<NavigationMenuList>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<NavigationMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<>
|
||||
<NavigationMenuTrigger
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<NavigationMenuSubItem>
|
||||
<NavigationMenuSubLink href={link.href}>
|
||||
{link.text}
|
||||
</NavigationMenuSubLink>
|
||||
</NavigationMenuSubItem>
|
||||
))}
|
||||
</NavigationMenuSub>
|
||||
</NavigationMenuContent>
|
||||
</>
|
||||
) : (
|
||||
<NavigationMenuLink
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
variant="trigger"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuLink>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
))
|
||||
}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<HeaderActions class="@max-5xl:hidden">
|
||||
<ThemeToggle />
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<Button variant="ghost" size="icon-sm" href={social} target="_blank">
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "ghost"}
|
||||
size="sm"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
<Sheet>
|
||||
<SheetTrigger
|
||||
class="@5xl:hidden"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
name="open-menu-button"
|
||||
>
|
||||
<MenuIcon class="size-5" />
|
||||
</SheetTrigger>
|
||||
<SheetContent class="overflow-y-auto px-4 py-12">
|
||||
<SidebarMenu>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<SidebarMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger>
|
||||
<SidebarMenuButton>{menu.text}</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<SidebarMenuSubItem>
|
||||
<SidebarMenuSubButton href={link.href}>
|
||||
{link.text}
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<SidebarMenuButton
|
||||
class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
}
|
||||
</SidebarMenu>
|
||||
<HeaderActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "ghost"}
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
<HeaderActions>
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<Button variant="ghost" size="icon" href={social}>
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</Header>
|
||||
213
ifttt-src/src/components/blocks/header-3.astro
Normal file
213
ifttt-src/src/components/blocks/header-3.astro
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
---
|
||||
import MenuIcon from "lucide-static/icons/menu.svg"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible"
|
||||
import { Header, HeaderActions } from "@/components/ui/header"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuSub,
|
||||
NavigationMenuSubItem,
|
||||
NavigationMenuSubLink,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { ThemeToggle } from "@/components/ui/theme-toggle"
|
||||
|
||||
interface Props {
|
||||
logo?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
text?: string
|
||||
href?: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
socials?: string[]
|
||||
menus?: {
|
||||
text?: string
|
||||
href?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { logo, menus, links, socials } = Astro.props
|
||||
|
||||
const githubStarCount = (
|
||||
await (await fetch("https://api.github.com/repos/fulldotdev/ui")).json()
|
||||
).stargazers_count
|
||||
---
|
||||
|
||||
<Header class="bg-background/60 backdrop-blur-md">
|
||||
<Logo href={logo?.href || "/"}>
|
||||
<LogoImage src={logo?.src} alt={logo?.alt} />
|
||||
<LogoText>{logo?.text}</LogoText>
|
||||
</Logo>
|
||||
<NavigationMenu class="mr-auto @max-5xl:hidden">
|
||||
<NavigationMenuList>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<NavigationMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<>
|
||||
<NavigationMenuTrigger
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<NavigationMenuSubItem>
|
||||
<NavigationMenuSubLink href={link.href}>
|
||||
{link.text}
|
||||
</NavigationMenuSubLink>
|
||||
</NavigationMenuSubItem>
|
||||
))}
|
||||
</NavigationMenuSub>
|
||||
</NavigationMenuContent>
|
||||
</>
|
||||
) : (
|
||||
<NavigationMenuLink
|
||||
class="inline-flex h-8 items-center bg-transparent px-3 py-0"
|
||||
variant="trigger"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</NavigationMenuLink>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
))
|
||||
}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<HeaderActions class="@max-5xl:hidden">
|
||||
<ThemeToggle />
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<>
|
||||
<Button variant="ghost" size="icon-sm" href={social} target="_blank">
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
</>
|
||||
))
|
||||
}
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "outline"}
|
||||
size="sm"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
href="https://github.com/fulldotdev/ui"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon name="github" />
|
||||
{githubStarCount}
|
||||
</Button>
|
||||
</HeaderActions>
|
||||
<Sheet class="first:ml-auto @5xl:hidden">
|
||||
<SheetTrigger
|
||||
class="@5xl:hidden"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
name="open-menu-button"
|
||||
>
|
||||
<MenuIcon class="size-5" />
|
||||
</SheetTrigger>
|
||||
<SheetContent class="overflow-y-auto px-4 py-12">
|
||||
<SidebarMenu>
|
||||
{
|
||||
menus?.map((menu) => (
|
||||
<SidebarMenuItem>
|
||||
{menu.links && menu.links.length > 0 ? (
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger>
|
||||
<SidebarMenuButton class="h-10 rounded-md px-4 text-xl">
|
||||
{menu.text}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{menu.links?.map((link) => (
|
||||
<SidebarMenuSubItem>
|
||||
<SidebarMenuSubButton href={link.href}>
|
||||
{link.text}
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<SidebarMenuButton
|
||||
class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
|
||||
href={menu.href}
|
||||
>
|
||||
{menu.text}
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
))
|
||||
}
|
||||
</SidebarMenu>
|
||||
<HeaderActions class="flex flex-col gap-2">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === links.length - 1 ? "default" : "secondary"}
|
||||
class="w-full"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
<HeaderActions>
|
||||
{
|
||||
socials?.map((social) => (
|
||||
<Button variant="ghost" size="icon" href={social}>
|
||||
<Icon href={social} />
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</HeaderActions>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</Header>
|
||||
67
ifttt-src/src/components/blocks/hero-1.astro
Normal file
67
ifttt-src/src/components/blocks/hero-1.astro
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
link?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, link, links, image } = Astro.props
|
||||
|
||||
const { icon: linkIcon, text: linkText, ...linkProps } = link || {}
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent class="items-center">
|
||||
<Badge variant="secondary" {...linkProps}>
|
||||
{linkText}
|
||||
{linkProps.href && linkIcon && <Icon name={linkIcon} />}
|
||||
</Badge>
|
||||
<SectionProse class="text-center text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
98
ifttt-src/src/components/blocks/hero-10.astro
Normal file
98
ifttt-src/src/components/blocks/hero-10.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("-mt-(--header-height) justify-start", className)}
|
||||
id={id}
|
||||
size="lg"
|
||||
>
|
||||
<SectionSpread class="relative @5xl:items-center">
|
||||
<SectionProse size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionContent class="shrink-0">
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<SectionMedia
|
||||
class="mask-y-to-black-100% absolute inset-0 size-full rounded-none bg-white mask-y-from-0% dark:bg-black"
|
||||
>
|
||||
<Image sizes="100vw" priority {...image} class="opacity-75" />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
98
ifttt-src/src/components/blocks/hero-11.astro
Normal file
98
ifttt-src/src/components/blocks/hero-11.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("justify-start pb-[72cqw] @5xl:pb-[36cqw]", className)}
|
||||
id={id}
|
||||
size="lg"
|
||||
>
|
||||
<SectionSpread class="relative @5xl:items-center">
|
||||
<SectionProse size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionContent class="shrink-0">
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
</SectionSpread>
|
||||
<SectionMedia
|
||||
class="mask-y-to-black-100% absolute inset-0 size-full rounded-none bg-white mask-y-from-0% dark:bg-black"
|
||||
>
|
||||
<Image class="opacity-75" sizes="100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
66
ifttt-src/src/components/blocks/hero-12.astro
Normal file
66
ifttt-src/src/components/blocks/hero-12.astro
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
class: className,
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
links,
|
||||
image,
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("gap-8 pt-8", className)} id={id}>
|
||||
<SectionContent class="border-y py-8">
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionProse class="text-balance" size="sm">
|
||||
{title && <h1>{title}</h1>}
|
||||
</SectionProse>
|
||||
<SectionProse class="text-muted-foreground text-balance" size="sm">
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
<SectionActions class="-my-2 -ml-3 flex-row flex-nowrap">
|
||||
{
|
||||
links?.map(({ href, text, ...link }) => (
|
||||
<Button variant="link" href={href} {...link}>
|
||||
{text}
|
||||
{href && <Icon name="arrow-up-right" />}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
63
ifttt-src/src/components/blocks/hero-13.astro
Normal file
63
ifttt-src/src/components/blocks/hero-13.astro
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
class: className,
|
||||
id,
|
||||
links,
|
||||
image,
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("@5xl:pt-1", className)} id={id}>
|
||||
<SectionSplit class="@5xl:grid-cols-[1fr_3fr] @5xl:items-start">
|
||||
<SectionContent class="pt-(--section-py)">
|
||||
<SectionProse class="text-balance" size="sm">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="-my-2 -ml-3">
|
||||
{
|
||||
links?.map(({ href, text, ...link }) => (
|
||||
<Button variant="link" href={href} {...link}>
|
||||
{text}
|
||||
{href && <Icon name="arrow-up-right" />}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia class="relative z-100 -mr-5">
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 1152px, (min-width: 1024px) 75vw, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
70
ifttt-src/src/components/blocks/hero-14.astro
Normal file
70
ifttt-src/src/components/blocks/hero-14.astro
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
link?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, link, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent
|
||||
class={cn(
|
||||
"before:from-primary/10 relative items-center before:absolute before:bottom-full before:left-0 before:h-[200%] before:w-full before:animate-pulse before:rounded-full before:bg-gradient-to-t before:to-transparent before:blur-3xl"
|
||||
)}
|
||||
>
|
||||
<Badge variant="secondary" {...link}>
|
||||
{link?.text}
|
||||
{link?.href && <Icon name={link?.icon} />}
|
||||
</Badge>
|
||||
<SectionProse class="text-center text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
87
ifttt-src/src/components/blocks/hero-2.astro
Normal file
87
ifttt-src/src/components/blocks/hero-2.astro
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, item, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent class="items-center">
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<SectionProse class="text-center text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
59
ifttt-src/src/components/blocks/hero-3.astro
Normal file
59
ifttt-src/src/components/blocks/hero-3.astro
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} size="lg">
|
||||
<SectionContent class="items-center">
|
||||
<SectionProse class="text-center text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia class="absolute inset-0 rounded-none bg-white dark:bg-black">
|
||||
<Image
|
||||
class="opacity-50"
|
||||
sizes="(min-width: 1536px) 1536px, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
64
ifttt-src/src/components/blocks/hero-4.astro
Normal file
64
ifttt-src/src/components/blocks/hero-4.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("justify-center py-[36cqw] @5xl:py-[18cqw]", className)}
|
||||
id={id}
|
||||
size="lg"
|
||||
>
|
||||
<SectionContent class="items-center">
|
||||
<SectionProse class="text-center text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions class="justify-center">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia class="absolute inset-0 rounded-none bg-white dark:bg-black">
|
||||
<Image
|
||||
class="opacity-50"
|
||||
sizes="(min-width: 1536px) 1536px, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
99
ifttt-src/src/components/blocks/hero-5.astro
Normal file
99
ifttt-src/src/components/blocks/hero-5.astro
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent>
|
||||
<SectionProse size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image sizes="(min-width: 1536px) 1536px, 100vw" priority {...image} />
|
||||
</SectionMedia>
|
||||
</Section>
|
||||
106
ifttt-src/src/components/blocks/hero-6.astro
Normal file
106
ifttt-src/src/components/blocks/hero-6.astro
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="@5xl:items-center">
|
||||
<SectionContent>
|
||||
<SectionProse class="text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
108
ifttt-src/src/components/blocks/hero-7.astro
Normal file
108
ifttt-src/src/components/blocks/hero-7.astro
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} size="lg">
|
||||
<SectionSplit class="@5xl:grid-cols-[2fr_3fr] @5xl:items-center">
|
||||
<SectionContent>
|
||||
<SectionProse class="text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia
|
||||
class="-mr-(--section-px) rounded-r-none @5xl:-my-(--section-py)"
|
||||
>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 922px, (min-width: 1024px) 60vw, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
72
ifttt-src/src/components/blocks/hero-8.astro
Normal file
72
ifttt-src/src/components/blocks/hero-8.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, links, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} size="lg">
|
||||
<SectionSplit class="@5xl:grid-cols-[1fr_3fr] @5xl:items-center">
|
||||
<SectionContent>
|
||||
<SectionProse class="text-balance" size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionMedia
|
||||
class="-mr-(--section-px) rounded-r-none @5xl:-my-(--section-py)"
|
||||
>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 1152px, (min-width: 1024px) 75vw, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
111
ifttt-src/src/components/blocks/hero-9.astro
Normal file
111
ifttt-src/src/components/blocks/hero-9.astro
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
} from "@/components/ui/item"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMedia,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
item?: {
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
title?: string
|
||||
}[]
|
||||
rating?: number
|
||||
description?: string
|
||||
}
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
title?: string
|
||||
}
|
||||
}
|
||||
|
||||
const { class: className, id, list, links, item, image } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("-mt-(--header-height)", className)} id={id}>
|
||||
<SectionSplit>
|
||||
<SectionContent class="relative z-10 pt-(--header-height) @5xl:self-center">
|
||||
<SectionProse size="lg">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
size="lg"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<Item class="p-0">
|
||||
<ItemMedia class="-space-x-5">
|
||||
{
|
||||
item?.images?.map((image) => (
|
||||
<Avatar class="ring-background size-11 ring">
|
||||
<AvatarImage {...image} />
|
||||
</Avatar>
|
||||
))
|
||||
}
|
||||
</ItemMedia>
|
||||
<ItemContent class="mt-1">
|
||||
<Rating rating={item?.rating} />
|
||||
<ItemDescription>
|
||||
{item?.description}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</SectionContent>
|
||||
<SectionMedia
|
||||
class="-mx-(--section-px) -my-(--section-py) rounded-none @max-5xl:mask-y-from-50% @5xl:-ml-[25%] @5xl:mask-b-from-50% @5xl:mask-l-from-0%"
|
||||
>
|
||||
<Image
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
priority
|
||||
{...image}
|
||||
/>
|
||||
</SectionMedia>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
70
ifttt-src/src/components/blocks/images-1.astro
Normal file
70
ifttt-src/src/components/blocks/images-1.astro
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import { Tile, TileContent, TileMedia, TileTitle } from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
title?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("gap-12", 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>
|
||||
<SectionGrid class="-mx-5 grid-cols-1 gap-1 @5xl:grid-cols-2">
|
||||
{
|
||||
items?.map(({ href, title, image }) => (
|
||||
<Tile
|
||||
href={href}
|
||||
class="dark relative overflow-hidden bg-black! ring-0!"
|
||||
>
|
||||
<TileMedia class="w-full transition duration-500 ease-in-out group-hover/tile:scale-103">
|
||||
<Image {...image} />
|
||||
</TileMedia>
|
||||
<TileContent class="absolute inset-0 z-10 size-full items-center justify-center p-6 text-center opacity-0 transition duration-500 ease-in-out group-hover/tile:opacity-100">
|
||||
<TileTitle class="text-foreground">{title}</TileTitle>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
62
ifttt-src/src/components/blocks/images-2.astro
Normal file
62
ifttt-src/src/components/blocks/images-2.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const { class: className, id, links, images, title, description } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("@5xl:pt-1 -mt-(--header-height) @5xl:gap-1", className)}
|
||||
id={id}
|
||||
>
|
||||
<SectionSplit class="@5xl:grid-cols-[1fr_3fr] @5xl:items-start">
|
||||
<SectionContent
|
||||
class="@5xl:sticky @5xl:top-[calc(24px+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionProse class="text-balance" size="sm">
|
||||
{title && <h1>{title}</h1>}
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ href, text, ...link }) => (
|
||||
<Button variant="link" class="h-auto p-0!" href={href} {...link}>
|
||||
{text}
|
||||
{href && <Icon name="arrow-up-right" />}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid class="-mx-5 grid-cols-1 gap-1 @5xl:grid-cols-2">
|
||||
{images?.map(({ ...image }) => <Image {...image} />)}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
46
ifttt-src/src/components/blocks/links-1.astro
Normal file
46
ifttt-src/src/components/blocks/links-1.astro
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionGrid class="-mx-4" size="sm">
|
||||
{
|
||||
links?.map(({ icon, text, href, target }) => (
|
||||
<Button
|
||||
class="text-foreground justify-start text-start text-base"
|
||||
variant="link"
|
||||
href={href}
|
||||
target={target}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
49
ifttt-src/src/components/blocks/links-2.astro
Normal file
49
ifttt-src/src/components/blocks/links-2.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("bg-muted/50 mt-16", className)} id={id}>
|
||||
<SectionSplit class="gap-x-32 @5xl:grid-cols-[1fr_2fr]">
|
||||
<SectionContent>
|
||||
<SectionProse class="max-w-sm">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionGrid class="-mx-4" size="sm">
|
||||
{
|
||||
links?.map(({ icon, text, ...link }) => (
|
||||
<Button
|
||||
class="text-foreground justify-start text-start text-base"
|
||||
variant="link"
|
||||
{...link}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
34
ifttt-src/src/components/blocks/logos-1.astro
Normal file
34
ifttt-src/src/components/blocks/logos-1.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import { Section, SectionGrid, SectionProse } from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
logos?: {
|
||||
src: string
|
||||
alt: string
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, logos } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("gap-12", className)} id={id}>
|
||||
<SectionProse size="sm">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid size="sm">
|
||||
{
|
||||
logos?.map(({ src, alt, text, href }) => (
|
||||
<Logo href={href}>
|
||||
<LogoImage src={src} alt={alt} />
|
||||
<LogoText>{text}</LogoText>
|
||||
</Logo>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
41
ifttt-src/src/components/blocks/logos-2.astro
Normal file
41
ifttt-src/src/components/blocks/logos-2.astro
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import { Marquee, MarqueeContent } from "@/components/ui/marquee"
|
||||
import { Section, SectionProse } from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
logos?: {
|
||||
src: string
|
||||
alt: string
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, logos } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("gap-12", className)}
|
||||
id={id}
|
||||
style={{ "--container": "768px" }}
|
||||
>
|
||||
<SectionProse class="mx-auto text-center" size="sm">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<Marquee class="mask-x-from-95%">
|
||||
<MarqueeContent>
|
||||
{
|
||||
logos?.map(({ src, alt, text, href }) => (
|
||||
<Logo href={href}>
|
||||
<LogoImage src={src} alt={alt} />
|
||||
<LogoText>{text}</LogoText>
|
||||
</Logo>
|
||||
))
|
||||
}
|
||||
</MarqueeContent>
|
||||
</Marquee>
|
||||
</Section>
|
||||
33
ifttt-src/src/components/blocks/logos-3.astro
Normal file
33
ifttt-src/src/components/blocks/logos-3.astro
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
|
||||
import { Section, SectionGrid, SectionProse } from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
logos?: {
|
||||
src: string
|
||||
alt: string
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, logos } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionProse class="mx-auto text-center" size="sm">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid class="flex flex-wrap justify-center">
|
||||
{
|
||||
logos?.map(({ src, alt, text, href }) => (
|
||||
<Logo href={href}>
|
||||
<LogoImage src={src} alt={alt} />
|
||||
<LogoText>{text}</LogoText>
|
||||
</Logo>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
80
ifttt-src/src/components/blocks/pricings-1.astro
Normal file
80
ifttt-src/src/components/blocks/pricings-1.astro
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileActions,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, links, list, price, unit }) => (
|
||||
<Tile variant="floating" class="justify-between">
|
||||
<TileContent>
|
||||
<TileTitle class="text-xl">{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<Price>
|
||||
<PriceValue price={price} />
|
||||
<PriceUnit>{unit}</PriceUnit>
|
||||
</Price>
|
||||
<List class="mt-4 text-sm">
|
||||
{list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon class="-mt-0.5" name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</TileContent>
|
||||
<TileActions class="mt-auto w-full">
|
||||
{links?.map(({ text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
size="sm"
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
{...link}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
))}
|
||||
</TileActions>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
83
ifttt-src/src/components/blocks/pricings-2.astro
Normal file
83
ifttt-src/src/components/blocks/pricings-2.astro
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileActions,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionGrid class="grid-cols-1">
|
||||
{
|
||||
items?.map(({ title, description, links, list, price, unit }) => (
|
||||
<Tile variant="floating">
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<Price>
|
||||
<PriceValue price={price} />
|
||||
<PriceUnit>{unit}</PriceUnit>
|
||||
</Price>
|
||||
<List class="mt-4 text-sm">
|
||||
{list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon class="-mt-0.5" name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</TileContent>
|
||||
<TileActions class="mt-auto w-full">
|
||||
{links?.map(({ text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
size="sm"
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
{...link}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
))}
|
||||
</TileActions>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
80
ifttt-src/src/components/blocks/pricings-3.astro
Normal file
80
ifttt-src/src/components/blocks/pricings-3.astro
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileActions,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionSpread>
|
||||
{
|
||||
items?.map(({ title, description, links, list, price, unit }) => (
|
||||
<Tile variant="floating">
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<Price>
|
||||
<PriceValue class="text-3xl" price={price} />
|
||||
<PriceUnit class="mt-3">{unit}</PriceUnit>
|
||||
</Price>
|
||||
<List class="mt-4 text-sm">
|
||||
{list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon class="-mt-0.5" name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</TileContent>
|
||||
<TileActions class="mt-auto w-full">
|
||||
{links?.map(({ text, ...link }, i) => (
|
||||
<Button
|
||||
class="w-full"
|
||||
size="sm"
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
{...link}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
))}
|
||||
</TileActions>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionSpread>
|
||||
</Section>
|
||||
103
ifttt-src/src/components/blocks/product-1.astro
Normal file
103
ifttt-src/src/components/blocks/product-1.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { List, ListItem } from "@/components/ui/list"
|
||||
import {
|
||||
NativeCarousel,
|
||||
NativeCarouselContent,
|
||||
NativeCarouselItem,
|
||||
NativeCarouselNext,
|
||||
NativeCarouselPrevious,
|
||||
} from "@/components/ui/native-carousel"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
list?: string[]
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const {
|
||||
class: className,
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
list,
|
||||
links,
|
||||
images,
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit class="items-start @5xl:gap-24">
|
||||
<NativeCarousel>
|
||||
<NativeCarouselContent>
|
||||
{
|
||||
images?.map((image) => (
|
||||
<NativeCarouselItem>
|
||||
<Image
|
||||
class="object-contain"
|
||||
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
||||
{...image}
|
||||
/>
|
||||
</NativeCarouselItem>
|
||||
))
|
||||
}
|
||||
</NativeCarouselContent>
|
||||
<NativeCarouselPrevious class="left-6" />
|
||||
<NativeCarouselNext class="right-6" />
|
||||
</NativeCarousel>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
{title && <h1>{title}</h1>}
|
||||
{description && <p>{description}</p>}
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
<List>
|
||||
{
|
||||
list?.map((item) => (
|
||||
<ListItem>
|
||||
<Icon name="check" />
|
||||
{item}
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</List>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
81
ifttt-src/src/components/blocks/products-1.astro
Normal file
81
ifttt-src/src/components/blocks/products-1.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, image, href, price, unit }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia>
|
||||
<Image class="aspect-video" sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<Price>
|
||||
<PriceValue price={price} />
|
||||
<PriceUnit>{unit}</PriceUnit>
|
||||
</Price>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
76
ifttt-src/src/components/blocks/products-2.astro
Normal file
76
ifttt-src/src/components/blocks/products-2.astro
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-center">
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, description, price, unit }) => (
|
||||
<Tile class="m-0 rounded-none border-t p-0 pt-6">
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<Price>
|
||||
<PriceValue price={price} />
|
||||
<PriceUnit>{unit}</PriceUnit>
|
||||
</Price>
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
81
ifttt-src/src/components/blocks/products-3.astro
Normal file
81
ifttt-src/src/components/blocks/products-3.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
title?: string
|
||||
description?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
price?: string
|
||||
unit?: string
|
||||
image?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items, ...props } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id} {...props}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<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>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, description, price }) => (
|
||||
<Tile class="m-0 rounded-none border-t p-0 pt-6">
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<p>{price}</p>
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
81
ifttt-src/src/components/blocks/products-4.astro
Normal file
81
ifttt-src/src/components/blocks/products-4.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
description?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
price?: string
|
||||
unit?: string
|
||||
image?: {
|
||||
src?: string
|
||||
alt?: string
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { links, items, ...props } = Astro.props
|
||||
---
|
||||
|
||||
<Section {...props}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionContent>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, description, price }) => (
|
||||
<Tile class="m-0 rounded-none border-t p-0 pt-6">
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
<p>{price}</p>
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ icon, text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
89
ifttt-src/src/components/blocks/products-5.astro
Normal file
89
ifttt-src/src/components/blocks/products-5.astro
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
images?: {
|
||||
src: string
|
||||
alt: string
|
||||
}[]
|
||||
title?: string
|
||||
description?: string
|
||||
price?: string | number
|
||||
unit?: string
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, description, image, images, href, price, unit }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia>
|
||||
<Image
|
||||
class="bg-muted aspect-3/4 object-contain p-6"
|
||||
sizes="600px"
|
||||
{...(image || images?.[0])}
|
||||
/>
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<Price>
|
||||
<PriceValue price={price} />
|
||||
<PriceUnit>{unit}</PriceUnit>
|
||||
</Price>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
98
ifttt-src/src/components/blocks/reviews-1.astro
Normal file
98
ifttt-src/src/components/blocks/reviews-1.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionMasonry,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
rating?: number
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = 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>
|
||||
<SectionMasonry>
|
||||
{
|
||||
items?.map(({ title, description, rating, item }) => (
|
||||
<Tile class="shadow-none" variant="floating">
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage {...item?.image} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Rating rating={rating} />
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionMasonry>
|
||||
</Section>
|
||||
101
ifttt-src/src/components/blocks/reviews-2.astro
Normal file
101
ifttt-src/src/components/blocks/reviews-2.astro
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
rating?: number
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit>
|
||||
<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>
|
||||
<SectionGrid class="grid-cols-1">
|
||||
{
|
||||
items?.map(({ title, description, rating, item }) => (
|
||||
<Tile class="shadow-none" variant="floating">
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage {...item?.image} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Rating rating={rating} />
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
102
ifttt-src/src/components/blocks/reviews-3.astro
Normal file
102
ifttt-src/src/components/blocks/reviews-3.astro
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import {
|
||||
NativeCarousel,
|
||||
NativeCarouselContent,
|
||||
NativeCarouselItem,
|
||||
NativeCarouselNext,
|
||||
NativeCarouselPrevious,
|
||||
} from "@/components/ui/native-carousel"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import { Tile, TileDescription } from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
rating?: number
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section
|
||||
class={cn("items-center", className)}
|
||||
id={id}
|
||||
style={{ "--section-width": "var(--breakpoint-sm)" }}
|
||||
>
|
||||
<SectionContent class="items-center text-center">
|
||||
<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>
|
||||
<NativeCarousel>
|
||||
<NativeCarouselContent>
|
||||
{
|
||||
items?.map(({ description, rating, item }) => (
|
||||
<NativeCarouselItem>
|
||||
<Tile class="items-center bg-transparent! ring-transparent!">
|
||||
<Rating rating={rating} />
|
||||
<TileDescription class="text-center">
|
||||
{description}
|
||||
</TileDescription>
|
||||
<Item class="p-0">
|
||||
<ItemContent class="items-center text-center">
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</Tile>
|
||||
</NativeCarouselItem>
|
||||
))
|
||||
}
|
||||
</NativeCarouselContent>
|
||||
<NativeCarouselPrevious class="top-auto -bottom-2 left-6" />
|
||||
<NativeCarouselNext class="top-auto right-6 -bottom-2" />
|
||||
</NativeCarousel>
|
||||
</Section>
|
||||
103
ifttt-src/src/components/blocks/reviews-4.astro
Normal file
103
ifttt-src/src/components/blocks/reviews-4.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import { Marquee, MarqueeContent } from "@/components/ui/marquee"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
rating?: number
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items = [] } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("gap-6", className)} id={id}>
|
||||
<SectionContent class="mb-10">
|
||||
<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>
|
||||
{
|
||||
(["left", "right"] as const).map((direction) => (
|
||||
<Marquee class="-mx-(--section-px)">
|
||||
<MarqueeContent direction={direction} pauseOnHover>
|
||||
{[...items, ...items]?.map(({ title, description, rating, item }) => (
|
||||
<Tile class="shadow-none" variant="floating">
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage {...item?.image} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Rating rating={rating} />
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))}
|
||||
</MarqueeContent>
|
||||
</Marquee>
|
||||
))
|
||||
}
|
||||
</Section>
|
||||
103
ifttt-src/src/components/blocks/reviews-5.astro
Normal file
103
ifttt-src/src/components/blocks/reviews-5.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
import { Marquee, MarqueeContent } from "@/components/ui/marquee"
|
||||
import { Rating } from "@/components/ui/rating"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
rating?: number
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
item?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items = [] } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={cn("gap-6", className)} id={id}>
|
||||
<SectionContent class="mb-10 items-center text-center">
|
||||
<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>
|
||||
{
|
||||
(["left", "right"] as const).map((direction) => (
|
||||
<Marquee class="mask-x-from-95%">
|
||||
<MarqueeContent direction={direction} pauseOnHover>
|
||||
{[...items, ...items]?.map(({ title, description, rating, item }) => (
|
||||
<Tile class="shadow-none" variant="floating">
|
||||
<Item class="p-0">
|
||||
<ItemMedia>
|
||||
<Avatar class="size-10">
|
||||
<AvatarImage {...item?.image} />
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{item?.title}</ItemTitle>
|
||||
<ItemDescription>{item?.description}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Rating rating={rating} />
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
</Tile>
|
||||
))}
|
||||
</MarqueeContent>
|
||||
</Marquee>
|
||||
))
|
||||
}
|
||||
</Section>
|
||||
93
ifttt-src/src/components/blocks/services-1.astro
Normal file
93
ifttt-src/src/components/blocks/services-1.astro
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, tagline, description, href, image }) => (
|
||||
<Tile href={href}>
|
||||
<TileMedia>
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileDescription class="text-primary text-xs font-medium">
|
||||
{tagline}
|
||||
</TileDescription>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
{href && (
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
class="mr-2 size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
|
||||
/>
|
||||
)}
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
100
ifttt-src/src/components/blocks/services-2.astro
Normal file
100
ifttt-src/src/components/blocks/services-2.astro
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
target?: string
|
||||
}[]
|
||||
items?: {
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, icon, href, target }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
href={href}
|
||||
target={target}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, description, image, links }) => (
|
||||
<Tile
|
||||
class="dark aspect-4/3 justify-end rounded-md border-0 bg-black"
|
||||
variant="floating"
|
||||
>
|
||||
<TileMedia class="absolute inset-0 size-full mask-b-from-0% mask-b-to-black/50">
|
||||
<Image sizes="620px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent class="w-full text-white">
|
||||
<TileTitle class="text-foreground text-3xl">{title}</TileTitle>
|
||||
<TileDescription class="text-foreground text-lg">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
<SectionActions>
|
||||
{links?.map(({ text, icon, href, target }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
href={href}
|
||||
target={target}
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
{text}
|
||||
</Button>
|
||||
))}
|
||||
</SectionActions>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
98
ifttt-src/src/components/blocks/services-3.astro
Normal file
98
ifttt-src/src/components/blocks/services-3.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileActions,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSplit,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:grid-cols-[2fr_3fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid size="lg">
|
||||
{
|
||||
items?.map(({ title, tagline, description, image, links }) => (
|
||||
<Tile>
|
||||
<TileSplit>
|
||||
<TileMedia>
|
||||
<Image sizes="400px" {...image} />
|
||||
</TileMedia>
|
||||
<TileContent>
|
||||
<TileDescription class="text-primary text-xs font-medium">
|
||||
{tagline}
|
||||
</TileDescription>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
<TileActions class="mt-2">
|
||||
{links?.map(({ text, ...link }, i) => (
|
||||
<Button
|
||||
variant={i === 0 ? "outline" : "ghost"}
|
||||
size="sm"
|
||||
{...link}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
))}
|
||||
</TileActions>
|
||||
</TileContent>
|
||||
</TileSplit>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
94
ifttt-src/src/components/blocks/services-4.astro
Normal file
94
ifttt-src/src/components/blocks/services-4.astro
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, tagline, description, href, image }) => (
|
||||
<Tile href={href} variant="floating">
|
||||
<TileSpread class="py-3">
|
||||
<TileContent>
|
||||
<TileDescription class="text-primary text-xs font-medium">
|
||||
{tagline}
|
||||
</TileDescription>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
{href && (
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
class="mr-3 size-5 transition-transform group-hover/tile:translate-x-3"
|
||||
/>
|
||||
)}
|
||||
</TileSpread>
|
||||
|
||||
<TileMedia class="-mr-6 rounded-r-none">
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
96
ifttt-src/src/components/blocks/services-5.astro
Normal file
96
ifttt-src/src/components/blocks/services-5.astro
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:grid-cols-[1fr_2fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionContent>
|
||||
<SectionProse class="text-balance!">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid class="@5xl:grid-cols-2">
|
||||
{
|
||||
items?.map(({ title, description, href, image }) => (
|
||||
<Tile
|
||||
href={href}
|
||||
class="dark aspect-[1/1] bg-black!"
|
||||
variant="floating"
|
||||
>
|
||||
<TileMedia class="absolute inset-0 size-full bg-black mask-t-from-0% mask-t-to-black/10">
|
||||
<Image sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileSpread class="relative">
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription class="text-foreground">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
{href && (
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
class="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
|
||||
/>
|
||||
)}
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
87
ifttt-src/src/components/blocks/services-6.astro
Normal file
87
ifttt-src/src/components/blocks/services-6.astro
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSplit,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSplit
|
||||
class="items-start @5xl:grid-cols-[1fr_2fr] @5xl:*:sticky @5xl:*:top-[calc(var(--section-py)+var(--header-height,0px))]"
|
||||
>
|
||||
<SectionContent>
|
||||
<SectionProse class="text-balance!">
|
||||
<slot />
|
||||
</SectionProse>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "outline" : "ghost"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionContent>
|
||||
<SectionGrid class="@5xl:grid-cols-2">
|
||||
{
|
||||
items?.map(({ title, description, href }) => (
|
||||
<Tile href={href} variant="floating">
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription class="text-foreground">
|
||||
{description}
|
||||
</TileDescription>
|
||||
</TileContent>
|
||||
{href && (
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
class="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
|
||||
/>
|
||||
)}
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</SectionSplit>
|
||||
</Section>
|
||||
93
ifttt-src/src/components/blocks/services-7.astro
Normal file
93
ifttt-src/src/components/blocks/services-7.astro
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
import { Image } from "@/components/ui/image"
|
||||
import {
|
||||
Section,
|
||||
SectionActions,
|
||||
SectionContent,
|
||||
SectionGrid,
|
||||
SectionProse,
|
||||
SectionSpread,
|
||||
} from "@/components/ui/section"
|
||||
import {
|
||||
Tile,
|
||||
TileContent,
|
||||
TileDescription,
|
||||
TileMedia,
|
||||
TileSpread,
|
||||
TileTitle,
|
||||
} from "@/components/ui/tile"
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
id?: string
|
||||
links?: {
|
||||
text?: string
|
||||
href?: string
|
||||
}[]
|
||||
items?: {
|
||||
href?: string
|
||||
tagline?: string
|
||||
title?: string
|
||||
description?: string
|
||||
image?: {
|
||||
src: string
|
||||
alt: string
|
||||
}
|
||||
links?: {
|
||||
icon?: string
|
||||
text?: string
|
||||
href?: string
|
||||
target?: string
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
const { class: className, id, links, items } = Astro.props
|
||||
---
|
||||
|
||||
<Section class={className} id={id}>
|
||||
<SectionSpread class="@5xl:items-end">
|
||||
<SectionContent>
|
||||
<SectionProse>
|
||||
<slot />
|
||||
</SectionProse>
|
||||
</SectionContent>
|
||||
<SectionActions>
|
||||
{
|
||||
links?.map(({ text, ...link }, i) => (
|
||||
<Button variant={i === 0 ? "default" : "outline"} {...link}>
|
||||
{text}
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</SectionActions>
|
||||
</SectionSpread>
|
||||
<SectionGrid>
|
||||
{
|
||||
items?.map(({ title, tagline, description, href, image }) => (
|
||||
<Tile href={href} variant="floating">
|
||||
<TileMedia class="-mx-6 -mt-6 aspect-4/3">
|
||||
<Image class="size-full! object-cover" sizes="600px" {...image} />
|
||||
</TileMedia>
|
||||
<TileSpread>
|
||||
<TileContent>
|
||||
<TileDescription class="text-primary text-xs font-medium">
|
||||
{tagline}
|
||||
</TileDescription>
|
||||
<TileTitle>{title}</TileTitle>
|
||||
<TileDescription>{description}</TileDescription>
|
||||
</TileContent>
|
||||
{href && (
|
||||
<Icon
|
||||
name="arrow-right"
|
||||
class="size-5 shrink-0 transition-transform group-hover/tile:translate-x-2"
|
||||
/>
|
||||
)}
|
||||
</TileSpread>
|
||||
</Tile>
|
||||
))
|
||||
}
|
||||
</SectionGrid>
|
||||
</Section>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue