Initial commit
This commit is contained in:
vitalijmulika
59
.gitea/workflows/build.yml
Normal file
59
.gitea/workflows/build.yml
Normal file
@@ -0,0 +1,59 @@
|
||||
name: Build
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
branch:
|
||||
description: 'Branch to build'
|
||||
required: true
|
||||
default: 'main'
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 10
|
||||
|
||||
steps:
|
||||
- name: Checkout branch
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
ref: ${{ gitea.event.inputs.branch }}
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 24
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
set -euo pipefail
|
||||
npm ci --prefer-offline --no-audit --silent 2>&1 | tee install.log
|
||||
env:
|
||||
NODE_OPTIONS: '--max-old-space-size=4096'
|
||||
|
||||
- name: Build (next build)
|
||||
run: |
|
||||
set -euo pipefail
|
||||
npm run build 2>&1 | tee build.log
|
||||
env:
|
||||
NODE_ENV: production
|
||||
NEXT_TELEMETRY_DISABLED: 1
|
||||
NODE_OPTIONS: '--max-old-space-size=4096'
|
||||
timeout-minutes: 5
|
||||
|
||||
- name: Upload logs on failure
|
||||
if: failure()
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: build-logs
|
||||
path: |
|
||||
install.log
|
||||
build.log
|
||||
if-no-files-found: ignore
|
||||
|
||||
- name: Build completed
|
||||
if: success()
|
||||
run: echo "Build completed successfully"
|
||||
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
36
README.md
Normal file
36
README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
134
THEME_PROVIDER_OPTIONS.txt
Normal file
134
THEME_PROVIDER_OPTIONS.txt
Normal file
@@ -0,0 +1,134 @@
|
||||
================================================================================
|
||||
THEME PROVIDER OPTIONS
|
||||
================================================================================
|
||||
|
||||
PROPS (All Required except showBlurBottom)
|
||||
-------------------------------------------
|
||||
|
||||
1. defaultButtonVariant
|
||||
• "hover-magnetic"
|
||||
• "hover-bubble"
|
||||
• "expand-hover"
|
||||
• "elastic-effect"
|
||||
• "bounce-effect"
|
||||
• "icon-arrow"
|
||||
• "shift-hover"
|
||||
• "text-stagger"
|
||||
• "text-shift"
|
||||
• "directional-hover"
|
||||
|
||||
2. defaultTextAnimation
|
||||
• "entrance-slide"
|
||||
• "reveal-blur"
|
||||
• "background-highlight"
|
||||
|
||||
3. borderRadius
|
||||
• "sharp"
|
||||
• "rounded"
|
||||
• "soft"
|
||||
• "pill"
|
||||
|
||||
4. contentWidth
|
||||
• "small"
|
||||
• "smallMedium"
|
||||
• "compact"
|
||||
• "mediumSmall"
|
||||
• "medium"
|
||||
• "mediumLarge"
|
||||
|
||||
5. sizing
|
||||
• "medium"
|
||||
• "mediumLarge"
|
||||
• "largeSmall"
|
||||
• "large"
|
||||
• "mediumSizeLargeTitles"
|
||||
• "mediumLargeSizeLargeTitles"
|
||||
• "largeSmallSizeLargeTitles"
|
||||
• "largeSizeMediumTitles"
|
||||
• "mediumLargeSizeMediumTitles"
|
||||
• "largeSmallSizeMediumTitles"
|
||||
|
||||
6. background
|
||||
• "none"
|
||||
• "plain"
|
||||
• "grid"
|
||||
• "dotGrid"
|
||||
• "circleGradient"
|
||||
• "aurora"
|
||||
• "floatingGradient"
|
||||
• "animatedGrid"
|
||||
• "animatedAurora"
|
||||
• "fluid"
|
||||
• "radialGradient"
|
||||
• "noise"
|
||||
• "noiseGradient"
|
||||
• "noiseDiagonalGradient"
|
||||
|
||||
7. cardStyle
|
||||
• "solid"
|
||||
• "solid-accent"
|
||||
• "solid-accent-light"
|
||||
• "outline"
|
||||
• "outline-light"
|
||||
• "elevated"
|
||||
• "elevated-accent"
|
||||
• "elevated-accent-light"
|
||||
• "gradient-subtle"
|
||||
• "gradient-mesh"
|
||||
• "gradient-radial"
|
||||
• "neon-glow"
|
||||
• "inset"
|
||||
• "spotlight"
|
||||
• "shadow-colored"
|
||||
• "glass-elevated"
|
||||
• "glass-depth"
|
||||
• "gradient-bordered"
|
||||
• "layered-gradient"
|
||||
|
||||
8. primaryButtonStyle
|
||||
• "gradient"
|
||||
• "shadow"
|
||||
• "flat"
|
||||
• "layered-depth"
|
||||
• "radial-glow"
|
||||
• "diagonal-gradient"
|
||||
• "neon-glow-border"
|
||||
• "outline"
|
||||
|
||||
9. secondaryButtonStyle
|
||||
• "glass"
|
||||
• "outline"
|
||||
• "solid"
|
||||
• "minimal"
|
||||
• "layered"
|
||||
• "radial-glow"
|
||||
|
||||
10. headingFontWeight
|
||||
• "light"
|
||||
• "normal"
|
||||
• "medium"
|
||||
• "semibold"
|
||||
• "bold"
|
||||
• "extrabold"
|
||||
|
||||
================================================================================
|
||||
|
||||
EXAMPLE USAGE:
|
||||
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
showBlurBottom={false}
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
|
||||
================================================================================
|
||||
807
colorThemes.css
Normal file
807
colorThemes.css
Normal file
@@ -0,0 +1,807 @@
|
||||
/* ============================================ */
|
||||
/* LIGHT THEME VARIANTS */
|
||||
/* ============================================ */
|
||||
|
||||
/* Light Theme - Minimal */
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #000000e6;
|
||||
--primary-cta: #1a1a1a;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #bebebe;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Blue */
|
||||
:root[data-theme="minimal-light-blue"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #000a18e6;
|
||||
--primary-cta: #409fff;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Blue */
|
||||
:root[data-theme="minimal-dark-blue"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #15479c;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Green */
|
||||
:root[data-theme="minimal-light-green"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #00120ae6;
|
||||
--primary-cta: #15ad59;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Green */
|
||||
:root[data-theme="minimal-dark-green"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #000f06e6;
|
||||
--primary-cta: #0a7039;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Red */
|
||||
:root[data-theme="minimal-light-red"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #120006e6;
|
||||
--primary-cta: #e63946;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Red */
|
||||
:root[data-theme="minimal-dark-red"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #0f0003e6;
|
||||
--primary-cta: #c1121f;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Purple */
|
||||
:root[data-theme="minimal-light-purple"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #0a0018e6;
|
||||
--primary-cta: #8b5cf6;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Purple */
|
||||
:root[data-theme="minimal-dark-purple"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #080015e6;
|
||||
--primary-cta: #7c3aed;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Orange */
|
||||
:root[data-theme="minimal-light-orange"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #120a00e6;
|
||||
--primary-cta: #ff8c42;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Orange */
|
||||
:root[data-theme="minimal-dark-orange"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #0f0600e6;
|
||||
--primary-cta: #e8590c;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Cyan */
|
||||
:root[data-theme="minimal-light-cyan"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #001212e6;
|
||||
--primary-cta: #16d4f6;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Cyan */
|
||||
:root[data-theme="minimal-dark-cyan"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #000f0fe6;
|
||||
--primary-cta: #00c9e8;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Light Yellow */
|
||||
:root[data-theme="minimal-light-yellow"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #121200e6;
|
||||
--primary-cta: #ffcf40;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Minimal Dark Yellow */
|
||||
:root[data-theme="minimal-dark-yellow"] {
|
||||
--background: #ffffff;
|
||||
--card: #fcfcfc;
|
||||
--foreground: #0f0f00e6;
|
||||
--primary-cta: #ffae00;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Red */
|
||||
:root[data-theme="brutalist-red"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ff0000;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Blue */
|
||||
:root[data-theme="brutalist-blue"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #0066ff;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Green */
|
||||
:root[data-theme="brutalist-green"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #00cc00;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Purple */
|
||||
:root[data-theme="brutalist-purple"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #9933ff;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Orange */
|
||||
:root[data-theme="brutalist-orange"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ff6600;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Cyan */
|
||||
:root[data-theme="brutalist-cyan"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #00ccff;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Yellow */
|
||||
:root[data-theme="brutalist-yellow"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ffcc00;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Brutalist Pink */
|
||||
:root[data-theme="brutalist-pink"] {
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ff0066;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Light Theme - Light Blue */
|
||||
:root[data-theme="light-blue"] {
|
||||
--background: #f8fcff;
|
||||
--card: #ffffff;
|
||||
--foreground: #00101f;
|
||||
--primary-cta: #409fff;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #c7e2fc;
|
||||
--background-accent: #9bcfff;
|
||||
}
|
||||
|
||||
/* Light Theme - Dark Blue */
|
||||
:root[data-theme="dark-blue"] {
|
||||
--background: #f5faff;
|
||||
--card: #f1f8ff;
|
||||
--foreground: #001122;
|
||||
--primary-cta: #15479c;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #7ba3cf;
|
||||
}
|
||||
|
||||
/* Light Theme - Dark Green */
|
||||
:root[data-theme="dark-green"] {
|
||||
--background: #fafffb;
|
||||
--card: #f7fffa;
|
||||
--foreground: #001a0a;
|
||||
--primary-cta: #0a7039;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #a8d9be;
|
||||
--background-accent: #6bbf8e;
|
||||
}
|
||||
|
||||
/* Light Theme - Light Red */
|
||||
:root[data-theme="light-red"] {
|
||||
--background: #fffafa;
|
||||
--card: #fff7f7;
|
||||
--foreground: #1a0000;
|
||||
--primary-cta: #e63946;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #f5c4c7;
|
||||
--background-accent: #f09199;
|
||||
}
|
||||
|
||||
/* Light Theme - Dark Red */
|
||||
:root[data-theme="dark-red"] {
|
||||
--background: #fffcfc;
|
||||
--card: #fffafa;
|
||||
--foreground: #220000;
|
||||
--primary-cta: #c1121f;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #f0b8bc;
|
||||
--background-accent: #e07a82;
|
||||
}
|
||||
|
||||
/* Light Theme - Light Purple */
|
||||
:root[data-theme="light-purple"] {
|
||||
--background: #fbfaff;
|
||||
--card: #f7f5ff;
|
||||
--foreground: #0f0022;
|
||||
--primary-cta: #8b5cf6;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #d8cef5;
|
||||
--background-accent: #c4a8f9;
|
||||
}
|
||||
|
||||
/* Light Theme - Dark Purple */
|
||||
:root[data-theme="dark-purple"] {
|
||||
--background: #fcfcff;
|
||||
--card: #fafaff;
|
||||
--foreground: #150022;
|
||||
--primary-cta: #7c3aed;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #cfc2f0;
|
||||
--background-accent: #ba9bf1;
|
||||
}
|
||||
|
||||
/* Light Theme - Soft Peach */
|
||||
:root[data-theme="soft-peach"] {
|
||||
--background: #fff8f5;
|
||||
--card: #fff0eb;
|
||||
--foreground: #3d2c29;
|
||||
--primary-cta: #e8a090;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #f5d5cc;
|
||||
--background-accent: #f0c4b8;
|
||||
}
|
||||
|
||||
/* Light Theme - Soft Lavender */
|
||||
:root[data-theme="soft-lavender"] {
|
||||
--background: #f8f5ff;
|
||||
--card: #f0ebff;
|
||||
--foreground: #2d2940;
|
||||
--primary-cta: #a890e8;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #d5ccf5;
|
||||
--background-accent: #c4b8f0;
|
||||
}
|
||||
|
||||
/* Light Theme - Soft Blush */
|
||||
:root[data-theme="soft-blush"] {
|
||||
--background: #fff5f8;
|
||||
--card: #ffebf0;
|
||||
--foreground: #3d2930;
|
||||
--primary-cta: #e890a8;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #f5ccd5;
|
||||
--background-accent: #f0b8c4;
|
||||
}
|
||||
|
||||
/* Light Theme - Soft Periwinkle */
|
||||
:root[data-theme="soft-periwinkle"] {
|
||||
--background: #f5f8ff;
|
||||
--card: #ebf0ff;
|
||||
--foreground: #292d40;
|
||||
--primary-cta: #90a8e8;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #ccd5f5;
|
||||
--background-accent: #b8c4f0;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================ */
|
||||
/* DARK THEME VARIANTS */
|
||||
/* ============================================ */
|
||||
|
||||
/* Dark Theme - Minimal */
|
||||
:root[data-theme="dark"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #e6e6e6;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Light Blue */
|
||||
:root[data-theme="dark-minimal-light-blue"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f0f8ffe6;
|
||||
--primary-cta: #cee7ff;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Blue */
|
||||
:root[data-theme="dark-minimal-dark-blue"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f0f5fce6;
|
||||
--primary-cta: #3891f6;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Light Green */
|
||||
:root[data-theme="dark-minimal-light-green"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5fffae6;
|
||||
--primary-cta: #80da9b;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Green */
|
||||
:root[data-theme="dark-minimal-dark-green"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f0fff8e6;
|
||||
--primary-cta: #1cde5d;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Light Red */
|
||||
:root[data-theme="dark-minimal-light-red"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fff5f5e6;
|
||||
--primary-cta: #ff7a7a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Red */
|
||||
:root[data-theme="dark-minimal-dark-red"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fff0f0e6;
|
||||
--primary-cta: #ff3d4a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Light Purple */
|
||||
:root[data-theme="dark-minimal-light-purple"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f8f5ffe6;
|
||||
--primary-cta: #c89bff;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Purple */
|
||||
:root[data-theme="dark-minimal-dark-purple"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f0fce6;
|
||||
--primary-cta: #b366ff;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Light Orange */
|
||||
:root[data-theme="dark-minimal-light-orange"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fffaf5e6;
|
||||
--primary-cta: #ffaa70;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Orange */
|
||||
:root[data-theme="dark-minimal-dark-orange"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fff8f0e6;
|
||||
--primary-cta: #ff8c42;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
|
||||
/* Dark Theme - Minimal Light Yellow */
|
||||
:root[data-theme="dark-minimal-light-yellow"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fffffae6;
|
||||
--primary-cta: #fde047;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Minimal Dark Yellow */
|
||||
:root[data-theme="dark-minimal-dark-yellow"] {
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fffef5e6;
|
||||
--primary-cta: #facc15;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Red */
|
||||
:root[data-theme="dark-brutalist-red"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ff0000;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Blue */
|
||||
:root[data-theme="dark-brutalist-blue"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #0066ff;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Green */
|
||||
:root[data-theme="dark-brutalist-green"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #00cc00;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Purple */
|
||||
:root[data-theme="dark-brutalist-purple"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #9933ff;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Orange */
|
||||
:root[data-theme="dark-brutalist-orange"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ff6600;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Yellow */
|
||||
:root[data-theme="dark-brutalist-yellow"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffcc00;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Brutalist Pink */
|
||||
:root[data-theme="dark-brutalist-pink"] {
|
||||
--background: #000000;
|
||||
--card: #1b1b1b;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ff0066;
|
||||
--secondary-cta: #151515;
|
||||
--accent: #303030;
|
||||
--background-accent: #303030;
|
||||
}
|
||||
|
||||
/* Dark Theme - Light Blue */
|
||||
:root[data-theme="dark-light-blue"] {
|
||||
--background: #010912;
|
||||
--card: #152840;
|
||||
--foreground: #e6f0ff;
|
||||
--primary-cta: #cee7ff;
|
||||
--secondary-cta: #0e1a29;
|
||||
--accent: #3f5c79;
|
||||
--background-accent: #004a93;
|
||||
}
|
||||
|
||||
/* Dark Theme - Dark Blue */
|
||||
:root[data-theme="dark-dark-blue"] {
|
||||
--background: #00070e;
|
||||
--card: #152840;
|
||||
--foreground: #e6f0ff;
|
||||
--primary-cta: #3891f6;
|
||||
--secondary-cta: #0e1a29;
|
||||
--accent: #3f5c79;
|
||||
--background-accent: #016ad3;
|
||||
}
|
||||
|
||||
/* Dark Theme - Light Green */
|
||||
:root[data-theme="dark-light-green"] {
|
||||
--background: #000802;
|
||||
--card: #0b1a0b;
|
||||
--foreground: #e6ffe6;
|
||||
--primary-cta: #80da9b;
|
||||
--secondary-cta: #07170b;
|
||||
--accent: #38714a;
|
||||
--background-accent: #2c6541;
|
||||
}
|
||||
|
||||
/* Dark Theme - Dark Green */
|
||||
:root[data-theme="dark-dark-green"] {
|
||||
--background: #000602;
|
||||
--card: #0d1d0d;
|
||||
--foreground: #e6ffe6;
|
||||
--primary-cta: #1cde5d;
|
||||
--secondary-cta: #0a1f0f;
|
||||
--accent: #2e6841;
|
||||
--background-accent: #0d6b32;
|
||||
}
|
||||
|
||||
/* Dark Theme - Light Red */
|
||||
:root[data-theme="dark-light-red"] {
|
||||
--background: #080000;
|
||||
--card: #1e0d0d;
|
||||
--foreground: #ffe6e6;
|
||||
--primary-cta: #ff7a7a;
|
||||
--secondary-cta: #1e0909;
|
||||
--accent: #7b4242;
|
||||
--background-accent: #65292c;
|
||||
}
|
||||
|
||||
/* Dark Theme - Dark Red */
|
||||
:root[data-theme="dark-dark-red"] {
|
||||
--background: #060000;
|
||||
--card: #1d0d0d;
|
||||
--foreground: #ffe6e6;
|
||||
--primary-cta: #ff3d4a;
|
||||
--secondary-cta: #1f0a0a;
|
||||
--accent: #7b2d2d;
|
||||
--background-accent: #b8111f;
|
||||
}
|
||||
|
||||
/* Dark Theme - Light Purple */
|
||||
:root[data-theme="dark-light-purple"] {
|
||||
--background: #020008;
|
||||
--card: #0b1a1d;
|
||||
--foreground: #f0e6ff;
|
||||
--primary-cta: #c89bff;
|
||||
--secondary-cta: #0b0717;
|
||||
--accent: #684f7b;
|
||||
--background-accent: #65417c;
|
||||
}
|
||||
|
||||
/* Dark Theme - Dark Purple */
|
||||
:root[data-theme="dark-dark-purple"] {
|
||||
--background: #020006;
|
||||
--card: #1d0d1d;
|
||||
--foreground: #f0e6ff;
|
||||
--primary-cta: #b366ff;
|
||||
--secondary-cta: #1a0a29;
|
||||
--accent: #59437b;
|
||||
--background-accent: #6b28d9;
|
||||
}
|
||||
|
||||
/* Dark Theme - Light Orange */
|
||||
:root[data-theme="dark-light-orange"] {
|
||||
--background: #080200;
|
||||
--card: #1a0d0b;
|
||||
--foreground: #ffe6d5;
|
||||
--primary-cta: #ffaa70;
|
||||
--secondary-cta: #170b07;
|
||||
--accent: #7b5e4a;
|
||||
--background-accent: #b8541e;
|
||||
}
|
||||
|
||||
/* Dark Theme - Dark Orange */
|
||||
:root[data-theme="dark-dark-orange"] {
|
||||
--background: #060200;
|
||||
--card: #1d0d0b;
|
||||
--foreground: #ffe6d5;
|
||||
--primary-cta: #ff8c42;
|
||||
--secondary-cta: #1f0a00;
|
||||
--accent: #7b5337;
|
||||
--background-accent: #b8400c;
|
||||
}
|
||||
|
||||
/* Dark Theme - Soft Peach */
|
||||
:root[data-theme="dark-soft-peach"] {
|
||||
--background: #1a1210;
|
||||
--card: #2a201d;
|
||||
--foreground: #ffe8e0;
|
||||
--primary-cta: #e8a090;
|
||||
--secondary-cta: #1a1210;
|
||||
--accent: #6b4d45;
|
||||
--background-accent: #8b5d50;
|
||||
}
|
||||
|
||||
/* Dark Theme - Soft Lavender */
|
||||
:root[data-theme="dark-soft-lavender"] {
|
||||
--background: #121018;
|
||||
--card: #1d1a28;
|
||||
--foreground: #e8e0ff;
|
||||
--primary-cta: #a890e8;
|
||||
--secondary-cta: #121018;
|
||||
--accent: #4d456b;
|
||||
--background-accent: #5d508b;
|
||||
}
|
||||
|
||||
/* Dark Theme - Soft Blush */
|
||||
:root[data-theme="dark-soft-blush"] {
|
||||
--background: #1a1014;
|
||||
--card: #2a1d22;
|
||||
--foreground: #ffe0e8;
|
||||
--primary-cta: #e890a8;
|
||||
--secondary-cta: #1a1014;
|
||||
--accent: #6b4555;
|
||||
--background-accent: #8b5068;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================ */
|
||||
/* MULTI-COLOR COMBO THEME VARIANTS */
|
||||
/* ============================================ */
|
||||
|
||||
/* Light - Blue Purple */
|
||||
:root[data-theme="blue-purple"] {
|
||||
--background: #f8faff;
|
||||
--card: #f0f4ff;
|
||||
--foreground: #1a1a2e;
|
||||
--primary-cta: #3b82f6;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #d5c6ff;
|
||||
--background-accent: #b394fa;
|
||||
}
|
||||
|
||||
/* Light - Blue Orange */
|
||||
:root[data-theme="blue-orange"] {
|
||||
--background: #f7fafd;
|
||||
--card: #eff6fc;
|
||||
--foreground: #1a2433;
|
||||
--primary-cta: #2563eb;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #f8c093;
|
||||
--background-accent: #f5b78b;
|
||||
}
|
||||
|
||||
/* Light - Navy Gold */
|
||||
:root[data-theme="navy-gold"] {
|
||||
--background: #f7f9fc;
|
||||
--card: #eff3f8;
|
||||
--foreground: #1a2433;
|
||||
--primary-cta: #1e3a8a;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #fbbf24;
|
||||
--background-accent: #d97706;
|
||||
}
|
||||
|
||||
/* Light - Charcoal Yellow */
|
||||
:root[data-theme="charcoal-yellow"] {
|
||||
--background: #fafafa;
|
||||
--card: #f0f0f0;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #262626;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #fbbf24;
|
||||
--background-accent: #f59e0b;
|
||||
}
|
||||
|
||||
/* Dark - Blue Purple */
|
||||
:root[data-theme="dark-blue-purple"] {
|
||||
--background: #0a0e1a;
|
||||
--card: #121626;
|
||||
--foreground: #e0e8ff;
|
||||
--primary-cta: #3b82f6;
|
||||
--secondary-cta: #0a0e1a;
|
||||
--accent: #a78bfa;
|
||||
--background-accent: #8b5cf6;
|
||||
}
|
||||
|
||||
654
colorThemes.json
Normal file
654
colorThemes.json
Normal file
@@ -0,0 +1,654 @@
|
||||
{
|
||||
"lightTheme": {
|
||||
"minimal": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#000000e6",
|
||||
"--primary-cta": "#1a1a1a",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#bebebe",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightBlue": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#000a18e6",
|
||||
"--primary-cta": "#409fff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkBlue": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#000612e6",
|
||||
"--primary-cta": "#15479c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightGreen": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#00120ae6",
|
||||
"--primary-cta": "#15ad59",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkGreen": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#000f06e6",
|
||||
"--primary-cta": "#0a7039",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightRed": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#120006e6",
|
||||
"--primary-cta": "#e63946",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkRed": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#0f0003e6",
|
||||
"--primary-cta": "#c1121f",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightPurple": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#0a0018e6",
|
||||
"--primary-cta": "#8b5cf6",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkPurple": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#080015e6",
|
||||
"--primary-cta": "#7c3aed",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#120a00e6",
|
||||
"--primary-cta": "#ff8c42",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#0f0600e6",
|
||||
"--primary-cta": "#e8590c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightCyan": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#001212e6",
|
||||
"--primary-cta": "#16d4f6",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkCyan": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#000f0fe6",
|
||||
"--primary-cta": "#00c9e8",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalLightYellow": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#121200e6",
|
||||
"--primary-cta": "#ffcf40",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"minimalDarkYellow": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fcfcfc",
|
||||
"--foreground": "#0f0f00e6",
|
||||
"--primary-cta": "#ffae00",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4"
|
||||
},
|
||||
"brutalistRed": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#ff0000",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistBlue": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#0066ff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistGreen": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#00cc00",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistPurple": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#9933ff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#ff6600",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistCyan": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#00ccff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistYellow": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#ffcc00",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"brutalistPink": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#fafafa",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#ff0066",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e5e5e5",
|
||||
"--background-accent": "#f5f5f5"
|
||||
},
|
||||
"lightBlue": {
|
||||
"--background": "#f8fcff",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#00101f",
|
||||
"--primary-cta": "#409fff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#c7e2fc",
|
||||
"--background-accent": "#9bcfff"
|
||||
},
|
||||
"darkBlue": {
|
||||
"--background": "#f5faff",
|
||||
"--card": "#f1f8ff",
|
||||
"--foreground": "#001122",
|
||||
"--primary-cta": "#15479c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#a8cce8",
|
||||
"--background-accent": "#7ba3cf"
|
||||
},
|
||||
"darkGreen": {
|
||||
"--background": "#fafffb",
|
||||
"--card": "#f7fffa",
|
||||
"--foreground": "#001a0a",
|
||||
"--primary-cta": "#0a7039",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#a8d9be",
|
||||
"--background-accent": "#6bbf8e"
|
||||
},
|
||||
"lightRed": {
|
||||
"--background": "#fffafa",
|
||||
"--card": "#fff7f7",
|
||||
"--foreground": "#1a0000",
|
||||
"--primary-cta": "#e63946",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f5c4c7",
|
||||
"--background-accent": "#f09199"
|
||||
},
|
||||
"darkRed": {
|
||||
"--background": "#fffcfc",
|
||||
"--card": "#fffafa",
|
||||
"--foreground": "#220000",
|
||||
"--primary-cta": "#c1121f",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f0b8bc",
|
||||
"--background-accent": "#e07a82"
|
||||
},
|
||||
"lightPurple": {
|
||||
"--background": "#fbfaff",
|
||||
"--card": "#f7f5ff",
|
||||
"--foreground": "#0f0022",
|
||||
"--primary-cta": "#8b5cf6",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#d8cef5",
|
||||
"--background-accent": "#c4a8f9"
|
||||
},
|
||||
"darkPurple": {
|
||||
"--background": "#fcfcff",
|
||||
"--card": "#fafaff",
|
||||
"--foreground": "#150022",
|
||||
"--primary-cta": "#7c3aed",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#cfc2f0",
|
||||
"--background-accent": "#ba9bf1"
|
||||
},
|
||||
"softPeach": {
|
||||
"--background": "#fff8f5",
|
||||
"--card": "#fff0eb",
|
||||
"--foreground": "#3d2c29",
|
||||
"--primary-cta": "#e8a090",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f5d5cc",
|
||||
"--background-accent": "#f0c4b8"
|
||||
},
|
||||
"softLavender": {
|
||||
"--background": "#f8f5ff",
|
||||
"--card": "#f0ebff",
|
||||
"--foreground": "#2d2940",
|
||||
"--primary-cta": "#a890e8",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#d5ccf5",
|
||||
"--background-accent": "#c4b8f0"
|
||||
},
|
||||
"softBlush": {
|
||||
"--background": "#fff5f8",
|
||||
"--card": "#ffebf0",
|
||||
"--foreground": "#3d2930",
|
||||
"--primary-cta": "#e890a8",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f5ccd5",
|
||||
"--background-accent": "#f0b8c4"
|
||||
},
|
||||
"softPeriwinkle": {
|
||||
"--background": "#f5f8ff",
|
||||
"--card": "#ebf0ff",
|
||||
"--foreground": "#292d40",
|
||||
"--primary-cta": "#90a8e8",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#ccd5f5",
|
||||
"--background-accent": "#b8c4f0"
|
||||
},
|
||||
"bluePurple": {
|
||||
"--background": "#f8faff",
|
||||
"--card": "#f0f4ff",
|
||||
"--foreground": "#1a1a2e",
|
||||
"--primary-cta": "#3b82f6",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#d5c6ff",
|
||||
"--background-accent": "#b394fa"
|
||||
},
|
||||
"blueOrange": {
|
||||
"--background": "#f7fafd",
|
||||
"--card": "#eff6fc",
|
||||
"--foreground": "#1a2433",
|
||||
"--primary-cta": "#2563eb",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f8c093",
|
||||
"--background-accent": "#f5b78b"
|
||||
},
|
||||
"navyGold": {
|
||||
"--background": "#f8f9fa",
|
||||
"--card": "#f0f2f5",
|
||||
"--foreground": "#1e293b",
|
||||
"--primary-cta": "#1e3a8a",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#fbbf24",
|
||||
"--background-accent": "#d97706"
|
||||
},
|
||||
"charcoalYellow": {
|
||||
"--background": "#fafafa",
|
||||
"--card": "#f4f4f5",
|
||||
"--foreground": "#27272a",
|
||||
"--primary-cta": "#3f3f46",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#facc15",
|
||||
"--background-accent": "#eab308"
|
||||
}
|
||||
},
|
||||
"darkTheme": {
|
||||
"minimal": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#ffffffe6",
|
||||
"--primary-cta": "#e6e6e6",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightBlue": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f0f8ffe6",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkBlue": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f0f5fce6",
|
||||
"--primary-cta": "#3891f6",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightGreen": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5fffae6",
|
||||
"--primary-cta": "#80da9b",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkGreen": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f0fff8e6",
|
||||
"--primary-cta": "#1cde5d",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightRed": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fff5f5e6",
|
||||
"--primary-cta": "#ff7a7a",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkRed": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fff0f0e6",
|
||||
"--primary-cta": "#ff3d4a",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightPurple": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f8f5ffe6",
|
||||
"--primary-cta": "#c89bff",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkPurple": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5f0fce6",
|
||||
"--primary-cta": "#b366ff",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightOrange": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fffaf5e6",
|
||||
"--primary-cta": "#ffaa70",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkOrange": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fff8f0e6",
|
||||
"--primary-cta": "#ff8c42",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalLightYellow": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fffffae6",
|
||||
"--primary-cta": "#fde047",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"minimalDarkYellow": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fffef5e6",
|
||||
"--primary-cta": "#facc15",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373"
|
||||
},
|
||||
"brutalistRed": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ff0000",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistBlue": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#0066ff",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistGreen": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#00cc00",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistPurple": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#9933ff",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistOrange": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ff6600",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistYellow": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffcc00",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"brutalistPink": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1b1b1b",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ff0066",
|
||||
"--secondary-cta": "#151515",
|
||||
"--accent": "#303030",
|
||||
"--background-accent": "#303030"
|
||||
},
|
||||
"lightBlue": {
|
||||
"--background": "#010912",
|
||||
"--card": "#152840",
|
||||
"--foreground": "#e6f0ff",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#0e1a29",
|
||||
"--accent": "#3f5c79",
|
||||
"--background-accent": "#004a93"
|
||||
},
|
||||
"darkBlue": {
|
||||
"--background": "#00070e",
|
||||
"--card": "#152840",
|
||||
"--foreground": "#e6f0ff",
|
||||
"--primary-cta": "#3891f6",
|
||||
"--secondary-cta": "#0e1a29",
|
||||
"--accent": "#3f5c79",
|
||||
"--background-accent": "#016ad3"
|
||||
},
|
||||
"lightGreen": {
|
||||
"--background": "#000802",
|
||||
"--card": "#0b1a0b",
|
||||
"--foreground": "#e6ffe6",
|
||||
"--primary-cta": "#80da9b",
|
||||
"--secondary-cta": "#07170b",
|
||||
"--accent": "#38714a",
|
||||
"--background-accent": "#2c6541"
|
||||
},
|
||||
"darkGreen": {
|
||||
"--background": "#000602",
|
||||
"--card": "#0d1d0d",
|
||||
"--foreground": "#e6ffe6",
|
||||
"--primary-cta": "#1cde5d",
|
||||
"--secondary-cta": "#0a1f0f",
|
||||
"--accent": "#2e6841",
|
||||
"--background-accent": "#0d6b32"
|
||||
},
|
||||
"lightRed": {
|
||||
"--background": "#080000",
|
||||
"--card": "#1e0d0d",
|
||||
"--foreground": "#ffe6e6",
|
||||
"--primary-cta": "#ff7a7a",
|
||||
"--secondary-cta": "#1e0909",
|
||||
"--accent": "#7b4242",
|
||||
"--background-accent": "#65292c"
|
||||
},
|
||||
"darkRed": {
|
||||
"--background": "#060000",
|
||||
"--card": "#1d0d0d",
|
||||
"--foreground": "#ffe6e6",
|
||||
"--primary-cta": "#ff3d4a",
|
||||
"--secondary-cta": "#1f0a0a",
|
||||
"--accent": "#7b2d2d",
|
||||
"--background-accent": "#b8111f"
|
||||
},
|
||||
"lightPurple": {
|
||||
"--background": "#020008",
|
||||
"--card": "#0b1a1d",
|
||||
"--foreground": "#f0e6ff",
|
||||
"--primary-cta": "#c89bff",
|
||||
"--secondary-cta": "#0b0717",
|
||||
"--accent": "#684f7b",
|
||||
"--background-accent": "#65417c"
|
||||
},
|
||||
"darkPurple": {
|
||||
"--background": "#020006",
|
||||
"--card": "#1d0d1d",
|
||||
"--foreground": "#f0e6ff",
|
||||
"--primary-cta": "#b366ff",
|
||||
"--secondary-cta": "#1a0a29",
|
||||
"--accent": "#59437b",
|
||||
"--background-accent": "#6b28d9"
|
||||
},
|
||||
"lightOrange": {
|
||||
"--background": "#080200",
|
||||
"--card": "#1a0d0b",
|
||||
"--foreground": "#ffe6d5",
|
||||
"--primary-cta": "#ffaa70",
|
||||
"--secondary-cta": "#170b07",
|
||||
"--accent": "#7b5e4a",
|
||||
"--background-accent": "#b8541e"
|
||||
},
|
||||
"darkOrange": {
|
||||
"--background": "#060200",
|
||||
"--card": "#1d0d0b",
|
||||
"--foreground": "#ffe6d5",
|
||||
"--primary-cta": "#ff8c42",
|
||||
"--secondary-cta": "#1f0a00",
|
||||
"--accent": "#7b5337",
|
||||
"--background-accent": "#b8400c"
|
||||
},
|
||||
"softPeach": {
|
||||
"--background": "#1a1210",
|
||||
"--card": "#2a201d",
|
||||
"--foreground": "#ffe8e0",
|
||||
"--primary-cta": "#e8a090",
|
||||
"--secondary-cta": "#1a1210",
|
||||
"--accent": "#6b4d45",
|
||||
"--background-accent": "#8b5d50"
|
||||
},
|
||||
"softLavender": {
|
||||
"--background": "#121018",
|
||||
"--card": "#1d1a28",
|
||||
"--foreground": "#e8e0ff",
|
||||
"--primary-cta": "#a890e8",
|
||||
"--secondary-cta": "#121018",
|
||||
"--accent": "#4d456b",
|
||||
"--background-accent": "#5d508b"
|
||||
},
|
||||
"softBlush": {
|
||||
"--background": "#1a1014",
|
||||
"--card": "#2a1d22",
|
||||
"--foreground": "#ffe0e8",
|
||||
"--primary-cta": "#e890a8",
|
||||
"--secondary-cta": "#1a1014",
|
||||
"--accent": "#6b4555",
|
||||
"--background-accent": "#8b5068"
|
||||
},
|
||||
"bluePurple": {
|
||||
"--background": "#0a0e1a",
|
||||
"--card": "#121626",
|
||||
"--foreground": "#e0e8ff",
|
||||
"--primary-cta": "#3b82f6",
|
||||
"--secondary-cta": "#0a0e1a",
|
||||
"--accent": "#a78bfa",
|
||||
"--background-accent": "#8b5cf6"
|
||||
}
|
||||
}
|
||||
}
|
||||
500
docs/ACCESSIBILITY.md
Normal file
500
docs/ACCESSIBILITY.md
Normal file
@@ -0,0 +1,500 @@
|
||||
# Accessibility Standards
|
||||
|
||||
This document outlines accessibility (a11y) requirements for all components in the library, ensuring compatibility with screen readers and assistive technologies.
|
||||
|
||||
## Interactive Components
|
||||
|
||||
For buttons, links, and other interactive elements.
|
||||
|
||||
### Required Props
|
||||
|
||||
```tsx
|
||||
interface ButtonProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
// Accessibility props
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
```
|
||||
|
||||
### Implementation Pattern
|
||||
|
||||
```tsx
|
||||
const Button = ({
|
||||
text,
|
||||
onClick,
|
||||
className = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"base-button-styles",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
**ariaLabel:**
|
||||
- Optional prop with sensible fallback
|
||||
- Falls back to `text` content for buttons
|
||||
- Provides context for screen readers
|
||||
|
||||
**type:**
|
||||
- Default: `"button"`
|
||||
- Options: `"button" | "submit" | "reset"`
|
||||
- Prevents accidental form submission
|
||||
|
||||
**disabled:**
|
||||
- Default: `false`
|
||||
- Includes visual disabled states:
|
||||
- `disabled:cursor-not-allowed` - Shows not-allowed cursor
|
||||
- `disabled:opacity-50` - Reduces opacity for visual feedback
|
||||
|
||||
## Media Components
|
||||
|
||||
### Images
|
||||
|
||||
**Required Props:**
|
||||
```tsx
|
||||
interface ImageProps {
|
||||
imageSrc: string;
|
||||
imageAlt?: string; // Empty string for decorative images
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
```tsx
|
||||
const ImageComponent = ({
|
||||
imageSrc,
|
||||
imageAlt = "",
|
||||
className = "",
|
||||
}: ImageProps) => {
|
||||
return (
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
aria-hidden={imageAlt === ""}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
- `imageAlt` - Alt text for images
|
||||
- Provide descriptive alt text for meaningful images
|
||||
- Use empty string (`""`) for decorative images
|
||||
- `aria-hidden={true}` - When alt is empty, mark as decorative
|
||||
- Screen readers will skip decorative images
|
||||
|
||||
### Videos
|
||||
|
||||
**Required Props:**
|
||||
```tsx
|
||||
interface VideoProps {
|
||||
videoSrc: string;
|
||||
videoAriaLabel?: string;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
```tsx
|
||||
const VideoComponent = ({
|
||||
videoSrc,
|
||||
videoAriaLabel = "Video content",
|
||||
className = "",
|
||||
}: VideoProps) => {
|
||||
return (
|
||||
<video
|
||||
src={videoSrc}
|
||||
aria-label={videoAriaLabel}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
- `videoAriaLabel` - Descriptive label for video element
|
||||
- Default: Sensible fallback like "Video content" or "Hero video"
|
||||
- Always include for screen reader context
|
||||
|
||||
### Media Content Pattern
|
||||
|
||||
For components supporting both images and videos:
|
||||
|
||||
```tsx
|
||||
interface HeroProps {
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoSrc?: string;
|
||||
videoAriaLabel?: string;
|
||||
}
|
||||
|
||||
const Hero = ({
|
||||
imageSrc,
|
||||
imageAlt = "",
|
||||
videoSrc,
|
||||
videoAriaLabel = "Hero video",
|
||||
}: HeroProps) => {
|
||||
return (
|
||||
<>
|
||||
{videoSrc ? (
|
||||
<video
|
||||
src={videoSrc}
|
||||
aria-label={videoAriaLabel}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
) : (
|
||||
imageSrc && (
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
aria-hidden={imageAlt === ""}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Section Components
|
||||
|
||||
### Semantic HTML
|
||||
|
||||
Use semantic HTML elements for proper document structure:
|
||||
|
||||
```tsx
|
||||
<section> // For sections of content
|
||||
<header> // For page/section headers
|
||||
<nav> // For navigation
|
||||
<footer> // For page/section footers
|
||||
<article> // For self-contained content
|
||||
<aside> // For tangentially related content
|
||||
<main> // For main content area
|
||||
```
|
||||
|
||||
### Section Pattern
|
||||
|
||||
```tsx
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Section = ({
|
||||
title,
|
||||
description,
|
||||
ariaLabel = "Section name",
|
||||
className = "",
|
||||
}: SectionProps) => {
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("w-full py-20", className)}
|
||||
>
|
||||
<div className="w-content-width mx-auto">
|
||||
<h2>{title}</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Sensible Default aria-labels
|
||||
|
||||
Each section type should have a descriptive default:
|
||||
|
||||
```tsx
|
||||
// Hero section
|
||||
ariaLabel = "Hero section"
|
||||
|
||||
// About section
|
||||
ariaLabel = "About section"
|
||||
|
||||
// Feature section
|
||||
ariaLabel = "Features section"
|
||||
|
||||
// Testimonial section
|
||||
ariaLabel = "Testimonials section"
|
||||
|
||||
// Footer
|
||||
ariaLabel = "Footer"
|
||||
|
||||
// Navigation
|
||||
ariaLabel = "Navigation"
|
||||
```
|
||||
|
||||
### Heading Hierarchy
|
||||
|
||||
Maintain proper heading levels:
|
||||
|
||||
```tsx
|
||||
<h1> // Page title (once per page)
|
||||
<h2> // Section titles
|
||||
<h3> // Subsection titles
|
||||
<h4> // Card/component titles
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
<section aria-label="Features section">
|
||||
<h2>Our Features</h2> {/* Section title */}
|
||||
<div>
|
||||
<h3>Feature One</h3> {/* Feature title */}
|
||||
<p>Description...</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Form Components
|
||||
|
||||
### Input Fields
|
||||
|
||||
```tsx
|
||||
interface InputProps {
|
||||
label: string;
|
||||
id: string;
|
||||
type?: string;
|
||||
required?: boolean;
|
||||
ariaLabel?: string;
|
||||
ariaDescribedBy?: string;
|
||||
}
|
||||
|
||||
const Input = ({
|
||||
label,
|
||||
id,
|
||||
type = "text",
|
||||
required = false,
|
||||
ariaLabel,
|
||||
ariaDescribedBy,
|
||||
}: InputProps) => {
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={id}>
|
||||
{label}
|
||||
{required && <span aria-label="required">*</span>}
|
||||
</label>
|
||||
<input
|
||||
id={id}
|
||||
type={type}
|
||||
required={required}
|
||||
aria-label={ariaLabel || label}
|
||||
aria-describedby={ariaDescribedBy}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Key Points:**
|
||||
- Always associate `<label>` with input using `htmlFor` and `id`
|
||||
- Mark required fields visually and semantically
|
||||
- Use `aria-describedby` for error messages or hints
|
||||
|
||||
### Form Validation
|
||||
|
||||
```tsx
|
||||
const [error, setError] = useState("");
|
||||
|
||||
<input
|
||||
aria-invalid={!!error}
|
||||
aria-describedby={error ? "error-message" : undefined}
|
||||
/>
|
||||
{error && (
|
||||
<p id="error-message" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
```
|
||||
|
||||
## Focus Management
|
||||
|
||||
### Focus Indicators
|
||||
|
||||
Never remove focus outlines without providing alternatives:
|
||||
|
||||
```tsx
|
||||
// ❌ WRONG
|
||||
className="outline-none"
|
||||
|
||||
// ✅ CORRECT - Custom focus indicator
|
||||
className="focus:outline-none focus:ring-2 focus:ring-foreground/50"
|
||||
```
|
||||
|
||||
### Focus Trap (for modals/dialogs)
|
||||
|
||||
When implementing modals or dialogs, ensure:
|
||||
- Focus moves to modal when opened
|
||||
- Tab/Shift+Tab cycles through modal elements only
|
||||
- Focus returns to trigger element when closed
|
||||
- Escape key closes modal
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
### Interactive Elements
|
||||
|
||||
All interactive elements must be keyboard accessible:
|
||||
|
||||
```tsx
|
||||
// Buttons and links work by default
|
||||
<button onClick={handleClick}>Click me</button>
|
||||
<a href="/page">Link</a>
|
||||
|
||||
// Custom interactive elements need tabIndex and keyboard handlers
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={handleClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Custom button
|
||||
</div>
|
||||
```
|
||||
|
||||
### Skip Links
|
||||
|
||||
For navigation-heavy pages, provide skip links:
|
||||
|
||||
```tsx
|
||||
<a href="#main-content" className="sr-only focus:not-sr-only">
|
||||
Skip to main content
|
||||
</a>
|
||||
```
|
||||
|
||||
## Screen Reader Only Content
|
||||
|
||||
Use the `sr-only` class for content that should only be read by screen readers:
|
||||
|
||||
```tsx
|
||||
<span className="sr-only">Additional context for screen readers</span>
|
||||
```
|
||||
|
||||
Tailwind's `sr-only` class:
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## ARIA Roles
|
||||
|
||||
Use ARIA roles when semantic HTML isn't sufficient:
|
||||
|
||||
```tsx
|
||||
// Navigation
|
||||
<nav role="navigation" aria-label="Main navigation">
|
||||
|
||||
// Button (for non-button elements)
|
||||
<div role="button" tabIndex={0}>
|
||||
|
||||
// Alert/Status messages
|
||||
<div role="alert">Error message</div>
|
||||
<div role="status">Loading...</div>
|
||||
|
||||
// Presentation (decorative)
|
||||
<div role="presentation">
|
||||
|
||||
// Dialog/Modal
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
|
||||
```
|
||||
|
||||
## Loading States
|
||||
|
||||
Provide feedback for loading states:
|
||||
|
||||
```tsx
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
<button disabled={isLoading} aria-busy={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<span className="sr-only">Loading...</span>
|
||||
<Spinner aria-hidden="true" />
|
||||
</>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
```
|
||||
|
||||
## Accessibility Checklist
|
||||
|
||||
### Interactive Components
|
||||
- [ ] Add `ariaLabel` prop (optional with sensible fallback)
|
||||
- [ ] Add `type` prop for buttons (default: `"button"`)
|
||||
- [ ] Add `disabled` prop with visual states
|
||||
- [ ] Include disabled state styling (`disabled:cursor-not-allowed disabled:opacity-50`)
|
||||
- [ ] Ensure keyboard accessibility (Enter/Space for custom elements)
|
||||
- [ ] Provide custom focus indicators if removing default outline
|
||||
|
||||
### Media Components
|
||||
- [ ] Images: Add `imageAlt` prop
|
||||
- [ ] Images: Use `aria-hidden={true}` when alt is empty (decorative)
|
||||
- [ ] Videos: Add `videoAriaLabel` prop with sensible default
|
||||
- [ ] Provide meaningful default labels
|
||||
|
||||
### Section Components
|
||||
- [ ] Use semantic HTML (`<section>`, `<header>`, `<nav>`, `<footer>`)
|
||||
- [ ] Add `ariaLabel` prop with sensible default
|
||||
- [ ] Follow proper heading hierarchy (h1 → h2 → h3)
|
||||
- [ ] Use `w-full py-20` for section spacing (except hero/footer)
|
||||
- [ ] Use `w-content-width mx-auto` for content wrapper
|
||||
|
||||
### Form Components
|
||||
- [ ] Associate labels with inputs using `htmlFor` and `id`
|
||||
- [ ] Mark required fields semantically
|
||||
- [ ] Use `aria-invalid` for validation errors
|
||||
- [ ] Use `aria-describedby` for error messages/hints
|
||||
- [ ] Provide `role="alert"` for error messages
|
||||
|
||||
### General
|
||||
- [ ] Test with keyboard navigation (Tab, Shift+Tab, Enter, Space, Escape)
|
||||
- [ ] Test with screen reader (VoiceOver, NVDA, JAWS)
|
||||
- [ ] Ensure sufficient color contrast (WCAG AA minimum)
|
||||
- [ ] Provide focus indicators for all interactive elements
|
||||
- [ ] Use semantic HTML before ARIA roles
|
||||
- [ ] Include screen reader only text when needed (`sr-only`)
|
||||
491
docs/CARDSTACK_SECTIONS.md
Normal file
491
docs/CARDSTACK_SECTIONS.md
Normal file
@@ -0,0 +1,491 @@
|
||||
# CardStack Section Pattern
|
||||
|
||||
This document covers the CardStack pattern used in Feature, Product, Pricing, Testimonial, Team, Blog, and Metrics section components.
|
||||
|
||||
## Required Type Imports
|
||||
|
||||
```tsx
|
||||
// Centralized type definitions
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
```
|
||||
|
||||
**Key Types:**
|
||||
- `TextboxLayout` - Layout options for section headers ("default" | "split" | "split-actions" | "split-description" | "inline-image")
|
||||
- `InvertedBackground` - Background inversion options ("noInvert" | "invertDefault" | "invertCard")
|
||||
- `TitleSegment` - Type for inline image segments ({ type: "text" | "image", content/src, alt? })
|
||||
- `ButtonConfig` - Button configuration interface
|
||||
- `GridVariant` - Grid layout variants
|
||||
- `CardAnimationType` - Card animation types
|
||||
|
||||
## Overview
|
||||
|
||||
CardStack is an intelligent layout component that automatically switches between grid, carousel, and timeline layouts based on item count and configuration.
|
||||
|
||||
**Mode Selection (Automatic):**
|
||||
- **1-4 items**: Grid mode (displays as bento grid)
|
||||
- **5+ items**: Carousel mode (auto-scrolling or button-controlled)
|
||||
- **3-6 items with timeline variant**: Timeline layout (or carousel if 7+)
|
||||
|
||||
## Grid Variants
|
||||
|
||||
There are 9 bento grid layouts plus uniform layouts:
|
||||
|
||||
### Uniform Layouts
|
||||
- `uniform-all-items-equal` - All items same size (default)
|
||||
- `uniform-2-items` - Two equal columns
|
||||
- `uniform-3-items` - Three equal columns
|
||||
- `uniform-4-items` - Four equal columns
|
||||
|
||||
### Bento Layouts (Asymmetric)
|
||||
- `two-columns-alternating-heights` - Alternating tall/short columns
|
||||
- `asymmetric-60-wide-40-narrow` - 60% wide left, 40% narrow right
|
||||
- `three-columns-all-equal-width` - Three equal columns
|
||||
- `four-items-2x2-equal-grid` - Perfect 2x2 grid
|
||||
- `one-large-right-three-stacked-left` - Left: 3 items, Right: 1 large
|
||||
- `items-top-row-full-width-bottom` - Top: full width, Bottom: items
|
||||
- `full-width-top-items-bottom-row` - Full width top, items below
|
||||
- `one-large-left-three-stacked-right` - Left: 1 large, Right: 3 items
|
||||
- `timeline` - Zigzag timeline layout
|
||||
|
||||
## Height Control Pattern
|
||||
|
||||
### uniformGridCustomHeightClasses Prop
|
||||
|
||||
All CardStack-based components should accept this optional prop to control item heights in both grid and carousel modes.
|
||||
|
||||
```tsx
|
||||
interface SectionCardProps {
|
||||
items: ItemType[];
|
||||
gridVariant: GridVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
carouselMode?: "auto" | "buttons";
|
||||
// ... other props
|
||||
}
|
||||
```
|
||||
|
||||
### Default Values by Component Type
|
||||
|
||||
**Most components (Feature, Product, Pricing, Team, Metrics, Blog):**
|
||||
```tsx
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90"
|
||||
```
|
||||
|
||||
**Testimonial components (need flexible heights):**
|
||||
```tsx
|
||||
uniformGridCustomHeightClasses = "min-h-none"
|
||||
```
|
||||
|
||||
**Hero carousel components (no minimum):**
|
||||
```tsx
|
||||
uniformGridCustomHeightClasses = "min-h-0"
|
||||
```
|
||||
|
||||
**Feature components (optimized for compact layout):**
|
||||
```tsx
|
||||
// Hardcoded in FeatureCardFour
|
||||
uniformGridCustomHeightClasses = "min-h-0"
|
||||
```
|
||||
|
||||
### Implementation Pattern
|
||||
|
||||
The prop flows: Section Component → CardStack → GridLayout/Carousel
|
||||
|
||||
```tsx
|
||||
// In section component (e.g., ProductCardOne.tsx)
|
||||
const ProductCardOne = ({
|
||||
products,
|
||||
gridVariant,
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
// ... other props
|
||||
}: ProductCardOneProps) => {
|
||||
return (
|
||||
<CardStack
|
||||
gridVariant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
// ... other props
|
||||
>
|
||||
{products.map((product) => (
|
||||
<div className="card">...</div>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Individual card elements must use `min-h-0`:**
|
||||
```tsx
|
||||
<div className={cls("card p-6 rounded-theme-capped h-full min-h-0")}>
|
||||
{/* Product content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
This prevents height conflicts and ensures proper flex behavior.
|
||||
|
||||
## Carousel Modes
|
||||
|
||||
### carouselMode Prop
|
||||
|
||||
```tsx
|
||||
carouselMode?: "auto" | "buttons"
|
||||
```
|
||||
|
||||
- **`"auto"`** - Auto-scrolling carousel (uses AutoCarousel with embla-carousel-auto-scroll)
|
||||
- **`"buttons"`** - Button-controlled carousel (uses ButtonCarousel with prev/next buttons)
|
||||
|
||||
**Default is typically `"buttons"`** for better accessibility and user control.
|
||||
|
||||
## TextBox Integration
|
||||
|
||||
CardStack components integrate with TextBox for section headers.
|
||||
|
||||
### TextBox Layout Options
|
||||
|
||||
```tsx
|
||||
import type { TextboxLayout } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
textboxLayout: TextboxLayout // "default" | "split" | "split-actions" | "split-description" | "inline-image"
|
||||
```
|
||||
|
||||
**Layout Modes:**
|
||||
|
||||
1. **`"default"`** - Title and description stacked vertically, centered or left-aligned
|
||||
```
|
||||
[Tag]
|
||||
Title
|
||||
Description
|
||||
[Buttons]
|
||||
```
|
||||
|
||||
2. **`"split"`** - Title and description on left (60%), buttons on right (40%)
|
||||
```
|
||||
[Tag]
|
||||
Title | Description | [Buttons]
|
||||
```
|
||||
|
||||
3. **`"split-actions"`** - Title and description on left, buttons on right (no description on right)
|
||||
```
|
||||
[Tag]
|
||||
Title | [Buttons]
|
||||
Description |
|
||||
```
|
||||
|
||||
4. **`"split-description"`** - Title on left, description on right, buttons below
|
||||
```
|
||||
[Tag]
|
||||
Title | Description
|
||||
[Buttons]
|
||||
```
|
||||
|
||||
5. **`"inline-image"`** - Centered heading with inline images between text segments, buttons below
|
||||
```
|
||||
Text [Image] Text [Image] Text
|
||||
[Buttons]
|
||||
```
|
||||
|
||||
**Special props for inline-image layout:**
|
||||
```tsx
|
||||
import type { TitleSegment } from "@/components/cardStack/types";
|
||||
|
||||
titleSegments?: TitleSegment[] // Array of text and image segments
|
||||
titleImageWrapperClassName?: string // Styling for image wrapper
|
||||
titleImageClassName?: string // Styling for the image itself
|
||||
```
|
||||
|
||||
**Example usage:**
|
||||
```tsx
|
||||
<FeatureCardOne
|
||||
titleSegments={[
|
||||
{ type: "text", content: "Discover" },
|
||||
{ type: "image", src: "/icon.png", alt: "Icon" },
|
||||
{ type: "text", content: "powerful features" }
|
||||
]}
|
||||
textboxLayout="inline-image"
|
||||
// ... other props
|
||||
/>
|
||||
```
|
||||
|
||||
**Inline Image Behavior:**
|
||||
- Images are styled with `primary-button` background
|
||||
- Automatic rotation alternation: 1st: -rotate-12, 2nd: rotate-12, etc.
|
||||
- Square aspect ratio (1.1em height)
|
||||
- Proper spacing with mx-1 margins
|
||||
- Supports both local paths and external URLs
|
||||
|
||||
### TextBox Props in CardStack
|
||||
|
||||
```tsx
|
||||
<CardStack
|
||||
title="Our Products"
|
||||
titleSegments={[
|
||||
{ type: "text", content: "Our" },
|
||||
{ type: "image", src: "/icon.png", alt: "Product Icon" },
|
||||
{ type: "text", content: "Products" }
|
||||
]} // Optional: use titleSegments for inline-image layout
|
||||
description="Discover our latest offerings"
|
||||
tag="Products"
|
||||
tagIcon={Package}
|
||||
buttons={[
|
||||
{ text: "View All", href: "/products" }
|
||||
]}
|
||||
textboxLayout="split" // or "inline-image" with titleSegments
|
||||
useInvertedBackground="noInvert" // "noInvert" | "invertDefault" | "invertCard"
|
||||
// TextBox className overrides
|
||||
textBoxClassName=""
|
||||
titleClassName=""
|
||||
titleImageWrapperClassName="" // For inline-image layout
|
||||
titleImageClassName="" // For inline-image layout
|
||||
descriptionClassName=""
|
||||
tagClassName=""
|
||||
buttonContainerClassName=""
|
||||
buttonClassName=""
|
||||
buttonTextClassName=""
|
||||
// ... other props
|
||||
>
|
||||
```
|
||||
|
||||
## Button System
|
||||
|
||||
### ButtonConfig Interface
|
||||
|
||||
```tsx
|
||||
interface ButtonConfig {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
|
||||
// NO variant property - controlled by ThemeProvider
|
||||
}
|
||||
```
|
||||
|
||||
### Button Rendering Logic
|
||||
|
||||
Buttons are rendered with automatic primary/secondary styling:
|
||||
|
||||
- **Index 0**: Primary button (`primary-button` class)
|
||||
- **Index 1+**: Secondary button (`secondary-button` class)
|
||||
|
||||
**Maximum 2 buttons** per section (enforced in TextBox component).
|
||||
|
||||
```tsx
|
||||
const buttons: ButtonConfig[] = [
|
||||
{ text: "Get Started", href: "/signup" }, // Primary
|
||||
{ text: "Learn More", onClick: () => {} } // Secondary
|
||||
];
|
||||
```
|
||||
|
||||
The `variant` is determined by ThemeProvider's `defaultButtonVariant` setting.
|
||||
|
||||
## Complete CardStack Section Example
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React, { memo } from "react";
|
||||
import CardStack from "@/components/cardStack/CardStack";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { GridVariant, ButtonConfig } from "@/components/cardStack/types";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
type Product = {
|
||||
title: string;
|
||||
description: string;
|
||||
price: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
interface ProductCardOneProps {
|
||||
products: Product[];
|
||||
carouselMode?: "auto" | "buttons";
|
||||
gridVariant: GridVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: "default" | "split" | "split-actions" | "split-description";
|
||||
ariaLabel?: string;
|
||||
// Main wrapper
|
||||
className?: string;
|
||||
// CardStack customization
|
||||
cardStackClassName?: string;
|
||||
// TextBox customization
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonsWrapperClassName?: string;
|
||||
// Card customization
|
||||
cardClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
cardDescriptionClassName?: string;
|
||||
cardPriceClassName?: string;
|
||||
cardImageClassName?: string;
|
||||
}
|
||||
|
||||
const ProductCardOne = ({
|
||||
products,
|
||||
carouselMode = "buttons",
|
||||
gridVariant,
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
ariaLabel = "Product section",
|
||||
className = "",
|
||||
cardStackClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonsWrapperClassName = "",
|
||||
cardClassName = "",
|
||||
cardTitleClassName = "",
|
||||
cardDescriptionClassName = "",
|
||||
cardPriceClassName = "",
|
||||
cardImageClassName = "",
|
||||
}: ProductCardOneProps) => {
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("w-full py-20", className)}
|
||||
>
|
||||
<div className="w-content-width mx-auto">
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
title={title}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
className={cardStackClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonsWrapperClassName={buttonsWrapperClassName}
|
||||
>
|
||||
{products.map((product, index) => (
|
||||
<div
|
||||
key={`${product.title}-${index}`}
|
||||
className={cls(
|
||||
"card p-6 rounded-theme-capped h-full min-h-0 flex flex-col",
|
||||
cardClassName
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.title}
|
||||
className={cls("w-full h-48 object-cover mb-4", cardImageClassName)}
|
||||
/>
|
||||
<h3 className={cls("text-xl font-semibold mb-2", cardTitleClassName)}>
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className={cls("text-foreground/75 flex-1", cardDescriptionClassName)}>
|
||||
{product.description}
|
||||
</p>
|
||||
<p className={cls("text-2xl font-bold mt-4", cardPriceClassName)}>
|
||||
{product.price}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</CardStack>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ProductCardOne.displayName = "ProductCardOne";
|
||||
|
||||
export default memo(ProductCardOne);
|
||||
```
|
||||
|
||||
## Animation Types
|
||||
|
||||
CardStack supports GSAP-powered scroll-triggered animations:
|
||||
|
||||
```tsx
|
||||
animationType?: "none" | "opacity" | "slide-up" | "scale-rotate" | "blur-reveal"
|
||||
```
|
||||
|
||||
**Animation Descriptions:**
|
||||
- **`none`** - No animation
|
||||
- **`opacity`** - Fade in
|
||||
- **`slide-up`** - Slide up from below with stagger
|
||||
- **`scale-rotate`** - Scale + rotate entrance with stagger
|
||||
- **`blur-reveal`** - Blur to clear reveal with stagger
|
||||
|
||||
Each animation uses GSAP ScrollTrigger with staggered effect on children.
|
||||
|
||||
## Best Practices
|
||||
|
||||
### ✅ DO:
|
||||
|
||||
- Accept `uniformGridCustomHeightClasses` as optional prop with sensible default
|
||||
- Use `min-h-0` on individual card elements for proper flex behavior
|
||||
- Pass through all CardStack customization props (className overrides)
|
||||
- Use appropriate default height for your component type
|
||||
- Document the default value in registry propsSchema
|
||||
- Provide className props for all card sub-elements
|
||||
- Use `card` class for consistent card styling (theme-aware)
|
||||
- Use `rounded-theme-capped` for card border radius
|
||||
- Set `carouselMode` default to `"buttons"` for accessibility
|
||||
|
||||
### ❌ DO NOT:
|
||||
|
||||
- Hardcode height classes in CardStack (let it be controlled via prop)
|
||||
- Remove the `uniformGridCustomHeightClasses` prop without specific reason
|
||||
- Use different height classes for grid vs carousel (they should match)
|
||||
- Forget to apply `min-h-0` on card wrapper divs
|
||||
- Specify button `variant` in ButtonConfig (controlled by ThemeProvider)
|
||||
- Create more than 2 buttons per section
|
||||
- Use `lg:` or `xl:` breakpoints for layout changes
|
||||
|
||||
## CardStack Component Checklist
|
||||
|
||||
When creating a new CardStack-based section component:
|
||||
|
||||
### Props & Configuration
|
||||
- [ ] Accept `uniformGridCustomHeightClasses` prop with appropriate default
|
||||
- [ ] Accept `carouselMode` prop (default: `"buttons"`)
|
||||
- [ ] Accept `gridVariant` as required prop (or hardcode if single variant)
|
||||
- [ ] Accept `textboxLayout` for TextBox configuration
|
||||
- [ ] Accept `animationType` for scroll animations (optional)
|
||||
|
||||
### CardStack Integration
|
||||
- [ ] Pass `uniformGridCustomHeightClasses` to CardStack
|
||||
- [ ] Pass all TextBox props (title, description, tag, tagIcon, buttons)
|
||||
- [ ] Pass all TextBox className overrides
|
||||
- [ ] Pass cardStackClassName for CardStack wrapper customization
|
||||
|
||||
### Card Implementation
|
||||
- [ ] Apply `min-h-0` to individual card wrapper divs
|
||||
- [ ] Use `card` class for card background/border styling
|
||||
- [ ] Use `rounded-theme-capped` for border radius
|
||||
- [ ] Provide className override props for all card sub-elements
|
||||
- [ ] Use `h-full` on cards for consistent heights within grid
|
||||
|
||||
### Button System
|
||||
- [ ] Use ButtonConfig type for buttons array
|
||||
- [ ] Do NOT specify variant in ButtonConfig
|
||||
- [ ] Maximum 2 buttons
|
||||
- [ ] Let ThemeProvider control button variant
|
||||
|
||||
### Section Structure
|
||||
- [ ] Use semantic `<section>` tag with aria-label
|
||||
- [ ] Use `w-full py-20` on section
|
||||
- [ ] Use `w-content-width mx-auto` wrapper
|
||||
- [ ] Provide section className override
|
||||
|
||||
### Documentation
|
||||
- [ ] Document `uniformGridCustomHeightClasses` default in registry
|
||||
- [ ] Document all grid variants supported
|
||||
- [ ] Document carousel mode options
|
||||
- [ ] Include usage example with typical props
|
||||
437
docs/COMPONENT_IMPLEMENTATION.md
Normal file
437
docs/COMPONENT_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,437 @@
|
||||
# Component Implementation Standards
|
||||
|
||||
This document outlines the core implementation patterns for creating components in this library, optimized for AI website builders.
|
||||
|
||||
## Component Structure Template
|
||||
|
||||
Every component should follow this structure:
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ComponentProps {
|
||||
// Required props first
|
||||
text: string;
|
||||
// Optional props with explicit types
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const Component = ({
|
||||
text,
|
||||
onClick,
|
||||
className = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ComponentProps) => {
|
||||
return (
|
||||
<element
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls("base-classes", "disabled-states", className)}
|
||||
>
|
||||
{text}
|
||||
</element>
|
||||
);
|
||||
};
|
||||
|
||||
Component.displayName = "Component";
|
||||
|
||||
export default React.memo(Component);
|
||||
```
|
||||
|
||||
**Key Requirements:**
|
||||
- `"use client"` directive when needed (interactive components, hooks)
|
||||
- Named exports with `displayName` for debugging
|
||||
- Wrap in `React.memo()` for performance optimization
|
||||
- Use `cls()` utility for class composition (never plain string concatenation)
|
||||
|
||||
## Prop Structure & Defaults
|
||||
|
||||
### Required Props
|
||||
Core content props should be **required** with no default values:
|
||||
- Section components: `title`, `description`
|
||||
- Button components: `text`
|
||||
- Media components: `imageSrc` or `videoSrc` (when applicable)
|
||||
|
||||
### Optional Props with Defaults
|
||||
|
||||
**Standard className defaults:**
|
||||
```tsx
|
||||
className = "",
|
||||
textClassName = "",
|
||||
iconClassName = "",
|
||||
containerClassName = "",
|
||||
```
|
||||
|
||||
Empty string defaults prevent undefined checks and are standard practice.
|
||||
|
||||
**Common optional props:**
|
||||
```tsx
|
||||
disabled = false,
|
||||
type = "button",
|
||||
ariaLabel, // No default, falls back to sensible value in component
|
||||
```
|
||||
|
||||
**Component-specific props:**
|
||||
Document defaults clearly in both code and registry:
|
||||
```tsx
|
||||
strengthFactor = 20,
|
||||
carouselMode = "buttons",
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
```
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
### Section Components (Hero, About, Feature, etc.)
|
||||
|
||||
**✅ CORRECT:**
|
||||
```tsx
|
||||
interface HeroProps {
|
||||
title: string; // Primary heading
|
||||
description: string; // Supporting text
|
||||
buttons?: ButtonConfig[];
|
||||
}
|
||||
```
|
||||
|
||||
**❌ WRONG:**
|
||||
```tsx
|
||||
interface HeroProps {
|
||||
heading: string; // Should be "title"
|
||||
subtitle: string; // Should be "description"
|
||||
text: string; // Ambiguous
|
||||
}
|
||||
```
|
||||
|
||||
### Button Components
|
||||
|
||||
**✅ CORRECT:**
|
||||
```tsx
|
||||
interface ButtonProps {
|
||||
text: string; // Button label
|
||||
onClick?: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
**❌ WRONG:**
|
||||
```tsx
|
||||
interface ButtonProps {
|
||||
title: string; // Should be "text"
|
||||
label: string; // Should be "text"
|
||||
}
|
||||
```
|
||||
|
||||
### Button Config (for sections)
|
||||
|
||||
```tsx
|
||||
interface ButtonConfig {
|
||||
text: string; // Button label (not "title" or "label")
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
|
||||
// NO variant property - controlled by ThemeProvider
|
||||
}
|
||||
```
|
||||
|
||||
**Consistency is critical:**
|
||||
- All hero sections must use the same prop names
|
||||
- All about sections must use the same prop names
|
||||
- Registry documentation must match component prop names exactly
|
||||
|
||||
## Component Customizability
|
||||
|
||||
Provide className props for **all major elements** to allow full styling control:
|
||||
|
||||
```tsx
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
// Main wrapper
|
||||
className?: string;
|
||||
// Inner container
|
||||
containerClassName?: string;
|
||||
// Content areas
|
||||
textClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
imageClassName?: string;
|
||||
}
|
||||
|
||||
const Section = ({
|
||||
title,
|
||||
description,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
imageClassName = "",
|
||||
}: SectionProps) => {
|
||||
return (
|
||||
<section className={cls("base-section-styles", className)}>
|
||||
<div className={cls("base-container-styles", containerClassName)}>
|
||||
<div className={cls("base-text-styles", textClassName)}>
|
||||
{/* content */}
|
||||
</div>
|
||||
<div className={cls("base-media-wrapper-styles", mediaWrapperClassName)}>
|
||||
<img className={cls("base-image-styles", imageClassName)} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Naming convention:**
|
||||
- `className` - Main wrapper element
|
||||
- `containerClassName` - Inner container
|
||||
- `[element]ClassName` - Specific elements (e.g., `textClassName`, `imageClassName`)
|
||||
|
||||
## Component Composition & Base Styles
|
||||
|
||||
When composing higher-level components from base components, **set sensible base styles** while accepting className overrides:
|
||||
|
||||
```tsx
|
||||
interface HeroProps {
|
||||
title: string;
|
||||
description: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
}
|
||||
|
||||
const Hero = ({
|
||||
title,
|
||||
description,
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
}: HeroProps) => {
|
||||
return (
|
||||
<section>
|
||||
<TextBox
|
||||
title={title}
|
||||
description={description}
|
||||
// Set base styles, allow overrides
|
||||
className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
|
||||
titleClassName={cls("text-6xl font-medium", titleClassName)}
|
||||
descriptionClassName={cls("text-lg leading-[1.2]", descriptionClassName)}
|
||||
center={true}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**Key principles:**
|
||||
- Base styles come first in `cls()`, overrides second
|
||||
- This ensures good defaults while maintaining full customizability
|
||||
- AI builders can use components without styling knowledge, but advanced users can override
|
||||
- Use `cls()` utility for proper class merging (prevents Tailwind conflicts)
|
||||
|
||||
## Type Safety
|
||||
|
||||
### Use Explicit Prop Interfaces
|
||||
```tsx
|
||||
// ✅ CORRECT - Clear and explicit
|
||||
interface ButtonProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
variant?: "primary" | "secondary";
|
||||
}
|
||||
|
||||
// ❌ WRONG - Over-complicated
|
||||
interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
||||
// ... harder for AI to understand
|
||||
}
|
||||
```
|
||||
|
||||
### Use Discriminated Unions for Variants
|
||||
```tsx
|
||||
type MediaProps =
|
||||
| {
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
videoSrc?: never;
|
||||
}
|
||||
| {
|
||||
videoSrc: string;
|
||||
videoAriaLabel?: string;
|
||||
imageSrc?: never;
|
||||
};
|
||||
```
|
||||
|
||||
### Export Reusable Types
|
||||
```tsx
|
||||
export type ButtonConfig = {
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export type GridVariant =
|
||||
| "uniform-all-items-equal"
|
||||
| "two-columns-alternating-heights"
|
||||
| "asymmetric-60-wide-40-narrow"
|
||||
// ... etc
|
||||
```
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Mobile-First Approach
|
||||
|
||||
**Default styles apply to mobile devices:**
|
||||
```tsx
|
||||
// ✅ CORRECT - Mobile until md breakpoint (768px)
|
||||
<div className="flex-col md:flex-row">
|
||||
<img className="w-full h-auto md:h-8 md:w-auto" />
|
||||
</div>
|
||||
|
||||
// ❌ WRONG - Using lg: breakpoint
|
||||
<div className="flex-col lg:flex-row">
|
||||
<img className="w-full h-auto lg:h-8 lg:w-auto" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Breakpoint Rules:**
|
||||
- **Mobile styles**: No prefix (default)
|
||||
- **Desktop styles**: `md:` prefix only (768px breakpoint)
|
||||
- **Never use**: `lg:`, `xl:`, `2xl:` breakpoints for layout changes
|
||||
|
||||
**Exceptions:** Only use larger breakpoints for minor tweaks:
|
||||
```tsx
|
||||
// Acceptable for minor adjustments
|
||||
className="min-h-80 2xl:min-h-90"
|
||||
```
|
||||
|
||||
## Content Width Pattern
|
||||
|
||||
All section content must follow this structure:
|
||||
|
||||
```tsx
|
||||
<section aria-label={ariaLabel || "Section name"} className="w-full py-20">
|
||||
<div className="w-content-width mx-auto">
|
||||
{/* content */}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Section: `w-full py-20` (full width with vertical padding)
|
||||
- Inner div: `w-content-width mx-auto` (centered content with max width)
|
||||
- `w-content-width` is controlled by ThemeProvider (small/medium/large)
|
||||
|
||||
**Exceptions:**
|
||||
- Heroes and footers do NOT use `py-20` (they have custom spacing)
|
||||
- Full-bleed sections may skip inner wrapper
|
||||
|
||||
## Vertical Spacing
|
||||
|
||||
**Standard sections:**
|
||||
```tsx
|
||||
className="w-full py-20"
|
||||
```
|
||||
|
||||
**Exceptions (NO py-20):**
|
||||
- Hero sections (custom spacing)
|
||||
- Footer sections (custom spacing)
|
||||
- Full-bleed sections with background colors
|
||||
|
||||
## Text Constraints
|
||||
|
||||
For button text and short labels:
|
||||
```tsx
|
||||
{
|
||||
"text": {
|
||||
"required": true,
|
||||
"example": "Get Started",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Button text rules:**
|
||||
- Minimum: 2 characters
|
||||
- Maximum: 15 characters
|
||||
- Single-line only (no multiline support)
|
||||
|
||||
## Section Structure Pattern
|
||||
|
||||
```tsx
|
||||
<section
|
||||
aria-label={ariaLabel || "Default section label"}
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="w-content-width mx-auto">
|
||||
<TextBox
|
||||
title={title}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
// ... className overrides
|
||||
/>
|
||||
|
||||
{/* Section-specific content */}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Key Pattern Notes:**
|
||||
- `useInvertedBackground` is a required prop: `"noInvert" | "invertDefault" | "invertCard"`
|
||||
- `"invertCard"` creates a card-style section with expanded width and rounded corners
|
||||
- `"invertDefault"` creates a full-width inverted section
|
||||
- `"noInvert"` is the standard section with no background
|
||||
- Always use explicit string equality checks (not truthy/falsy)
|
||||
- Text colors must check for both `"invertDefault"` and `"invertCard"` modes
|
||||
|
||||
## Implementation Checklist
|
||||
|
||||
### Core Requirements
|
||||
- [ ] Add `"use client"` directive if needed (hooks, interactivity)
|
||||
- [ ] Use explicit prop interfaces (no over-complicated types)
|
||||
- [ ] Set appropriate defaults for optional props
|
||||
- [ ] Add `displayName` for debugging
|
||||
- [ ] Wrap in `React.memo()` for performance
|
||||
- [ ] Use semantic HTML tags (`<section>`, `<button>`, etc.)
|
||||
|
||||
### Customizability
|
||||
- [ ] Provide className props for all major elements
|
||||
- [ ] Use `cls()` utility for class composition
|
||||
- [ ] Set base styles with override capability
|
||||
- [ ] Follow naming convention (className, containerClassName, [element]ClassName)
|
||||
|
||||
### Responsive Design
|
||||
- [ ] Mobile-first styles (no prefix)
|
||||
- [ ] Desktop styles with `md:` prefix only
|
||||
- [ ] Avoid `lg:`, `xl:`, `2xl:` for layout changes
|
||||
- [ ] Use `w-content-width mx-auto` pattern
|
||||
|
||||
### Naming Conventions
|
||||
- [ ] Section components: Use `title` and `description`
|
||||
- [ ] Button components: Use `text`
|
||||
- [ ] Button configs: Use `text` (not variant - controlled by theme)
|
||||
- [ ] Consistent naming across similar component types
|
||||
|
||||
### Structure
|
||||
- [ ] Required props first in interface
|
||||
- [ ] Optional props with defaults after
|
||||
- [ ] Empty string defaults for className props
|
||||
- [ ] Document default values clearly
|
||||
499
docs/PREVIEW_PAGE_STANDARDS.md
Normal file
499
docs/PREVIEW_PAGE_STANDARDS.md
Normal file
@@ -0,0 +1,499 @@
|
||||
# Preview Page Standards
|
||||
|
||||
This document outlines how to create preview pages for components in `/app/components/`.
|
||||
|
||||
## Purpose
|
||||
|
||||
Preview pages allow developers and AI builders to:
|
||||
- See components in isolation
|
||||
- Test component behavior and styling
|
||||
- Verify responsive design
|
||||
- Experiment with different prop configurations
|
||||
- Ensure smooth scrolling and theme integration
|
||||
|
||||
## File Structure
|
||||
|
||||
### Location Pattern
|
||||
|
||||
```
|
||||
/app/components/
|
||||
├── sections/
|
||||
│ ├── hero/
|
||||
│ │ ├── billboard/
|
||||
│ │ │ └── page.tsx // Preview for HeroBillboard
|
||||
│ │ ├── split/
|
||||
│ │ │ └── page.tsx // Preview for HeroSplit
|
||||
│ ├── feature/
|
||||
│ │ ├── card-one/
|
||||
│ │ │ └── page.tsx // Preview for FeatureCardOne
|
||||
├── buttons/
|
||||
│ ├── text-stagger/
|
||||
│ │ └── page.tsx // Preview for ButtonTextStagger
|
||||
└── page.tsx // Main components index
|
||||
```
|
||||
|
||||
**Pattern:** `/app/components/[category]/[component-name]/page.tsx`
|
||||
|
||||
**Component name formatting:**
|
||||
- Use kebab-case for folder names
|
||||
- `HeroBillboard` → `hero/billboard/`
|
||||
- `FeatureCardOne` → `feature/card-one/`
|
||||
- `ButtonTextStagger` → `buttons/text-stagger/`
|
||||
|
||||
## Preview Page Template
|
||||
|
||||
### Basic Template (Non-Section Components)
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ComponentName from "@/components/category/ComponentName";
|
||||
|
||||
export default function ComponentPreviewPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="plain"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<ComponentName
|
||||
// Add realistic props here
|
||||
text="Example"
|
||||
onClick={() => console.log("clicked")}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Section Component Template
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import SectionName from "@/components/sections/category/SectionName";
|
||||
|
||||
export default function SectionPreviewPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedGrid"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<SectionName
|
||||
title="Preview Section Title"
|
||||
description="This is a preview of the section component with example content."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#" },
|
||||
{ text: "Learn More", onClick: () => console.log("Learn more") }
|
||||
]}
|
||||
// Add section-specific props
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### CardStack Section Template
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Package, Zap, Shield, Sparkles } from "lucide-react";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
|
||||
export default function FeatureCardOnePreviewPage() {
|
||||
const features = [
|
||||
{
|
||||
icon: Package,
|
||||
title: "Feature One",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Feature Two",
|
||||
description: "Sed do eiusmod tempor incididunt ut labore et dolore."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Feature Three",
|
||||
description: "Ut enim ad minim veniam, quis nostrud exercitation."
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Feature Four",
|
||||
description: "Duis aute irure dolor in reprehenderit in voluptate."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedGrid"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<FeatureCardOne
|
||||
features={features}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
title="Our Features"
|
||||
description="Discover what makes us unique"
|
||||
tag="Features"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[
|
||||
{ text: "View All", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Critical Requirements
|
||||
|
||||
### Wrapper Order
|
||||
|
||||
**MUST follow this order:**
|
||||
|
||||
```tsx
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<Component />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
```
|
||||
|
||||
**❌ WRONG:**
|
||||
```tsx
|
||||
<ReactLenis root>
|
||||
<ThemeProvider>
|
||||
<Component />
|
||||
</ThemeProvider>
|
||||
</ReactLenis>
|
||||
```
|
||||
|
||||
ReactLenis must be **inside** ThemeProvider, not outside.
|
||||
|
||||
### "use client" Directive
|
||||
|
||||
All preview pages must include `"use client"` at the top:
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
// ...
|
||||
```
|
||||
|
||||
This is required because:
|
||||
- ReactLenis uses client-side hooks
|
||||
- ThemeProvider uses React Context
|
||||
- Components may use interactive features
|
||||
|
||||
### ReactLenis Root Prop
|
||||
|
||||
Always include the `root` prop:
|
||||
|
||||
```tsx
|
||||
<ReactLenis root>
|
||||
{/* components */}
|
||||
</ReactLenis>
|
||||
```
|
||||
|
||||
This enables page-wide smooth scrolling.
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
### Recommended Defaults
|
||||
|
||||
**For most previews:**
|
||||
```tsx
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedGrid"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
```
|
||||
|
||||
**For button previews:**
|
||||
```tsx
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger" // Match button being previewed
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="plain"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
```
|
||||
|
||||
**For hero previews:**
|
||||
```tsx
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="large" // Wider for heroes
|
||||
sizing="large" // Larger sizing for heroes
|
||||
background="aurora" // Visual background
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold" // Bolder for heroes
|
||||
>
|
||||
```
|
||||
|
||||
### When to Customize
|
||||
|
||||
Customize theme settings when:
|
||||
- Testing different button variants
|
||||
- Showcasing card styles
|
||||
- Demonstrating responsive behavior
|
||||
- Highlighting specific theme features
|
||||
|
||||
## Realistic Props
|
||||
|
||||
### Use Realistic Content
|
||||
|
||||
**✅ GOOD:**
|
||||
```tsx
|
||||
<HeroBillboard
|
||||
title="Build Amazing Websites Faster"
|
||||
description="Create stunning, responsive websites with our modern component library. Ship faster, iterate quicker."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "/signup" },
|
||||
{ text: "View Demo", onClick: () => window.open("/demo") }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
**❌ BAD:**
|
||||
```tsx
|
||||
<HeroBillboard
|
||||
title="Test"
|
||||
description="Test description"
|
||||
buttons={[
|
||||
{ text: "Click", href: "#" }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### Sample Data Patterns
|
||||
|
||||
**Features:**
|
||||
```tsx
|
||||
const features = [
|
||||
{
|
||||
icon: Package,
|
||||
title: "Fast Shipping",
|
||||
description: "Get your order delivered within 2-3 business days."
|
||||
},
|
||||
// ... more features
|
||||
];
|
||||
```
|
||||
|
||||
**Products:**
|
||||
```tsx
|
||||
const products = [
|
||||
{
|
||||
title: "Premium Headphones",
|
||||
description: "Wireless noise-cancelling headphones with 30-hour battery life.",
|
||||
price: "$299",
|
||||
image: "/images/headphones.jpg"
|
||||
},
|
||||
// ... more products
|
||||
];
|
||||
```
|
||||
|
||||
**Testimonials:**
|
||||
```tsx
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO, TechCorp",
|
||||
content: "This component library transformed our development workflow. Highly recommend!",
|
||||
image: "/images/avatar-1.jpg",
|
||||
rating: 5
|
||||
},
|
||||
// ... more testimonials
|
||||
];
|
||||
```
|
||||
|
||||
## Multiple Sections Example
|
||||
|
||||
Preview pages can show multiple components together:
|
||||
|
||||
```tsx
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import Footer from "@/components/sections/footer/FooterBase";
|
||||
|
||||
export default function FullPagePreview() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedGrid"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<HeroBillboard {...heroProps} />
|
||||
<FeatureCardOne {...featureProps} />
|
||||
<Footer {...footerProps} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Preview Page Checklist
|
||||
|
||||
### File Setup
|
||||
- [ ] Create in correct location: `/app/components/[category]/[component-name]/page.tsx`
|
||||
- [ ] Use kebab-case for folder names
|
||||
- [ ] Add `"use client"` directive at top
|
||||
- [ ] Export default function with descriptive name
|
||||
|
||||
### Wrapper Configuration
|
||||
- [ ] Wrap in ThemeProvider (outer)
|
||||
- [ ] Wrap in ReactLenis with `root` prop (inner)
|
||||
- [ ] Correct order: ThemeProvider > ReactLenis > Component
|
||||
- [ ] Import both wrappers
|
||||
|
||||
### Component Props
|
||||
- [ ] Use realistic, representative content
|
||||
- [ ] Include all required props
|
||||
- [ ] Test with typical prop combinations
|
||||
- [ ] Use proper TypeScript types (no `any`)
|
||||
|
||||
### Theme Settings
|
||||
- [ ] Configure appropriate theme settings for component type
|
||||
- [ ] Use sensible defaults that showcase the component well
|
||||
- [ ] Test with different theme configurations if needed
|
||||
|
||||
### Quality Checks
|
||||
- [ ] Component renders without errors
|
||||
- [ ] Smooth scrolling works
|
||||
- [ ] Responsive design functions correctly
|
||||
- [ ] Animations trigger properly
|
||||
- [ ] No console warnings or errors
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Background for Preview
|
||||
|
||||
If the component needs a background color to be visible:
|
||||
|
||||
```tsx
|
||||
<ReactLenis root>
|
||||
<div className="min-h-screen bg-background">
|
||||
<Component {...props} />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
```
|
||||
|
||||
### Centered Preview
|
||||
|
||||
For small components that need centering:
|
||||
|
||||
```tsx
|
||||
<ReactLenis root>
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<Component {...props} />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
```
|
||||
|
||||
### Multiple Variants
|
||||
|
||||
Show multiple variants of the same component:
|
||||
|
||||
```tsx
|
||||
<ReactLenis root>
|
||||
<div className="min-h-screen bg-background py-20 space-y-20">
|
||||
<ComponentName variant="primary" {...props} />
|
||||
<ComponentName variant="secondary" {...props} />
|
||||
<ComponentName variant="ghost" {...props} />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### ✅ DO:
|
||||
|
||||
- Use realistic, production-quality content
|
||||
- Test responsive behavior
|
||||
- Include all ThemeProvider configuration
|
||||
- Use ReactLenis for smooth scrolling
|
||||
- Follow naming conventions (kebab-case folders)
|
||||
- Include required props only (let optional props use defaults)
|
||||
- Test with different theme settings
|
||||
|
||||
### ❌ DO NOT:
|
||||
|
||||
- Use placeholder text like "Lorem ipsum" (use realistic content)
|
||||
- Skip ThemeProvider or ReactLenis
|
||||
- Put ReactLenis outside ThemeProvider
|
||||
- Use hardcoded colors that break theming
|
||||
- Create overly complex multi-component demos (keep focused)
|
||||
- Forget "use client" directive
|
||||
- Use incorrect folder structure
|
||||
145
docs/README.md
Normal file
145
docs/README.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# Component Library Documentation
|
||||
|
||||
This directory contains focused documentation for building components in this AI-optimized component library.
|
||||
|
||||
## Documentation Files
|
||||
|
||||
### 📋 [COMPONENT_IMPLEMENTATION.md](./COMPONENT_IMPLEMENTATION.md)
|
||||
**Core component implementation patterns**
|
||||
|
||||
Load when: Creating or modifying component code
|
||||
|
||||
Covers:
|
||||
- Component structure template
|
||||
- Prop structure & defaults
|
||||
- Naming conventions
|
||||
- Component customizability
|
||||
- Type safety
|
||||
- Responsive design
|
||||
- Content width pattern
|
||||
- Implementation checklist
|
||||
|
||||
---
|
||||
|
||||
### 🎴 [CARDSTACK_SECTIONS.md](./CARDSTACK_SECTIONS.md)
|
||||
**CardStack-based section components**
|
||||
|
||||
Load when: Creating Feature, Product, Pricing, Testimonial, Team, Blog, or Metrics sections
|
||||
|
||||
Covers:
|
||||
- CardStack pattern overview
|
||||
- Grid variants (10+ layouts)
|
||||
- Height control (`uniformGridCustomHeightClasses`)
|
||||
- Carousel modes
|
||||
- TextBox integration
|
||||
- Button system
|
||||
- Animation types
|
||||
- Complete examples & checklist
|
||||
|
||||
---
|
||||
|
||||
### 🎨 [THEME_AND_STYLING.md](./THEME_AND_STYLING.md)
|
||||
**Theme system and styling patterns**
|
||||
|
||||
Load when: Setting up themes, working with colors, or styling components
|
||||
|
||||
Covers:
|
||||
- Theme Provider configuration
|
||||
- Color theming (CSS variables)
|
||||
- Inverted background pattern
|
||||
- Content width pattern
|
||||
- Card styling
|
||||
- Border radius patterns
|
||||
- Button styling classes
|
||||
- Styling checklist
|
||||
|
||||
---
|
||||
|
||||
### ♿ [ACCESSIBILITY.md](./ACCESSIBILITY.md)
|
||||
**Accessibility (a11y) standards**
|
||||
|
||||
Load when: Adding interactive elements, media, or sections
|
||||
|
||||
Covers:
|
||||
- Interactive components (buttons, links)
|
||||
- Media components (images, videos)
|
||||
- Section components (semantic HTML)
|
||||
- Form components
|
||||
- Focus management
|
||||
- Keyboard navigation
|
||||
- ARIA roles
|
||||
- Accessibility checklist
|
||||
|
||||
---
|
||||
|
||||
### 📚 [REGISTRY_STANDARDS.md](./REGISTRY_STANDARDS.md)
|
||||
**Registry documentation rules**
|
||||
|
||||
Load when: Adding or updating component entries in `registry.json`
|
||||
|
||||
Covers:
|
||||
- Registry structure
|
||||
- Component entry format
|
||||
- Field descriptions
|
||||
- propsSchema rules
|
||||
- Constraints format
|
||||
- Usage examples
|
||||
- What to include/exclude
|
||||
- Validation checklist
|
||||
|
||||
---
|
||||
|
||||
### 📄 [PREVIEW_PAGE_STANDARDS.md](./PREVIEW_PAGE_STANDARDS.md)
|
||||
**Preview page setup and patterns**
|
||||
|
||||
Load when: Creating preview pages in `/app/components/`
|
||||
|
||||
Covers:
|
||||
- File structure & location
|
||||
- Preview page templates
|
||||
- Wrapper order (ThemeProvider > ReactLenis)
|
||||
- Theme configuration
|
||||
- Realistic props
|
||||
- Multiple sections example
|
||||
- Preview page checklist
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### When creating a new component:
|
||||
1. Load `COMPONENT_IMPLEMENTATION.md` for structure
|
||||
2. Load `ACCESSIBILITY.md` for a11y requirements
|
||||
3. Load `THEME_AND_STYLING.md` for styling patterns
|
||||
4. Load `CARDSTACK_SECTIONS.md` if using CardStack
|
||||
|
||||
### When updating the registry:
|
||||
1. Load `REGISTRY_STANDARDS.md` only
|
||||
|
||||
### When creating a preview page:
|
||||
1. Load `PREVIEW_PAGE_STANDARDS.md` only
|
||||
|
||||
### When modifying themes:
|
||||
1. Load `THEME_AND_STYLING.md` only
|
||||
|
||||
---
|
||||
|
||||
## Documentation Principles
|
||||
|
||||
These docs are optimized for:
|
||||
- **AI builders** (Lovable, V0, Claude Code)
|
||||
- **Focused context** (load only what you need)
|
||||
- **Quick reference** (checklists and examples)
|
||||
- **Consistency** (standardized patterns across all components)
|
||||
|
||||
Each file is:
|
||||
- **Single-purpose** - covers one concern thoroughly
|
||||
- **Self-contained** - minimal cross-references
|
||||
- **Example-driven** - shows good/bad patterns
|
||||
- **Checklist-equipped** - actionable validation steps
|
||||
|
||||
---
|
||||
|
||||
## Legacy Documentation
|
||||
|
||||
The original `COMPONENT_STANDARDS.md` file has been split into these focused documents. Refer to these new files for all component development.
|
||||
487
docs/REGISTRY_STANDARDS.md
Normal file
487
docs/REGISTRY_STANDARDS.md
Normal file
@@ -0,0 +1,487 @@
|
||||
# Registry Documentation Standards
|
||||
|
||||
This document outlines how to document components in `registry.json` for AI website builders.
|
||||
|
||||
## Registry Structure
|
||||
|
||||
The registry is organized into two main sections:
|
||||
|
||||
```json
|
||||
{
|
||||
"componentRegistry": {
|
||||
"button": [...],
|
||||
"text": [...],
|
||||
"navbar": [...],
|
||||
"layout": [...]
|
||||
},
|
||||
"sectionRegistry": {
|
||||
"hero": [...],
|
||||
"about": [...],
|
||||
"feature": [...],
|
||||
"testimonial": [...],
|
||||
"pricing": [...],
|
||||
"team": [...],
|
||||
"product": [...],
|
||||
"metrics": [...],
|
||||
"blog": [...],
|
||||
"footer": [...],
|
||||
"contact": [...],
|
||||
"faq": [...],
|
||||
"socialProof": [...]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**componentRegistry** - Base/utility components (buttons, text, navbar, CardStack, etc.)
|
||||
**sectionRegistry** - Section components (hero, about, feature, etc.)
|
||||
|
||||
## Component Entry Format
|
||||
|
||||
Every component entry must follow this structure:
|
||||
|
||||
```json
|
||||
{
|
||||
"import": "import ComponentName from '@/components/category/ComponentName';",
|
||||
"name": "ComponentName",
|
||||
"path": "@/components/category/ComponentName",
|
||||
"description": "Brief one-line description of what the component is.",
|
||||
"details": "Longer description of when to use it, behavior, and constraints.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"text": {
|
||||
"required": true,
|
||||
"example": "Example text",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"text": "string",
|
||||
"onClick?": "() => void",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usage": "<ComponentName text=\"Example\" onClick={() => console.log('clicked')} />"
|
||||
}
|
||||
```
|
||||
|
||||
## Field Descriptions
|
||||
|
||||
### import
|
||||
The exact import statement AI should use.
|
||||
|
||||
**Format:**
|
||||
```json
|
||||
"import": "import ComponentName from '@/components/category/ComponentName';"
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
```json
|
||||
"import": "import HeroBillboard from '@/components/sections/hero/HeroBillboard';"
|
||||
"import": "import ButtonTextStagger from '@/components/button/text-stagger/ButtonTextStagger';"
|
||||
"import": "import CardStack from '@/components/cardStack/CardStack';"
|
||||
```
|
||||
|
||||
### name
|
||||
Component name exactly as exported.
|
||||
|
||||
**Format:**
|
||||
```json
|
||||
"name": "ComponentName"
|
||||
```
|
||||
|
||||
### path
|
||||
File path without extension.
|
||||
|
||||
**Format:**
|
||||
```json
|
||||
"path": "@/components/category/ComponentName"
|
||||
```
|
||||
|
||||
### description
|
||||
One-line summary of what the component is. Focus on visual/behavioral characteristics.
|
||||
|
||||
**Format:** 1 sentence, under 100 characters
|
||||
|
||||
**Good Examples:**
|
||||
```json
|
||||
"description": "CTA button with character stagger animation on hover."
|
||||
"description": "Full-width hero section with centered text and billboard layout."
|
||||
"description": "Feature section with grid or carousel layout for feature cards."
|
||||
```
|
||||
|
||||
**Bad Examples:**
|
||||
```json
|
||||
"description": "A really cool button component with lots of features and animations that can be used anywhere." // Too verbose
|
||||
"description": "Button" // Too vague
|
||||
```
|
||||
|
||||
### details
|
||||
Longer description covering:
|
||||
- When to use it
|
||||
- Key behavior notes
|
||||
- Important constraints
|
||||
|
||||
**Format:** 2-4 sentences
|
||||
|
||||
**Good Example:**
|
||||
```json
|
||||
"details": "Use for primary or secondary CTAs where subtle text motion adds emphasis. On hover, the label's characters animate in sequence (stagger). Includes background styling and supports all standard button props."
|
||||
```
|
||||
|
||||
**Bad Example:**
|
||||
```json
|
||||
"details": "This is a button that you can click and it will do something when you click it. It has animations." // Too obvious, not helpful
|
||||
```
|
||||
|
||||
### constraints
|
||||
|
||||
Defines text length constraints for string props.
|
||||
|
||||
**Format:**
|
||||
```json
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"propName": {
|
||||
"required": true,
|
||||
"example": "Example value",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Common Patterns:**
|
||||
|
||||
**Button text:**
|
||||
```json
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"text": {
|
||||
"required": true,
|
||||
"example": "Get Started",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Section titles and descriptions:**
|
||||
```json
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Welcome to Our Platform",
|
||||
"minChars": 5,
|
||||
"maxChars": 60
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Build amazing websites with our component library",
|
||||
"minChars": 10,
|
||||
"maxChars": 200
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### propsSchema
|
||||
|
||||
Documents all component props with types and defaults.
|
||||
|
||||
**Format Rules:**
|
||||
|
||||
**Required props:**
|
||||
```json
|
||||
"propName": "type"
|
||||
```
|
||||
|
||||
**Optional props:**
|
||||
```json
|
||||
"propName?": "type"
|
||||
```
|
||||
|
||||
**Optional props with defaults:**
|
||||
```json
|
||||
"propName?": "type (default: value)"
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
|
||||
**Simple types:**
|
||||
```json
|
||||
"text": "string",
|
||||
"count": "number",
|
||||
"enabled": "boolean"
|
||||
```
|
||||
|
||||
**Functions:**
|
||||
```json
|
||||
"onClick?": "() => void",
|
||||
"onChange?": "(value: string) => void",
|
||||
"onSubmit?": "(data: FormData) => Promise<void>"
|
||||
```
|
||||
|
||||
**Union types:**
|
||||
```json
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')",
|
||||
"variant?": "'primary' | 'secondary' | 'ghost'",
|
||||
"size?": "'sm' | 'md' | 'lg' (default: 'md')"
|
||||
```
|
||||
|
||||
**Array types:**
|
||||
```json
|
||||
"items": "Array<{ title: string; description: string }>",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"features": "Feature[]"
|
||||
```
|
||||
|
||||
**Complex types:**
|
||||
```json
|
||||
"gridVariant": "'uniform-all-items-equal' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | ...",
|
||||
"icon?": "LucideIcon",
|
||||
"image?": "string (URL or path)"
|
||||
```
|
||||
|
||||
**With defaults:**
|
||||
```json
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')"
|
||||
```
|
||||
|
||||
### usage
|
||||
|
||||
Single-line example showing typical implementation.
|
||||
|
||||
**Format:** One line, realistic props, valid JSX
|
||||
|
||||
**Good Examples:**
|
||||
|
||||
**Button:**
|
||||
```json
|
||||
"usage": "<ButtonTextStagger text=\"Get Started\" onClick={() => console.log('clicked')} />"
|
||||
```
|
||||
|
||||
**Section with minimal props:**
|
||||
```json
|
||||
"usage": "<HeroBillboard title=\"Welcome\" description=\"Start building today\" buttons={[{ text: 'Get Started', href: '/signup' }]} />"
|
||||
```
|
||||
|
||||
**CardStack section:**
|
||||
```json
|
||||
"usage": "<FeatureCardOne features={featuresData} gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" title=\"Features\" description=\"Our key features\" />"
|
||||
```
|
||||
|
||||
**Bad Examples:**
|
||||
```json
|
||||
"usage": "<Component />" // Missing required props
|
||||
"usage": "<Component\n prop1=\"value\"\n prop2=\"value\"\n/>" // Multi-line, hard to read
|
||||
"usage": "Component({ text: 'Hi' })" // Not JSX
|
||||
```
|
||||
|
||||
## What to Include
|
||||
|
||||
### ✅ DO Include:
|
||||
|
||||
**Default values in propsSchema** - Critical for AI to generate correct code
|
||||
```json
|
||||
"disabled?": "boolean (default: false)",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
```
|
||||
|
||||
**Usage examples** - Helps AI understand context
|
||||
```json
|
||||
"usage": "<ButtonTextStagger text=\"Click me\" onClick={() => alert('Hi')} />"
|
||||
```
|
||||
|
||||
**Text constraints** - Min/max character limits
|
||||
```json
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"text": {
|
||||
"required": true,
|
||||
"example": "Get Started",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Accurate descriptions** - Ensure description matches actual behavior
|
||||
```json
|
||||
"description": "CTA button with character stagger animation on hover.",
|
||||
"details": "Use for primary or secondary CTAs where subtle text motion adds emphasis."
|
||||
```
|
||||
|
||||
**Use case guidance** - When to use this vs alternatives
|
||||
```json
|
||||
"details": "Use for hero sections with centered content and billboard layout. Best for landing pages and marketing sites."
|
||||
```
|
||||
|
||||
## What NOT to Include
|
||||
|
||||
### ❌ DO NOT Include:
|
||||
|
||||
**Metadata field** - Unnecessary complexity
|
||||
```json
|
||||
// Don't do this:
|
||||
"metadata": {
|
||||
"category": "button",
|
||||
"version": "1.0.0",
|
||||
"author": "..."
|
||||
}
|
||||
```
|
||||
|
||||
**Verbose descriptions** - Keep concise and obvious
|
||||
```json
|
||||
// Don't do this:
|
||||
"description": "This is an amazing button component that you can use to create buttons with stagger animations that look really cool and modern and will make your website stand out from the competition."
|
||||
```
|
||||
|
||||
**Dependencies** - AI builders can infer from imports
|
||||
```json
|
||||
// Don't do this:
|
||||
"dependencies": ["lucide-react", "framer-motion"]
|
||||
```
|
||||
|
||||
**Over-documentation** - If it's obvious from the name, skip it
|
||||
```json
|
||||
// Don't do this:
|
||||
"details": "This is a button. You can click it. It accepts text to display on the button."
|
||||
```
|
||||
|
||||
**Implementation details** - Focus on usage, not internals
|
||||
```json
|
||||
// Don't do this:
|
||||
"details": "Uses GSAP ScrollTrigger with stagger: 0.1 and uses React.memo for performance and has displayName set to ButtonTextStagger."
|
||||
```
|
||||
|
||||
## Complete Examples
|
||||
|
||||
### Button Component
|
||||
|
||||
```json
|
||||
{
|
||||
"import": "import ButtonTextStagger from '@/components/button/text-stagger/ButtonTextStagger';",
|
||||
"name": "ButtonTextStagger",
|
||||
"path": "@/components/button/text-stagger/ButtonTextStagger",
|
||||
"description": "CTA button with character stagger animation on hover.",
|
||||
"details": "Use for primary or secondary CTAs where subtle text motion adds emphasis. On hover, the label's characters animate in sequence (stagger). Includes background styling.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"text": {
|
||||
"required": true,
|
||||
"example": "Get Started",
|
||||
"minChars": 2,
|
||||
"maxChars": 15
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"text": "string",
|
||||
"onClick?": "() => void",
|
||||
"href?": "string",
|
||||
"className?": "string",
|
||||
"textClassName?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usage": "<ButtonTextStagger text=\"Get Started\" onClick={() => console.log('clicked')} />"
|
||||
}
|
||||
```
|
||||
|
||||
### Section Component (CardStack-based)
|
||||
|
||||
```json
|
||||
{
|
||||
"import": "import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';",
|
||||
"name": "FeatureCardOne",
|
||||
"path": "@/components/sections/feature/FeatureCardOne",
|
||||
"description": "Feature section with grid or carousel layout for feature cards.",
|
||||
"details": "Displays feature cards in a responsive grid (1-4 items) or carousel (5+ items). Supports TextBox header with multiple layout options. Each card includes icon, title, and description.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Our Features",
|
||||
"minChars": 5,
|
||||
"maxChars": 60
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Discover what makes us unique",
|
||||
"minChars": 10,
|
||||
"maxChars": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "Array<{ icon: LucideIcon; title: string; description: string }>",
|
||||
"gridVariant": "'uniform-all-items-equal' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | ...",
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description'",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')",
|
||||
"ariaLabel?": "string",
|
||||
"className?": "string"
|
||||
},
|
||||
"usage": "<FeatureCardOne features={featuresData} gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" title=\"Features\" description=\"Our key features\" />"
|
||||
}
|
||||
```
|
||||
|
||||
## Registry Validation Checklist
|
||||
|
||||
When adding a new component to the registry:
|
||||
|
||||
### Required Fields
|
||||
- [ ] `import` - Exact import statement
|
||||
- [ ] `name` - Component name
|
||||
- [ ] `path` - File path without extension
|
||||
- [ ] `description` - One-line summary
|
||||
- [ ] `details` - When to use, behavior, constraints
|
||||
- [ ] `propsSchema` - All props documented
|
||||
- [ ] `usage` - Single-line example
|
||||
|
||||
### Constraints (if applicable)
|
||||
- [ ] Add `textRules` for text props
|
||||
- [ ] Set `minChars` and `maxChars`
|
||||
- [ ] Provide realistic `example` values
|
||||
- [ ] Mark `required: true` for required props
|
||||
|
||||
### propsSchema Format
|
||||
- [ ] Required props: `"prop": "type"`
|
||||
- [ ] Optional props: `"prop?": "type"`
|
||||
- [ ] Defaults: `"prop?": "type (default: value)"`
|
||||
- [ ] All types match component implementation
|
||||
- [ ] Union types use single quotes inside double quotes
|
||||
|
||||
### Quality Checks
|
||||
- [ ] Description is concise (under 100 chars)
|
||||
- [ ] Details provide use case guidance
|
||||
- [ ] Usage example is valid JSX
|
||||
- [ ] Usage example shows realistic props
|
||||
- [ ] Default values documented in propsSchema
|
||||
- [ ] No over-documentation or verbose descriptions
|
||||
- [ ] No unnecessary metadata or dependencies
|
||||
|
||||
### Consistency Checks
|
||||
- [ ] Component name matches file name
|
||||
- [ ] Path matches actual file location
|
||||
- [ ] Import statement is correct
|
||||
- [ ] Props match actual component interface
|
||||
- [ ] Defaults in registry match component defaults
|
||||
- [ ] Naming follows conventions (title/description for sections, text for buttons)
|
||||
545
docs/THEME_AND_STYLING.md
Normal file
545
docs/THEME_AND_STYLING.md
Normal file
@@ -0,0 +1,545 @@
|
||||
# Theme and Styling Standards
|
||||
|
||||
This document covers the centralized theme system, color theming, and styling patterns used throughout the component library.
|
||||
|
||||
## Theme Provider System
|
||||
|
||||
All sections and components use a centralized ThemeProvider to maintain consistent styling across the entire site.
|
||||
|
||||
### Location & Setup
|
||||
|
||||
**Import:**
|
||||
```tsx
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
```
|
||||
|
||||
**Usage:** Wrap the entire app/page (not individual sections) in a **single** ThemeProvider:
|
||||
|
||||
```tsx
|
||||
export default function Page() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedGrid"
|
||||
cardStyle="glass-flat"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<HeroBillboard {...props} />
|
||||
<FeatureSection {...props} />
|
||||
<Footer {...props} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Theme Configuration Options
|
||||
|
||||
#### defaultButtonVariant
|
||||
Controls the button style for ALL buttons in sections.
|
||||
|
||||
**Options:**
|
||||
- `"text-stagger"` - Character stagger animation on hover (default)
|
||||
- `"shift-hover"` - Text shifts on hover
|
||||
- `"icon-arrow"` - Text + right arrow icon
|
||||
- `"hover-magnetic"` - Cursor-tracking magnetic effect
|
||||
- `"hover-bubble"` - Expanding circle on hover
|
||||
- `"expand-hover"` - Width expansion on hover
|
||||
|
||||
#### defaultTextAnimation
|
||||
Controls the text animation type for ALL text in sections.
|
||||
|
||||
**Options:**
|
||||
- `"entrance-slide"` - Slide up from below (default)
|
||||
- `"reveal-blur"` - Blur to clear reveal
|
||||
- `"background-highlight"` - Background highlight effect
|
||||
|
||||
#### borderRadius
|
||||
Controls border radius for buttons and cards.
|
||||
|
||||
**Options:**
|
||||
- `"rounded"` - Standard rounded corners
|
||||
- `"pill"` - Fully rounded (pill shape)
|
||||
- `"sharp"` - No border radius
|
||||
|
||||
#### contentWidth
|
||||
Controls the max width of section content.
|
||||
|
||||
**Options:**
|
||||
- `"small"` - Narrow content width
|
||||
- `"medium"` - Standard content width (default)
|
||||
- `"large"` - Wide content width
|
||||
|
||||
Maps to `w-content-width` CSS class.
|
||||
|
||||
#### sizing
|
||||
Controls spacing and size scale throughout components.
|
||||
|
||||
**Options:**
|
||||
- `"small"` - Compact spacing
|
||||
- `"medium"` - Standard spacing (default)
|
||||
- `"large"` - Generous spacing
|
||||
|
||||
#### background
|
||||
Default background pattern for the page.
|
||||
|
||||
**Options:**
|
||||
- `"plain"` - Solid background color
|
||||
- `"animatedGrid"` - Animated grid pattern
|
||||
- `"aurora"` - Aurora gradient effect
|
||||
- `"dotGrid"` - Dot grid pattern
|
||||
- And more...
|
||||
|
||||
#### cardStyle
|
||||
Visual style for all card components.
|
||||
|
||||
**Options:**
|
||||
- `"glass-flat"` - Flat glass effect (default)
|
||||
- `"glass-depth"` - Glass with depth/shadow
|
||||
- `"glass-outline"` - Outlined glass
|
||||
- `"solid-accent-light"` - Solid light accent
|
||||
- `"outline"` - Simple outline
|
||||
- `"elevated"` - Elevated shadow effect
|
||||
- `"frosted"` - Frosted glass
|
||||
- And more...
|
||||
|
||||
#### primaryButtonStyle
|
||||
Style for primary buttons (first button in array).
|
||||
|
||||
**Options:**
|
||||
- `"gradient"` - Gradient background
|
||||
- `"solid"` - Solid color background
|
||||
- `"glass"` - Glass effect
|
||||
- `"outline"` - Outlined button
|
||||
|
||||
#### secondaryButtonStyle
|
||||
Style for secondary buttons (second+ button in array).
|
||||
|
||||
**Options:**
|
||||
- `"glass"` - Glass effect (default)
|
||||
- `"outline"` - Outlined button
|
||||
- `"solid"` - Solid color background
|
||||
- `"gradient"` - Gradient background
|
||||
|
||||
#### headingFontWeight
|
||||
Font weight for all headings.
|
||||
|
||||
**Options:**
|
||||
- `"normal"` - Regular weight
|
||||
- `"medium"` - Medium weight (default)
|
||||
- `"semibold"` - Semi-bold weight
|
||||
- `"bold"` - Bold weight
|
||||
|
||||
### Using Theme in Components
|
||||
|
||||
#### useTheme Hook
|
||||
|
||||
```tsx
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
const Component = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
// Access theme properties:
|
||||
// - theme.defaultButtonVariant
|
||||
// - theme.defaultTextAnimation
|
||||
// - theme.borderRadius
|
||||
// - theme.cardStyle
|
||||
// - theme.contentWidth
|
||||
// - theme.sizing
|
||||
// - theme.background
|
||||
// - theme.primaryButtonStyle
|
||||
// - theme.secondaryButtonStyle
|
||||
// - theme.headingFontWeight
|
||||
|
||||
return <div>{/* component */}</div>;
|
||||
};
|
||||
```
|
||||
|
||||
#### TextBox Component Example
|
||||
|
||||
TextBox automatically applies theme defaults:
|
||||
|
||||
```tsx
|
||||
const TextBox = ({ type, buttons, ...props }: TextBoxProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
// Use default text animation from theme if not specified
|
||||
const animationType = type || theme.defaultTextAnimation;
|
||||
|
||||
// Button variant comes from theme
|
||||
const variant = theme.defaultButtonVariant;
|
||||
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### Important Rules
|
||||
|
||||
❌ **DO NOT:**
|
||||
- Specify button `variant` in section button configs (controlled by ThemeProvider)
|
||||
- Wrap individual sections in ThemeProvider (use ONE provider per site/page)
|
||||
- Override theme defaults unless explicitly required by component design
|
||||
|
||||
✅ **DO:**
|
||||
- Wrap the entire app/page in a single ThemeProvider
|
||||
- Let all sections inherit theme defaults automatically
|
||||
- Use `useTheme()` hook to access theme configuration
|
||||
- Document when components don't follow theme defaults (with clear reason)
|
||||
|
||||
## Color & Theming
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
**Always use CSS custom properties for colors** to ensure theme consistency:
|
||||
|
||||
```tsx
|
||||
// ✅ CORRECT - Uses theme variables
|
||||
<div className="bg-background text-foreground">
|
||||
<button className="bg-foreground text-background">Click me</button>
|
||||
</div>
|
||||
|
||||
// ❌ WRONG - Hardcoded colors break theming
|
||||
<div className="bg-white text-black">
|
||||
<button className="bg-black text-white">Click me</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Standard Color Variables
|
||||
|
||||
**Background & Text:**
|
||||
- `bg-background` - Main background color
|
||||
- `text-foreground` - Main text color
|
||||
- `bg-foreground` - Inverse background (for buttons, accents)
|
||||
- `text-background` - Inverse text (for text on dark backgrounds)
|
||||
|
||||
**Cards & Surfaces:**
|
||||
- `card` - Card/surface background with border (theme-aware)
|
||||
- Maps to different styles based on `theme.cardStyle`
|
||||
|
||||
**Buttons:**
|
||||
- `primary-button` - Primary button styling (index 0)
|
||||
- `secondary-button` - Secondary button styling (index 1+)
|
||||
|
||||
**Opacity Modifiers:**
|
||||
```tsx
|
||||
text-foreground/75 // 75% opacity
|
||||
text-background/50 // 50% opacity
|
||||
bg-foreground/10 // 10% opacity
|
||||
```
|
||||
|
||||
### When to Use Theme Colors
|
||||
|
||||
✅ **Always prefer theme variables:**
|
||||
- Backgrounds, text, borders, shadows
|
||||
- Ensures proper dark mode support
|
||||
- Allows theme customization
|
||||
- Maintains visual consistency
|
||||
|
||||
❌ **Only use hardcoded colors:**
|
||||
- Very specific one-off cases with clear justification
|
||||
- Decorative elements that shouldn't change with theme
|
||||
- Must be documented in component comments
|
||||
|
||||
## Inverted Background Pattern
|
||||
|
||||
Section components support three modes for background styling, allowing flexible visual contrast and card-style layouts.
|
||||
|
||||
### Three Background Modes
|
||||
|
||||
**`"noInvert"`** - Standard background (default page background color)
|
||||
- No background color applied to section
|
||||
- Text uses standard `text-foreground` color
|
||||
- Full-width section
|
||||
|
||||
**`"invertDefault"`** - Full-width inverted background
|
||||
- Section gets `bg-foreground` background
|
||||
- Text uses `text-background` color for contrast
|
||||
- Full-width section with inverted colors
|
||||
|
||||
**`"invertCard"`** - Card-style inverted background
|
||||
- Section gets `bg-foreground` background
|
||||
- Section is constrained to `w-content-width-expanded` width
|
||||
- Centered with `mx-auto`
|
||||
- Rounded corners with `rounded-theme-capped`
|
||||
- Text uses `text-background` color for contrast
|
||||
|
||||
### Implementation Pattern
|
||||
|
||||
```tsx
|
||||
import { cls } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
useInvertedBackground: "noInvert" | "invertDefault" | "invertCard"; // Required
|
||||
// ... other props
|
||||
}
|
||||
|
||||
const Section = ({
|
||||
title,
|
||||
description,
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
// ... other props
|
||||
}: SectionProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="w-content-width mx-auto">
|
||||
<h1 className={cls(
|
||||
"text-6xl font-medium",
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
|
||||
titleClassName
|
||||
)}>
|
||||
{title}
|
||||
</h1>
|
||||
<p className={cls(
|
||||
"text-lg",
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard")
|
||||
? "text-background/75"
|
||||
: "text-foreground/75",
|
||||
descriptionClassName
|
||||
)}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
1. **Required Prop**: `useInvertedBackground` should be a required string union type (no `?`), forcing explicit choice
|
||||
2. **Three Modes**: `"noInvert"`, `"invertDefault"`, `"invertCard"`
|
||||
3. **Section Width**:
|
||||
- `"invertCard"` → `w-content-width-expanded mx-auto`
|
||||
- `"noInvert"` or `"invertDefault"` → `w-full`
|
||||
4. **Background Color**:
|
||||
- `"invertCard"` → `bg-foreground rounded-theme-capped`
|
||||
- `"invertDefault"` → `bg-foreground`
|
||||
- `"noInvert"` → no background
|
||||
5. **Text Colors**: Apply `text-background` or `text-background/75` for `"invertDefault"` and `"invertCard"` modes
|
||||
6. **Relative Positioning**: Section needs `relative` class for proper z-index stacking
|
||||
7. **Conditional Logic**: Use explicit string equality checks (not truthy/falsy)
|
||||
|
||||
### Section className Pattern
|
||||
|
||||
**Standard pattern for all sections:**
|
||||
|
||||
```tsx
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
```
|
||||
|
||||
### Text Color Pattern
|
||||
|
||||
**For text elements:**
|
||||
|
||||
```tsx
|
||||
// Single check for both invert modes:
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background"
|
||||
|
||||
// Ternary for opacity variants:
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard")
|
||||
? "text-background/75"
|
||||
: "text-foreground/75"
|
||||
```
|
||||
|
||||
### For Components with Cards (Advanced)
|
||||
|
||||
When a section contains cards with light backgrounds, use the `shouldUseInvertedText` utility:
|
||||
|
||||
```tsx
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
const SectionWithCards = ({
|
||||
useInvertedBackground,
|
||||
// ... other props
|
||||
}: SectionProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(
|
||||
useInvertedBackground,
|
||||
theme.cardStyle
|
||||
);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* For elements inside cards or with card backgrounds */}
|
||||
<h3 className={cls(
|
||||
"text-xl",
|
||||
shouldUseLightText && "text-background",
|
||||
bulletTitleClassName
|
||||
)}>
|
||||
{point.title}
|
||||
</h3>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
**What it does:**
|
||||
The `shouldUseInvertedText` utility checks if:
|
||||
- `useInvertedBackground` is `"invertDefault"` or `"invertCard"` AND
|
||||
- Current `cardStyle` is a "light" style (e.g., `glass-elevated`, `outline`, etc.)
|
||||
|
||||
This ensures text inside cards remains readable regardless of theme configuration.
|
||||
|
||||
### Width Classes Explained
|
||||
|
||||
**`w-content-width`** - Content container width
|
||||
- Controlled by `theme.contentWidth` (small/medium/large)
|
||||
- Used for inner content wrapper in all sections
|
||||
|
||||
**`w-content-width-expanded`** - Expanded card-style width
|
||||
- Used only for `"invertCard"` mode on the `<section>` element
|
||||
- Wider than `w-content-width` for visual card effect
|
||||
- Combined with `mx-auto` and `rounded-theme-capped`
|
||||
|
||||
## Content Width Pattern
|
||||
|
||||
All section content must use the `w-content-width` class:
|
||||
|
||||
```tsx
|
||||
<section className="w-full py-20">
|
||||
<div className="w-content-width mx-auto">
|
||||
{/* content */}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**What it does:**
|
||||
- Controlled by `theme.contentWidth` (small/medium/large)
|
||||
- Automatically adjusts max-width based on theme setting
|
||||
- Centers content with `mx-auto`
|
||||
|
||||
## Section Spacing
|
||||
|
||||
**Standard sections:**
|
||||
```tsx
|
||||
className="w-full py-20"
|
||||
```
|
||||
|
||||
Vertical padding of `py-20` (5rem = 80px) on top and bottom.
|
||||
|
||||
**Exceptions (NO py-20):**
|
||||
- Hero sections (custom spacing based on design)
|
||||
- Footer sections (custom spacing)
|
||||
- Full-bleed sections with background colors/images
|
||||
|
||||
## Card Styling Pattern
|
||||
|
||||
Use the `card` class for all card components:
|
||||
|
||||
```tsx
|
||||
<div className={cls("card p-6 rounded-theme-capped h-full min-h-0", cardClassName)}>
|
||||
{/* card content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Classes explained:**
|
||||
- `card` - Theme-aware background/border (maps to `theme.cardStyle`)
|
||||
- `p-6` - Standard padding (1.5rem = 24px)
|
||||
- `rounded-theme-capped` - Border radius from theme (respects `theme.borderRadius`)
|
||||
- `h-full` - Fill parent height (for grid layouts)
|
||||
- `min-h-0` - Prevent height conflicts (important for flex layouts)
|
||||
|
||||
## Border Radius Pattern
|
||||
|
||||
**For cards:**
|
||||
```tsx
|
||||
className="rounded-theme-capped"
|
||||
```
|
||||
|
||||
**For buttons:**
|
||||
```tsx
|
||||
className="rounded-theme"
|
||||
```
|
||||
|
||||
Both respect `theme.borderRadius` setting (rounded/pill/sharp).
|
||||
|
||||
## Button Styling Classes
|
||||
|
||||
**Primary button (first in array):**
|
||||
```tsx
|
||||
className="primary-button"
|
||||
```
|
||||
|
||||
**Secondary button (second+ in array):**
|
||||
```tsx
|
||||
className="secondary-button"
|
||||
```
|
||||
|
||||
These classes are theme-aware and map to:
|
||||
- `theme.primaryButtonStyle` (gradient/solid/glass/outline)
|
||||
- `theme.secondaryButtonStyle` (glass/outline/solid/gradient)
|
||||
|
||||
## Styling Checklist
|
||||
|
||||
### Color Usage
|
||||
- [ ] Use `bg-background` and `text-foreground` for main colors
|
||||
- [ ] Use `bg-foreground` and `text-background` for inverted sections
|
||||
- [ ] Use `card` class for card backgrounds
|
||||
- [ ] Use `primary-button` and `secondary-button` for buttons
|
||||
- [ ] Avoid hardcoded colors (white, black, gray-X) unless justified
|
||||
|
||||
### Theme Integration
|
||||
- [ ] Wrap app/page in single ThemeProvider
|
||||
- [ ] Use `useTheme()` hook when needed
|
||||
- [ ] Don't specify button variants in ButtonConfig
|
||||
- [ ] Let TextBox inherit default text animation
|
||||
- [ ] Use `w-content-width mx-auto` for content
|
||||
|
||||
### Inverted Background (if applicable)
|
||||
- [ ] Accept `useInvertedBackground` as required string union: `"noInvert" | "invertDefault" | "invertCard"`
|
||||
- [ ] Add `relative` class to section
|
||||
- [ ] Implement three-mode section className pattern (invertCard with expanded width, invertDefault full-width, noInvert standard)
|
||||
- [ ] Apply `text-background` to text for `"invertDefault"` and `"invertCard"` modes (not `"noInvert"`)
|
||||
- [ ] Use explicit string equality checks (not truthy/falsy)
|
||||
- [ ] Use `shouldUseInvertedText` for card content if needed
|
||||
|
||||
### Card Styling
|
||||
- [ ] Use `card` class for theme-aware background
|
||||
- [ ] Use `rounded-theme-capped` for border radius
|
||||
- [ ] Include `min-h-0` for flex compatibility
|
||||
- [ ] Provide `cardClassName` override prop
|
||||
|
||||
### Spacing
|
||||
- [ ] Use `py-20` on sections (except hero/footer)
|
||||
- [ ] Use `w-content-width mx-auto` wrapper
|
||||
- [ ] Follow theme spacing guidelines
|
||||
30
eslint.config.mjs
Normal file
30
eslint.config.mjs
Normal file
@@ -0,0 +1,30 @@
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({
|
||||
baseDirectory: __dirname,
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
{
|
||||
rules: {
|
||||
"react/no-unescaped-entities": "off",
|
||||
},
|
||||
},
|
||||
{
|
||||
ignores: [
|
||||
"node_modules/**",
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
632
fontThemes.json
Normal file
632
fontThemes.json
Normal file
@@ -0,0 +1,632 @@
|
||||
{
|
||||
"singleFonts": {
|
||||
"interTight": {
|
||||
"name": "Inter Tight",
|
||||
"import": "import { Inter_Tight } from \"next/font/google\";",
|
||||
"initialization": "const interTight = Inter_Tight({\n variable: \"--font-inter-tight\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
|
||||
"className": "${interTight.variable}",
|
||||
"cssVariable": "font-family: var(--font-inter-tight), sans-serif;"
|
||||
},
|
||||
"inter": {
|
||||
"name": "Inter",
|
||||
"import": "import { Inter } from \"next/font/google\";",
|
||||
"initialization": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${inter.variable}",
|
||||
"cssVariable": "font-family: var(--font-inter), sans-serif;"
|
||||
},
|
||||
"poppins": {
|
||||
"name": "Poppins",
|
||||
"import": "import { Poppins } from \"next/font/google\";",
|
||||
"initialization": "const poppins = Poppins({\n variable: \"--font-poppins\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
|
||||
"className": "${poppins.variable}",
|
||||
"cssVariable": "font-family: var(--font-poppins), sans-serif;"
|
||||
},
|
||||
"montserrat": {
|
||||
"name": "Montserrat",
|
||||
"import": "import { Montserrat } from \"next/font/google\";",
|
||||
"initialization": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${montserrat.variable}",
|
||||
"cssVariable": "font-family: var(--font-montserrat), sans-serif;"
|
||||
},
|
||||
"roboto": {
|
||||
"name": "Roboto",
|
||||
"import": "import { Roboto } from \"next/font/google\";",
|
||||
"initialization": "const roboto = Roboto({\n variable: \"--font-roboto\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"500\", \"700\", \"900\"],\n});",
|
||||
"className": "${roboto.variable}",
|
||||
"cssVariable": "font-family: var(--font-roboto), sans-serif;"
|
||||
},
|
||||
"openSans": {
|
||||
"name": "Open Sans",
|
||||
"import": "import { Open_Sans } from \"next/font/google\";",
|
||||
"initialization": "const openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${openSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-open-sans), sans-serif;"
|
||||
},
|
||||
"lato": {
|
||||
"name": "Lato",
|
||||
"import": "import { Lato } from \"next/font/google\";",
|
||||
"initialization": "const lato = Lato({\n variable: \"--font-lato\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"700\", \"900\"],\n});",
|
||||
"className": "${lato.variable}",
|
||||
"cssVariable": "font-family: var(--font-lato), sans-serif;"
|
||||
},
|
||||
"workSans": {
|
||||
"name": "Work Sans",
|
||||
"import": "import { Work_Sans } from \"next/font/google\";",
|
||||
"initialization": "const workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${workSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-work-sans), sans-serif;"
|
||||
},
|
||||
"spaceGrotesk": {
|
||||
"name": "Space Grotesk",
|
||||
"import": "import { Space_Grotesk } from \"next/font/google\";",
|
||||
"initialization": "const spaceGrotesk = Space_Grotesk({\n variable: \"--font-space-grotesk\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${spaceGrotesk.variable}",
|
||||
"cssVariable": "font-family: var(--font-space-grotesk), sans-serif;"
|
||||
},
|
||||
"dmSans": {
|
||||
"name": "DM Sans",
|
||||
"import": "import { DM_Sans } from \"next/font/google\";",
|
||||
"initialization": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${dmSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-dm-sans), sans-serif;"
|
||||
},
|
||||
"plusJakartaSans": {
|
||||
"name": "Plus Jakarta Sans",
|
||||
"import": "import { Plus_Jakarta_Sans } from \"next/font/google\";",
|
||||
"initialization": "const plusJakartaSans = Plus_Jakarta_Sans({\n variable: \"--font-plus-jakarta-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${plusJakartaSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-plus-jakarta-sans), sans-serif;"
|
||||
},
|
||||
"manrope": {
|
||||
"name": "Manrope",
|
||||
"import": "import { Manrope } from \"next/font/google\";",
|
||||
"initialization": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${manrope.variable}",
|
||||
"cssVariable": "font-family: var(--font-manrope), sans-serif;"
|
||||
},
|
||||
"outfit": {
|
||||
"name": "Outfit",
|
||||
"import": "import { Outfit } from \"next/font/google\";",
|
||||
"initialization": "const outfit = Outfit({\n variable: \"--font-outfit\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${outfit.variable}",
|
||||
"cssVariable": "font-family: var(--font-outfit), sans-serif;"
|
||||
},
|
||||
"rubik": {
|
||||
"name": "Rubik",
|
||||
"import": "import { Rubik } from \"next/font/google\";",
|
||||
"initialization": "const rubik = Rubik({\n variable: \"--font-rubik\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${rubik.variable}",
|
||||
"cssVariable": "font-family: var(--font-rubik), sans-serif;"
|
||||
},
|
||||
"playfairDisplay": {
|
||||
"name": "Playfair Display",
|
||||
"import": "import { Playfair_Display } from \"next/font/google\";",
|
||||
"initialization": "const playfairDisplay = Playfair_Display({\n variable: \"--font-playfair-display\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${playfairDisplay.variable}",
|
||||
"cssVariable": "font-family: var(--font-playfair-display), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"merriweather": {
|
||||
"name": "Merriweather",
|
||||
"import": "import { Merriweather } from \"next/font/google\";",
|
||||
"initialization": "const merriweather = Merriweather({\n variable: \"--font-merriweather\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"700\", \"900\"],\n});",
|
||||
"className": "${merriweather.variable}",
|
||||
"cssVariable": "font-family: var(--font-merriweather), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"sourceSerif4": {
|
||||
"name": "Source Serif 4",
|
||||
"import": "import { Source_Serif_4 } from \"next/font/google\";",
|
||||
"initialization": "const sourceSerif4 = Source_Serif_4({\n variable: \"--font-source-serif-4\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${sourceSerif4.variable}",
|
||||
"cssVariable": "font-family: var(--font-source-serif-4), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"jetBrainsMono": {
|
||||
"name": "JetBrains Mono",
|
||||
"import": "import { JetBrains_Mono } from \"next/font/google\";",
|
||||
"initialization": "const jetBrainsMono = JetBrains_Mono({\n variable: \"--font-jetbrains-mono\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${jetBrainsMono.variable}",
|
||||
"cssVariable": "font-family: var(--font-jetbrains-mono), monospace;",
|
||||
"category": "monospace"
|
||||
},
|
||||
"firaCode": {
|
||||
"name": "Fira Code",
|
||||
"import": "import { Fira_Code } from \"next/font/google\";",
|
||||
"initialization": "const firaCode = Fira_Code({\n variable: \"--font-fira-code\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${firaCode.variable}",
|
||||
"cssVariable": "font-family: var(--font-fira-code), monospace;",
|
||||
"category": "monospace"
|
||||
},
|
||||
"sourceCodePro": {
|
||||
"name": "Source Code Pro",
|
||||
"import": "import { Source_Code_Pro } from \"next/font/google\";",
|
||||
"initialization": "const sourceCodePro = Source_Code_Pro({\n variable: \"--font-source-code-pro\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${sourceCodePro.variable}",
|
||||
"cssVariable": "font-family: var(--font-source-code-pro), monospace;",
|
||||
"category": "monospace"
|
||||
},
|
||||
"sourceSans3": {
|
||||
"name": "Source Sans 3",
|
||||
"import": "import { Source_Sans_3 } from \"next/font/google\";",
|
||||
"initialization": "const sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${sourceSans3.variable}",
|
||||
"cssVariable": "font-family: var(--font-source-sans-3), sans-serif;"
|
||||
},
|
||||
"nunito": {
|
||||
"name": "Nunito",
|
||||
"import": "import { Nunito } from \"next/font/google\";",
|
||||
"initialization": "const nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${nunito.variable}",
|
||||
"cssVariable": "font-family: var(--font-nunito), sans-serif;"
|
||||
},
|
||||
"cormorantGaramond": {
|
||||
"name": "Cormorant Garamond",
|
||||
"import": "import { Cormorant_Garamond } from \"next/font/google\";",
|
||||
"initialization": "const cormorantGaramond = Cormorant_Garamond({\n variable: \"--font-cormorant-garamond\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});",
|
||||
"className": "${cormorantGaramond.variable}",
|
||||
"cssVariable": "font-family: var(--font-cormorant-garamond), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"lora": {
|
||||
"name": "Lora",
|
||||
"import": "import { Lora } from \"next/font/google\";",
|
||||
"initialization": "const lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${lora.variable}",
|
||||
"cssVariable": "font-family: var(--font-lora), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"publicSans": {
|
||||
"name": "Public Sans",
|
||||
"import": "import { Public_Sans } from \"next/font/google\";",
|
||||
"initialization": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${publicSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-public-sans), sans-serif;"
|
||||
},
|
||||
"notoSans": {
|
||||
"name": "Noto Sans",
|
||||
"import": "import { Noto_Sans } from \"next/font/google\";",
|
||||
"initialization": "const notoSans = Noto_Sans({\n variable: \"--font-noto-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${notoSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-noto-sans), sans-serif;"
|
||||
},
|
||||
"mulish": {
|
||||
"name": "Mulish",
|
||||
"import": "import { Mulish } from \"next/font/google\";",
|
||||
"initialization": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${mulish.variable}",
|
||||
"cssVariable": "font-family: var(--font-mulish), sans-serif;"
|
||||
},
|
||||
"fraunces": {
|
||||
"name": "Fraunces",
|
||||
"import": "import { Fraunces } from \"next/font/google\";",
|
||||
"initialization": "const fraunces = Fraunces({\n variable: \"--font-fraunces\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${fraunces.variable}",
|
||||
"cssVariable": "font-family: var(--font-fraunces), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"dmSerifDisplay": {
|
||||
"name": "DM Serif Display",
|
||||
"import": "import { DM_Serif_Display } from \"next/font/google\";",
|
||||
"initialization": "const dmSerifDisplay = DM_Serif_Display({\n variable: \"--font-dm-serif-display\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});",
|
||||
"className": "${dmSerifDisplay.variable}",
|
||||
"cssVariable": "font-family: var(--font-dm-serif-display), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"prata": {
|
||||
"name": "Prata",
|
||||
"import": "import { Prata } from \"next/font/google\";",
|
||||
"initialization": "const prata = Prata({\n variable: \"--font-prata\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});",
|
||||
"className": "${prata.variable}",
|
||||
"cssVariable": "font-family: var(--font-prata), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"epilogue": {
|
||||
"name": "Epilogue",
|
||||
"import": "import { Epilogue } from \"next/font/google\";",
|
||||
"initialization": "const epilogue = Epilogue({\n variable: \"--font-epilogue\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${epilogue.variable}",
|
||||
"cssVariable": "font-family: var(--font-epilogue), sans-serif;"
|
||||
},
|
||||
"cormorant": {
|
||||
"name": "Cormorant",
|
||||
"import": "import { Cormorant } from \"next/font/google\";",
|
||||
"initialization": "const cormorant = Cormorant({\n variable: \"--font-cormorant\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${cormorant.variable}",
|
||||
"cssVariable": "font-family: var(--font-cormorant), serif;",
|
||||
"category": "serif"
|
||||
},
|
||||
"ibmPlexSans": {
|
||||
"name": "IBM Plex Sans",
|
||||
"import": "import { IBM_Plex_Sans } from \"next/font/google\";",
|
||||
"initialization": "const ibmPlexSans = IBM_Plex_Sans({\n variable: \"--font-ibm-plex-sans\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\"],\n});",
|
||||
"className": "${ibmPlexSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-ibm-plex-sans), sans-serif;"
|
||||
},
|
||||
"sora": {
|
||||
"name": "Sora",
|
||||
"import": "import { Sora } from \"next/font/google\";",
|
||||
"initialization": "const sora = Sora({\n variable: \"--font-sora\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${sora.variable}",
|
||||
"cssVariable": "font-family: var(--font-sora), sans-serif;"
|
||||
},
|
||||
"spectral": {
|
||||
"name": "Spectral",
|
||||
"import": "import { Spectral } from \"next/font/google\";",
|
||||
"initialization": "const spectral = Spectral({\n variable: \"--font-spectral\",\n subsets: [\"latin\"],\n weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});",
|
||||
"className": "${spectral.variable}",
|
||||
"cssVariable": "font-family: var(--font-spectral), serif;",
|
||||
"category": "serif"
|
||||
}
|
||||
},
|
||||
"fontPairings": {
|
||||
"interOpenSans": {
|
||||
"name": "Inter + Open Sans",
|
||||
"description": "Neutral headings with friendly body. Clean and approachable.",
|
||||
"headingFont": "inter",
|
||||
"bodyFont": "openSans",
|
||||
"imports": "import { Inter } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";",
|
||||
"initializations": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});\n\nconst openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${inter.variable} ${openSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-open-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-open-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-inter), sans-serif"
|
||||
}
|
||||
},
|
||||
"dmSansInter": {
|
||||
"name": "DM Sans + Inter",
|
||||
"description": "Modern geometric headings with neutral body. Contemporary and clean.",
|
||||
"headingFont": "dmSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { DM_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${dmSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-dm-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-dm-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"workSansSourceSans3": {
|
||||
"name": "Work Sans + Source Sans 3",
|
||||
"description": "Versatile headings with modern body. Professional and balanced.",
|
||||
"headingFont": "workSans",
|
||||
"bodyFont": "sourceSans3",
|
||||
"imports": "import { Work_Sans } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";",
|
||||
"initializations": "const workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${workSans.variable} ${sourceSans3.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-source-sans-3), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-work-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-source-sans-3), sans-serif",
|
||||
"headingsFontFamily": "var(--font-work-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"manropeDmSans": {
|
||||
"name": "Manrope + DM Sans",
|
||||
"description": "Geometric headings with clean body. Modern and professional.",
|
||||
"headingFont": "manrope",
|
||||
"bodyFont": "dmSans",
|
||||
"imports": "import { Manrope } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";",
|
||||
"initializations": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});\n\nconst dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${manrope.variable} ${dmSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-dm-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-manrope), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-dm-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-manrope), sans-serif"
|
||||
}
|
||||
},
|
||||
"playfairNunito": {
|
||||
"name": "Playfair Display + Nunito",
|
||||
"description": "Classic serif headings with friendly rounded body. Elegant and approachable.",
|
||||
"headingFont": "playfairDisplay",
|
||||
"bodyFont": "nunito",
|
||||
"imports": "import { Playfair_Display } from \"next/font/google\";\nimport { Nunito } from \"next/font/google\";",
|
||||
"initializations": "const playfairDisplay = Playfair_Display({\n variable: \"--font-playfair-display\",\n subsets: [\"latin\"],\n});\n\nconst nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${playfairDisplay.variable} ${nunito.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-nunito), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-playfair-display), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-nunito), sans-serif",
|
||||
"headingsFontFamily": "var(--font-playfair-display), serif"
|
||||
}
|
||||
},
|
||||
"cormorantGaramondInter": {
|
||||
"name": "Cormorant Garamond + Inter",
|
||||
"description": "Elegant serif headings with neutral body. Sophisticated and modern.",
|
||||
"headingFont": "cormorantGaramond",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Cormorant_Garamond } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const cormorantGaramond = Cormorant_Garamond({\n variable: \"--font-cormorant-garamond\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${cormorantGaramond.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-cormorant-garamond), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-cormorant-garamond), serif"
|
||||
}
|
||||
},
|
||||
"loraSourceSans3": {
|
||||
"name": "Lora + Source Sans 3",
|
||||
"description": "Readable serif headings with modern body. Editorial and professional.",
|
||||
"headingFont": "lora",
|
||||
"bodyFont": "sourceSans3",
|
||||
"imports": "import { Lora } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";",
|
||||
"initializations": "const lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${lora.variable} ${sourceSans3.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-source-sans-3), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-lora), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-source-sans-3), sans-serif",
|
||||
"headingsFontFamily": "var(--font-lora), serif"
|
||||
}
|
||||
},
|
||||
"publicSansInter": {
|
||||
"name": "Public Sans + Inter",
|
||||
"description": "Government-inspired headings with neutral body. Professional and trustworthy.",
|
||||
"headingFont": "publicSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Public_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${publicSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-public-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-public-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"notoSansInter": {
|
||||
"name": "Noto Sans + Inter",
|
||||
"description": "Universal headings with neutral body. Global and accessible.",
|
||||
"headingFont": "notoSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Noto_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const notoSans = Noto_Sans({\n variable: \"--font-noto-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${notoSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-noto-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-noto-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"openSansWorkSans": {
|
||||
"name": "Open Sans + Work Sans",
|
||||
"description": "Friendly headings with versatile body. Approachable and balanced.",
|
||||
"headingFont": "openSans",
|
||||
"bodyFont": "workSans",
|
||||
"imports": "import { Open_Sans } from \"next/font/google\";\nimport { Work_Sans } from \"next/font/google\";",
|
||||
"initializations": "const openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});\n\nconst workSans = Work_Sans({\n variable: \"--font-work-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${openSans.variable} ${workSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-work-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-open-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-work-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-open-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"mulishInter": {
|
||||
"name": "Mulish + Inter",
|
||||
"description": "Minimal headings with neutral body. Clean and modern.",
|
||||
"headingFont": "mulish",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Mulish } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${mulish.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-mulish), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-mulish), sans-serif"
|
||||
}
|
||||
},
|
||||
"frauncesInter": {
|
||||
"name": "Fraunces + Inter",
|
||||
"description": "Distinctive serif headings with neutral body. Bold and modern.",
|
||||
"headingFont": "fraunces",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Fraunces } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const fraunces = Fraunces({\n variable: \"--font-fraunces\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${fraunces.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-fraunces), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-fraunces), serif"
|
||||
}
|
||||
},
|
||||
"dmSerifDisplayDmSans": {
|
||||
"name": "DM Serif Display + DM Sans",
|
||||
"description": "Elegant serif headings with clean sans-serif body. Cohesive DM family pairing.",
|
||||
"headingFont": "dmSerifDisplay",
|
||||
"bodyFont": "dmSans",
|
||||
"imports": "import { DM_Serif_Display } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";",
|
||||
"initializations": "const dmSerifDisplay = DM_Serif_Display({\n variable: \"--font-dm-serif-display\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});\n\nconst dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${dmSerifDisplay.variable} ${dmSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-dm-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-dm-serif-display), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-dm-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-dm-serif-display), serif"
|
||||
}
|
||||
},
|
||||
"prataInter": {
|
||||
"name": "Prata + Inter",
|
||||
"description": "Elegant display serif headings with neutral body. Sophisticated and refined.",
|
||||
"headingFont": "prata",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Prata } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const prata = Prata({\n variable: \"--font-prata\",\n subsets: [\"latin\"],\n weight: [\"400\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${prata.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-prata), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-prata), serif"
|
||||
}
|
||||
},
|
||||
"epilogueInter": {
|
||||
"name": "Epilogue + Inter",
|
||||
"description": "Modern variable headings with neutral body. Contemporary and flexible.",
|
||||
"headingFont": "epilogue",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Epilogue } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const epilogue = Epilogue({\n variable: \"--font-epilogue\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${epilogue.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-epilogue), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-epilogue), sans-serif"
|
||||
}
|
||||
},
|
||||
"plusJakartaSansInter": {
|
||||
"name": "Plus Jakarta Sans + Inter",
|
||||
"description": "Friendly rounded headings with neutral body. Approachable and modern.",
|
||||
"headingFont": "plusJakartaSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Plus_Jakarta_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const plusJakartaSans = Plus_Jakarta_Sans({\n variable: \"--font-plus-jakarta-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${plusJakartaSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-plus-jakarta-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-plus-jakarta-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"nunitoInter": {
|
||||
"name": "Nunito + Inter",
|
||||
"description": "Rounded friendly headings with neutral body. Warm and approachable.",
|
||||
"headingFont": "nunito",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Nunito } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${nunito.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-nunito), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-nunito), sans-serif"
|
||||
}
|
||||
},
|
||||
"merriweatherOpenSans": {
|
||||
"name": "Merriweather + Open Sans",
|
||||
"description": "Classic serif headings with friendly body. Readable and approachable.",
|
||||
"headingFont": "merriweather",
|
||||
"bodyFont": "openSans",
|
||||
"imports": "import { Merriweather } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";",
|
||||
"initializations": "const merriweather = Merriweather({\n variable: \"--font-merriweather\",\n subsets: [\"latin\"],\n weight: [\"300\", \"400\", \"700\", \"900\"],\n});\n\nconst openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${merriweather.variable} ${openSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-open-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-merriweather), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-open-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-merriweather), serif"
|
||||
}
|
||||
},
|
||||
"cormorantLora": {
|
||||
"name": "Cormorant + Lora",
|
||||
"description": "Elegant serif headings with readable serif body. Classic and refined.",
|
||||
"headingFont": "cormorant",
|
||||
"bodyFont": "lora",
|
||||
"imports": "import { Cormorant } from \"next/font/google\";\nimport { Lora } from \"next/font/google\";",
|
||||
"initializations": "const cormorant = Cormorant({\n variable: \"--font-cormorant\",\n subsets: [\"latin\"],\n});\n\nconst lora = Lora({\n variable: \"--font-lora\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${cormorant.variable} ${lora.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-lora), serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-cormorant), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-lora), serif",
|
||||
"headingsFontFamily": "var(--font-cormorant), serif"
|
||||
}
|
||||
},
|
||||
"montserratInter": {
|
||||
"name": "Montserrat + Inter",
|
||||
"description": "Geometric sans-serif headings with neutral body. Popular and reliable.",
|
||||
"headingFont": "montserrat",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Montserrat } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${montserrat.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-montserrat), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-montserrat), sans-serif"
|
||||
}
|
||||
},
|
||||
"spaceGroteskInter": {
|
||||
"name": "Space Grotesk + Inter",
|
||||
"description": "Modern geometric headings with neutral body. Tech-forward and contemporary.",
|
||||
"headingFont": "spaceGrotesk",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Space_Grotesk } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const spaceGrotesk = Space_Grotesk({\n variable: \"--font-space-grotesk\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${spaceGrotesk.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-space-grotesk), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-space-grotesk), sans-serif"
|
||||
}
|
||||
},
|
||||
"spectralInter": {
|
||||
"name": "Spectral + Inter",
|
||||
"description": "Screen-optimized serif headings with neutral body. Digital-first and readable.",
|
||||
"headingFont": "spectral",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Spectral } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const spectral = Spectral({\n variable: \"--font-spectral\",\n subsets: [\"latin\"],\n weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${spectral.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-spectral), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-spectral), serif"
|
||||
}
|
||||
},
|
||||
"soraInter": {
|
||||
"name": "Sora + Inter",
|
||||
"description": "Modern geometric headings with neutral body. Perfect for SaaS and tech products.",
|
||||
"headingFont": "sora",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Sora } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const sora = Sora({\n variable: \"--font-sora\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${sora.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-sora), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-sora), sans-serif"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
next.config.ts
Normal file
15
next.config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
devIndicators: false,
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'webuild-dev.s3.eu-north-1.amazonaws.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
7450
package-lock.json
generated
Normal file
7450
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "webild-components-2",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"build": "next build --turbopack",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gsap/react": "^2.1.2",
|
||||
"@react-three/drei": "^10.7.7",
|
||||
"@react-three/fiber": "^9.4.0",
|
||||
"clsx": "^2.1.1",
|
||||
"cobe": "^0.6.5",
|
||||
"embla-carousel-auto-scroll": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"gsap": "^3.13.0",
|
||||
"lenis": "^1.3.15",
|
||||
"lucide-react": "^0.555.0",
|
||||
"motion-number": "^1.0.0",
|
||||
"next": "16.0.7",
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1",
|
||||
"react-fast-marquee": "^1.6.5",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"three": "^0.181.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.7",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
@@ -0,0 +1,5 @@
|
||||
const config = {
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
BIN
public/audio/click.mp3
Normal file
BIN
public/audio/click.mp3
Normal file
Binary file not shown.
BIN
public/base/bg-texture.avif
Normal file
BIN
public/base/bg-texture.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
52
public/brand/logo-dot.svg
Normal file
52
public/brand/logo-dot.svg
Normal file
@@ -0,0 +1,52 @@
|
||||
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_f_1295_3221)">
|
||||
<ellipse cx="3.59341" cy="3.53052" rx="1.8861" ry="1.90568" transform="rotate(25.4025 3.59341 3.53052)" fill="url(#paint0_linear_1295_3221)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_1295_3221)">
|
||||
<circle cx="3.69632" cy="3.86088" r="1.65146" transform="rotate(25.4025 3.69632 3.86088)" fill="url(#paint1_linear_1295_3221)"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_f_1295_3221)">
|
||||
<circle cx="3.69633" cy="3.86069" r="1.65146" transform="rotate(-169.598 3.69633 3.86069)" fill="url(#paint2_linear_1295_3221)"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_f_1295_3221)">
|
||||
<circle cx="3.74882" cy="3.91343" r="1.65146" transform="rotate(-169.598 3.74882 3.91343)" fill="url(#paint3_linear_1295_3221)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_1295_3221" x="1.25185" y="1.17653" width="4.68307" height="4.70798" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1295_3221"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_1295_3221" x="0.569126" y="0.733676" width="6.25433" height="6.25433" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1295_3221"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_1295_3221" x="1.16377" y="1.3282" width="5.06515" height="5.06478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.0330293" result="effect1_foregroundBlur_1295_3221"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_1295_3221" x="0.687796" y="0.852469" width="6.12209" height="6.12172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.704625" result="effect1_foregroundBlur_1295_3221"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1295_3221" x1="3.68116" y1="3.8564" x2="5.08951" y2="5.37639" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6"/>
|
||||
<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1295_3221" x1="2.5674" y1="3.78948" x2="3.91229" y2="5.46656" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00961538" stop-color="#0D50E8"/>
|
||||
<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1295_3221" x1="5.38038" y1="5.11694" x2="2.76523" y2="1.84712" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59ABFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1295_3221" x1="5.43287" y1="5.16968" x2="4.3403" y2="2.57182" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59ABFF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
74
public/brand/logo.svg
Normal file
74
public/brand/logo.svg
Normal file
@@ -0,0 +1,74 @@
|
||||
<svg width="67" height="21" viewBox="0 0 67 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.4375 7.16162C28.1869 7.16171 29.6159 7.78044 30.6064 8.88428C31.5956 9.98684 32.1387 11.5637 32.1387 13.4653V14.4478H23.374V14.4917C23.3742 15.5488 23.6921 16.4168 24.249 17.019C24.8052 17.6203 25.6093 17.9673 26.6025 17.9673C28.0159 17.9672 29.0384 17.2571 29.3633 16.228L29.3877 16.1509H32.0156L31.9961 16.2778C31.6314 18.6096 29.4248 20.2515 26.543 20.2515C24.6949 20.2514 23.2009 19.6255 22.1699 18.4937C21.1401 17.3628 20.5822 15.7381 20.582 13.7603C20.582 11.7937 21.1488 10.1435 22.168 8.98389C23.1888 7.82281 24.6569 7.16165 26.4375 7.16162ZM36.1025 9.28955C36.8971 7.97245 38.2815 7.18506 39.9678 7.18506C41.5623 7.18515 42.8859 7.81845 43.8086 8.95557C44.7294 10.0905 45.2441 11.7187 45.2441 13.7007C45.2441 15.6882 44.7324 17.3191 43.8115 18.4556C42.8887 19.5944 41.5621 20.2279 39.9561 20.228C38.2187 20.228 36.8448 19.4336 36.0312 18.1226V20.0151H33.334V2.77295H36.1025V9.28955ZM67 20.0151H64.3027V18.1284C63.5158 19.417 62.1356 20.228 60.4141 20.228C58.8134 20.228 57.4778 19.588 56.5449 18.4468C55.614 17.3077 55.0899 15.677 55.0898 13.7007C55.0898 11.7241 55.6138 10.0956 56.542 8.95947C57.4719 7.82125 58.8017 7.18506 60.3906 7.18506C62.0846 7.18514 63.4609 7.98063 64.2207 9.2251V2.77295H67V20.0151ZM2.99902 2.85791L6.0918 15.9497L9.62793 2.85498L9.64941 2.77295H12.2715L12.2939 2.85498L15.8398 15.9507L18.9336 2.85791L18.9541 2.77295H21.9336L21.8955 2.91162L17.2949 19.9341L17.2734 20.0151H14.6172L14.5938 19.9351L10.9609 7.26416L7.33887 19.9351L7.31641 20.0151H4.64746L4.62598 19.9341L0.0371094 2.91162L0 2.77295H2.97949L2.99902 2.85791ZM53.9062 20.0151H51.1377V2.77295H53.9062V20.0151ZM49.0352 19.9839H46.2666V7.354H49.0352V19.9839ZM60.9092 17.9536C60.9674 17.9566 61.0263 17.9585 61.0859 17.9585V17.9575L60.9092 17.9536ZM60.6924 17.9351C60.7503 17.9417 60.8088 17.947 60.8682 17.9507C60.8088 17.947 60.7503 17.9417 60.6924 17.9351ZM60.4434 17.8979C60.5109 17.911 60.5797 17.9212 60.6494 17.9302C60.5797 17.9212 60.5109 17.911 60.4434 17.8979ZM39.2715 9.55225C38.3397 9.55229 37.5483 9.96027 36.9873 10.6792C36.4249 11.4002 36.0908 12.4394 36.0908 13.7007C36.0909 14.9739 36.425 16.0131 36.9873 16.731C37.548 17.4465 38.3393 17.8491 39.2715 17.8491C40.2407 17.8491 41.0189 17.4568 41.5576 16.7495C42.0989 16.0387 42.4052 15 42.4053 13.7007C42.4053 12.4132 42.0991 11.3737 41.5576 10.6597C41.0186 9.94925 40.2402 9.5523 39.2715 9.55225ZM61.0869 9.55225C60.1117 9.55225 59.3237 9.94972 58.7773 10.6606C58.2287 11.3747 57.917 12.4136 57.917 13.7007C57.917 14.9937 58.2288 16.0322 58.7773 16.7446C59.3236 17.454 60.1115 17.8491 61.0869 17.8491C62.0312 17.849 62.8158 17.449 63.3672 16.7358C63.9205 16.0199 64.2441 14.9807 64.2441 13.7007C64.2441 12.4325 63.9207 11.3935 63.3672 10.6743C62.8155 9.95775 62.0308 9.55241 61.0869 9.55225ZM41.2676 17.2271C41.3209 17.1788 41.3736 17.1293 41.4238 17.0767L41.4307 17.0688C41.3782 17.1242 41.3235 17.1766 41.2676 17.2271ZM57.8643 14.6216C57.8776 14.7252 57.8932 14.8268 57.9111 14.9263C57.8933 14.8268 57.8775 14.7252 57.8643 14.6216ZM57.8066 13.7007C57.8067 14.0028 57.8244 14.2919 57.8574 14.5669C57.8424 14.4409 57.8305 14.312 57.8223 14.1802L57.8076 13.7007C57.8076 13.6621 57.809 13.6237 57.8096 13.5854C57.809 13.6237 57.8066 13.6621 57.8066 13.7007ZM45.1035 14.5063C45.1121 14.3932 45.1182 14.2786 45.123 14.1626C45.1182 14.2786 45.112 14.3932 45.1035 14.5063ZM45.1338 13.7007C45.1338 13.8433 45.1302 13.9839 45.125 14.1226C45.1257 14.1037 45.1283 14.0849 45.1289 14.0659L45.1348 13.7007C45.1348 13.5487 45.1312 13.399 45.125 13.2515L45.1338 13.7007ZM57.8242 13.2104C57.8213 13.2551 57.8185 13.3 57.8164 13.3452C57.8185 13.3 57.8213 13.2551 57.8242 13.2104ZM57.8555 12.8501C57.8514 12.8844 57.8483 12.9189 57.8447 12.9536C57.8483 12.9189 57.8514 12.8844 57.8555 12.8501ZM57.9346 12.3618C57.9223 12.423 57.909 12.4846 57.8984 12.5474C57.909 12.4846 57.9223 12.423 57.9346 12.3618ZM26.4375 9.43506C24.7618 9.43512 23.5679 10.68 23.3984 12.4468H29.3623C29.3129 11.5693 29.0132 10.8288 28.5244 10.3032C28.0155 9.75613 27.2989 9.43515 26.4375 9.43506ZM57.999 12.0737C57.9868 12.1214 57.975 12.1695 57.9639 12.2183C57.975 12.1695 57.9868 12.1214 57.999 12.0737ZM58.1367 11.6313C58.1073 11.7129 58.0784 11.7959 58.0527 11.8813C58.0784 11.7959 58.1073 11.7129 58.1367 11.6313ZM58.2197 11.4146C58.204 11.4519 58.1887 11.4896 58.1738 11.5278C58.1887 11.4896 58.204 11.4519 58.2197 11.4146ZM58.3633 11.1089C58.3476 11.1388 58.3324 11.1691 58.3174 11.1997C58.3324 11.1691 58.3476 11.1388 58.3633 11.1089ZM58.9629 10.2827C58.8665 10.3786 58.7757 10.4823 58.6904 10.5933L58.7998 10.4595C58.8524 10.3981 58.9065 10.3388 58.9629 10.2827ZM59.5752 9.81885C59.3611 9.93932 59.164 10.0873 58.9854 10.2612C59.0426 10.2054 59.1021 10.1525 59.1631 10.1021C59.2493 10.0308 59.3391 9.96501 59.4326 9.90479C59.4793 9.87472 59.5268 9.84615 59.5752 9.81885ZM26.2725 9.32861C26.327 9.326 26.382 9.32471 26.4375 9.32471L26.5312 9.32666C26.5002 9.32581 26.4689 9.32373 26.4375 9.32373C26.382 9.32373 26.3269 9.32601 26.2725 9.32861Z" fill="black"/>
|
||||
<mask id="mask0_1119_6721" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="67" height="19">
|
||||
<path d="M26.4375 7.16162C28.1869 7.16171 29.6159 7.78044 30.6064 8.88428C31.5956 9.98684 32.1387 11.5637 32.1387 13.4653V14.4478H23.374V14.4917C23.3742 15.5488 23.6921 16.4168 24.249 17.019C24.8052 17.6203 25.6093 17.9673 26.6025 17.9673C28.0159 17.9672 29.0384 17.2571 29.3633 16.228L29.3877 16.1509H32.0156L31.9961 16.2778C31.6314 18.6096 29.4248 20.2515 26.543 20.2515C24.6949 20.2514 23.2009 19.6255 22.1699 18.4937C21.1401 17.3628 20.5822 15.7381 20.582 13.7603C20.582 11.7937 21.1488 10.1435 22.168 8.98389C23.1888 7.82281 24.6569 7.16165 26.4375 7.16162ZM36.1025 9.28955C36.8971 7.97245 38.2815 7.18506 39.9678 7.18506C41.5623 7.18515 42.8859 7.81845 43.8086 8.95557C44.7294 10.0905 45.2441 11.7187 45.2441 13.7007C45.2441 15.6882 44.7324 17.3191 43.8115 18.4556C42.8887 19.5944 41.5621 20.2279 39.9561 20.228C38.2187 20.228 36.8448 19.4336 36.0312 18.1226V20.0151H33.334V2.77295H36.1025V9.28955ZM67 20.0151H64.3027V18.1284C63.5158 19.417 62.1356 20.228 60.4141 20.228C58.8134 20.228 57.4778 19.588 56.5449 18.4468C55.614 17.3077 55.0899 15.677 55.0898 13.7007C55.0898 11.7241 55.6138 10.0956 56.542 8.95947C57.4719 7.82125 58.8017 7.18506 60.3906 7.18506C62.0846 7.18514 63.4609 7.98063 64.2207 9.2251V2.77295H67V20.0151ZM2.99902 2.85791L6.0918 15.9497L9.62793 2.85498L9.64941 2.77295H12.2715L12.2939 2.85498L15.8398 15.9507L18.9336 2.85791L18.9541 2.77295H21.9336L21.8955 2.91162L17.2949 19.9341L17.2734 20.0151H14.6172L14.5938 19.9351L10.9609 7.26416L7.33887 19.9351L7.31641 20.0151H4.64746L4.62598 19.9341L0.0371094 2.91162L0 2.77295H2.97949L2.99902 2.85791ZM53.9062 20.0151H51.1377V2.77295H53.9062V20.0151ZM49.0352 19.9839H46.2666V7.354H49.0352V19.9839ZM60.9092 17.9536C60.9674 17.9566 61.0263 17.9585 61.0859 17.9585V17.9575L60.9092 17.9536ZM60.6924 17.9351C60.7503 17.9417 60.8088 17.947 60.8682 17.9507C60.8088 17.947 60.7503 17.9417 60.6924 17.9351ZM60.4434 17.8979C60.5109 17.911 60.5797 17.9212 60.6494 17.9302C60.5797 17.9212 60.5109 17.911 60.4434 17.8979ZM39.2715 9.55225C38.3397 9.55229 37.5483 9.96027 36.9873 10.6792C36.4249 11.4002 36.0908 12.4394 36.0908 13.7007C36.0909 14.9739 36.425 16.0131 36.9873 16.731C37.548 17.4465 38.3393 17.8491 39.2715 17.8491C40.2407 17.8491 41.0189 17.4568 41.5576 16.7495C42.0989 16.0387 42.4052 15 42.4053 13.7007C42.4053 12.4132 42.0991 11.3737 41.5576 10.6597C41.0186 9.94925 40.2402 9.5523 39.2715 9.55225ZM61.0869 9.55225C60.1117 9.55225 59.3237 9.94972 58.7773 10.6606C58.2287 11.3747 57.917 12.4136 57.917 13.7007C57.917 14.9937 58.2288 16.0322 58.7773 16.7446C59.3236 17.454 60.1115 17.8491 61.0869 17.8491C62.0312 17.849 62.8158 17.449 63.3672 16.7358C63.9205 16.0199 64.2441 14.9807 64.2441 13.7007C64.2441 12.4325 63.9207 11.3935 63.3672 10.6743C62.8155 9.95775 62.0308 9.55241 61.0869 9.55225ZM41.2676 17.2271C41.3209 17.1788 41.3736 17.1293 41.4238 17.0767L41.4307 17.0688C41.3782 17.1242 41.3235 17.1766 41.2676 17.2271ZM57.8643 14.6216C57.8776 14.7252 57.8932 14.8268 57.9111 14.9263C57.8933 14.8268 57.8775 14.7252 57.8643 14.6216ZM57.8066 13.7007C57.8067 14.0028 57.8244 14.2919 57.8574 14.5669C57.8424 14.4409 57.8305 14.312 57.8223 14.1802L57.8076 13.7007C57.8076 13.6621 57.809 13.6237 57.8096 13.5854C57.809 13.6237 57.8066 13.6621 57.8066 13.7007ZM45.1035 14.5063C45.1121 14.3932 45.1182 14.2786 45.123 14.1626C45.1182 14.2786 45.112 14.3932 45.1035 14.5063ZM45.1338 13.7007C45.1338 13.8433 45.1302 13.9839 45.125 14.1226C45.1257 14.1037 45.1283 14.0849 45.1289 14.0659L45.1348 13.7007C45.1348 13.5487 45.1312 13.399 45.125 13.2515L45.1338 13.7007ZM57.8242 13.2104C57.8213 13.2551 57.8185 13.3 57.8164 13.3452C57.8185 13.3 57.8213 13.2551 57.8242 13.2104ZM57.8555 12.8501C57.8514 12.8844 57.8483 12.9189 57.8447 12.9536C57.8483 12.9189 57.8514 12.8844 57.8555 12.8501ZM57.9346 12.3618C57.9223 12.423 57.909 12.4846 57.8984 12.5474C57.909 12.4846 57.9223 12.423 57.9346 12.3618ZM26.4375 9.43506C24.7618 9.43512 23.5679 10.68 23.3984 12.4468H29.3623C29.3129 11.5693 29.0132 10.8288 28.5244 10.3032C28.0155 9.75613 27.2989 9.43515 26.4375 9.43506ZM57.999 12.0737C57.9868 12.1214 57.975 12.1695 57.9639 12.2183C57.975 12.1695 57.9868 12.1214 57.999 12.0737ZM58.1367 11.6313C58.1073 11.7129 58.0784 11.7959 58.0527 11.8813C58.0784 11.7959 58.1073 11.7129 58.1367 11.6313ZM58.2197 11.4146C58.204 11.4519 58.1887 11.4896 58.1738 11.5278C58.1887 11.4896 58.204 11.4519 58.2197 11.4146ZM58.3633 11.1089C58.3476 11.1388 58.3324 11.1691 58.3174 11.1997C58.3324 11.1691 58.3476 11.1388 58.3633 11.1089ZM58.9629 10.2827C58.8665 10.3786 58.7757 10.4823 58.6904 10.5933L58.7998 10.4595C58.8524 10.3981 58.9065 10.3388 58.9629 10.2827ZM59.5752 9.81885C59.3611 9.93932 59.164 10.0873 58.9854 10.2612C59.0426 10.2054 59.1021 10.1525 59.1631 10.1021C59.2493 10.0308 59.3391 9.96501 59.4326 9.90479C59.4793 9.87472 59.5268 9.84615 59.5752 9.81885ZM26.2725 9.32861C26.327 9.326 26.382 9.32471 26.4375 9.32471L26.5312 9.32666C26.5002 9.32581 26.4689 9.32373 26.4375 9.32373C26.382 9.32373 26.3269 9.32601 26.2725 9.32861Z" fill="black"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1119_6721)">
|
||||
<g opacity="0.17" filter="url(#filter0_f_1119_6721)">
|
||||
<path d="M36.1377 2.6198H32.5596L42.4684 -6.4082L54.7993 -5.08703L62.8915 -1.34371L55.57 3.39048C54.469 3.18864 52.1459 2.90606 51.6615 3.39048C51.056 3.99602 51.056 5.64749 50.8908 6.91361C50.7587 7.92651 49.8082 7.84944 49.3495 7.68429L46.4319 8.12468L45.5511 12.4185C45.3125 12.2533 44.6813 11.5707 44.0648 10.1615C43.2941 8.39993 42.3032 7.84944 40.7068 7.68429C39.4297 7.55217 36.78 8.47332 36.1377 8.78527V2.6198Z" fill="#0597FF"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_1119_6721)">
|
||||
<path d="M36.1377 2.6198H32.5596L42.4684 -6.4082L54.7993 -5.08703L62.8915 -1.34371L55.57 3.39048C54.469 3.18864 52.1459 2.90606 51.6615 3.39048C51.056 3.99602 51.056 5.64749 50.8908 6.91361C50.7587 7.92651 49.8082 7.84944 49.3495 7.68429L46.4319 8.12468L45.5511 12.4185C45.3125 12.2533 44.6813 11.5707 44.0648 10.1615C43.2941 8.39993 42.3032 7.84944 40.7068 7.68429C39.4297 7.55217 36.78 8.47332 36.1377 8.78527V2.6198Z" fill="#0597FF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter2_f_1119_6721)">
|
||||
<ellipse cx="47.5933" cy="3.27857" rx="1.8861" ry="1.90568" transform="rotate(25.4025 47.5933 3.27857)" fill="url(#paint0_linear_1119_6721)"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_f_1119_6721)">
|
||||
<circle cx="47.6964" cy="3.60892" r="1.65146" transform="rotate(25.4025 47.6964 3.60892)" fill="url(#paint1_linear_1119_6721)"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_f_1119_6721)">
|
||||
<circle cx="47.6963" cy="3.60874" r="1.65146" transform="rotate(-169.598 47.6963 3.60874)" fill="url(#paint2_linear_1119_6721)"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_f_1119_6721)">
|
||||
<circle cx="47.7491" cy="3.66147" r="1.65146" transform="rotate(-169.598 47.7491 3.66147)" fill="url(#paint3_linear_1119_6721)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_1119_6721" x="31.2494" y="-7.71836" width="32.9524" height="21.447" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.655081" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_1119_6721" x="27.1648" y="-11.803" width="41.1216" height="29.6162" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="2.69739" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_1119_6721" x="45.2517" y="0.924576" width="4.68307" height="4.70798" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_1119_6721" x="44.5691" y="0.481723" width="6.25433" height="6.25433" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<filter id="filter4_f_1119_6721" x="45.1637" y="1.07625" width="5.06527" height="5.06478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.0330293" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<filter id="filter5_f_1119_6721" x="44.6879" y="0.600516" width="6.12221" height="6.12172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.704625" result="effect1_foregroundBlur_1119_6721"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1119_6721" x1="47.681" y1="3.60445" x2="49.0894" y2="5.12444" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6"/>
|
||||
<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1119_6721" x1="46.5675" y1="3.53753" x2="47.9124" y2="5.21461" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00961538" stop-color="#0D50E8"/>
|
||||
<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1119_6721" x1="49.3804" y1="4.86499" x2="46.7652" y2="1.59517" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59ABFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1119_6721" x1="49.4331" y1="4.91773" x2="48.3405" y2="2.31986" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F3DA6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59ABFF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
58
public/brand/logowhite.svg
Normal file
58
public/brand/logowhite.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 21" width="67" height="21">
|
||||
<defs>
|
||||
<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
|
||||
<path d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-21.64-8.4c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.79 7.65q-0.01 0.01-0.03 0.03 0.02-0.02 0.03-0.03zm0.13-0.13h0.01q-0.07 0.07-0.14 0.13 0.07-0.06 0.13-0.13zm16.38-3.37q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.67 0q0 0.04 0 0.09v-0.09q0-0.23-0.01-0.45zm0 0.36v-0.15q0 0.11-0.01 0.21 0.01-0.03 0.01-0.06zm0-0.15q0-0.06 0-0.12zm-18.69-4.47c-1.68 0-2.87 1.24-3.04 3.01h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.5-0.54-1.22-0.86-2.08-0.86zm32.25 1.15l0.11-0.13q0.08-0.09 0.16-0.17-0.14 0.14-0.27 0.3zm0.89-0.77q-0.31 0.17-0.56 0.41 0.07-0.07 0.14-0.13 0.13-0.1 0.27-0.19 0.07-0.05 0.15-0.09zm-0.56 0.41q-0.02 0.02-0.03 0.03 0.01-0.01 0.03-0.03zm-32.75-0.9q0 0 0 0 0 0 0 0zm0.17 0h0.09q-0.05 0-0.09-0.01-0.09 0.01-0.17 0.01 0.08 0 0.17 0zm34.25 8.61q0.09 0.01 0.18 0.01-0.09 0-0.18-0.01zm-0.25-0.04q0.11 0.02 0.21 0.03-0.1-0.01-0.21-0.03zm-2.58-3.28q0.02 0.16 0.05 0.31-0.03-0.15-0.05-0.31zm-12.76-0.11q0.02-0.17 0.02-0.35 0 0.18-0.02 0.35zm12.72-1.3q0 0.07 0 0.14 0-0.07 0-0.14zm0.04-0.36q-0.01 0.05-0.02 0.1 0.01-0.05 0.02-0.1zm0.07-0.49q-0.01 0.09-0.03 0.19 0.02-0.1 0.03-0.19zm0.07-0.29q-0.02 0.08-0.04 0.15 0.02-0.07 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.21q-0.02 0.05-0.05 0.11 0.03-0.06 0.05-0.11zm0.14-0.31q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09z"/>
|
||||
</clipPath>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" id="f1"> <feGaussianBlur stdDeviation=".7"/> </filter>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" id="f2"> <feGaussianBlur stdDeviation="2.7"/> </filter>
|
||||
<linearGradient id="g1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62,1.977,-1.976,.62,47.533,3.611)">
|
||||
<stop offset="0" stop-color="#0f3da6" stop-opacity="1"/>
|
||||
<stop offset=".952" stop-color="#3a9aff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.495,2.092,-2.092,.495,46.707,3.06)">
|
||||
<stop offset=".01" stop-color="#0d50e8" stop-opacity="1"/>
|
||||
<stop offset=".952" stop-color="#3a9aff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" id="f3"> <feGaussianBlur stdDeviation="0"/> </filter>
|
||||
<linearGradient id="g3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.982,3.688,-3.688,1.982,46.267,2.069)">
|
||||
<stop offset="0" stop-color="#0f3da6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59abff" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.606,2.752,-2.752,.606,46.32,2.122)">
|
||||
<stop offset="0" stop-color="#0f3da6" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#59abff" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<style>
|
||||
.s0 { fill: #ffffff }
|
||||
.s1 { filter: url(#f1);fill: #0597ff }
|
||||
.s2 { filter: url(#f2);fill: #0597ff }
|
||||
.s3 { fill: url(#g1) }
|
||||
.s4 { fill: url(#g2) }
|
||||
.s5 { filter: url(#f3);fill: url(#g3) }
|
||||
.s6 { filter: url(#f1);fill: url(#g4) }
|
||||
</style>
|
||||
<path class="s0" d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-0.22-0.02q0.09 0.01 0.18 0.02-0.09-0.01-0.18-0.02zm-0.25-0.03q0.1 0.02 0.21 0.03-0.11-0.01-0.21-0.03zm-21.17-8.35c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.82 7.68q0.09-0.08 0.16-0.16h0.01q-0.08 0.08-0.17 0.16zm16.6-2.61q0.02 0.16 0.05 0.3-0.03-0.14-0.05-0.3zm-0.06-0.92q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.7 0.8q0.01-0.17 0.02-0.34-0.01 0.17-0.02 0.34zm0.03-0.8q0 0.21-0.01 0.42 0-0.03 0.01-0.06v-0.36q0-0.23-0.01-0.45zm12.69-0.49q0 0.07-0.01 0.13 0.01-0.06 0.01-0.13zm0.03-0.36q0 0.05-0.01 0.1 0.01-0.05 0.01-0.1zm0.08-0.49q-0.02 0.09-0.03 0.19 0.01-0.1 0.03-0.19zm-31.49-2.93c-1.68 0-2.87 1.25-3.04 3.02h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.51-0.54-1.22-0.87-2.08-0.87zm31.56 2.64q-0.02 0.07-0.04 0.15 0.02-0.08 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.22q-0.03 0.06-0.05 0.12 0.02-0.06 0.05-0.12zm0.14-0.3q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09zm0.6-0.83q-0.14 0.15-0.27 0.31l0.11-0.13q0.08-0.09 0.16-0.18zm0.61-0.46q-0.32 0.18-0.59 0.44 0.09-0.08 0.18-0.16 0.13-0.11 0.27-0.2 0.07-0.04 0.14-0.08zm-33.3-0.49q0.08-0.01 0.17-0.01l0.09 0.01q-0.05-0.01-0.09-0.01-0.09 0-0.17 0.01z"/>
|
||||
<g id="Clip-Path" clip-path="url(#cp1)">
|
||||
<g>
|
||||
<g style="opacity: .17">
|
||||
<path class="s1" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="s2" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill-rule="evenodd" class="s3" d="m46.78 5c-0.95-0.45-1.34-1.58-0.89-2.53 0.45-0.95 1.58-1.36 2.52-0.91 0.94 0.44 1.34 1.58 0.89 2.53-0.46 0.95-1.58 1.36-2.52 0.91z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill-rule="evenodd" class="s4" d="m46.99 5.1c-0.83-0.39-1.18-1.37-0.79-2.2 0.4-0.82 1.38-1.17 2.2-0.78 0.83 0.39 1.18 1.37 0.79 2.2-0.39 0.82-1.38 1.17-2.2 0.78z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill-rule="evenodd" class="s5" d="m47.99 1.98c0.9 0.17 1.5 1.03 1.33 1.93-0.16 0.9-1.02 1.49-1.92 1.32-0.9-0.16-1.49-1.02-1.33-1.92 0.17-0.9 1.03-1.49 1.92-1.33z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill-rule="evenodd" class="s6" d="m48.05 2.04c0.9 0.16 1.49 1.02 1.32 1.92-0.16 0.9-1.02 1.49-1.92 1.33-0.9-0.17-1.49-1.03-1.33-1.93 0.17-0.89 1.03-1.49 1.93-1.32z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
BIN
public/images/noise.webp
Normal file
BIN
public/images/noise.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
public/placeholders/iphone.jpg
Normal file
BIN
public/placeholders/iphone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
19
public/placeholders/placeholder-logo.svg
Normal file
19
public/placeholders/placeholder-logo.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.424461 14.339843" fill="#fa0c00">
|
||||
<g>
|
||||
<path d="M 5.996094,0 H 0 v 14.339843 z m 0,0" />
|
||||
<path d="m 10.214844,0 h 5.988281 v 14.339843 z m 0,0" />
|
||||
<path d="m 8.105469,5.285156 3.816406,9.054687 H 9.417969 L 8.277344,11.457031 H 5.484375 Z m 0,0" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="m 25.985303,9.11922 0.707031,2.027344 c 0.02344,0.05078 0.05859,0.07422 0.121094,0.07422 h 1.359375 c 0.07422,0 0.08594,-0.03516 0.07422,-0.109375 L 25.438428,3.310627 c -0.01172,-0.0625 -0.02344,-0.074219 -0.08594,-0.074219 h -1.6875 c -0.04687,0 -0.07422,0.035156 -0.07422,0.085937 -0.02344,0.410157 -0.05859,0.535157 -0.109375,0.65625 l -2.503906,7.121094 c -0.01172,0.08594 0.01563,0.121094 0.08594,0.121094 h 1.214843 c 0.07422,0 0.109375,-0.02344 0.136719,-0.09766 L 23.082959,9.11922 Z M 23.469678,7.795002 c 0.367187,-1.109375 0.851562,-2.53125 1.046875,-3.34375 h 0.01172 c 0.242188,0.851562 0.8125,2.539062 1.070313,3.34375 z m 0,0" />
|
||||
<path
|
||||
d="m 31.857666,11.341877 c 0.730469,0 1.507813,-0.132813 2.296875,-0.472657 0.0625,-0.02344 0.07422,-0.05078 0.07422,-0.109375 -0.02344,-0.21875 -0.05078,-0.535156 -0.05078,-0.777343 v -7.34375 c 0,-0.046875 0,-0.070313 -0.05859,-0.070313 h -1.324219 c -0.05078,0 -0.07422,0.023438 -0.07422,0.085938 V 5.142658 C 32.513916,5.11922 32.369385,5.107502 32.19751,5.107502 c -2.136719,0 -3.449219,1.410156 -3.449219,3.171875 0,2.042968 1.347656,3.0625 3.109375,3.0625 z m 0.863281,-1.359375 c -0.21875,0.070312 -0.460937,0.097656 -0.707031,0.097656 -0.96875,0 -1.761719,-0.546875 -1.761719,-1.875 0,-1.175781 0.816407,-1.871094 1.898438,-1.871094 0.21875,0 0.410156,0.023438 0.570312,0.085938 z m 0,0" />
|
||||
<path
|
||||
d="m 38.453285,5.107502 c -1.824219,0 -2.953125,1.398437 -2.953125,3.125 0,1.542968 0.898438,3.109375 2.925781,3.109375 1.714844,0 2.917969,-1.261719 2.917969,-3.148438 0,-1.664062 -1.019531,-3.085937 -2.890625,-3.085937 z m -0.07422,1.226562 c 1.03125,0 1.46875,0.886719 1.46875,1.898438 0,1.25 -0.644531,1.871093 -1.394531,1.871093 -0.925781,0 -1.472656,-0.777343 -1.472656,-1.898437 0,-1.152344 0.582031,-1.871094 1.398437,-1.871094 z m 0,0" />
|
||||
<path
|
||||
d="m 42.712968,2.568439 c -0.05078,0 -0.08594,0.023438 -0.08594,0.085938 v 8.3125 c 0,0.03516 0.03516,0.09766 0.08594,0.109375 0.582031,0.179687 1.191406,0.265625 1.820312,0.265625 1.800781,0 3.550781,-1.117188 3.550781,-3.367188 0,-1.628906 -1.117187,-2.867187 -2.867187,-2.867187 -0.402344,0 -0.777344,0.0625 -1.105469,0.171875 L 44.09578,2.666095 c 0,-0.085937 -0.02344,-0.097656 -0.109375,-0.097656 z m 3.875,5.554688 c 0,1.347656 -0.921875,1.980468 -1.917969,1.980468 -0.207031,0 -0.390625,-0.01172 -0.558594,-0.0625 V 6.49422 c 0.191406,-0.074218 0.421875,-0.136718 0.847656,-0.136718 0.960938,0 1.628907,0.609375 1.628907,1.765625 z m 0,0" />
|
||||
<path
|
||||
d="m 53.026024,8.560627 c 0.59375,0 1.082031,-0.011719 1.25,-0.050782 0.0625,-0.011718 0.08594,-0.035156 0.09766,-0.085937 0.03516,-0.132813 0.05078,-0.410156 0.05078,-0.75 0,-1.15625 -0.695312,-2.566406 -2.492187,-2.566406 -1.835938,0 -2.855469,1.496093 -2.855469,3.183593 0,1.496094 0.789063,3.050782 3,3.050782 0.828125,0 1.363281,-0.132813 1.824219,-0.351563 0.04687,-0.02344 0.07031,-0.0625 0.07031,-0.132812 V 9.845783 c 0,-0.058594 -0.03516,-0.070313 -0.07031,-0.046875 -0.460938,0.195312 -0.960938,0.292969 -1.507813,0.292969 -1.238281,0 -1.800781,-0.683594 -1.835937,-1.53125 z m -2.46875,-1.046875 c 0.09766,-0.59375 0.472656,-1.238282 1.3125,-1.238282 0.925781,0 1.167969,0.777344 1.167969,1.128907 0,0.011718 0,0.0625 0,0.097656 -0.05078,0.011719 -0.207032,0.011719 -0.667969,0.011719 z m 0,0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/placeholders/placeholder1.webp
Normal file
BIN
public/placeholders/placeholder1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/placeholders/placeholder2.jpg
Normal file
BIN
public/placeholders/placeholder2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
public/placeholders/placeholder3.avif
Normal file
BIN
public/placeholders/placeholder3.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/placeholders/placeholder4.webp
Normal file
BIN
public/placeholders/placeholder4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
BIN
public/placeholders/placeholder5.jpg
Normal file
BIN
public/placeholders/placeholder5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
12789
registry.json
Normal file
12789
registry.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
512
src/app/globals.css
Normal file
512
src/app/globals.css
Normal file
@@ -0,0 +1,512 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
|
||||
--background: #ffffff;;
|
||||
--card: #fcfcfc;;
|
||||
--foreground: #0f0f00e6;;
|
||||
--primary-cta: #ffae00;;
|
||||
--secondary-cta: #ffffff;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
|
||||
|
||||
/* Base spacing units */
|
||||
--vw-0_25: calc(var(--vw) * 0.25);
|
||||
--vw-0_5: calc(var(--vw) * 0.5);
|
||||
--vw-0_625: calc(var(--vw) * 0.625);
|
||||
--vw-0_75: calc(var(--vw) * 0.75);
|
||||
--vw-1: calc(var(--vw) * 1);
|
||||
--vw-1_25: calc(var(--vw) * 1.25);
|
||||
--vw-1_5: calc(var(--vw) * 1.5);
|
||||
--vw-1_75: calc(var(--vw) * 1.75);
|
||||
--vw-2: calc(var(--vw) * 2);
|
||||
--vw-2_25: calc(var(--vw) * 2.25);
|
||||
--vw-2_5: calc(var(--vw) * 2.5);
|
||||
--vw-2_75: calc(var(--vw) * 2.75);
|
||||
--vw-3: calc(var(--vw) * 3);
|
||||
|
||||
/* width */
|
||||
--width-5: clamp(4rem, 5vw, 6rem);
|
||||
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
|
||||
--width-10: clamp(7.5rem, 10vw, 10rem);
|
||||
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
|
||||
--width-15: clamp(11.25rem, 15vw, 15rem);
|
||||
--width-17: clamp(12.75rem, 17vw, 17rem);
|
||||
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
|
||||
--width-20: clamp(15rem, 20vw, 20rem);
|
||||
--width-21: clamp(15.75rem, 21vw, 21rem);
|
||||
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
|
||||
--width-25: clamp(18.75rem, 25vw, 25rem);
|
||||
--width-26: clamp(19.5rem, 26vw, 26rem);
|
||||
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
|
||||
--width-30: clamp(22.5rem, 30vw, 30rem);
|
||||
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
|
||||
--width-35: clamp(26.25rem, 35vw, 35rem);
|
||||
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
|
||||
--width-40: clamp(30rem, 40vw, 40rem);
|
||||
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
|
||||
--width-45: clamp(33.75rem, 45vw, 45rem);
|
||||
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
|
||||
--width-50: clamp(37.5rem, 50vw, 50rem);
|
||||
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
|
||||
--width-55: clamp(41.25rem, 55vw, 55rem);
|
||||
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
|
||||
--width-60: clamp(45rem, 60vw, 60rem);
|
||||
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
|
||||
--width-65: clamp(48.75rem, 65vw, 65rem);
|
||||
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
|
||||
--width-70: clamp(52.5rem, 70vw, 70rem);
|
||||
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
|
||||
--width-75: clamp(56.25rem, 75vw, 75rem);
|
||||
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
|
||||
--width-80: clamp(60rem, 80vw, 80rem);
|
||||
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
|
||||
--width-85: clamp(63.75rem, 85vw, 85rem);
|
||||
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
|
||||
--width-90: clamp(67.5rem, 90vw, 90rem);
|
||||
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
|
||||
--width-95: clamp(71.25rem, 95vw, 95rem);
|
||||
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
|
||||
--width-100: clamp(75rem, 100vw, 100rem);
|
||||
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
|
||||
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
|
||||
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
|
||||
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
|
||||
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
|
||||
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
|
||||
|
||||
--height-4: 1rem;
|
||||
--height-5: 1.25rem;
|
||||
--height-6: 1.5rem;
|
||||
--height-7: 1.75rem;
|
||||
--height-8: 2rem;
|
||||
--height-9: 2.25rem;
|
||||
--height-10: 2.5rem;
|
||||
--height-11: 2.75rem;
|
||||
--height-12: 3rem;
|
||||
--height-30: 7.5rem;
|
||||
--height-90: 22.5rem;
|
||||
--height-100: 25rem;
|
||||
--height-110: 27.5rem;
|
||||
--height-120: 30rem;
|
||||
--height-130: 32.5rem;
|
||||
--height-140: 35rem;
|
||||
--height-150: 37.5rem;
|
||||
|
||||
/* hero page padding */
|
||||
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
|
||||
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
|
||||
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
|
||||
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:root {
|
||||
/* --vw and text sizing are set by ThemeProvider */
|
||||
/* --vw: 3vw;
|
||||
|
||||
--text-2xs: 2.5vw;
|
||||
--text-xs: 2.75vw;
|
||||
--text-sm: 3vw;
|
||||
--text-base: 3.25vw;
|
||||
--text-lg: 3.5vw;
|
||||
--text-xl: 4.25vw;
|
||||
--text-2xl: 5vw;
|
||||
--text-3xl: 6vw;
|
||||
--text-4xl: 7vw;
|
||||
--text-5xl: 7.5vw;
|
||||
--text-6xl: 8.5vw;
|
||||
--text-7xl: 10vw;
|
||||
--text-8xl: 12vw;
|
||||
--text-9xl: 14vw; */
|
||||
|
||||
--width-5: 5vw;
|
||||
--width-7_5: 7.5vw;
|
||||
--width-10: 10vw;
|
||||
--width-12_5: 12.5vw;
|
||||
--width-15: 15vw;
|
||||
--width-17_5: 17.5vw;
|
||||
--width-20: 20vw;
|
||||
--width-22_5: 22.5vw;
|
||||
--width-25: 25vw;
|
||||
--width-27_5: 27.5vw;
|
||||
--width-30: 30vw;
|
||||
--width-32_5: 32.5vw;
|
||||
--width-35: 35vw;
|
||||
--width-37_5: 37.5vw;
|
||||
--width-40: 40vw;
|
||||
--width-42_5: 42.5vw;
|
||||
--width-45: 45vw;
|
||||
--width-47_5: 47.5vw;
|
||||
--width-50: 50vw;
|
||||
--width-52_5: 52.5vw;
|
||||
--width-55: 55vw;
|
||||
--width-57_5: 57.5vw;
|
||||
--width-60: 60vw;
|
||||
--width-62_5: 62.5vw;
|
||||
--width-65: 65vw;
|
||||
--width-67_5: 67.5vw;
|
||||
--width-70: 70vw;
|
||||
--width-72_5: 72.5vw;
|
||||
--width-75: 75vw;
|
||||
--width-77_5: 77.5vw;
|
||||
--width-80: 80vw;
|
||||
--width-82_5: 82.5vw;
|
||||
--width-85: 85vw;
|
||||
--width-87_5: 87.5vw;
|
||||
--width-90: 90vw;
|
||||
--width-92_5: 92.5vw;
|
||||
--width-95: 95vw;
|
||||
--width-97_5: 97.5vw;
|
||||
--width-100: 100vw;
|
||||
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
|
||||
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
|
||||
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
|
||||
--width-carousel-item-3: var(--width-content-width);
|
||||
--width-carousel-item-4: var(--width-content-width);
|
||||
--width-x-padding-mask-fade: 10vw;
|
||||
|
||||
--height-4: 3.5vw;
|
||||
--height-5: 4.5vw;
|
||||
--height-6: 5.5vw;
|
||||
--height-7: 6.5vw;
|
||||
--height-8: 7.5vw;
|
||||
--height-9: 8.5vw;
|
||||
--height-10: 9vw;
|
||||
--height-11: 10vw;
|
||||
--height-12: 11vw;
|
||||
--height-30: 25vw;
|
||||
--height-90: 81vw;
|
||||
--height-100: 90vw;
|
||||
--height-110: 99vw;
|
||||
--height-120: 108vw;
|
||||
--height-130: 117vw;
|
||||
--height-140: 126vw;
|
||||
--height-150: 135vw;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary-cta: var(--primary-cta);
|
||||
--color-secondary-cta: var(--secondary-cta);
|
||||
--color-accent: var(--accent);
|
||||
--color-background-accent: var(--background-accent);
|
||||
|
||||
/* theme border radius */
|
||||
--radius-theme: var(--theme-border-radius);
|
||||
--radius-theme-capped: var(--theme-border-radius-capped);
|
||||
|
||||
/* text */
|
||||
--text-2xs: var(--text-2xs);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--text-5xl: var(--text-5xl);
|
||||
--text-6xl: var(--text-6xl);
|
||||
--text-7xl: var(--text-7xl);
|
||||
--text-8xl: var(--text-8xl);
|
||||
--text-9xl: var(--text-9xl);
|
||||
|
||||
/* height */
|
||||
--height-4: var(--height-4);
|
||||
--height-5: var(--height-5);
|
||||
--height-6: var(--height-6);
|
||||
--height-7: var(--height-7);
|
||||
--height-8: var(--height-8);
|
||||
--height-9: var(--height-9);
|
||||
--height-11: var(--height-11);
|
||||
--height-12: var(--height-12);
|
||||
|
||||
--height-10: var(--height-10);
|
||||
--height-30: var(--height-30);
|
||||
--height-90: var(--height-90);
|
||||
--height-100: var(--height-100);
|
||||
--height-110: var(--height-110);
|
||||
--height-120: var(--height-120);
|
||||
--height-130: var(--height-130);
|
||||
--height-140: var(--height-140);
|
||||
--height-150: var(--height-150);
|
||||
|
||||
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
|
||||
|
||||
/* width */
|
||||
--width-5: var(--width-5);
|
||||
--width-7_5: var(--width-7_5);
|
||||
--width-10: var(--width-10);
|
||||
--width-12_5: var(--width-12_5);
|
||||
--width-15: var(--width-15);
|
||||
--width-17: var(--width-17);
|
||||
--width-17_5: var(--width-17_5);
|
||||
--width-20: var(--width-20);
|
||||
--width-21: var(--width-21);
|
||||
--width-22_5: var(--width-22_5);
|
||||
--width-25: var(--width-25);
|
||||
--width-26: var(--width-26);
|
||||
--width-27_5: var(--width-27_5);
|
||||
--width-30: var(--width-30);
|
||||
--width-32_5: var(--width-32_5);
|
||||
--width-35: var(--width-35);
|
||||
--width-37_5: var(--width-37_5);
|
||||
--width-40: var(--width-40);
|
||||
--width-42_5: var(--width-42_5);
|
||||
--width-45: var(--width-45);
|
||||
--width-47_5: var(--width-47_5);
|
||||
--width-50: var(--width-50);
|
||||
--width-52_5: var(--width-52_5);
|
||||
--width-55: var(--width-55);
|
||||
--width-57_5: var(--width-57_5);
|
||||
--width-60: var(--width-60);
|
||||
--width-62_5: var(--width-62_5);
|
||||
--width-65: var(--width-65);
|
||||
--width-67_5: var(--width-67_5);
|
||||
--width-70: var(--width-70);
|
||||
--width-72_5: var(--width-72_5);
|
||||
--width-75: var(--width-75);
|
||||
--width-77_5: var(--width-77_5);
|
||||
--width-80: var(--width-80);
|
||||
--width-82_5: var(--width-82_5);
|
||||
--width-85: var(--width-85);
|
||||
--width-87_5: var(--width-87_5);
|
||||
--width-90: var(--width-90);
|
||||
--width-92_5: var(--width-92_5);
|
||||
--width-95: var(--width-95);
|
||||
--width-97_5: var(--width-97_5);
|
||||
--width-100: var(--width-100);
|
||||
--width-content-width: var(--width-content-width);
|
||||
--width-carousel-padding: var(--width-carousel-padding);
|
||||
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
|
||||
--width-carousel-item-3: var(--width-carousel-item-3);
|
||||
--width-carousel-item-4: var(--width-carousel-item-4);
|
||||
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
|
||||
--width-content-width-expanded: var(--width-content-width-expanded);
|
||||
|
||||
/* gap */
|
||||
--spacing-1: var(--vw-0_25);
|
||||
--spacing-2: var(--vw-0_5);
|
||||
--spacing-3: var(--vw-0_75);
|
||||
--spacing-4: var(--vw-1);
|
||||
--spacing-5: var(--vw-1_25);
|
||||
--spacing-6: var(--vw-1_5);
|
||||
--spacing-7: var(--vw-1_75);
|
||||
--spacing-8: var(--vw-2);
|
||||
|
||||
--spacing-x-1: var(--vw-0_25);
|
||||
--spacing-x-2: var(--vw-0_5);
|
||||
--spacing-x-3: var(--vw-0_75);
|
||||
--spacing-x-4: var(--vw-1);
|
||||
--spacing-x-5: var(--vw-1_25);
|
||||
--spacing-x-6: var(--vw-1_5);
|
||||
|
||||
/* border radius */
|
||||
--radius-none: 0;
|
||||
--radius-sm: var(--vw-0_5);
|
||||
--radius: var(--vw-0_75);
|
||||
--radius-md: var(--vw-1);
|
||||
--radius-lg: var(--vw-1_25);
|
||||
--radius-xl: var(--vw-1_75);
|
||||
--radius-full: 999px;
|
||||
|
||||
/* padding */
|
||||
--padding-1: var(--vw-0_25);
|
||||
--padding-2: var(--vw-0_5);
|
||||
--padding-2.5: var(--vw-0_625);
|
||||
--padding-3: var(--vw-0_75);
|
||||
--padding-4: var(--vw-1);
|
||||
--padding-5: var(--vw-1_25);
|
||||
--padding-6: var(--vw-1_5);
|
||||
--padding-7: var(--vw-1_75);
|
||||
--padding-8: var(--vw-2);
|
||||
|
||||
--padding-x-1: var(--vw-0_25);
|
||||
--padding-x-2: var(--vw-0_5);
|
||||
--padding-x-3: var(--vw-0_75);
|
||||
--padding-x-4: var(--vw-1);
|
||||
--padding-x-5: var(--vw-1_25);
|
||||
--padding-x-6: var(--vw-1_5);
|
||||
--padding-x-7: var(--vw-1_75);
|
||||
--padding-x-8: var(--vw-2);
|
||||
|
||||
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
|
||||
--padding-hero-page-padding: var(--padding-hero-page-padding);
|
||||
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
|
||||
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
|
||||
|
||||
/* margin */
|
||||
--margin-1: var(--vw-0_25);
|
||||
--margin-2: var(--vw-0_5);
|
||||
--margin-3: var(--vw-0_75);
|
||||
--margin-4: var(--vw-1);
|
||||
--margin-5: var(--vw-1_25);
|
||||
--margin-6: var(--vw-1_5);
|
||||
--margin-7: var(--vw-1_75);
|
||||
--margin-8: var(--vw-2);
|
||||
|
||||
--margin-x-1: var(--vw-0_25);
|
||||
--margin-x-2: var(--vw-0_5);
|
||||
--margin-x-3: var(--vw-0_75);
|
||||
--margin-x-4: var(--vw-1);
|
||||
--margin-x-5: var(--vw-1_25);
|
||||
--margin-x-6: var(--vw-1_5);
|
||||
--margin-x-7: var(--vw-1_75);
|
||||
--margin-x-8: var(--vw-2);
|
||||
}
|
||||
|
||||
@layer components {}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
|
||||
|
||||
/* .card {
|
||||
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
|
||||
box-shadow:
|
||||
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
|
||||
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
|
||||
} */
|
||||
|
||||
.tag-card {
|
||||
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
|
||||
}
|
||||
|
||||
.mask-padding-x {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
|
||||
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-bottom {
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-bottom-large {
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-bottom-long {
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-top-long {
|
||||
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
|
||||
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
|
||||
}
|
||||
|
||||
.mask-fade-xy {
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
|
||||
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
mask-image:
|
||||
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
|
||||
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
-webkit-mask-composite: source-in;
|
||||
mask-composite: intersect;
|
||||
}
|
||||
|
||||
/* ANIMATION */
|
||||
|
||||
.animation-container {
|
||||
animation:
|
||||
fadeInOpacity 0.8s ease-in-out forwards,
|
||||
fadeInTranslate 0.6s forwards;
|
||||
}
|
||||
|
||||
.animation-container-fade {
|
||||
animation: fadeInOpacity 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInOpacity {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInTranslate {
|
||||
from {
|
||||
transform: translateY(0.75vh);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aurora {
|
||||
from {
|
||||
background-position: 50% 50%, 50% 50%;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 350% 50%, 350% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
}
|
||||
1264
src/app/layout.tsx
Normal file
1264
src/app/layout.tsx
Normal file
File diff suppressed because it is too large
Load Diff
223
src/app/page.tsx
Normal file
223
src/app/page.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Globe, Target, TrendingUp, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="sharp"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="animatedAurora"
|
||||
cardStyle="gradient-subtle"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="outline"
|
||||
headingFontWeight={undefined}
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleMinimal
|
||||
brandName="WW2 History"
|
||||
button={{ text: "Explore", href: "#hero" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Understanding World War II"
|
||||
description="Explore the pivotal events, key figures, and lasting impact of the Second World War. A comprehensive educational journey through history's most significant conflict."
|
||||
kpis={[
|
||||
{ value: "1939-1945", label: "Duration of the War" },
|
||||
{ value: "70M+", label: "Total Casualties" },
|
||||
{ value: "6", label: "Continents Affected" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487266615-27odfkpd.jpg"
|
||||
imageAlt="World War II soldiers in combat"
|
||||
imagePosition="right"
|
||||
buttons={[
|
||||
{ text: "Start Learning", href: "#timeline" },
|
||||
{ text: "Ask Questions", href: "#contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Preserving and teaching the crucial lessons from" },
|
||||
{ type: "text", content: "World War II" }
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#timeline" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="timeline" data-section="timeline">
|
||||
<FeatureCardFourteen
|
||||
title="Major Events & Turning Points"
|
||||
description="Discover the pivotal moments that shaped the course of World War II and changed the world forever"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Invasion of Poland",
|
||||
description: "September 1, 1939 - Germany's attack marks the official start of WWII in Europe",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487825940-nbhikrqd.jpg",
|
||||
imageAlt: "WWII invasion event"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Attack on Pearl Harbor",
|
||||
description: "December 7, 1941 - The surprise attack that brought the United States into the war",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487827533-riaoyaph.jpg",
|
||||
imageAlt: "Pearl Harbor attack historical image"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "D-Day Normandy",
|
||||
description: "June 6, 1944 - The largest amphibious invasion, a turning point in the European theater",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487825940-nbhikrqd.jpg",
|
||||
imageAlt: "D-Day landing at Normandy"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Germany's Surrender",
|
||||
description: "May 7-8, 1945 - Victory in Europe as Germany unconditionally surrenders",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487274091-76zrr6b2.jpg",
|
||||
imageAlt: "Berlin surrender in 1945"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Impact by the Numbers"
|
||||
description="Key statistics that demonstrate the scale and human cost of World War II"
|
||||
metrics={[
|
||||
{ id: "1", icon: Users, title: "Military Deaths", value: "25M+" },
|
||||
{ id: "2", icon: Globe, title: "Civilian Deaths", value: "45M+" },
|
||||
{ id: "3", icon: TrendingUp, title: "Countries Involved", value: "50+" },
|
||||
{ id: "4", icon: Target, title: "Years Duration", value: "6" }
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Common Questions About WW2"
|
||||
description="Get answers to frequently asked questions about the causes, events, and consequences of World War II"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What caused World War II?",
|
||||
content: "WWII resulted from a combination of factors including the Treaty of Versailles, economic depression, rise of fascism, and territorial expansion by Axis powers. The unresolved issues from WWI, combined with aggressive expansionism by Germany, Italy, and Japan, created the conditions for global conflict."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "When did the United States enter the war?",
|
||||
content: "The United States entered WWII on December 8, 1941, the day after the attack on Pearl Harbor. However, the US had been providing aid to the Allies before this through Lend-Lease arrangements. American involvement proved crucial in turning the tide against the Axis powers."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What was the Holocaust?",
|
||||
content: "The Holocaust was the systematic genocide of six million Jews by Nazi Germany and its collaborators between 1941-1945. It also targeted millions of other groups including Romani, disabled persons, political prisoners, and Slavic peoples. It remains one of history's greatest atrocities."
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "How did the war end in Europe?",
|
||||
content: "The war in Europe ended with Germany's unconditional surrender on May 7-8, 1945, after Hitler's suicide. The Allies captured Berlin, and the Soviet Union pushed from the east while American and British forces advanced from the west, leading to the complete defeat of Nazi Germany."
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "When did Japan surrender?",
|
||||
content: "Japan surrendered on August 15, 1945 (V-J Day), following the atomic bombings of Hiroshima and Nagasaki in August 1945 and the Soviet declaration of war. Japan formally signed the Instrument of Surrender on September 2, 1945."
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "What were the Nuremberg Trials?",
|
||||
content: "The Nuremberg Trials were a series of military tribunals held after WWII to prosecute high-ranking Nazi officials and war criminals. They established important precedents for international law and the prosecution of crimes against humanity, ensuring accountability for atrocities committed during the war."
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487828658-7eexw30m.jpg"
|
||||
imageAlt="Historical documentation and archives"
|
||||
mediaPosition="left"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Involved in Education"
|
||||
description="Have questions about WW2 or want to contribute to historical education? Reach out to us. We welcome inquiries from students, educators, and history enthusiasts."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
|
||||
{ name: "institution", type: "text", placeholder: "School or Institution", required: false }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your question or message about WW2 history...",
|
||||
rows: 5,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground="noInvert"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766487830256-uakq8lu4.jpg"
|
||||
imageAlt="Educational classroom environment"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="WW2 History"
|
||||
copyrightText="© 2025 WW2 History Education. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Learning",
|
||||
items: [
|
||||
{ label: "Timeline", href: "#timeline" },
|
||||
{ label: "Key Events", href: "#timeline" },
|
||||
{ label: "Statistics", href: "#metrics" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Subscribe", href: "#contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
146
src/components/Accordion.tsx
Normal file
146
src/components/Accordion.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useCallback, memo } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
interface AccordionProps {
|
||||
index: number;
|
||||
isActive?: boolean;
|
||||
onToggle?: (index: number) => void;
|
||||
title: string;
|
||||
content: string;
|
||||
animationType?: "smooth" | "instant";
|
||||
showCard?: boolean;
|
||||
useInvertedBackground?: "noInvert" | "invertDefault" | "invertCard";
|
||||
className?: string;
|
||||
titleClassName?: string;
|
||||
iconContainerClassName?: string;
|
||||
iconClassName?: string;
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
const Accordion = ({
|
||||
index,
|
||||
isActive: controlledIsActive,
|
||||
onToggle,
|
||||
title,
|
||||
content,
|
||||
animationType = "smooth",
|
||||
showCard = true,
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
iconContainerClassName = "",
|
||||
iconClassName = "",
|
||||
contentClassName = "",
|
||||
}: AccordionProps) => {
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const [height, setHeight] = useState("0px");
|
||||
const [internalIsActive, setInternalIsActive] = useState(false);
|
||||
|
||||
const isActive = controlledIsActive !== undefined ? controlledIsActive : internalIsActive;
|
||||
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = showCard
|
||||
? shouldUseInvertedText(useInvertedBackground, theme.cardStyle)
|
||||
: useInvertedBackground;
|
||||
|
||||
useEffect(() => {
|
||||
if (animationType === "smooth") {
|
||||
setHeight(isActive ? `${contentRef.current?.scrollHeight}px` : "0px");
|
||||
}
|
||||
}, [isActive, animationType]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (controlledIsActive === undefined) {
|
||||
setInternalIsActive(!internalIsActive);
|
||||
}
|
||||
if (onToggle) {
|
||||
onToggle(index);
|
||||
}
|
||||
}, [controlledIsActive, internalIsActive, onToggle, index]);
|
||||
|
||||
const headerContent = (
|
||||
<div className="flex flex-row items-center justify-between w-full">
|
||||
<h2
|
||||
className={cls(
|
||||
"text-base md:text-xl font-medium",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
animationType === "instant" && "text-left",
|
||||
titleClassName
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<div
|
||||
className={cls(
|
||||
"h-8 aspect-square flex items-center justify-center rounded-theme primary-button transition-all duration-300",
|
||||
iconContainerClassName
|
||||
)}
|
||||
>
|
||||
<Plus
|
||||
className={cls(
|
||||
"w-4/10 aspect-square text-background",
|
||||
animationType === "smooth" ? "transition-transform duration-500" : "transition-transform duration-300",
|
||||
isActive && "rotate-45",
|
||||
iconClassName
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const contentElement = (
|
||||
<div
|
||||
className={cls(
|
||||
"text-base",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
animationType === "smooth" && "pt-2",
|
||||
contentClassName
|
||||
)}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
);
|
||||
|
||||
if (animationType === "instant") {
|
||||
return (
|
||||
<div className={cls(showCard && "card rounded-theme", className)}>
|
||||
<button
|
||||
className={cls("cursor-pointer flex flex-row items-center justify-between w-full transition-all duration-300 group", showCard && "p-4")}
|
||||
onClick={handleClick}
|
||||
aria-expanded={isActive}
|
||||
>
|
||||
{headerContent}
|
||||
</button>
|
||||
{isActive && <div className={cls(showCard && "px-4 pb-4")}>{contentElement}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
showCard ? "card p-4 rounded-theme-capped" : "",
|
||||
"cursor-pointer flex flex-col items-center justify-between transition-all duration-500 group",
|
||||
className
|
||||
)}
|
||||
onClick={handleClick}
|
||||
aria-expanded={isActive}
|
||||
>
|
||||
{headerContent}
|
||||
<div
|
||||
ref={contentRef}
|
||||
style={{ maxHeight: height }}
|
||||
className="overflow-hidden transition-[max-height] duration-500 w-full flex flex-col"
|
||||
>
|
||||
{contentElement}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Accordion.displayName = "Accordion";
|
||||
|
||||
export default memo(Accordion);
|
||||
22
src/components/ServiceWrapper.tsx
Normal file
22
src/components/ServiceWrapper.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import Script from 'next/script';
|
||||
|
||||
export function ServiceWrapper({ children }: { children: React.ReactNode }) {
|
||||
const websiteId = process.env.NEXT_PUBLIC_WEBSITE_ANALYTICS_ID;
|
||||
|
||||
return (
|
||||
<>
|
||||
{websiteId && (
|
||||
<Script
|
||||
async
|
||||
defer
|
||||
data-website-id={websiteId}
|
||||
src="https://analytics.webild.io/script.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
290
src/components/Textbox.tsx
Normal file
290
src/components/Textbox.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useMemo } from "react";
|
||||
import Image from "next/image";
|
||||
import TextAnimation from "./text/TextAnimation";
|
||||
import Button from "./button/Button";
|
||||
import Tag from "./shared/Tag";
|
||||
import AvatarGroup from "./shared/AvatarGroup";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import type { AnimationType } from "./text/types";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import type { ButtonConfig } from "@/types/button";
|
||||
import type { Avatar } from "./shared/AvatarGroup";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type TitleSegment =
|
||||
| { type: "text"; content: string }
|
||||
| { type: "image"; src: string; alt?: string };
|
||||
|
||||
interface TextBoxProps {
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
type?: AnimationType;
|
||||
textboxLayout?: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
duration?: number;
|
||||
start?: string;
|
||||
end?: string;
|
||||
gradientColors?: {
|
||||
from: string;
|
||||
to: string;
|
||||
};
|
||||
children?: React.ReactNode;
|
||||
center?: boolean;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagClassName?: string;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
avatars?: Avatar[];
|
||||
avatarText?: string;
|
||||
avatarGroupClassName?: string;
|
||||
}
|
||||
|
||||
const TextBox = ({
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
type,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
duration = 1,
|
||||
start = "top 80%",
|
||||
end = "top 20%",
|
||||
gradientColors,
|
||||
children,
|
||||
center = false,
|
||||
tag,
|
||||
tagIcon: TagIcon,
|
||||
tagClassName = "",
|
||||
buttons,
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
avatars,
|
||||
avatarText,
|
||||
avatarGroupClassName = "",
|
||||
}: TextBoxProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
// Shared tag component
|
||||
const tagElement = useMemo(() => tag && (
|
||||
<Tag
|
||||
text={tag}
|
||||
icon={TagIcon}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cls(textboxLayout === "default" && "mb-3", tagClassName)}
|
||||
/>
|
||||
), [tag, TagIcon, useInvertedBackground, textboxLayout, tagClassName]);
|
||||
|
||||
// Shared title component
|
||||
const titleElement = useMemo(() => (
|
||||
<TextAnimation
|
||||
type={type || theme.defaultTextAnimation}
|
||||
text={title}
|
||||
variant="trigger"
|
||||
as="h2"
|
||||
className={cls(
|
||||
textboxLayout === "split" || textboxLayout === "split-actions" || textboxLayout === "split-description" ? "text-7xl font-medium text-balance" : "text-6xl font-medium",
|
||||
center && textboxLayout === "default" && "text-center",
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
|
||||
titleClassName
|
||||
)}
|
||||
duration={duration}
|
||||
start={start}
|
||||
end={end}
|
||||
gradientColors={gradientColors}
|
||||
/>
|
||||
), [type, theme.defaultTextAnimation, title, textboxLayout, center, useInvertedBackground, titleClassName, duration, start, end, gradientColors]);
|
||||
|
||||
// Inline image title component (used when textboxLayout === "inline-image")
|
||||
const inlineImageTitleElement = useMemo(() => titleSegments && titleSegments.length > 0 ? (
|
||||
<h2
|
||||
className={cls(
|
||||
"text-4xl md:text-5xl font-medium text-center leading-[1.15] text-balance",
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
|
||||
titleClassName
|
||||
)}
|
||||
>
|
||||
{titleSegments.map((segment, index) => {
|
||||
const imageIndex = titleSegments
|
||||
.slice(0, index + 1)
|
||||
.filter(s => s.type === "image").length - 1;
|
||||
|
||||
const element = segment.type === "text" ? (
|
||||
<span key={index}>{segment.content}</span>
|
||||
) : (
|
||||
<span
|
||||
key={index}
|
||||
className={cls(
|
||||
"inline-block relative primary-button -mt-[0.2em] h-[1.1em] w-auto aspect-square align-middle mx-1 p-0.5 rounded-theme",
|
||||
imageIndex % 2 === 0 ? "-rotate-12" : "rotate-12",
|
||||
titleImageWrapperClassName
|
||||
)}
|
||||
>
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={segment.src}
|
||||
alt={segment.alt || ""}
|
||||
width={24}
|
||||
height={24}
|
||||
className={cls(
|
||||
"absolute inset-0 m-auto h-full w-full rounded-theme",
|
||||
titleImageClassName
|
||||
)}
|
||||
unoptimized={segment.src.startsWith("http") || segment.src.startsWith("//")}
|
||||
aria-hidden={!segment.alt || segment.alt === ""}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<span key={index}>
|
||||
{index > 0 && " "}
|
||||
{element}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</h2>
|
||||
) : null, [titleSegments, useInvertedBackground, titleClassName, titleImageWrapperClassName, titleImageClassName]);
|
||||
|
||||
// Shared description component
|
||||
const descriptionElement = useMemo(() => (
|
||||
<TextAnimation
|
||||
type={type || theme.defaultTextAnimation}
|
||||
text={description}
|
||||
variant="words-trigger"
|
||||
as="p"
|
||||
className={cls(
|
||||
"text-lg leading-[1.2]",
|
||||
center && textboxLayout === "default" && "text-center",
|
||||
(textboxLayout === "split" || textboxLayout === "split-description") && "text-balance",
|
||||
(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
|
||||
descriptionClassName
|
||||
)}
|
||||
duration={duration}
|
||||
start={start}
|
||||
end={end}
|
||||
gradientColors={gradientColors}
|
||||
/>
|
||||
), [type, theme.defaultTextAnimation, description, center, textboxLayout, useInvertedBackground, descriptionClassName, duration, start, end, gradientColors]);
|
||||
|
||||
// Shared avatars component
|
||||
const avatarsElement = useMemo(() => avatars && avatars.length > 0 ? (
|
||||
<AvatarGroup
|
||||
avatars={avatars}
|
||||
text={avatarText}
|
||||
className={cls(
|
||||
textboxLayout === "default" && "mt-3",
|
||||
center && textboxLayout === "default" && "justify-center",
|
||||
avatarGroupClassName
|
||||
)}
|
||||
/>
|
||||
) : null, [avatars, avatarText, textboxLayout, center, avatarGroupClassName]);
|
||||
|
||||
// Shared buttons/children component
|
||||
const actionsElement = useMemo(() => buttons && buttons.length > 0 ? (
|
||||
<div className={cls(
|
||||
"flex gap-4",
|
||||
textboxLayout === "default" && "w-full mt-3",
|
||||
(textboxLayout === "split" || textboxLayout === "split-actions") && "w-fit",
|
||||
center && textboxLayout === "default" && "justify-center",
|
||||
buttonContainerClassName
|
||||
)}>
|
||||
{/* Limit to 2 buttons for optimal layout */}
|
||||
{buttons.slice(0, 2).map((button, index) => (
|
||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
), [buttons, textboxLayout, center, buttonContainerClassName, theme.defaultButtonVariant, buttonClassName, buttonTextClassName, children]);
|
||||
|
||||
// Split layout
|
||||
if (textboxLayout === "split") {
|
||||
return (
|
||||
<div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
|
||||
<div className="w-full md:w-6/10 flex flex-col gap-3">
|
||||
{tagElement}
|
||||
{titleElement}
|
||||
{descriptionElement}
|
||||
</div>
|
||||
<div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
|
||||
{actionsElement}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Split actions layout - tag and buttons required, no description
|
||||
if (textboxLayout === "split-actions") {
|
||||
return (
|
||||
<div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
|
||||
<div className="w-full md:w-6/10 flex flex-col gap-3">
|
||||
{tagElement}
|
||||
{titleElement}
|
||||
</div>
|
||||
<div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
|
||||
{actionsElement}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Split description layout - tag + title left, description only right (no buttons)
|
||||
if (textboxLayout === "split-description") {
|
||||
return (
|
||||
<div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
|
||||
<div className="w-full md:w-6/10 flex flex-col gap-3">
|
||||
{tagElement}
|
||||
{titleElement}
|
||||
</div>
|
||||
<div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
|
||||
{descriptionElement}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inline image layout - centered heading with inline images and optional buttons
|
||||
if (textboxLayout === "inline-image") {
|
||||
return (
|
||||
<div className={cls("flex flex-col gap-3 md:gap-1", center && "items-center text-center", className)}>
|
||||
{inlineImageTitleElement}
|
||||
{actionsElement}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Default layout
|
||||
return (
|
||||
<div className={cls("flex flex-col gap-3 md:gap-1", center && "items-center text-center", className)}>
|
||||
{tagElement}
|
||||
{titleElement}
|
||||
{descriptionElement}
|
||||
{actionsElement}
|
||||
{avatarsElement}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
TextBox.displayName = "TextBox";
|
||||
|
||||
export default memo(TextBox);
|
||||
44
src/components/background/AnimatedAuroraBackground.tsx
Normal file
44
src/components/background/AnimatedAuroraBackground.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
import React, { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface AnimatedAuroraBackgroundProps {
|
||||
className?: string;
|
||||
showRadialGradient?: boolean;
|
||||
/**
|
||||
* Inverts the aurora colors for better visibility.
|
||||
* Use `true` for light backgrounds (makes aurora darker/inverted)
|
||||
* Use `false` for dark backgrounds (keeps aurora colors vibrant)
|
||||
*/
|
||||
invertColors: boolean;
|
||||
}
|
||||
|
||||
const AnimatedAuroraBackground = ({
|
||||
className,
|
||||
showRadialGradient = true,
|
||||
invertColors,
|
||||
}: AnimatedAuroraBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
"fixed inset-0 -z-10 bg-background",
|
||||
className
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden opacity-30">
|
||||
<div
|
||||
className={cls(
|
||||
"[--base-gradient:repeating-linear-gradient(100deg,var(--background)_0%,var(--background)_7%,transparent_10%,transparent_12%,var(--background)_16%)] [--aurora:repeating-linear-gradient(100deg,var(--color-primary-cta)_10%,var(--color-accent)_15%,var(--color-secondary-cta)_20%,var(--color-accent)_25%,var(--color-primary-cta)_30%)] [background-image:var(--base-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] filter blur-[10px] after:content-[''] after:absolute after:inset-0 after:[background-image:var(--base-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[animation:aurora_60s_linear_infinite] after:[background-attachment:fixed] after:mix-blend-difference pointer-events-none absolute -inset-[10px] opacity-30 will-change-transform",
|
||||
invertColors && "invert",
|
||||
showRadialGradient && "[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]"
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnimatedAuroraBackground.displayName = "AnimatedAuroraBackground";
|
||||
|
||||
export default memo(AnimatedAuroraBackground);
|
||||
111
src/components/background/AnimatedGridBackground.tsx
Normal file
111
src/components/background/AnimatedGridBackground.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useEffect, useId, useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface AnimatedGridBackgroundProps {
|
||||
className?: string;
|
||||
squareSize?: number;
|
||||
numSquares?: number;
|
||||
maxOpacity?: number;
|
||||
perspectiveThreeD?: boolean;
|
||||
}
|
||||
|
||||
const AnimatedGridBackground = ({
|
||||
className = "",
|
||||
squareSize = 100,
|
||||
numSquares = 50,
|
||||
maxOpacity = 0.15,
|
||||
perspectiveThreeD = true,
|
||||
}: AnimatedGridBackgroundProps) => {
|
||||
const id = useId();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
const [squares, setSquares] = useState<Array<{ id: number; pos: [number, number] }>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (containerRef.current) {
|
||||
const { width, height } = containerRef.current.getBoundingClientRect();
|
||||
setDimensions({ width, height });
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (dimensions.width && dimensions.height) {
|
||||
const cols = Math.ceil(dimensions.width / squareSize);
|
||||
const rows = Math.ceil(dimensions.height / squareSize);
|
||||
|
||||
const newSquares = Array.from({ length: numSquares }, (_, i) => ({
|
||||
id: i,
|
||||
pos: [
|
||||
Math.floor(Math.random() * cols),
|
||||
Math.floor(Math.random() * rows),
|
||||
] as [number, number],
|
||||
}));
|
||||
|
||||
setSquares(newSquares);
|
||||
}
|
||||
}, [dimensions, squareSize, numSquares]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cls(
|
||||
"fixed inset-0 -z-10 overflow-hidden [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
|
||||
perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
|
||||
className
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id={`grid-${id}`}
|
||||
width={squareSize}
|
||||
height={squareSize}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path
|
||||
d={`M ${squareSize} 0 L 0 0 0 ${squareSize}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
className="text-accent/20"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill={`url(#grid-${id})`} />
|
||||
{squares.map(({ id, pos: [x, y] }) => (
|
||||
<motion.rect
|
||||
key={id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: [0, maxOpacity, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: Math.random() * 2 + 2,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 2,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
x={x * squareSize}
|
||||
y={y * squareSize}
|
||||
width={squareSize}
|
||||
height={squareSize}
|
||||
fill="var(--color-background-accent)"
|
||||
strokeWidth="0"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnimatedGridBackground.displayName = "AnimatedGridBackground";
|
||||
|
||||
export default memo(AnimatedGridBackground);
|
||||
32
src/components/background/AuroraBackground.tsx
Normal file
32
src/components/background/AuroraBackground.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface AuroraBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const AuroraBackground = ({
|
||||
className = "",
|
||||
}: AuroraBackgroundProps) => {
|
||||
return (
|
||||
<div className={cls("fixed inset-0 z-0 w-full h-full bg-background", className)}>
|
||||
<div className="absolute top-0 left-0 w-full h-full z-10 backdrop-blur-3xl" ></div>
|
||||
{/* top center */}
|
||||
<div className="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-[120%] w-[9vw] h-[110vh] bg-background-accent/10 -rotate-[52.5deg] rounded-[100%]" />
|
||||
{/* top right */}
|
||||
<div className="absolute top-[-20vh] right-[2.5vw] -translate-x-[0%] w-[12.5vw] h-[100vh] bg-background-accent/10 -rotate-[60deg] rounded-[100%]" />
|
||||
{/* center left */}
|
||||
<div className="absolute top-[-20vh] left-[2vw] -translate-x-[0%] w-[15vw] h-[150vh] bg-background-accent/10 -rotate-[45deg] rounded-[100%]" />
|
||||
{/* top left */}
|
||||
<div className="absolute top-[-30vh] left-0 -translate-x-[0%] w-[10vw] h-[70vh] bg-background-accent/10 -rotate-[45deg] rounded-[100%]" />
|
||||
{/* bottom center */}
|
||||
<div className="absolute bottom-[-40vh] left-0 -translate-x-[0%] w-[120vw] h-[50vh] bg-background-accent/5 -rotate-[20deg] rounded-[100%]" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AuroraBackground.displayName = "AuroraBackground";
|
||||
|
||||
export default memo(AuroraBackground);
|
||||
58
src/components/background/BlurBottomBackground.tsx
Normal file
58
src/components/background/BlurBottomBackground.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useState, useEffect, useCallback } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
|
||||
const BOTTOM_THRESHOLD = 50;
|
||||
const TOP_THRESHOLD = 50;
|
||||
|
||||
interface BlurBottomBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const BlurBottomBackground = ({
|
||||
className = ""
|
||||
}: BlurBottomBackgroundProps) => {
|
||||
const [isAtBottom, setIsAtBottom] = useState(false);
|
||||
const [isAtTop, setIsAtTop] = useState(true);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
|
||||
const distanceFromBottom = documentHeight - (scrollTop + windowHeight);
|
||||
|
||||
setIsAtTop(scrollTop <= TOP_THRESHOLD);
|
||||
setIsAtBottom(distanceFromBottom <= BOTTOM_THRESHOLD);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
handleScroll();
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
window.addEventListener("resize", handleScroll, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", handleScroll);
|
||||
};
|
||||
}, [handleScroll]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
"fixed pointer-events-none backdrop-blur-xl w-full h-50 left-0 bottom-0 z-[500] transition-opacity duration-500 ease-out",
|
||||
isAtTop || isAtBottom ? "opacity-0" : "opacity-100",
|
||||
className
|
||||
)}
|
||||
style={{ maskImage: MASK_GRADIENT }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
BlurBottomBackground.displayName = "BlurBottomBackground";
|
||||
|
||||
export default memo(BlurBottomBackground);
|
||||
48
src/components/background/CircleGradientBackground.tsx
Normal file
48
src/components/background/CircleGradientBackground.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
type DiagonalVariant = "primary" | "secondary";
|
||||
|
||||
interface CircleGradientBackgroundProps {
|
||||
className?: string;
|
||||
diagonal?: DiagonalVariant;
|
||||
}
|
||||
|
||||
const CircleGradientBackground = ({
|
||||
className = "",
|
||||
diagonal = "primary",
|
||||
}: CircleGradientBackgroundProps) => {
|
||||
const isPrimary = diagonal === "primary";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed top-0 left-0 right-0 bottom-0 h-screen w-full -z-10 overflow-hidden", className)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
|
||||
isPrimary ? "top-0 right-0 translate-x-1/2 -translate-y-1/2" : "top-0 left-0 -translate-x-1/2 -translate-y-1/2"
|
||||
)}
|
||||
style={{
|
||||
background: `radial-gradient(circle at center, var(--color-background-accent) 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={cls(
|
||||
"fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
|
||||
isPrimary ? "bottom-0 left-0 -translate-x-1/2 translate-y-1/2" : "bottom-0 right-0 translate-x-1/2 translate-y-1/2"
|
||||
)}
|
||||
style={{
|
||||
background: `radial-gradient(circle at center, var(--color-background-accent) 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CircleGradientBackground.displayName = "CircleGradientBackground";
|
||||
|
||||
export default memo(CircleGradientBackground);
|
||||
45
src/components/background/DotGridBackground.tsx
Normal file
45
src/components/background/DotGridBackground.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
type GridSize = "small" | "medium" | "large";
|
||||
|
||||
interface DotGridBackgroundProps {
|
||||
size?: GridSize;
|
||||
className?: string;
|
||||
perspectiveThreeD?: boolean;
|
||||
}
|
||||
|
||||
const GRID_SIZES: Record<GridSize, string> = {
|
||||
small: "1vw 1vw",
|
||||
medium: "2vw 2vw",
|
||||
large: "4vw 4vw",
|
||||
};
|
||||
|
||||
const DotGridBackground = ({
|
||||
size = "medium",
|
||||
className = "",
|
||||
perspectiveThreeD = false
|
||||
}: DotGridBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
"fixed inset-0 -z-10 bg-background [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
|
||||
perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, color-mix(in srgb, var(--background-accent) 30%, transparent) 1px, transparent 1px)",
|
||||
backgroundSize: GRID_SIZES[size],
|
||||
backgroundRepeat: "repeat",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
DotGridBackground.displayName = "DotGridBackground";
|
||||
|
||||
export default memo(DotGridBackground);
|
||||
277
src/components/background/FluidBackground.tsx
Normal file
277
src/components/background/FluidBackground.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useMemo, memo, useEffect, useState } from 'react';
|
||||
import { Canvas, useFrame, extend, useThree } from '@react-three/fiber';
|
||||
import { shaderMaterial } from '@react-three/drei';
|
||||
import * as THREE from 'three';
|
||||
import { cls } from '@/lib/utils';
|
||||
|
||||
const getComputedColor = (varName: string): THREE.Color => {
|
||||
if (typeof window === 'undefined') return new THREE.Color(0x000000);
|
||||
const styles = getComputedStyle(document.documentElement);
|
||||
const colorString = styles.getPropertyValue(varName).trim();
|
||||
return new THREE.Color(colorString || '#000000');
|
||||
};
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
#ifdef GL_ES
|
||||
precision lowp float;
|
||||
#endif
|
||||
uniform float iTime;
|
||||
uniform vec2 iResolution;
|
||||
uniform vec3 uBackgroundColor;
|
||||
uniform vec3 uPrimaryCta;
|
||||
uniform vec3 uAccent;
|
||||
uniform vec3 uSecondaryCta;
|
||||
varying vec2 vUv;
|
||||
|
||||
vec4 buf[8];
|
||||
|
||||
vec4 sigmoid(vec4 x) { return 1. / (1. + exp(-x)); }
|
||||
|
||||
vec4 cppn_fn(vec2 coordinate, float in0, float in1, float in2) {
|
||||
buf[6] = vec4(coordinate.x, coordinate.y, 0.3948333106474662 + in0, 0.36 + in1);
|
||||
buf[7] = vec4(0.14 + in2, sqrt(coordinate.x * coordinate.x + coordinate.y * coordinate.y), 0., 0.);
|
||||
|
||||
buf[0] = mat4(vec4(6.5404263, -3.6126034, 0.7590882, -1.13613), vec4(2.4582713, 3.1660357, 1.2219609, 0.06276096), vec4(-5.478085, -6.159632, 1.8701609, -4.7742867), vec4(6.039214, -5.542865, -0.90925294, 3.251348))
|
||||
* buf[6]
|
||||
+ mat4(vec4(0.8473259, -5.722911, 3.975766, 1.6522468), vec4(-0.24321538, 0.5839259, -1.7661959, -5.350116), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
|
||||
* buf[7]
|
||||
+ vec4(0.21808943, 1.1243913, -1.7969975, 5.0294676);
|
||||
|
||||
buf[1] = mat4(vec4(-3.3522482, -6.0612736, 0.55641043, -4.4719114), vec4(0.8631464, 1.7432913, 5.643898, 1.6106541), vec4(2.4941394, -3.5012043, 1.7184316, 6.357333), vec4(3.310376, 8.209261, 1.1355612, -1.165539))
|
||||
* buf[6]
|
||||
+ mat4(vec4(5.24046, -13.034365, 0.009859298, 15.870829), vec4(2.987511, 3.129433, -0.89023495, -1.6822904), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
|
||||
* buf[7]
|
||||
+ vec4(-5.9457836, -6.573602, -0.8812491, 1.5436668);
|
||||
|
||||
buf[0] = sigmoid(buf[0]);
|
||||
buf[1] = sigmoid(buf[1]);
|
||||
|
||||
buf[2] = mat4(vec4(-15.219568, 8.095543, -2.429353, -1.9381982), vec4(-5.951362, 4.3115187, 2.6393783, 1.274315), vec4(-7.3145227, 6.7297835, 5.2473326, 5.9411426), vec4(5.0796127, 8.979051, -1.7278991, -1.158976))
|
||||
* buf[6]
|
||||
+ mat4(vec4(-11.967154, -11.608155, 6.1486754, 11.237008), vec4(2.124141, -6.263192, -1.7050359, -0.7021966), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
|
||||
* buf[7]
|
||||
+ vec4(-4.17164, -3.2281182, -4.576417, -3.6401186);
|
||||
|
||||
buf[3] = mat4(vec4(3.1832156, -13.738922, 1.879223, 3.233465), vec4(0.64300746, 12.768129, 1.9141049, 0.50990224), vec4(-0.049295485, 4.4807224, 1.4733979, 1.801449), vec4(5.0039253, 13.000481, 3.3991797, -4.5561905))
|
||||
* buf[6]
|
||||
+ mat4(vec4(-0.1285731, 7.720628, -3.1425676, 4.742367), vec4(0.6393625, 3.714393, -0.8108378, -0.39174938), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
|
||||
* buf[7]
|
||||
+ vec4(-1.1811101, -21.621881, 0.7851888, 1.2329718);
|
||||
|
||||
buf[2] = sigmoid(buf[2]);
|
||||
buf[3] = sigmoid(buf[3]);
|
||||
|
||||
buf[4] = mat4(vec4(5.214916, -7.183024, 2.7228765, 2.6592617), vec4(-5.601878, -25.3591, 4.067988, 0.4602802), vec4(-10.57759, 24.286327, 21.102104, 37.546658), vec4(4.3024497, -1.9625226, 2.3458803, -1.372816))
|
||||
* buf[0]
|
||||
+ mat4(vec4(-17.6526, -10.507558, 2.2587414, 12.462782), vec4(6.265566, -502.75443, -12.642513, 0.9112289), vec4(-10.983244, 20.741234, -9.701768, -0.7635988), vec4(5.383626, 1.4819539, -4.1911616, -4.8444734))
|
||||
* buf[1]
|
||||
+ mat4(vec4(12.785233, -16.345072, -0.39901125, 1.7955981), vec4(-30.48365, -1.8345358, 1.4542528, -1.1118771), vec4(19.872723, -7.337935, -42.941723, -98.52709), vec4(8.337645, -2.7312303, -2.2927687, -36.142323))
|
||||
* buf[2]
|
||||
+ mat4(vec4(-16.298317, 3.5471997, -0.44300047, -9.444417), vec4(57.5077, -35.609753, 16.163465, -4.1534753), vec4(-0.07470326, -3.8656476, -7.0901804, 3.1523974), vec4(-12.559385, -7.077619, 1.490437, -0.8211543))
|
||||
* buf[3]
|
||||
+ vec4(-7.67914, 15.927437, 1.3207729, -1.6686112);
|
||||
|
||||
buf[5] = mat4(vec4(-1.4109162, -0.372762, -3.770383, -21.367174), vec4(-6.2103205, -9.35908, 0.92529047, 8.82561), vec4(11.460242, -22.348068, 13.625772, -18.693201), vec4(-0.3429052, -3.9905605, -2.4626114, -0.45033523))
|
||||
* buf[0]
|
||||
+ mat4(vec4(7.3481627, -4.3661838, -6.3037653, -3.868115), vec4(1.5462853, 6.5488915, 1.9701879, -0.58291394), vec4(6.5858274, -2.2180402, 3.7127688, -1.3730392), vec4(-5.7973905, 10.134961, -2.3395722, -5.965605))
|
||||
* buf[1]
|
||||
+ mat4(vec4(-2.5132585, -6.6685553, -1.4029363, -0.16285264), vec4(-0.37908727, 0.53738135, 4.389061, -1.3024765), vec4(-0.70647055, 2.0111287, -5.1659346, -3.728635), vec4(-13.562562, 10.487719, -0.9173751, -2.6487076))
|
||||
* buf[2]
|
||||
+ mat4(vec4(-8.645013, 6.5546675, -6.3944063, -5.5933375), vec4(-0.57783127, -1.077275, 36.91025, 5.736769), vec4(14.283112, 3.7146652, 7.1452246, -4.5958776), vec4(2.7192075, 3.6021907, -4.366337, -2.3653464))
|
||||
* buf[3]
|
||||
+ vec4(-5.9000807, -4.329569, 1.2427121, 8.59503);
|
||||
|
||||
buf[4] = sigmoid(buf[4]);
|
||||
buf[5] = sigmoid(buf[5]);
|
||||
|
||||
buf[6] = mat4(vec4(-1.61102, 0.7970257, 1.4675229, 0.20917463), vec4(-28.793737, -7.1390953, 1.5025433, 4.656581), vec4(-10.94861, 39.66238, 0.74318546, -10.095605), vec4(-0.7229728, -1.5483948, 0.7301322, 2.1687684))
|
||||
* buf[0]
|
||||
+ mat4(vec4(3.2547753, 21.489103, -1.0194173, -3.3100595), vec4(-3.7316632, -3.3792162, -7.223193, -0.23685838), vec4(13.1804495, 0.7916005, 5.338587, 5.687114), vec4(-4.167605, -17.798311, -6.815736, -1.6451967))
|
||||
* buf[1]
|
||||
+ mat4(vec4(0.604885, -7.800309, -7.213122, -2.741014), vec4(-3.522382, -0.12359311, -0.5258442, 0.43852118), vec4(9.6752825, -22.853785, 2.062431, 0.099892326), vec4(-4.3196306, -17.730087, 2.5184598, 5.30267))
|
||||
* buf[2]
|
||||
+ mat4(vec4(-6.545563, -15.790176, -6.0438633, -5.415399), vec4(-43.591583, 28.551912, -16.00161, 18.84728), vec4(4.212382, 8.394307, 3.0958717, 8.657522), vec4(-5.0237565, -4.450633, -4.4768, -5.5010443))
|
||||
* buf[3]
|
||||
+ mat4(vec4(1.6985557, -67.05806, 6.897715, 1.9004834), vec4(1.8680354, 2.3915145, 2.5231109, 4.081538), vec4(11.158006, 1.7294737, 2.0738268, 7.386411), vec4(-4.256034, -306.24686, 8.258898, -17.132736))
|
||||
* buf[4]
|
||||
+ mat4(vec4(1.6889864, -4.5852966, 3.8534803, -6.3482175), vec4(1.3543309, -1.2640043, 9.932754, 2.9079645), vec4(-5.2770967, 0.07150358, -0.13962056, 3.3269649), vec4(28.34703, -4.918278, 6.1044083, 4.085355))
|
||||
* buf[5]
|
||||
+ vec4(6.6818056, 12.522166, -3.7075126, -4.104386);
|
||||
|
||||
buf[7] = mat4(vec4(-8.265602, -4.7027016, 5.098234, 0.7509808), vec4(8.6507845, -17.15949, 16.51939, -8.884479), vec4(-4.036479, -2.3946867, -2.6055532, -1.9866527), vec4(-2.2167742, -1.8135649, -5.9759874, 4.8846445))
|
||||
* buf[0]
|
||||
+ mat4(vec4(6.7790847, 3.5076547, -2.8191125, -2.7028968), vec4(-5.743024, -0.27844876, 1.4958696, -5.0517144), vec4(13.122226, 15.735168, -2.9397483, -4.101023), vec4(-14.375265, -5.030483, -6.2599335, 2.9848232))
|
||||
* buf[1]
|
||||
+ mat4(vec4(4.0950394, -0.94011575, -5.674733, 4.755022), vec4(4.3809423, 4.8310084, 1.7425908, -3.437416), vec4(2.117492, 0.16342592, -104.56341, 16.949184), vec4(-5.22543, -2.994248, 3.8350096, -1.9364246))
|
||||
* buf[2]
|
||||
+ mat4(vec4(-5.900337, 1.7946124, -13.604192, -3.8060522), vec4(6.6583457, 31.911177, 25.164474, 91.81147), vec4(11.840538, 4.1503043, -0.7314397, 6.768467), vec4(-6.3967767, 4.034772, 6.1714606, -0.32874924))
|
||||
* buf[3]
|
||||
+ mat4(vec4(3.4992442, -196.91893, -8.923708, 2.8142626), vec4(3.4806502, -3.1846354, 5.1725626, 5.1804223), vec4(-2.4009497, 15.585794, 1.2863957, 2.0252278), vec4(-71.25271, -62.441242, -8.138444, 0.50670296))
|
||||
* buf[4]
|
||||
+ mat4(vec4(-12.291733, -11.176166, -7.3474145, 4.390294), vec4(10.805477, 5.6337385, -0.9385842, -4.7348723), vec4(-12.869276, -7.039391, 5.3029537, 7.5436664), vec4(1.4593618, 8.91898, 3.5101583, 5.840625))
|
||||
* buf[5]
|
||||
+ vec4(2.2415268, -6.705987, -0.98861027, -2.117676);
|
||||
|
||||
buf[6] = sigmoid(buf[6]);
|
||||
buf[7] = sigmoid(buf[7]);
|
||||
|
||||
buf[0] = mat4(vec4(1.6794263, 1.3817469, 2.9625452, 0.0), vec4(-1.8834411, -1.4806935, -3.5924516, 0.0), vec4(-1.3279216, -1.0918057, -2.3124623, 0.0), vec4(0.2662234, 0.23235129, 0.44178495, 0.0))
|
||||
* buf[0]
|
||||
+ mat4(vec4(-0.6299101, -0.5945583, -0.9125601, 0.0), vec4(0.17828953, 0.18300213, 0.18182953, 0.0), vec4(-2.96544, -2.5819945, -4.9001055, 0.0), vec4(1.4195864, 1.1868085, 2.5176322, 0.0))
|
||||
* buf[1]
|
||||
+ mat4(vec4(-1.2584374, -1.0552157, -2.1688404, 0.0), vec4(-0.7200217, -0.52666044, -1.438251, 0.0), vec4(0.15345335, 0.15196142, 0.272854, 0.0), vec4(0.945728, 0.8861938, 1.2766753, 0.0))
|
||||
* buf[2]
|
||||
+ mat4(vec4(-2.4218085, -1.968602, -4.35166, 0.0), vec4(-22.683098, -18.0544, -41.954372, 0.0), vec4(0.63792, 0.5470648, 1.1078634, 0.0), vec4(-1.5489894, -1.3075932, -2.6444845, 0.0))
|
||||
* buf[3]
|
||||
+ mat4(vec4(-0.49252132, -0.39877754, -0.91366625, 0.0), vec4(0.95609266, 0.7923952, 1.640221, 0.0), vec4(0.30616966, 0.15693925, 0.8639857, 0.0), vec4(1.1825981, 0.94504964, 2.176963, 0.0))
|
||||
* buf[4]
|
||||
+ mat4(vec4(0.35446745, 0.3293795, 0.59547555, 0.0), vec4(-0.58784515, -0.48177817, -1.0614829, 0.0), vec4(2.5271258, 1.9991658, 4.6846647, 0.0), vec4(0.13042648, 0.08864098, 0.30187556, 0.0))
|
||||
* buf[5]
|
||||
+ mat4(vec4(-1.7718065, -1.4033192, -3.3355875, 0.0), vec4(3.1664357, 2.638297, 5.378702, 0.0), vec4(-3.1724713, -2.6107926, -5.549295, 0.0), vec4(-2.851368, -2.249092, -5.3013067, 0.0))
|
||||
* buf[6]
|
||||
+ mat4(vec4(1.5203838, 1.2212278, 2.8404984, 0.0), vec4(1.5210563, 1.2651345, 2.683903, 0.0), vec4(2.9789467, 2.4364579, 5.2347264, 0.0), vec4(2.2270417, 1.8825914, 3.8028636, 0.0))
|
||||
* buf[7]
|
||||
+ vec4(-1.5468478, -3.6171484, 0.24762098, 0.0);
|
||||
|
||||
buf[0] = sigmoid(buf[0]);
|
||||
return vec4(buf[0].x , buf[0].y , buf[0].z, 1.0);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv * 2.0 - 1.0; uv.y *= -1.0;
|
||||
vec4 pattern = cppn_fn(uv, 0.1 * sin(0.3 * iTime), 0.1 * sin(0.69 * iTime), 0.1 * sin(0.44 * iTime));
|
||||
|
||||
vec3 color1 = mix(uBackgroundColor, uPrimaryCta, pattern.x);
|
||||
vec3 color2 = mix(uBackgroundColor, uAccent, pattern.y);
|
||||
vec3 color3 = mix(uBackgroundColor, uSecondaryCta, pattern.z);
|
||||
|
||||
vec3 finalColor = (color1 + color2 + color3) / 3.0;
|
||||
|
||||
gl_FragColor = vec4(finalColor, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const CPPNShaderMaterial = shaderMaterial(
|
||||
{
|
||||
iTime: 0,
|
||||
iResolution: new THREE.Vector2(1, 1),
|
||||
uBackgroundColor: new THREE.Color(0x000000),
|
||||
uPrimaryCta: new THREE.Color(0xff0000),
|
||||
uAccent: new THREE.Color(0x00ff00),
|
||||
uSecondaryCta: new THREE.Color(0x0000ff),
|
||||
},
|
||||
vertexShader,
|
||||
fragmentShader
|
||||
);
|
||||
|
||||
extend({ CPPNShaderMaterial });
|
||||
|
||||
interface ShaderPlaneProps {
|
||||
backgroundColor: THREE.Color;
|
||||
primaryCta: THREE.Color;
|
||||
accent: THREE.Color;
|
||||
secondaryCta: THREE.Color;
|
||||
}
|
||||
|
||||
const ShaderPlane = memo(({ backgroundColor, primaryCta, accent, secondaryCta }: ShaderPlaneProps) => {
|
||||
const meshRef = useRef<THREE.Mesh>(null!);
|
||||
const materialRef = useRef<THREE.ShaderMaterial & {
|
||||
iTime: number;
|
||||
iResolution: THREE.Vector2;
|
||||
uBackgroundColor: THREE.Color;
|
||||
uPrimaryCta: THREE.Color;
|
||||
uAccent: THREE.Color;
|
||||
uSecondaryCta: THREE.Color;
|
||||
}>(null!);
|
||||
const { viewport } = useThree();
|
||||
|
||||
useFrame((state) => {
|
||||
if (!materialRef.current) return;
|
||||
materialRef.current.iTime = state.clock.elapsedTime;
|
||||
const { width, height } = state.size;
|
||||
materialRef.current.iResolution.set(width, height);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!materialRef.current) return;
|
||||
materialRef.current.uBackgroundColor = backgroundColor;
|
||||
materialRef.current.uPrimaryCta = primaryCta;
|
||||
materialRef.current.uAccent = accent;
|
||||
materialRef.current.uSecondaryCta = secondaryCta;
|
||||
}, [backgroundColor, primaryCta, accent, secondaryCta]);
|
||||
|
||||
return (
|
||||
<mesh ref={meshRef} position={[0, 0, 0]}>
|
||||
<planeGeometry args={[viewport.width, viewport.height]} />
|
||||
<cPPNShaderMaterial ref={materialRef} side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
);
|
||||
});
|
||||
|
||||
ShaderPlane.displayName = 'ShaderPlane';
|
||||
|
||||
interface FluidBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const FluidBackground = ({ className = "" }: FluidBackgroundProps) => {
|
||||
const camera = useMemo(() => ({ position: [0, 0, 5] as [number, number, number], fov: 75, near: 0.1, far: 1000 }), []);
|
||||
|
||||
const [colors, setColors] = useState({
|
||||
background: new THREE.Color(0x000000),
|
||||
primaryCta: new THREE.Color(0xff0000),
|
||||
accent: new THREE.Color(0x00ff00),
|
||||
secondaryCta: new THREE.Color(0x0000ff),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const updateColors = () => {
|
||||
setColors({
|
||||
background: getComputedColor('--background'),
|
||||
primaryCta: getComputedColor('--color-primary-cta'),
|
||||
accent: getComputedColor('--color-accent'),
|
||||
secondaryCta: getComputedColor('--color-secondary-cta'),
|
||||
});
|
||||
};
|
||||
|
||||
updateColors();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={cls("bg-background fixed inset-0 -z-10 w-full h-full", className)} aria-hidden="true">
|
||||
<Canvas
|
||||
camera={camera}
|
||||
gl={{ antialias: true, alpha: false }}
|
||||
dpr={[1, 2]}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
>
|
||||
<ShaderPlane
|
||||
backgroundColor={colors.background}
|
||||
primaryCta={colors.primaryCta}
|
||||
accent={colors.accent}
|
||||
secondaryCta={colors.secondaryCta}
|
||||
/>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FluidBackground.displayName = 'FluidBackground';
|
||||
|
||||
export default memo(FluidBackground);
|
||||
|
||||
declare module '@react-three/fiber' {
|
||||
interface ThreeElements {
|
||||
cPPNShaderMaterial: unknown;
|
||||
}
|
||||
}
|
||||
67
src/components/background/GradientBarsBackground.tsx
Normal file
67
src/components/background/GradientBarsBackground.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import { cls } from '@/lib/utils';
|
||||
|
||||
interface GradientBarsBackgroundProps {
|
||||
className?: string;
|
||||
numBars?: number;
|
||||
gradientFrom?: string;
|
||||
gradientTo?: string;
|
||||
opacity?: number;
|
||||
}
|
||||
|
||||
const GradientBarsBackground = ({
|
||||
className = "",
|
||||
numBars = 15,
|
||||
gradientFrom = "var(--color-primary-cta)",
|
||||
gradientTo = "transparent",
|
||||
opacity = 0.5,
|
||||
}: GradientBarsBackgroundProps) => {
|
||||
const calculateHeight = (index: number, total: number): number => {
|
||||
const position = index / (total - 1);
|
||||
const maxHeight = 100;
|
||||
const minHeight = 30;
|
||||
|
||||
const center = 0.5;
|
||||
const distanceFromCenter = Math.abs(position - center);
|
||||
const heightPercentage = Math.pow(distanceFromCenter * 2, 1.2);
|
||||
|
||||
return minHeight + (maxHeight - minHeight) * heightPercentage;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed inset-0 -z-10 overflow-hidden", className)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="flex h-full w-full backface-hidden antialiased"
|
||||
style={{
|
||||
transform: 'translateZ(0)',
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: numBars }).map((_, index) => {
|
||||
const height = calculateHeight(index, numBars);
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="h-full origin-bottom box-border"
|
||||
style={{
|
||||
flex: `1 0 calc(100% / ${numBars})`,
|
||||
maxWidth: `calc(100% / ${numBars})`,
|
||||
background: `linear-gradient(to top, ${gradientFrom}, ${gradientTo})`,
|
||||
transform: `scaleY(${height / 100})`,
|
||||
opacity: opacity,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
GradientBarsBackground.displayName = 'GradientBarsBackground';
|
||||
|
||||
export default memo(GradientBarsBackground);
|
||||
45
src/components/background/GridBackround.tsx
Normal file
45
src/components/background/GridBackround.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
type GridSize = "small" | "medium" | "large";
|
||||
|
||||
interface GridBackroundProps {
|
||||
size?: GridSize;
|
||||
className?: string;
|
||||
perspectiveThreeD?: boolean;
|
||||
}
|
||||
|
||||
const GRID_SIZES: Record<GridSize, string> = {
|
||||
small: "6.25vw 6.25vw",
|
||||
medium: "10vw 10vw",
|
||||
large: "20vw 20vw",
|
||||
};
|
||||
|
||||
const GridBackround = ({
|
||||
size = "medium",
|
||||
className = "",
|
||||
perspectiveThreeD = false
|
||||
}: GridBackroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
"fixed inset-0 -z-10 bg-background [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
|
||||
perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px)",
|
||||
backgroundSize: GRID_SIZES[size],
|
||||
backgroundRepeat: "repeat",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
GridBackround.displayName = "GridBackround";
|
||||
|
||||
export default memo(GridBackround);
|
||||
31
src/components/background/NoiseBackground.tsx
Normal file
31
src/components/background/NoiseBackground.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import React, { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface NoiseBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const NoiseBackground = ({ className = "" }: NoiseBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed inset-0 -z-10 bg-accent/10",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-repeat mix-blend-overlay opacity-12"
|
||||
style={{
|
||||
backgroundImage: "url(/images/noise.webp)",
|
||||
backgroundSize: "512px"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NoiseBackground.displayName = "NoiseBackground";
|
||||
|
||||
export default memo(NoiseBackground);
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import React, { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface NoiseDiagonalGradientBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const NoiseDiagonalGradientBackground = ({ className = "" }: NoiseDiagonalGradientBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed inset-0 -z-10 bg-accent/10",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 overflow-hidden pointer-events-none opacity-100 bg-gradient-to-br from-background via-accent/20 to-primary-cta/20"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-repeat mix-blend-overlay opacity-12"
|
||||
style={{
|
||||
backgroundImage: "url(/images/noise.webp)",
|
||||
backgroundSize: "512px"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NoiseDiagonalGradientBackground.displayName = "NoiseDiagonalGradientBackground";
|
||||
|
||||
export default memo(NoiseDiagonalGradientBackground);
|
||||
35
src/components/background/NoiseGradientBackground.tsx
Normal file
35
src/components/background/NoiseGradientBackground.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import React, { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface NoiseGradientBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const NoiseGradientBackground = ({ className = "" }: NoiseGradientBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed inset-0 -z-10 bg-accent/10",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 overflow-hidden pointer-events-none opacity-100 bg-gradient-to-r from-background via-accent/20 to-primary-cta/20"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 bg-repeat mix-blend-overlay opacity-12"
|
||||
style={{
|
||||
backgroundImage: "url(/images/noise.webp)",
|
||||
backgroundSize: "512px"
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NoiseGradientBackground.displayName = "NoiseGradientBackground";
|
||||
|
||||
export default memo(NoiseGradientBackground);
|
||||
21
src/components/background/PlainBackground.tsx
Normal file
21
src/components/background/PlainBackground.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface PlainBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PlainBackground = ({ className = "" }: PlainBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed inset-0 -z-10 bg-background", className)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
PlainBackground.displayName = "PlainBackground";
|
||||
|
||||
export default memo(PlainBackground);
|
||||
34
src/components/background/RadialGradientBackground.tsx
Normal file
34
src/components/background/RadialGradientBackground.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import { cls } from '@/lib/utils';
|
||||
|
||||
interface RadialGradientBackgroundProps {
|
||||
className?: string;
|
||||
centerColor?: string;
|
||||
edgeColor?: string;
|
||||
size?: string;
|
||||
position?: string;
|
||||
}
|
||||
|
||||
const RadialGradientBackground = ({
|
||||
className = "",
|
||||
centerColor = "var(--background)",
|
||||
edgeColor = "var(--color-background-accent)",
|
||||
size = "130% 130%",
|
||||
position = "50% 15%",
|
||||
}: RadialGradientBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls("fixed top-0 left-0 right-0 bottom-0 h-screen w-full -z-10", className)}
|
||||
style={{
|
||||
background: `radial-gradient(${size} at ${position}, ${centerColor} 40%, ${edgeColor} 100%)`,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
RadialGradientBackground.displayName = 'RadialGradientBackground';
|
||||
|
||||
export default memo(RadialGradientBackground);
|
||||
@@ -0,0 +1,102 @@
|
||||
.floating-gradient-background-container {
|
||||
--circle-size: 80%;
|
||||
--circle-size-small: 60%;
|
||||
--blending: hard-light;
|
||||
}
|
||||
|
||||
.floating-gradient-background-circle-one {
|
||||
background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: var(--blending);
|
||||
width: var(--circle-size);
|
||||
height: var(--circle-size);
|
||||
top: calc(50% - var(--circle-size-small) / 2);
|
||||
left: calc(50% - var(--circle-size-small) / 2);
|
||||
transform-origin: center center;
|
||||
animation: moveVertical 20s ease infinite;
|
||||
}
|
||||
|
||||
.floating-gradient-background-circle-two {
|
||||
background: radial-gradient(circle at center, var(--color-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: var(--blending);
|
||||
width: var(--circle-size);
|
||||
height: var(--circle-size);
|
||||
top: calc(50% - var(--circle-size-small) / 2);
|
||||
left: calc(50% - var(--circle-size-small) / 2);
|
||||
transform-origin: calc(50% - 400px);
|
||||
animation: moveInCircle 20s reverse infinite;
|
||||
}
|
||||
|
||||
.floating-gradient-background-circle-three {
|
||||
background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: var(--blending);
|
||||
width: var(--circle-size-small);
|
||||
height: var(--circle-size-small);
|
||||
top: calc(50% - var(--circle-size) / 2 + 200px);
|
||||
left: calc(50% - var(--circle-size) / 2 - 500px);
|
||||
transform-origin: calc(50% + 400px);
|
||||
animation: moveInCircle 30s linear infinite;
|
||||
}
|
||||
|
||||
.floating-gradient-background-circle-four {
|
||||
background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: var(--blending);
|
||||
width: var(--circle-size-small);
|
||||
height: var(--circle-size-small);
|
||||
top: calc(50% - var(--circle-size) / 2);
|
||||
left: calc(50% - var(--circle-size) / 2);
|
||||
transform-origin: calc(50% - 200px);
|
||||
animation: moveHorizontal 30s ease infinite;
|
||||
}
|
||||
|
||||
.floating-gradient-background-circle-five {
|
||||
background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
|
||||
mix-blend-mode: var(--blending);
|
||||
width: calc(var(--circle-size-small) * 2);
|
||||
height: calc(var(--circle-size-small) * 2);
|
||||
top: calc(50% - var(--circle-size));
|
||||
left: calc(50% - var(--circle-size));
|
||||
transform-origin: calc(50% - 800px) calc(50% + 200px);
|
||||
animation: moveInCircle 20s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes moveInCircle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveVertical {
|
||||
0% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveHorizontal {
|
||||
0% {
|
||||
transform: translateX(-50%) translateY(-10%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(50%) translateY(10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%) translateY(-10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./FloatingGradientBackground.css";
|
||||
|
||||
interface FloatingGradientBackgroundProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const FloatingGradientBackground = ({
|
||||
className = "",
|
||||
}: FloatingGradientBackgroundProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cls(
|
||||
"fixed top-0 bottom-0 left-0 right-0 w-full h-full z-0 pointer-events-none blur-[40px]",
|
||||
"[mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
|
||||
"[mask-composite:intersect]",
|
||||
"[-webkit-mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
|
||||
"[-webkit-mask-composite:destination-in]",
|
||||
"floating-gradient-background-container",
|
||||
className
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="absolute opacity-[0.075] floating-gradient-background-circle-one" />
|
||||
<div className="absolute opacity-[0.125] floating-gradient-background-circle-two" />
|
||||
<div className="absolute opacity-[0.125] floating-gradient-background-circle-three" />
|
||||
<div className="absolute opacity-[0.15] floating-gradient-background-circle-four" />
|
||||
<div className="absolute opacity-[0.075] floating-gradient-background-circle-five" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FloatingGradientBackground.displayName = "FloatingGradientBackground";
|
||||
|
||||
export default memo(FloatingGradientBackground);
|
||||
41
src/components/button/Button.tsx
Normal file
41
src/components/button/Button.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import ButtonHoverMagnetic from "./ButtonHoverMagnetic/ButtonHoverMagnetic";
|
||||
import ButtonIconArrow from "./ButtonIconArrow";
|
||||
import ButtonShiftHover from "./ButtonShiftHover/ButtonShiftHover";
|
||||
import ButtonTextStagger from "./ButtonTextStagger/ButtonTextStagger";
|
||||
import ButtonTextUnderline from "./ButtonTextUnderline";
|
||||
import ButtonHoverBubble from "./ButtonHoverBubble";
|
||||
import ButtonExpandHover from "./ButtonExpandHover";
|
||||
import ButtonElasticEffect from "./ButtonElasticEffect/ButtonElasticEffect";
|
||||
import ButtonBounceEffect from "./ButtonBounceEffect/ButtonBounceEffect";
|
||||
import ButtonDirectionalHover from "./ButtonDirectionalHover/ButtonDirectionalHover";
|
||||
import ButtonTextShift from "./ButtonTextShift/ButtonTextShift";
|
||||
import type { ButtonVariantProps } from "./types";
|
||||
|
||||
export type { ButtonVariant, ButtonVariantProps, ButtonPropsForVariant } from "./types";
|
||||
|
||||
const buttonComponents = {
|
||||
"hover-magnetic": ButtonHoverMagnetic,
|
||||
"hover-bubble": ButtonHoverBubble,
|
||||
"expand-hover": ButtonExpandHover,
|
||||
"elastic-effect": ButtonElasticEffect,
|
||||
"bounce-effect": ButtonBounceEffect,
|
||||
"icon-arrow": ButtonIconArrow,
|
||||
"shift-hover": ButtonShiftHover,
|
||||
"text-stagger": ButtonTextStagger,
|
||||
"text-shift": ButtonTextShift,
|
||||
"text-underline": ButtonTextUnderline,
|
||||
"directional-hover": ButtonDirectionalHover,
|
||||
} as const;
|
||||
|
||||
const Button = (props: ButtonVariantProps) => {
|
||||
const { variant = "hover-magnetic", ...restProps } = props;
|
||||
const ButtonComponent = buttonComponents[variant];
|
||||
return <ButtonComponent {...restProps} />;
|
||||
};
|
||||
|
||||
Button.displayName = "Button";
|
||||
|
||||
export default memo(Button);
|
||||
30
src/components/button/ButtonBounceEffect/BounceButton.css
Normal file
30
src/components/button/ButtonBounceEffect/BounceButton.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.bounce-button {
|
||||
--ease-elastic: linear(0, 0.55 7.5%, 0.85 12%, 0.95 14%, 1.03 16.5%, 1.09 20%, 1.13 22%, 1.14 23%, 1.15 24.5%, 1.15 26%, 1.13 28%, 1.11 31%, 1.05 39%, 1.02 43%, 0.99 47%, 0.98 52%, 0.97 59%, 1.002 81%, 1);
|
||||
transition: transform 0.65s var(--ease-elastic);
|
||||
}
|
||||
|
||||
.bounce-button [data-button-animate-chars] span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-shadow: 0px calc(var(--text-sm) * 1.5) currentColor;
|
||||
transform: translateY(0) rotate(0.001deg);
|
||||
transition: transform 0.65s var(--ease-elastic);
|
||||
}
|
||||
|
||||
.bounce-button:hover {
|
||||
transform: scale(0.92) rotate(-3deg);
|
||||
}
|
||||
|
||||
.bounce-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(calc(var(--text-sm) * -1.5)) rotate(3deg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bounce-button:hover {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
.bounce-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(0) rotate(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, memo } from "react";
|
||||
import { useCharAnimation } from "../useCharAnimation";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./BounceButton.css";
|
||||
|
||||
interface ButtonBounceEffectProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonBounceEffect = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonBounceEffectProps) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
useCharAnimation(buttonRef, text);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
data-href={href}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"bounce-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"bounce-button-bg absolute inset-0 rounded-theme primary-button",
|
||||
bgClassName
|
||||
)}
|
||||
></div>
|
||||
<span
|
||||
data-button-animate-chars=""
|
||||
className={cls(
|
||||
"bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
|
||||
textClassName
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonBounceEffect.displayName = "ButtonBounceEffect";
|
||||
|
||||
export default memo(ButtonBounceEffect);
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, memo } from "react";
|
||||
import { useDirectionalHover } from "./useDirectionalHover";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./DirectionalButton.css";
|
||||
|
||||
export interface ButtonDirectionalHoverProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
circleClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonDirectionalHover = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
circleClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonDirectionalHoverProps) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
useDirectionalHover(buttonRef);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type={type}
|
||||
data-href={href}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"directional-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"directional-button-bg absolute inset-0 rounded-theme primary-button",
|
||||
bgClassName
|
||||
)}
|
||||
></div>
|
||||
<div className="directional-button-circle-wrap">
|
||||
<div
|
||||
className={cls(
|
||||
"directional-button-circle bg-accent",
|
||||
circleClassName
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
<span
|
||||
className={cls(
|
||||
"directional-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
|
||||
textClassName
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonDirectionalHover.displayName = "ButtonDirectionalHover";
|
||||
|
||||
export default memo(ButtonDirectionalHover);
|
||||
@@ -0,0 +1,37 @@
|
||||
.directional-button-circle-wrap {
|
||||
border-radius: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.directional-button-circle {
|
||||
pointer-events: none;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
|
||||
transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
|
||||
}
|
||||
|
||||
.directional-button-circle::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.directional-button:hover .directional-button-circle {
|
||||
transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.directional-button:hover .directional-button-circle {
|
||||
transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useEffect, useCallback, RefObject } from "react";
|
||||
|
||||
export const useDirectionalHover = (
|
||||
buttonRef: RefObject<HTMLButtonElement | null>,
|
||||
circleSelector: string = ".directional-button-circle"
|
||||
) => {
|
||||
const handleHover = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
const button = buttonRef.current;
|
||||
if (!button) return;
|
||||
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
const buttonWidth = buttonRect.width;
|
||||
const buttonHeight = buttonRect.height;
|
||||
const buttonCenterX = buttonRect.left + buttonWidth / 2;
|
||||
|
||||
const mouseX = event.clientX;
|
||||
const mouseY = event.clientY;
|
||||
|
||||
const offsetXFromLeft = ((mouseX - buttonRect.left) / buttonWidth) * 100;
|
||||
const offsetYFromTop = ((mouseY - buttonRect.top) / buttonHeight) * 100;
|
||||
|
||||
let offsetXFromCenter = ((mouseX - buttonCenterX) / (buttonWidth / 2)) * 50;
|
||||
offsetXFromCenter = Math.abs(offsetXFromCenter);
|
||||
|
||||
const circle = button.querySelector(circleSelector) as HTMLElement;
|
||||
if (circle) {
|
||||
circle.style.left = `${offsetXFromLeft.toFixed(1)}%`;
|
||||
circle.style.top = `${offsetYFromTop.toFixed(1)}%`;
|
||||
circle.style.width = `${115 + offsetXFromCenter * 2}%`;
|
||||
}
|
||||
},
|
||||
[buttonRef, circleSelector]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const button = buttonRef.current;
|
||||
if (!button) return;
|
||||
|
||||
button.addEventListener("mouseenter", handleHover);
|
||||
button.addEventListener("mouseleave", handleHover);
|
||||
|
||||
return () => {
|
||||
button.removeEventListener("mouseenter", handleHover);
|
||||
button.removeEventListener("mouseleave", handleHover);
|
||||
};
|
||||
}, [buttonRef, handleHover]);
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useElasticEffect from "./useElasticEffect";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonElasticEffectProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonElasticEffect = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
textClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonElasticEffectProps) => {
|
||||
const elasticRef = useElasticEffect<HTMLButtonElement>();
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={elasticRef}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
data-href={href}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 primary-button rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonElasticEffect.displayName = "ButtonElasticEffect";
|
||||
|
||||
export default memo(ButtonElasticEffect);
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useEffect, useCallback } from "react";
|
||||
import gsap from "gsap";
|
||||
|
||||
const useElasticEffect = <T extends HTMLElement>() => {
|
||||
const elementRef = useRef<T>(null);
|
||||
const hoverLockedRef = useRef(false);
|
||||
const timelineRef = useRef<gsap.core.Timeline | null>(null);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
const el = elementRef.current;
|
||||
if (!el || hoverLockedRef.current) return;
|
||||
|
||||
hoverLockedRef.current = true;
|
||||
setTimeout(() => {
|
||||
hoverLockedRef.current = false;
|
||||
}, 500);
|
||||
|
||||
const w = el.offsetWidth;
|
||||
const h = el.offsetHeight;
|
||||
const fs = parseFloat(getComputedStyle(el).fontSize);
|
||||
const stretch = 0.75 * fs;
|
||||
const sx = (w + stretch) / w;
|
||||
const sy = (h - stretch * 0.33) / h;
|
||||
|
||||
if (timelineRef.current) {
|
||||
timelineRef.current.kill();
|
||||
}
|
||||
|
||||
timelineRef.current = gsap
|
||||
.timeline()
|
||||
.to(el, { scaleX: sx, scaleY: sy, duration: 0.1, ease: "power1.out" })
|
||||
.to(el, { scaleX: 1, scaleY: 1, duration: 1, ease: "elastic.out(1, 0.3)" });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Skip on touch devices
|
||||
if (window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
const el = elementRef.current;
|
||||
if (!el) return;
|
||||
|
||||
el.addEventListener("mouseenter", handleMouseEnter);
|
||||
|
||||
return () => {
|
||||
el.removeEventListener("mouseenter", handleMouseEnter);
|
||||
if (timelineRef.current) {
|
||||
timelineRef.current.kill();
|
||||
}
|
||||
};
|
||||
}, [handleMouseEnter]);
|
||||
|
||||
return elementRef;
|
||||
};
|
||||
|
||||
export default useElasticEffect;
|
||||
90
src/components/button/ButtonExpandHover.tsx
Normal file
90
src/components/button/ButtonExpandHover.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { useButtonClick } from "./useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonExpandHoverProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
iconBgClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonExpandHover = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
textClassName = "",
|
||||
iconClassName = "",
|
||||
iconBgClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonExpandHoverProps) => {
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
data-href={href}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"group relative cursor-pointer h-fit min-w-0 w-fit max-w-full rounded-theme text-sm text-background pointer-events-auto outline-none",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="relative h-9 w-full px-5"
|
||||
style={{ paddingRight: "calc(2.25rem + 0.75rem)" }}
|
||||
>
|
||||
<div className="h-9 flex items-center" >
|
||||
<span
|
||||
className={cls(
|
||||
"relative z-10 block overflow-hidden truncate whitespace-nowrap md:transition-colors md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
|
||||
textClassName
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute overflow-hidden top-[2px] bottom-[2px] left-[2px] right-[2px] rounded-theme flex justify-end">
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-10 h-full w-auto aspect-square flex items-center justify-center",
|
||||
iconClassName
|
||||
)}
|
||||
>
|
||||
<ArrowUpRight
|
||||
className="h-1/2 w-auto aspect-square"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"absolute z-0 h-full w-full rounded-theme",
|
||||
"md:transition-transform md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
|
||||
"-translate-x-[calc(-100%+2.25rem-4px)] md:group-hover:translate-x-0",
|
||||
iconBgClassName
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonExpandHover.displayName = "ButtonExpandHover";
|
||||
|
||||
export default memo(ButtonExpandHover);
|
||||
81
src/components/button/ButtonHoverBubble.tsx
Normal file
81
src/components/button/ButtonHoverBubble.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { ArrowDownRight } from "lucide-react";
|
||||
import { useButtonClick } from "./useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonHoverBubbleProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonHoverBubble = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
iconClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonHoverBubbleProps) => {
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
data-href={href}
|
||||
className={cls(
|
||||
"relative group flex justify-center items-center min-w-0 w-fit max-w-full rounded-theme cursor-pointer pointer-events-auto outline-none",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"flex justify-center items-center h-9 aspect-square rounded-theme relative",
|
||||
"scale-0 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-left md:group-hover:scale-100",
|
||||
iconClassName
|
||||
)}
|
||||
>
|
||||
<ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"flex justify-center items-center h-9 px-4 min-w-0 w-fit max-w-full rounded-theme relative",
|
||||
"-translate-x-[var(--height-9)] md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:group-hover:translate-x-0",
|
||||
bgClassName
|
||||
)}
|
||||
>
|
||||
<span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"flex justify-center items-center h-9 aspect-square rounded-theme absolute right-0 z-20",
|
||||
"scale-100 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-right md:group-hover:scale-0",
|
||||
iconClassName
|
||||
)}
|
||||
>
|
||||
<ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonHoverBubble.displayName = "ButtonHoverBubble";
|
||||
|
||||
export default memo(ButtonHoverBubble);
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useMagneticEffect from "./useMagneticEffect";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonHoverMagneticProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
strengthFactor?: number;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonHoverMagnetic = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
textClassName = "",
|
||||
strengthFactor = 20,
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonHoverMagneticProps) => {
|
||||
const magneticRef = useMagneticEffect(strengthFactor);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={magneticRef as React.RefObject<HTMLButtonElement>}
|
||||
data-href={href}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 primary-button rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonHoverMagnetic.displayName = "ButtonHoverMagnetic";
|
||||
|
||||
export default memo(ButtonHoverMagnetic);
|
||||
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const useMagneticEffect = (strengthFactor = 10) => {
|
||||
const elementRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
import("gsap").then((gsap) => {
|
||||
const element = elementRef.current;
|
||||
|
||||
if (!element || window.innerWidth < 768) return;
|
||||
|
||||
const resetEl = (el: HTMLElement, immediate: boolean) => {
|
||||
if (!el) return;
|
||||
gsap.default.killTweensOf(el);
|
||||
(immediate ? gsap.default.set : gsap.default.to)(el, {
|
||||
x: "0vw",
|
||||
y: "0vw",
|
||||
rotate: "0deg",
|
||||
clearProps: "all",
|
||||
...(!immediate && { ease: "elastic.out(1, 0.3)", duration: 1.6 })
|
||||
});
|
||||
};
|
||||
|
||||
const resetOnEnter = () => {
|
||||
resetEl(element, true);
|
||||
};
|
||||
|
||||
const moveMagnet = (e: MouseEvent) => {
|
||||
const b = element.getBoundingClientRect();
|
||||
const strength = strengthFactor;
|
||||
|
||||
const offsetX = ((e.clientX - b.left) / element.offsetWidth - 0.5) * (strength / 16);
|
||||
const offsetY = ((e.clientY - b.top) / element.offsetHeight - 0.5) * (strength / 16);
|
||||
|
||||
gsap.default.to(element, {
|
||||
x: offsetX + "vw",
|
||||
y: offsetY + "vw",
|
||||
rotate: "0.001deg",
|
||||
ease: "power4.out",
|
||||
duration: 1.6
|
||||
});
|
||||
};
|
||||
|
||||
const resetMagnet = () => {
|
||||
gsap.default.to(element, {
|
||||
x: "0vw",
|
||||
y: "0vw",
|
||||
ease: "elastic.out(1, 0.3)",
|
||||
duration: 1.6,
|
||||
clearProps: "all"
|
||||
});
|
||||
};
|
||||
|
||||
element.addEventListener("mouseenter", resetOnEnter);
|
||||
element.addEventListener("mousemove", moveMagnet);
|
||||
element.addEventListener("mouseleave", resetMagnet);
|
||||
|
||||
return () => {
|
||||
element.removeEventListener("mouseenter", resetOnEnter);
|
||||
element.removeEventListener("mousemove", moveMagnet);
|
||||
element.removeEventListener("mouseleave", resetMagnet);
|
||||
};
|
||||
});
|
||||
}, [strengthFactor]);
|
||||
|
||||
return elementRef;
|
||||
};
|
||||
|
||||
export default useMagneticEffect;
|
||||
64
src/components/button/ButtonIconArrow.tsx
Normal file
64
src/components/button/ButtonIconArrow.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
import { useButtonClick } from "./useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonIconArrowProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonIconArrow = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
textClassName = "",
|
||||
iconClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonIconArrowProps) => {
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
data-href={href}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"relative group cursor-pointer h-9 min-w-0 w-fit max-w-full primary-button rounded-theme px-6 text-sm text-background flex items-center gap-3",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className={cls(
|
||||
"block overflow-hidden truncate whitespace-nowrap md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:[transform:translateX(calc(var(--height-9)/4))]",
|
||||
textClassName
|
||||
)}>
|
||||
{text}
|
||||
</span>
|
||||
<div className={cls(
|
||||
"h-5 w-[var(--height-5)] aspect-square rounded-theme flex items-center justify-center md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:scale-[0.2] md:group-hover:rotate-90",
|
||||
iconClassName || "secondary-button text-foreground"
|
||||
)}>
|
||||
<ArrowRight className="h-1/2 w-1/2 md:transition-opacity md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:opacity-0" />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonIconArrow.displayName = "ButtonIconArrow";
|
||||
|
||||
export default memo(ButtonIconArrow);
|
||||
71
src/components/button/ButtonShiftHover/ButtonShiftHover.tsx
Normal file
71
src/components/button/ButtonShiftHover/ButtonShiftHover.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, memo } from "react";
|
||||
import { useCharAnimation } from "../useCharAnimation";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./ShiftButton.css";
|
||||
|
||||
interface ButtonShiftHoverProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonShiftHover = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonShiftHoverProps) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
useCharAnimation(buttonRef, text);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
data-href={href}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"shift-button group relative cursor-pointer flex gap-2 items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-5 pr-4 min-w-0 w-fit max-w-full rounded-theme text-background text-sm",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
textClassName,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"shift-button-bg absolute inset-0 rounded-theme transition-transform duration-[600ms] primary-button",
|
||||
bgClassName
|
||||
)}
|
||||
></div>
|
||||
<span
|
||||
data-button-animate-chars=""
|
||||
className="shift-button-text relative inline-block overflow-hidden truncate whitespace-nowrap"
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<div className="relative h-[1em] w-auto aspect-square rounded-theme border border-current scale-65 transition-all duration-300 md:group-hover:bg-current md:group-hover:scale-40" />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonShiftHover.displayName = "ButtonShiftHover";
|
||||
|
||||
export default memo(ButtonShiftHover);
|
||||
29
src/components/button/ButtonShiftHover/ShiftButton.css
Normal file
29
src/components/button/ButtonShiftHover/ShiftButton.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.shift-button [data-button-animate-chars] span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
transform: translateY(0em) rotate(0.001deg);
|
||||
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.shift-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
|
||||
}
|
||||
|
||||
.shift-button:hover .shift-button-bg {
|
||||
transform: scale(0.975);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shift-button [data-button-animate-chars] span {
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
}
|
||||
|
||||
.shift-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(0vw) rotate(0);
|
||||
}
|
||||
|
||||
.shift-button:hover .shift-button-bg {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
72
src/components/button/ButtonTextShift/ButtonTextShift.tsx
Normal file
72
src/components/button/ButtonTextShift/ButtonTextShift.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, memo } from "react";
|
||||
import { useCharAnimation } from "../useCharAnimation";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./TextShiftButton.css";
|
||||
|
||||
export interface ButtonTextShiftProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonTextShift = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonTextShiftProps) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.0);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type={type}
|
||||
data-href={href}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"stagger-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"stagger-button-bg absolute inset-0 rounded-theme primary-button",
|
||||
bgClassName
|
||||
)}
|
||||
></div>
|
||||
<span
|
||||
data-button-animate-chars=""
|
||||
className={cls(
|
||||
"stagger-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
|
||||
textClassName
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonTextShift.displayName = "ButtonTextShift";
|
||||
|
||||
export default memo(ButtonTextShift);
|
||||
21
src/components/button/ButtonTextShift/TextShiftButton.css
Normal file
21
src/components/button/ButtonTextShift/TextShiftButton.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.stagger-button [data-button-animate-chars] span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
transform: translateY(0em) rotate(0.001deg);
|
||||
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.stagger-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stagger-button [data-button-animate-chars] span {
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
}
|
||||
|
||||
.stagger-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(0vw) rotate(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, memo } from "react";
|
||||
import { useCharAnimation } from "../useCharAnimation";
|
||||
import { useButtonClick } from "../useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import "./StaggerButton.css";
|
||||
|
||||
export interface ButtonTextStaggerProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonTextStagger = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
bgClassName = "",
|
||||
textClassName = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonTextStaggerProps) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.01);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
data-href={href}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"stagger-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-background",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"stagger-button-bg absolute inset-0 rounded-theme transition-transform duration-[600ms] primary-button",
|
||||
bgClassName
|
||||
)}
|
||||
></div>
|
||||
<span
|
||||
data-button-animate-chars=""
|
||||
className={cls(
|
||||
"stagger-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
|
||||
textClassName
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonTextStagger.displayName = "ButtonTextStagger";
|
||||
|
||||
export default memo(ButtonTextStagger);
|
||||
29
src/components/button/ButtonTextStagger/StaggerButton.css
Normal file
29
src/components/button/ButtonTextStagger/StaggerButton.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.stagger-button [data-button-animate-chars] span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
transform: translateY(0em) rotate(0.001deg);
|
||||
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.stagger-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
|
||||
}
|
||||
|
||||
.stagger-button:hover .stagger-button-bg {
|
||||
transform: scale(0.975);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stagger-button [data-button-animate-chars] span {
|
||||
text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
|
||||
}
|
||||
|
||||
.stagger-button:hover [data-button-animate-chars] span {
|
||||
transform: translateY(0vw) rotate(0);
|
||||
}
|
||||
|
||||
.stagger-button:hover .stagger-button-bg {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
51
src/components/button/ButtonTextUnderline.tsx
Normal file
51
src/components/button/ButtonTextUnderline.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { useButtonClick } from "./useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface ButtonTextUnderlineProps {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
ariaLabel?: string;
|
||||
type?: "button" | "submit" | "reset";
|
||||
}
|
||||
|
||||
const ButtonTextUnderline = ({
|
||||
text,
|
||||
onClick,
|
||||
href,
|
||||
className = "",
|
||||
disabled = false,
|
||||
ariaLabel,
|
||||
type = "button",
|
||||
}: ButtonTextUnderlineProps) => {
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
data-href={href}
|
||||
aria-label={ariaLabel || text}
|
||||
className={cls(
|
||||
"relative text-sm inline-block bg-transparent border-none p-0 cursor-pointer",
|
||||
"after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1px]",
|
||||
"after:bg-current after:scale-x-0 after:origin-right after:transition-transform after:duration-300",
|
||||
"hover:after:scale-x-100 hover:after:origin-left",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:after:scale-x-0",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonTextUnderline.displayName = "ButtonTextUnderline";
|
||||
|
||||
export default memo(ButtonTextUnderline);
|
||||
125
src/components/button/SelectorButton.tsx
Normal file
125
src/components/button/SelectorButton.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useEffect, memo, ReactNode } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
export interface SelectorOption {
|
||||
value: string;
|
||||
label: ReactNode;
|
||||
disabled?: boolean;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
export interface SelectorButtonProps {
|
||||
options: SelectorOption[];
|
||||
activeValue: string;
|
||||
onValueChange: (value: string) => void;
|
||||
className?: string;
|
||||
buttonClassName?: string;
|
||||
wrapperClassName?: string;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
const SelectorButton = memo<SelectorButtonProps>(({
|
||||
options,
|
||||
activeValue,
|
||||
onValueChange,
|
||||
className = "",
|
||||
buttonClassName = "",
|
||||
wrapperClassName = "",
|
||||
labelClassName = "",
|
||||
}) => {
|
||||
const hoverRef = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const hoverElement = hoverRef.current;
|
||||
|
||||
if (!container || !hoverElement) return;
|
||||
|
||||
const moveHoverBlock = (target: HTMLElement) => {
|
||||
if (!target) return;
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
|
||||
hoverElement.style.width = `${targetRect.width}px`;
|
||||
hoverElement.style.transform = `translateX(${targetRect.left - containerRect.left}px)`;
|
||||
};
|
||||
|
||||
const updatePosition = () => {
|
||||
const activeButton = container.querySelector(
|
||||
`[data-value="${activeValue}"]`
|
||||
) as HTMLElement;
|
||||
if (activeButton) moveHoverBlock(activeButton);
|
||||
};
|
||||
|
||||
updatePosition();
|
||||
|
||||
const resizeObserver = new ResizeObserver(updatePosition);
|
||||
resizeObserver.observe(container);
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [activeValue]);
|
||||
|
||||
return (
|
||||
<div className={cls("relative w-fit p-1 card rounded-theme-capped", wrapperClassName)}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cls("relative overflow-hidden cursor-pointer flex", className)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
data-value={option.value}
|
||||
disabled={option.disabled}
|
||||
onClick={() => !option.disabled && onValueChange(option.value)}
|
||||
className={cls(
|
||||
"relative px-4 py-2 text-sm md:text-base rounded-theme transition-all duration-300 ease-in-out z-1 text-nowrap",
|
||||
option.disabled ? "opacity-50" : "cursor-pointer",
|
||||
activeValue === option.value ? "" : "bg-transparent",
|
||||
buttonClassName
|
||||
)}
|
||||
>
|
||||
{typeof option.label === "string" ? (
|
||||
<span
|
||||
className={cls(
|
||||
"transition-colors duration-300 ease-in-out",
|
||||
activeValue === option.value ? "text-background" : "text-foreground",
|
||||
option.disabled ? "" : "cursor-pointer",
|
||||
option.labelClassName || labelClassName
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
) : (
|
||||
<div
|
||||
className={cls(
|
||||
"flex items-center justify-center transition-opacity duration-300",
|
||||
activeValue === option.value ? "opacity-100" : "opacity-50",
|
||||
option.disabled ? "" : "cursor-pointer",
|
||||
option.labelClassName || labelClassName
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div
|
||||
ref={hoverRef}
|
||||
className="absolute top-0 left-0 h-full rounded-theme overflow-hidden pointer-events-none z-0 transition-all duration-400 ease-out"
|
||||
>
|
||||
<div className="relative primary-button w-full h-full rounded-theme" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
SelectorButton.displayName = "SelectorButton";
|
||||
|
||||
export default SelectorButton;
|
||||
89
src/components/button/types.ts
Normal file
89
src/components/button/types.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
export type ButtonVariant =
|
||||
| "hover-magnetic"
|
||||
| "hover-bubble"
|
||||
| "expand-hover"
|
||||
| "elastic-effect"
|
||||
| "bounce-effect"
|
||||
| "icon-arrow"
|
||||
| "shift-hover"
|
||||
| "text-stagger"
|
||||
| "text-shift"
|
||||
| "text-underline"
|
||||
| "directional-hover";
|
||||
|
||||
export type CTAButtonVariant = Exclude<ButtonVariant, "text-underline">;
|
||||
|
||||
export type ButtonWithBgClassName = "text-stagger" | "text-shift" | "shift-hover" | "bounce-effect" | "directional-hover";
|
||||
|
||||
export const hasBgClassName = (variant?: string): variant is ButtonWithBgClassName => {
|
||||
return variant === "text-stagger" || variant === "text-shift" || variant === "shift-hover" || variant === "bounce-effect" || variant === "directional-hover";
|
||||
};
|
||||
|
||||
export type BaseButtonProps = {
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export type ButtonVariantProps =
|
||||
| ({
|
||||
variant?: "hover-magnetic";
|
||||
textClassName?: string;
|
||||
strengthFactor?: number;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "hover-bubble";
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "expand-hover";
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
iconBgClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "elastic-effect";
|
||||
textClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "bounce-effect";
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "icon-arrow";
|
||||
textClassName?: string;
|
||||
iconClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "shift-hover";
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "text-stagger";
|
||||
bgClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "text-shift";
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "text-underline";
|
||||
disabled?: boolean;
|
||||
} & BaseButtonProps)
|
||||
| ({
|
||||
variant: "directional-hover";
|
||||
bgClassName?: string;
|
||||
textClassName?: string;
|
||||
circleClassName?: string;
|
||||
} & BaseButtonProps);
|
||||
|
||||
export type ButtonPropsForVariant<V extends ButtonVariant> = Extract<
|
||||
ButtonVariantProps,
|
||||
{ variant?: V }
|
||||
>;
|
||||
31
src/components/button/useButtonClick.ts
Normal file
31
src/components/button/useButtonClick.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useLenis } from "lenis/react";
|
||||
|
||||
export const useButtonClick = (href?: string, onClick?: () => void) => {
|
||||
const lenis = useLenis();
|
||||
|
||||
const handleClick = () => {
|
||||
if (href) {
|
||||
const isExternalLink = /^(https?:\/\/|www\.)/.test(href);
|
||||
|
||||
if (isExternalLink) {
|
||||
window.open(
|
||||
href.startsWith("www.") ? `https://${href}` : href,
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
} else {
|
||||
if (lenis) {
|
||||
lenis.scrollTo(`#${href}`);
|
||||
} else {
|
||||
const element = document.getElementById(href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onClick?.();
|
||||
};
|
||||
|
||||
return handleClick;
|
||||
};
|
||||
31
src/components/button/useCharAnimation.ts
Normal file
31
src/components/button/useCharAnimation.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useEffect, RefObject } from "react";
|
||||
|
||||
export const useCharAnimation = (
|
||||
buttonRef: RefObject<HTMLButtonElement | null>,
|
||||
text: string | undefined,
|
||||
selector: string = "[data-button-animate-chars]",
|
||||
staggerDelay: number = 0
|
||||
) => {
|
||||
useEffect(() => {
|
||||
const buttonElement = buttonRef.current?.querySelector(selector);
|
||||
if (!buttonElement) return;
|
||||
|
||||
const textContent = text || buttonElement.textContent || "";
|
||||
buttonElement.innerHTML = "";
|
||||
|
||||
[...textContent].forEach((char, index) => {
|
||||
const span = document.createElement("span");
|
||||
span.textContent = char;
|
||||
|
||||
if (staggerDelay > 0) {
|
||||
span.style.transitionDelay = `${index * staggerDelay}s`;
|
||||
}
|
||||
|
||||
if (char === " ") {
|
||||
span.style.whiteSpace = "pre";
|
||||
}
|
||||
|
||||
buttonElement.appendChild(span);
|
||||
});
|
||||
}, [buttonRef, text, selector, staggerDelay]);
|
||||
};
|
||||
120
src/components/cardStack/CardList.tsx
Normal file
120
src/components/cardStack/CardList.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
|
||||
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface CardListProps {
|
||||
children: React.ReactNode;
|
||||
animationType: CardAnimationType;
|
||||
useUncappedRounding?: boolean;
|
||||
title?: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description?: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
disableCardWrapper?: boolean;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
cardClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
}
|
||||
|
||||
const CardList = ({
|
||||
children,
|
||||
animationType,
|
||||
useUncappedRounding = false,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
disableCardWrapper = false,
|
||||
ariaLabel = "Card list",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
cardClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
}: CardListProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
{childrenArray.map((child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
CardList.displayName = "CardList";
|
||||
|
||||
export default memo(CardList);
|
||||
190
src/components/cardStack/CardStack.tsx
Normal file
190
src/components/cardStack/CardStack.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import { CardStackProps } from "./types";
|
||||
import GridLayout from "./layouts/grid/GridLayout";
|
||||
import AutoCarousel from "./layouts/carousels/AutoCarousel";
|
||||
import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
|
||||
import TimelineBase from "./layouts/timelines/TimelineBase";
|
||||
|
||||
const CardStack = ({
|
||||
children,
|
||||
mode = "buttons",
|
||||
gridVariant = "uniform-all-items-equal",
|
||||
uniformGridCustomHeightClasses,
|
||||
gridRowsClassName,
|
||||
itemHeightClassesOverride,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
carouselThreshold = 5,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
gridClassName = "",
|
||||
carouselClassName = "",
|
||||
carouselItemClassName = "",
|
||||
controlsClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Card stack",
|
||||
}: CardStackProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const itemCount = childrenArray.length;
|
||||
|
||||
// Timeline layout for zigzag pattern (works best with 3-6 items)
|
||||
if ((gridVariant === "timeline" || gridVariant === "timeline-three-columns") && itemCount >= 3 && itemCount <= 6) {
|
||||
return (
|
||||
<TimelineBase
|
||||
variant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{childrenArray}
|
||||
</TimelineBase>
|
||||
);
|
||||
}
|
||||
|
||||
// Use grid for items below threshold, carousel for items at or above threshold
|
||||
// Timeline with 7+ items will also use carousel
|
||||
const useCarousel = itemCount >= carouselThreshold || ((gridVariant === "timeline" || gridVariant === "timeline-three-columns") && itemCount > 6);
|
||||
|
||||
// Grid layout for 1-4 items
|
||||
if (!useCarousel) {
|
||||
return (
|
||||
<GridLayout
|
||||
itemCount={itemCount}
|
||||
gridVariant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
gridRowsClassName={gridRowsClassName}
|
||||
itemHeightClassesOverride={itemHeightClassesOverride}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{childrenArray}
|
||||
</GridLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Auto-scroll carousel for 5+ items
|
||||
if (mode === "auto") {
|
||||
return (
|
||||
<AutoCarousel
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{childrenArray}
|
||||
</AutoCarousel>
|
||||
);
|
||||
}
|
||||
|
||||
// Button-controlled carousel for 5+ items
|
||||
return (
|
||||
<ButtonCarousel
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
carouselItemClassName={carouselItemClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{childrenArray}
|
||||
</ButtonCarousel>
|
||||
);
|
||||
};
|
||||
|
||||
CardStack.displayName = "CardStack";
|
||||
|
||||
export default memo(CardStack);
|
||||
88
src/components/cardStack/CardStackTextBox.tsx
Normal file
88
src/components/cardStack/CardStackTextBox.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useMemo } from "react";
|
||||
import TextBox from "@/components/Textbox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { TextBoxProps } from "./types";
|
||||
|
||||
const CardStackTextBox = ({
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
}: TextBoxProps) => {
|
||||
const styles = useMemo(() => {
|
||||
if (textboxLayout === "default") {
|
||||
return {
|
||||
className: cls("flex flex-col gap-3 md:gap-1", textBoxClassName),
|
||||
titleClassName: cls("text-6xl font-medium text-center", titleClassName),
|
||||
descriptionClassName: cls("text-lg leading-[1.2] text-center md:max-w-6/10", descriptionClassName),
|
||||
tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-3 mx-auto", tagClassName),
|
||||
buttonContainerClassName: cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName),
|
||||
center: true,
|
||||
};
|
||||
}
|
||||
|
||||
if (textboxLayout === "inline-image") {
|
||||
return {
|
||||
className: cls("flex flex-col gap-3 md:gap-1", textBoxClassName),
|
||||
titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
|
||||
descriptionClassName: cls("text-lg leading-[1.2] text-center", descriptionClassName),
|
||||
tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-3 mx-auto", tagClassName),
|
||||
buttonContainerClassName: cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName),
|
||||
center: true,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
className: textBoxClassName,
|
||||
titleClassName: cls("text-6xl font-medium", titleClassName),
|
||||
descriptionClassName: cls("text-lg leading-[1.2]", descriptionClassName),
|
||||
tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
|
||||
buttonContainerClassName: cls("flex gap-4", buttonContainerClassName),
|
||||
center: false,
|
||||
};
|
||||
}, [textboxLayout, textBoxClassName, titleClassName, descriptionClassName, tagClassName, buttonContainerClassName]);
|
||||
|
||||
if (!title && !titleSegments && !description) return null;
|
||||
|
||||
return (
|
||||
<TextBox
|
||||
title={title!}
|
||||
titleSegments={titleSegments}
|
||||
description={description!}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={styles.className}
|
||||
titleClassName={styles.titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={styles.descriptionClassName}
|
||||
tagClassName={styles.tagClassName}
|
||||
buttonContainerClassName={styles.buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
center={styles.center}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
CardStackTextBox.displayName = "CardStackTextBox";
|
||||
|
||||
export default memo(CardStackTextBox);
|
||||
95
src/components/cardStack/hooks/useCardAnimation.ts
Normal file
95
src/components/cardStack/hooks/useCardAnimation.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useRef } from "react";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import type { CardAnimationType } from "../types";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
interface UseCardAnimationProps {
|
||||
animationType: CardAnimationType;
|
||||
itemCount: number;
|
||||
}
|
||||
|
||||
export const useCardAnimation = ({ animationType, itemCount }: UseCardAnimationProps) => {
|
||||
const itemRefs = useRef<(HTMLElement | null)[]>([]);
|
||||
|
||||
useGSAP(() => {
|
||||
if (animationType === "none" || itemRefs.current.length === 0) return;
|
||||
|
||||
const items = itemRefs.current.filter((el) => el !== null);
|
||||
|
||||
if (animationType === "opacity") {
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0 },
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 1.25,
|
||||
stagger: 0.15,
|
||||
ease: "sine",
|
||||
scrollTrigger: {
|
||||
trigger: items[0],
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
}
|
||||
);
|
||||
} else if (animationType === "slide-up") {
|
||||
items.forEach((item, index) => {
|
||||
gsap.fromTo(
|
||||
item,
|
||||
{ opacity: 0, yPercent: 15 },
|
||||
{
|
||||
opacity: 1,
|
||||
yPercent: 0,
|
||||
duration: 1,
|
||||
delay: index * 0.15,
|
||||
ease: "sine",
|
||||
scrollTrigger: {
|
||||
trigger: items[0],
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
} else if (animationType === "scale-rotate") {
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ scaleX: 0, rotate: 10 },
|
||||
{
|
||||
scaleX: 1,
|
||||
rotate: 0,
|
||||
duration: 1,
|
||||
stagger: 0.15,
|
||||
ease: "power3",
|
||||
scrollTrigger: {
|
||||
trigger: items[0],
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
}
|
||||
);
|
||||
} else if (animationType === "blur-reveal") {
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, filter: "blur(10px)" },
|
||||
{
|
||||
opacity: 1,
|
||||
filter: "blur(0px)",
|
||||
duration: 1.2,
|
||||
stagger: 0.15,
|
||||
ease: "power2.out",
|
||||
scrollTrigger: {
|
||||
trigger: items[0],
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [animationType, itemCount]);
|
||||
|
||||
return { itemRefs };
|
||||
};
|
||||
108
src/components/cardStack/hooks/usePhoneAnimations.ts
Normal file
108
src/components/cardStack/hooks/usePhoneAnimations.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
export interface TimelinePhoneViewItem {
|
||||
trigger: string;
|
||||
content: React.ReactNode;
|
||||
imageOne?: string;
|
||||
videoOne?: string;
|
||||
imageAltOne?: string;
|
||||
videoAriaLabelOne?: string;
|
||||
imageTwo?: string;
|
||||
videoTwo?: string;
|
||||
imageAltTwo?: string;
|
||||
videoAriaLabelTwo?: string;
|
||||
}
|
||||
|
||||
const getImageAnimationConfig = (itemIndex: number, imageIndex: number) => {
|
||||
const isFirstImage = imageIndex === 0;
|
||||
const isOddItem = itemIndex % 2 === 1;
|
||||
|
||||
if (isFirstImage) {
|
||||
return {
|
||||
from: { xPercent: -200, rotation: -45 },
|
||||
to: { rotation: isOddItem ? 10 : -10 },
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
from: { xPercent: 200, rotation: 45 },
|
||||
to: { rotation: isOddItem ? -10 : 10 },
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const usePhoneAnimations = (items: TimelinePhoneViewItem[]) => {
|
||||
const imageRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const mobileImageRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const mm = gsap.matchMedia();
|
||||
|
||||
const animatePhones = (isMobile: boolean) => {
|
||||
items.forEach((item, itemIndex) => {
|
||||
const images = [item.imageOne || item.videoOne, item.imageTwo || item.videoTwo];
|
||||
|
||||
images.forEach((_, imageIndex) => {
|
||||
const refIndex = itemIndex * 2 + imageIndex;
|
||||
const element = isMobile
|
||||
? mobileImageRefs.current[refIndex]
|
||||
: imageRefs.current[refIndex];
|
||||
|
||||
if (element) {
|
||||
const isFirstImage = imageIndex === 0;
|
||||
|
||||
const fromConfig = isMobile
|
||||
? {
|
||||
xPercent: isFirstImage ? -150 : 150,
|
||||
rotation: isFirstImage ? -25 : 25,
|
||||
}
|
||||
: getImageAnimationConfig(itemIndex, imageIndex).from;
|
||||
|
||||
const toConfig = isMobile
|
||||
? {
|
||||
xPercent: 0,
|
||||
rotation: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: element,
|
||||
start: "top 90%",
|
||||
end: "top 50%",
|
||||
scrub: 1,
|
||||
},
|
||||
}
|
||||
: {
|
||||
xPercent: 0,
|
||||
rotation: getImageAnimationConfig(itemIndex, imageIndex).to
|
||||
.rotation,
|
||||
scrollTrigger: {
|
||||
trigger: `.${item.trigger}`,
|
||||
start: "top bottom",
|
||||
end: "top top",
|
||||
scrub: 1,
|
||||
},
|
||||
};
|
||||
|
||||
gsap.fromTo(element, fromConfig, toConfig);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
mm.add("(max-width: 767px)", () => animatePhones(true));
|
||||
mm.add("(min-width: 768px)", () => animatePhones(false));
|
||||
|
||||
return () => {
|
||||
mm.revert();
|
||||
imageRefs.current = [];
|
||||
mobileImageRefs.current = [];
|
||||
};
|
||||
}, [items]);
|
||||
|
||||
return {
|
||||
imageRefs,
|
||||
mobileImageRefs,
|
||||
};
|
||||
};
|
||||
40
src/components/cardStack/hooks/usePrevNextButtons.ts
Normal file
40
src/components/cardStack/hooks/usePrevNextButtons.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { EmblaCarouselType } from "embla-carousel";
|
||||
|
||||
export const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
|
||||
|
||||
const onPrevButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.scrollPrev();
|
||||
}, [emblaApi]);
|
||||
|
||||
const onNextButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.scrollNext();
|
||||
}, [emblaApi]);
|
||||
|
||||
const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev());
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
||||
onSelect(emblaApi);
|
||||
emblaApi.on("reInit", onSelect).on("select", onSelect);
|
||||
|
||||
return () => {
|
||||
emblaApi.off("reInit", onSelect).off("select", onSelect);
|
||||
};
|
||||
}, [emblaApi, onSelect]);
|
||||
|
||||
return {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
};
|
||||
};
|
||||
30
src/components/cardStack/hooks/useScrollProgress.ts
Normal file
30
src/components/cardStack/hooks/useScrollProgress.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { EmblaCarouselType } from "embla-carousel";
|
||||
|
||||
export const useScrollProgress = (emblaApi: EmblaCarouselType | undefined) => {
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
|
||||
const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
|
||||
const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()));
|
||||
setScrollProgress(progress * 100);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
||||
onScroll(emblaApi);
|
||||
emblaApi
|
||||
.on("reInit", onScroll)
|
||||
.on("scroll", onScroll)
|
||||
.on("slideFocus", onScroll);
|
||||
|
||||
return () => {
|
||||
emblaApi
|
||||
.off("reInit", onScroll)
|
||||
.off("scroll", onScroll)
|
||||
.off("slideFocus", onScroll);
|
||||
};
|
||||
}, [emblaApi, onScroll]);
|
||||
|
||||
return scrollProgress;
|
||||
};
|
||||
243
src/components/cardStack/hooks/useTimelineHorizontal.ts
Normal file
243
src/components/cardStack/hooks/useTimelineHorizontal.ts
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
|
||||
const ANIMATION_CONFIG = {
|
||||
PROGRESS_DURATION: 5000,
|
||||
TRANSITION_DURATION: 500,
|
||||
ANIMATION_START_DELAY: 100,
|
||||
IMAGE_TRANSITION_DELAY: 300,
|
||||
} as const;
|
||||
|
||||
export interface MediaItem {
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
}
|
||||
|
||||
interface UseTimelineHorizontalProps {
|
||||
itemCount: number;
|
||||
mediaItems?: MediaItem[];
|
||||
}
|
||||
|
||||
export const useTimelineHorizontal = ({ itemCount, mediaItems }: UseTimelineHorizontalProps) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [imageOpacity, setImageOpacity] = useState(1);
|
||||
const [currentMediaSrc, setCurrentMediaSrc] = useState<{ imageSrc?: string; videoSrc?: string }>(() => {
|
||||
if (mediaItems && mediaItems[0]) {
|
||||
return {
|
||||
imageSrc: mediaItems[0].imageSrc,
|
||||
videoSrc: mediaItems[0].videoSrc,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
const progressRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const animationFrameRef = useRef<number | null>(null);
|
||||
const imageTransitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const isMountedRef = useRef(false);
|
||||
const hasInitializedRef = useRef(false);
|
||||
|
||||
const resetAllProgressBars = useCallback(() => {
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
|
||||
progressRefs.current.forEach((bar) => {
|
||||
if (bar) {
|
||||
bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
|
||||
bar.style.transform = "scaleX(0)";
|
||||
|
||||
setTimeout(() => {
|
||||
if (bar) {
|
||||
bar.style.transition = "none";
|
||||
}
|
||||
}, ANIMATION_CONFIG.TRANSITION_DURATION);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const animateProgress = useCallback(
|
||||
(index: number) => {
|
||||
if (!progressRefs.current[index]) return;
|
||||
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
|
||||
const progressBar = progressRefs.current[index];
|
||||
progressBar.style.transition = "none";
|
||||
progressBar.style.transform = "scaleX(0)";
|
||||
|
||||
const easeInOut = (t: number): number => {
|
||||
return -(Math.cos(Math.PI * t) - 1) / 2;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
let startTime: number | null = null;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const elapsed = timestamp - startTime;
|
||||
const linearProgress = Math.min(elapsed / ANIMATION_CONFIG.PROGRESS_DURATION, 1);
|
||||
const easedProgress = easeInOut(linearProgress);
|
||||
|
||||
if (progressRefs.current[index]) {
|
||||
progressRefs.current[index]!.style.transform = `scaleX(${easedProgress})`;
|
||||
}
|
||||
|
||||
if (linearProgress < 1) {
|
||||
animationFrameRef.current = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setActiveIndex((prevIndex) => {
|
||||
const nextIndex = prevIndex + 1;
|
||||
if (nextIndex >= itemCount) {
|
||||
resetAllProgressBars();
|
||||
return 0;
|
||||
}
|
||||
return nextIndex;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
animationFrameRef.current = requestAnimationFrame(animate);
|
||||
}, ANIMATION_CONFIG.ANIMATION_START_DELAY);
|
||||
},
|
||||
[itemCount, resetAllProgressBars]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
for (let i = 0; i < activeIndex; i++) {
|
||||
const bar = progressRefs.current[i];
|
||||
if (bar) {
|
||||
bar.style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
|
||||
if (isMountedRef.current) {
|
||||
animateProgress(activeIndex);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
animationFrameRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [activeIndex, animateProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true;
|
||||
|
||||
if (!hasInitializedRef.current) {
|
||||
hasInitializedRef.current = true;
|
||||
|
||||
if (mediaItems && mediaItems[0]) {
|
||||
setCurrentMediaSrc({
|
||||
imageSrc: mediaItems[0].imageSrc,
|
||||
videoSrc: mediaItems[0].videoSrc,
|
||||
});
|
||||
setImageOpacity(1);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (isMountedRef.current) {
|
||||
animateProgress(0);
|
||||
}
|
||||
}, ANIMATION_CONFIG.ANIMATION_START_DELAY);
|
||||
}
|
||||
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
animationFrameRef.current = null;
|
||||
}
|
||||
if (imageTransitionTimeoutRef.current) {
|
||||
clearTimeout(imageTransitionTimeoutRef.current);
|
||||
imageTransitionTimeoutRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [animateProgress, mediaItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMountedRef.current || !mediaItems) return;
|
||||
|
||||
const currentItem = mediaItems[activeIndex];
|
||||
if (!currentItem) return;
|
||||
|
||||
const newMediaSrc = {
|
||||
imageSrc: currentItem.imageSrc,
|
||||
videoSrc: currentItem.videoSrc,
|
||||
};
|
||||
|
||||
if (
|
||||
(newMediaSrc.imageSrc && newMediaSrc.imageSrc !== currentMediaSrc.imageSrc) ||
|
||||
(newMediaSrc.videoSrc && newMediaSrc.videoSrc !== currentMediaSrc.videoSrc)
|
||||
) {
|
||||
if (imageTransitionTimeoutRef.current) {
|
||||
clearTimeout(imageTransitionTimeoutRef.current);
|
||||
}
|
||||
|
||||
setImageOpacity(0);
|
||||
|
||||
imageTransitionTimeoutRef.current = setTimeout(() => {
|
||||
if (isMountedRef.current) {
|
||||
setCurrentMediaSrc(newMediaSrc);
|
||||
setTimeout(() => {
|
||||
if (isMountedRef.current) {
|
||||
setImageOpacity(1);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
}, ANIMATION_CONFIG.IMAGE_TRANSITION_DELAY);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (imageTransitionTimeoutRef.current) {
|
||||
clearTimeout(imageTransitionTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, [activeIndex, mediaItems, currentMediaSrc]);
|
||||
|
||||
const handleImageLoad = useCallback(() => {
|
||||
setImageOpacity(1);
|
||||
}, []);
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
(index: number) => {
|
||||
if (index === activeIndex) return;
|
||||
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
|
||||
for (let i = 0; i < index; i++) {
|
||||
const bar = progressRefs.current[i];
|
||||
if (bar) {
|
||||
bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
|
||||
bar.style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = index; i < progressRefs.current.length; i++) {
|
||||
const bar = progressRefs.current[i];
|
||||
if (bar) {
|
||||
bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
|
||||
bar.style.transform = "scaleX(0)";
|
||||
}
|
||||
}
|
||||
|
||||
setActiveIndex(index);
|
||||
},
|
||||
[activeIndex]
|
||||
);
|
||||
|
||||
return {
|
||||
activeIndex,
|
||||
progressRefs,
|
||||
handleItemClick,
|
||||
imageOpacity,
|
||||
currentMediaSrc,
|
||||
handleImageLoad,
|
||||
};
|
||||
};
|
||||
144
src/components/cardStack/layouts/carousels/AngledCarousel.tsx
Normal file
144
src/components/cardStack/layouts/carousels/AngledCarousel.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface AngledCarouselItem {
|
||||
id: string;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
}
|
||||
|
||||
interface AngledCarouselProps {
|
||||
items: AngledCarouselItem[];
|
||||
className?: string;
|
||||
autoPlay?: boolean;
|
||||
autoPlayInterval?: number;
|
||||
}
|
||||
|
||||
const CARD_TRANSITION_DURATION = 0.8;
|
||||
const CARD_TRANSITION_EASE = [0.65, 0, 0.35, 1] as const;
|
||||
|
||||
const cardVariants = {
|
||||
'hidden-0': { opacity: 0, y: '25px' },
|
||||
'hidden-1': { scale: 0.88, opacity: 0, x: 'calc(100% + 20px)', y: '5%', rotate: 2 },
|
||||
'hidden--1': { scale: 0.88, opacity: 0, x: 'calc(-100% - 20px)', y: '5%', rotate: -2 },
|
||||
'0': { scale: 1, opacity: 1, x: '0%', y: '0%', rotate: 0 },
|
||||
'1': { scale: 0.88, opacity: 1, x: '100%', y: '5%', rotate: 2 },
|
||||
'-1': { scale: 0.88, opacity: 1, x: '-100%', y: '5%', rotate: -2 },
|
||||
'2': { scale: 0.8, opacity: 0, x: '200%', y: '10%', rotate: 4 },
|
||||
'-2': { scale: 0.8, opacity: 0, x: '-200%', y: '10%', rotate: -4 },
|
||||
};
|
||||
|
||||
const AngledCarousel = ({ items, className = "", autoPlay = true, autoPlayInterval = 4000 }: AngledCarouselProps) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [isFirstRender, setIsFirstRender] = useState(true);
|
||||
const autoPlayRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const n = items.length;
|
||||
|
||||
useEffect(() => {
|
||||
if (isFirstRender) {
|
||||
const timeout = setTimeout(() => {
|
||||
setIsFirstRender(false);
|
||||
}, CARD_TRANSITION_DURATION * 1000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [isFirstRender]);
|
||||
|
||||
const resetAutoPlay = useCallback(() => {
|
||||
if (autoPlayRef.current) {
|
||||
clearInterval(autoPlayRef.current);
|
||||
}
|
||||
if (autoPlay) {
|
||||
autoPlayRef.current = setInterval(() => {
|
||||
setActiveIndex((prev) => (prev + 1) % n);
|
||||
}, autoPlayInterval);
|
||||
}
|
||||
}, [autoPlay, autoPlayInterval, n]);
|
||||
|
||||
useEffect(() => {
|
||||
resetAutoPlay();
|
||||
return () => {
|
||||
if (autoPlayRef.current) {
|
||||
clearInterval(autoPlayRef.current);
|
||||
}
|
||||
};
|
||||
}, [resetAutoPlay]);
|
||||
|
||||
const positionFactors = [-2, -1, 0, 1, 2];
|
||||
|
||||
return (
|
||||
<div className={cls("relative w-full flex justify-center items-center overflow-hidden", className)}>
|
||||
<div className="w-[70%] md:w-[40%] aspect-square md:aspect-[16/10] opacity-0 pointer-events-none" />
|
||||
{positionFactors.map((positionFactor) => {
|
||||
const itemIndex = (activeIndex + positionFactor + n) % n;
|
||||
const item = items[itemIndex];
|
||||
const isCenter = positionFactor === 0;
|
||||
const isVisible = Math.abs(positionFactor) <= 1;
|
||||
|
||||
const getAnimateState = () => {
|
||||
const key = positionFactor.toString() as keyof typeof cardVariants;
|
||||
return cardVariants[key];
|
||||
};
|
||||
|
||||
const getInitialState = () => {
|
||||
if (isVisible && isFirstRender) {
|
||||
const key = `hidden-${positionFactor}` as keyof typeof cardVariants;
|
||||
return cardVariants[key];
|
||||
}
|
||||
return getAnimateState();
|
||||
};
|
||||
|
||||
const getDelay = () => {
|
||||
if (isVisible && isFirstRender) {
|
||||
const delays: { [key: string]: number } = { '-1': 0.6, '0': 0.45, '1': 0.6 };
|
||||
return delays[positionFactor.toString()] || 0;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
className="!absolute w-[70%] md:w-[40%] aspect-square md:aspect-[16/10] card p-1 rounded-theme-capped overflow-hidden"
|
||||
style={{
|
||||
zIndex: positionFactor === 0 ? 10 : 5 - Math.abs(positionFactor),
|
||||
}}
|
||||
initial={getInitialState()}
|
||||
animate={getAnimateState()}
|
||||
transition={{
|
||||
duration: CARD_TRANSITION_DURATION,
|
||||
ease: CARD_TRANSITION_EASE,
|
||||
delay: getDelay(),
|
||||
}}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
imageAlt={item.imageAlt}
|
||||
videoAriaLabel={item.videoAriaLabel}
|
||||
imageClassName="w-full h-full rounded-theme-capped object-cover"
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-background/50 backdrop-blur-[1px]"
|
||||
initial={{ opacity: isCenter ? 0 : 1 }}
|
||||
animate={{ opacity: isCenter ? 0 : 1 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AngledCarousel.displayName = "AngledCarousel";
|
||||
|
||||
export default memo(AngledCarousel);
|
||||
137
src/components/cardStack/layouts/carousels/AutoCarousel.tsx
Normal file
137
src/components/cardStack/layouts/carousels/AutoCarousel.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import Marquee from "react-fast-marquee";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { AutoCarouselProps } from "../../types";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
|
||||
const AutoCarousel = ({
|
||||
children,
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
speed = 50,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
carouselClassName = "",
|
||||
itemClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel,
|
||||
showTextBox = true,
|
||||
dualMarquee = false,
|
||||
topMarqueeDirection = "left",
|
||||
bottomCarouselClassName = "",
|
||||
marqueeGapClassName = "",
|
||||
}: AutoCarouselProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
// Bottom marquee direction is opposite of top
|
||||
const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
|
||||
|
||||
// Reverse order for bottom marquee to avoid alignment with top
|
||||
const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
aria-live="off"
|
||||
>
|
||||
<div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<div className="w-full flex flex-col gap-6">
|
||||
{showTextBox && (title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cls(
|
||||
"w-full flex flex-col",
|
||||
marqueeGapClassName || "gap-6"
|
||||
)}
|
||||
>
|
||||
{/* Top/Single Marquee */}
|
||||
<div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
|
||||
<Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</Marquee>
|
||||
</div>
|
||||
|
||||
{/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
|
||||
{dualMarquee && (
|
||||
<div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
|
||||
<Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
|
||||
{Children.map(bottomChildren, (child, index) => (
|
||||
<div
|
||||
key={`bottom-${index}`}
|
||||
className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</Marquee>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCarousel.displayName = "AutoCarousel";
|
||||
|
||||
export default memo(AutoCarousel);
|
||||
171
src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
Normal file
171
src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { ButtonCarouselProps } from "../../types";
|
||||
import { usePrevNextButtons } from "../../hooks/usePrevNextButtons";
|
||||
import { useScrollProgress } from "../../hooks/useScrollProgress";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
|
||||
const ButtonCarousel = ({
|
||||
children,
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
carouselClassName = "",
|
||||
carouselItemClassName = "",
|
||||
controlsClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel,
|
||||
}: ButtonCarouselProps) => {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
|
||||
|
||||
const {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
} = usePrevNextButtons(emblaApi);
|
||||
|
||||
const scrollProgress = useScrollProgress(emblaApi);
|
||||
|
||||
const childrenArray = Children.toArray(children);
|
||||
const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative px-[var(--width-0)] py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-full mx-auto", containerClassName)}>
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<div className="w-full flex flex-col gap-6">
|
||||
{(title || titleSegments || description) && (
|
||||
<div className="w-content-width mx-auto">
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"w-full flex flex-col gap-6"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"overflow-hidden w-full relative z-10 flex cursor-grab",
|
||||
carouselClassName
|
||||
)}
|
||||
ref={emblaRef}
|
||||
>
|
||||
<div className="flex gap-6 w-full">
|
||||
<div className="flex-shrink-0 w-carousel-padding" />
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls("flex-none select-none w-carousel-item-3 xl:w-carousel-item-4 mb-6", heightClasses, carouselItemClassName)}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex-shrink-0 w-carousel-padding" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls("w-full flex", controlsClassName)}>
|
||||
<div className="flex-shrink-0 w-carousel-padding-controls" />
|
||||
<div className="flex justify-between items-center w-full">
|
||||
<div
|
||||
className="rounded-full card relative h-2 w-50 overflow-hidden"
|
||||
role="progressbar"
|
||||
aria-label="Carousel progress"
|
||||
aria-valuenow={Math.round(scrollProgress)}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
>
|
||||
<div
|
||||
className="bg-foreground primary-button absolute w-full top-0 bottom-0 -left-full rounded-full"
|
||||
style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onPrevButtonClick}
|
||||
disabled={prevBtnDisabled}
|
||||
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
|
||||
type="button"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<ChevronLeft className="h-[40%] w-auto aspect-square text-foreground" />
|
||||
</button>
|
||||
<button
|
||||
onClick={onNextButtonClick}
|
||||
disabled={nextBtnDisabled}
|
||||
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
|
||||
type="button"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<ChevronRight className="h-[40%] w-auto aspect-square text-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-carousel-padding-controls" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonCarousel.displayName = "ButtonCarousel";
|
||||
|
||||
export default memo(ButtonCarousel);
|
||||
154
src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
Normal file
154
src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { EmblaCarouselType } from "embla-carousel";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { FullWidthCarouselProps } from "../../types";
|
||||
|
||||
const FullWidthCarousel = ({
|
||||
children,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
carouselClassName = "",
|
||||
dotsClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Carousel section",
|
||||
}: FullWidthCarouselProps) => {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
const childrenArray = Children.toArray(children);
|
||||
|
||||
const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
|
||||
setSelectedIndex(emblaApi.selectedScrollSnap());
|
||||
}, []);
|
||||
|
||||
const scrollTo = useCallback(
|
||||
(index: number) => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.scrollTo(index);
|
||||
},
|
||||
[emblaApi]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
||||
onSelect(emblaApi);
|
||||
emblaApi.on("select", onSelect).on("reInit", onSelect);
|
||||
|
||||
return () => {
|
||||
emblaApi.off("select", onSelect).off("reInit", onSelect);
|
||||
};
|
||||
}, [emblaApi, onSelect]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
||||
const autoplay = setInterval(() => {
|
||||
emblaApi.scrollNext();
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(autoplay);
|
||||
}, [emblaApi]);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
<div className="w-content-width mx-auto">
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={cls(
|
||||
"overflow-hidden w-full relative z-10",
|
||||
carouselClassName
|
||||
)}
|
||||
ref={emblaRef}
|
||||
>
|
||||
<div className="flex w-full">
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex-none w-70 mr-6"
|
||||
>
|
||||
{isValidElement(child)
|
||||
? cloneElement(child, { isActive: selectedIndex === index } as Record<string, unknown>)
|
||||
: child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls("flex items-center justify-center gap-2", dotsClassName)}>
|
||||
{childrenArray.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => scrollTo(index)}
|
||||
className={cls(
|
||||
"relative cursor-pointer h-2 rounded-full bg-accent transition-all duration-300",
|
||||
selectedIndex === index
|
||||
? "w-8 opacity-100"
|
||||
: "w-2 opacity-20"
|
||||
)}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
aria-current={selectedIndex === index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
FullWidthCarousel.displayName = "FullWidthCarousel";
|
||||
|
||||
export default memo(FullWidthCarousel);
|
||||
134
src/components/cardStack/layouts/grid/GridLayout.tsx
Normal file
134
src/components/cardStack/layouts/grid/GridLayout.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { GridLayoutProps } from "../../types";
|
||||
import { gridConfigs } from "./gridConfigs";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
|
||||
const GridLayout = ({
|
||||
children,
|
||||
itemCount,
|
||||
gridVariant = "uniform-all-items-equal",
|
||||
uniformGridCustomHeightClasses,
|
||||
gridRowsClassName,
|
||||
itemHeightClassesOverride,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
gridClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel,
|
||||
}: GridLayoutProps) => {
|
||||
// Get config for this variant and item count
|
||||
const config = gridConfigs[gridVariant]?.[itemCount];
|
||||
|
||||
// Fallback to default uniform grid if no config
|
||||
const gridColsMap = {
|
||||
1: "md:grid-cols-1",
|
||||
2: "md:grid-cols-2",
|
||||
3: "md:grid-cols-3",
|
||||
4: "md:grid-cols-4",
|
||||
};
|
||||
const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4";
|
||||
|
||||
// Use config values or fallback
|
||||
const gridCols = config?.gridCols || defaultGridCols;
|
||||
const gridRows = gridRowsClassName || config?.gridRows || "";
|
||||
const itemClasses = config?.itemClasses || [];
|
||||
const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
|
||||
const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
|
||||
const itemWrapperClass = config?.itemWrapperClass || "";
|
||||
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
{(title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"grid grid-cols-1 gap-6",
|
||||
gridCols,
|
||||
gridRows,
|
||||
gridClassName
|
||||
)}
|
||||
>
|
||||
{childrenArray.map((child, index) => {
|
||||
const itemClass = itemClasses[index] || "";
|
||||
const itemHeightClass = itemHeightClasses[index] || "";
|
||||
const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
|
||||
return combinedClass ? (
|
||||
<div
|
||||
key={index}
|
||||
className={combinedClass}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key={index}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
GridLayout.displayName = "GridLayout";
|
||||
|
||||
export default memo(GridLayout);
|
||||
464
src/components/cardStack/layouts/grid/gridConfigs.ts
Normal file
464
src/components/cardStack/layouts/grid/gridConfigs.ts
Normal file
@@ -0,0 +1,464 @@
|
||||
type GridConfig = {
|
||||
gridCols: string;
|
||||
gridRows?: string;
|
||||
itemClasses: string[];
|
||||
itemHeightClasses?: string[];
|
||||
heightClasses?: string;
|
||||
itemWrapperClass?: string;
|
||||
} | null;
|
||||
|
||||
type GridVariantConfig = {
|
||||
[key: number]: GridConfig;
|
||||
};
|
||||
|
||||
export const gridConfigs: Record<string, GridVariantConfig> = {
|
||||
"uniform-all-items-equal": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"uniform-staggered-items": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-heights-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-sizes": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-14 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-sizes-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-2 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-14 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"two-items-tall-short": {
|
||||
1: null,
|
||||
2: {
|
||||
gridCols: "md:grid-cols-2 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-120",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"two-items-short-tall": {
|
||||
1: null,
|
||||
2: {
|
||||
gridCols: "md:grid-cols-2 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-120",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"bento-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
},
|
||||
"bento-grid-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-2 md:row-start-1 md:col-start-3 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
},
|
||||
"two-columns-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[13rem_13rem_0.5rem_0.5rem_13rem_13rem] 2xl:grid-rows-[16rem_16rem_0.5rem_0.5rem_16rem_16rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-4 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-4 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-2 md:row-start-5 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"asymmetric-60-wide-40-narrow": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-10 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-10",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"three-columns-all-equal-width": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"four-items-2x2-equal-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[26.5rem_26.5rem] 2xl:grid-rows-[32.5rem_32.5rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"four-items-2x2-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-start-1 md:row-start-1",
|
||||
"md:col-start-2 md:row-start-1",
|
||||
"md:col-start-1 md:row-start-2",
|
||||
"md:col-start-2 md:row-start-2",
|
||||
],
|
||||
itemHeightClasses: [
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-alternating-heights-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-start-1 md:row-start-1",
|
||||
"md:col-start-2 md:row-start-1",
|
||||
"md:col-start-1 md:row-start-2",
|
||||
"md:col-start-2 md:row-start-2",
|
||||
],
|
||||
itemHeightClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-staggered-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-staggered-grid-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
itemClasses: [
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"one-large-right-three-stacked-left": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"items-top-row-full-width-bottom": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"full-width-top-items-bottom-row": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"one-large-left-three-stacked-right": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
};
|
||||
154
src/components/cardStack/layouts/timelines/TimelineBase.tsx
Normal file
154
src/components/cardStack/layouts/timelines/TimelineBase.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import React, { Children, useCallback } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type TimelineVariant = "timeline" | "timeline-three-columns";
|
||||
|
||||
interface TimelineBaseProps {
|
||||
children: React.ReactNode;
|
||||
variant?: TimelineVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
title?: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description?: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout?: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const TimelineBase = ({
|
||||
children,
|
||||
variant = "timeline",
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Timeline section",
|
||||
}: TimelineBaseProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
const getItemClasses = useCallback((index: number) => {
|
||||
if (variant === "timeline-three-columns") {
|
||||
// Pattern: start (0) → center (1) → end (2) → center (3) → start (4) → center (5) ...
|
||||
const position = index % 4;
|
||||
const alignmentClasses = cls(
|
||||
position === 0 && "self-start md:self-start",
|
||||
position === 1 && "self-end md:self-center",
|
||||
position === 2 && "self-start md:self-end",
|
||||
position === 3 && "self-end md:self-center"
|
||||
);
|
||||
return alignmentClasses;
|
||||
}
|
||||
|
||||
// Default timeline variant - scattered/organic pattern
|
||||
const alignmentClass =
|
||||
index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
|
||||
|
||||
const marginClasses = cls(
|
||||
index % 4 === 0 && "md:ml-0",
|
||||
index % 4 === 1 && "md:mr-20",
|
||||
index % 4 === 2 && "md:ml-15",
|
||||
index % 4 === 3 && "md:mr-30"
|
||||
);
|
||||
|
||||
return cls(alignmentClass, marginClasses);
|
||||
}, [variant]);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div
|
||||
className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
|
||||
>
|
||||
{(title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-10 flex flex-col gap-6 md:gap-15"
|
||||
)}
|
||||
>
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineBase.displayName = "TimelineBase";
|
||||
|
||||
export default React.memo(TimelineBase);
|
||||
144
src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
Normal file
144
src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, memo, Children } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
interface TimelineCardStackProps {
|
||||
children: React.ReactNode;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const TimelineCardStack = ({
|
||||
children,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Timeline section",
|
||||
}: TimelineCardStackProps) => {
|
||||
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const childrenArray = Children.toArray(children);
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
itemRefs.current.forEach((ref, position) => {
|
||||
if (!ref) return;
|
||||
|
||||
const isLast = position === itemRefs.current.length - 1;
|
||||
|
||||
const timeline = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ref,
|
||||
start: "center center",
|
||||
end: "+=100%",
|
||||
scrub: true,
|
||||
},
|
||||
});
|
||||
|
||||
timeline.set(ref, { willChange: "opacity" }).to(ref, {
|
||||
ease: "none",
|
||||
opacity: isLast ? 1 : 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
ctx.revert();
|
||||
};
|
||||
}, [childrenArray.length]);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative overflow-visible h-fit py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
<div className="w-full flex flex-col gap-[var(--width-25)] md:gap-[6.25vh]">
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
ref={(el) => {
|
||||
itemRefs.current[index] = el;
|
||||
}}
|
||||
className="!sticky w-full card rounded-theme-capped h-[140vw] md:h-[75vh] top-[25vw] md:top-[12.5vh]"
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineCardStack.displayName = "TimelineCardStack";
|
||||
|
||||
export default memo(TimelineCardStack);
|
||||
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import React, { Children, useCallback } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
|
||||
|
||||
interface TimelineHorizontalCardStackProps {
|
||||
children: React.ReactNode;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
mediaItems?: MediaItem[];
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
cardClassName?: string;
|
||||
progressBarClassName?: string;
|
||||
mediaContainerClassName?: string;
|
||||
mediaClassName?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const TimelineHorizontalCardStack = ({
|
||||
children,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
mediaItems,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
cardClassName = "",
|
||||
progressBarClassName = "",
|
||||
mediaContainerClassName = "",
|
||||
mediaClassName = "",
|
||||
ariaLabel = "Timeline section",
|
||||
}: TimelineHorizontalCardStackProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const itemCount = childrenArray.length;
|
||||
|
||||
const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({
|
||||
itemCount,
|
||||
mediaItems,
|
||||
});
|
||||
|
||||
const getGridColumns = useCallback(() => {
|
||||
if (itemCount === 2) return "md:grid-cols-2";
|
||||
if (itemCount === 3) return "md:grid-cols-3";
|
||||
return "md:grid-cols-4";
|
||||
}, [itemCount]);
|
||||
|
||||
const getItemOpacity = useCallback(
|
||||
(index: number) => {
|
||||
return index <= activeIndex ? "opacity-100" : "opacity-50";
|
||||
},
|
||||
[activeIndex]
|
||||
);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
{mediaItems && mediaItems.length > 0 && (
|
||||
<div className={cls("relative card rounded-theme-capped overflow-hidden aspect-square md:aspect-[17/9]", mediaContainerClassName)}>
|
||||
<div
|
||||
className="absolute inset-6 z-1 transition-opacity duration-300 overflow-hidden"
|
||||
style={{ opacity: imageOpacity }}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={currentMediaSrc.imageSrc}
|
||||
videoSrc={currentMediaSrc.videoSrc}
|
||||
imageAlt={mediaItems[activeIndex]?.imageAlt}
|
||||
videoAriaLabel={mediaItems[activeIndex]?.videoAriaLabel}
|
||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={cls("relative grid grid-cols-1 gap-6 md:gap-6", getGridColumns())}>
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls(
|
||||
"card rounded-theme-capped p-6 flex flex-col justify-between gap-6 transition-all duration-300",
|
||||
index === activeIndex ? "cursor-default" : "cursor-pointer hover:shadow-lg",
|
||||
getItemOpacity(index),
|
||||
cardClassName
|
||||
)}
|
||||
onClick={() => handleItemClick(index)}
|
||||
>
|
||||
{child}
|
||||
<div className="relative w-full h-px overflow-hidden">
|
||||
<div className="absolute z-0 w-full h-full bg-foreground/20" />
|
||||
<div
|
||||
ref={(el) => {
|
||||
if (el !== null) {
|
||||
progressRefs.current[index] = el;
|
||||
}
|
||||
}}
|
||||
className={cls("absolute z-10 h-full w-full bg-foreground origin-left", progressBarClassName)}
|
||||
style={{ transform: "scaleX(0)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack";
|
||||
|
||||
export default React.memo(TimelineHorizontalCardStack);
|
||||
261
src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
Normal file
261
src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
"use client";
|
||||
|
||||
import React, { memo } from "react";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig } from "../../types";
|
||||
import type { TitleSegment } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface PhoneFrameProps {
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
phoneRef: (el: HTMLDivElement | null) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PhoneFrame = memo(({
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt,
|
||||
videoAriaLabel,
|
||||
phoneRef,
|
||||
className = "",
|
||||
}: PhoneFrameProps) => (
|
||||
<div
|
||||
ref={phoneRef}
|
||||
className={cls("card rounded-theme-capped p-1 overflow-hidden", className)}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName="w-full h-full object-cover rounded-theme-capped"
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
||||
PhoneFrame.displayName = "PhoneFrame";
|
||||
|
||||
interface TimelinePhoneViewProps {
|
||||
items: TimelinePhoneViewItem[];
|
||||
showTextBox?: boolean;
|
||||
showDivider?: boolean;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
desktopContainerClassName?: string;
|
||||
mobileContainerClassName?: string;
|
||||
desktopContentClassName?: string;
|
||||
desktopWrapperClassName?: string;
|
||||
mobileWrapperClassName?: string;
|
||||
phoneFrameClassName?: string;
|
||||
mobilePhoneFrameClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const TimelinePhoneView = ({
|
||||
items,
|
||||
showTextBox = true,
|
||||
showDivider = false,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
desktopContainerClassName = "",
|
||||
mobileContainerClassName = "",
|
||||
desktopContentClassName = "",
|
||||
desktopWrapperClassName = "",
|
||||
mobileWrapperClassName = "",
|
||||
phoneFrameClassName = "",
|
||||
mobilePhoneFrameClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
ariaLabel = "Timeline phone view section",
|
||||
}: TimelinePhoneViewProps) => {
|
||||
const { imageRefs, mobileImageRefs } = usePhoneAnimations(items);
|
||||
const sectionHeightStyle = { height: `${items.length * 100}vh` };
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20 overflow-hidden md:overflow-visible",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
{showTextBox && (
|
||||
<div className="relative w-content-width mx-auto" >
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showDivider && (
|
||||
<div className="relative w-content-width mx-auto h-px bg-accent md:hidden" />
|
||||
)}
|
||||
<div className="hidden md:flex relative" style={sectionHeightStyle}>
|
||||
<div
|
||||
className={cls(
|
||||
"absolute top-0 left-0 flex flex-col w-[calc(var(--width-content-width)-var(--width-20)*2)] 2xl:w-[calc(var(--width-content-width)-var(--width-25)*2)] mx-auto right-0 z-10",
|
||||
desktopContainerClassName
|
||||
)}
|
||||
style={sectionHeightStyle}
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={`content-${index}`}
|
||||
className={cls(
|
||||
item.trigger,
|
||||
"w-full mx-auto h-screen flex justify-center items-center",
|
||||
desktopContentClassName
|
||||
)}
|
||||
>
|
||||
<div className={desktopWrapperClassName}>
|
||||
{item.content}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="sticky top-0 left-0 h-screen w-full overflow-hidden">
|
||||
{items.map((item, itemIndex) => (
|
||||
<div
|
||||
key={`phones-${itemIndex}`}
|
||||
className="h-screen w-full absolute top-0 left-0"
|
||||
>
|
||||
<div className="w-content-width mx-auto h-full flex flex-row justify-between items-center">
|
||||
<PhoneFrame
|
||||
key={`phone-${itemIndex}-1`}
|
||||
imageSrc={item.imageOne}
|
||||
videoSrc={item.videoOne}
|
||||
imageAlt={item.imageAltOne}
|
||||
videoAriaLabel={item.videoAriaLabelOne}
|
||||
phoneRef={(el) => {
|
||||
if (imageRefs.current) {
|
||||
imageRefs.current[itemIndex * 2] = el;
|
||||
}
|
||||
}}
|
||||
className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
|
||||
/>
|
||||
<PhoneFrame
|
||||
key={`phone-${itemIndex}-2`}
|
||||
imageSrc={item.imageTwo}
|
||||
videoSrc={item.videoTwo}
|
||||
imageAlt={item.imageAltTwo}
|
||||
videoAriaLabel={item.videoAriaLabelTwo}
|
||||
phoneRef={(el) => {
|
||||
if (imageRefs.current) {
|
||||
imageRefs.current[itemIndex * 2 + 1] = el;
|
||||
}
|
||||
}}
|
||||
className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cls("md:hidden flex flex-col gap-20", mobileContainerClassName)}>
|
||||
{items.map((item, itemIndex) => (
|
||||
<div
|
||||
key={`mobile-item-${itemIndex}`}
|
||||
className="flex flex-col gap-10"
|
||||
>
|
||||
<div className={mobileWrapperClassName}>
|
||||
{item.content}
|
||||
</div>
|
||||
<div className="flex flex-row gap-6 justify-center">
|
||||
<PhoneFrame
|
||||
key={`mobile-phone-${itemIndex}-1`}
|
||||
imageSrc={item.imageOne}
|
||||
videoSrc={item.videoOne}
|
||||
imageAlt={item.imageAltOne}
|
||||
videoAriaLabel={item.videoAriaLabelOne}
|
||||
phoneRef={(el) => {
|
||||
if (mobileImageRefs.current) {
|
||||
mobileImageRefs.current[itemIndex * 2] = el;
|
||||
}
|
||||
}}
|
||||
className={cls("w-40 h-80", mobilePhoneFrameClassName)}
|
||||
/>
|
||||
<PhoneFrame
|
||||
key={`mobile-phone-${itemIndex}-2`}
|
||||
imageSrc={item.imageTwo}
|
||||
videoSrc={item.videoTwo}
|
||||
imageAlt={item.imageAltTwo}
|
||||
videoAriaLabel={item.videoAriaLabelTwo}
|
||||
phoneRef={(el) => {
|
||||
if (mobileImageRefs.current) {
|
||||
mobileImageRefs.current[itemIndex * 2 + 1] = el;
|
||||
}
|
||||
}}
|
||||
className={cls("w-40 h-80", mobilePhoneFrameClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
TimelinePhoneView.displayName = "TimelinePhoneView";
|
||||
|
||||
export default memo(TimelinePhoneView);
|
||||
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, memo } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig } from "../../types";
|
||||
import type { CardAnimationType } from "../../types";
|
||||
import type { TitleSegment } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
interface TimelineProcessFlowItem {
|
||||
id: string;
|
||||
content: React.ReactNode;
|
||||
media: React.ReactNode;
|
||||
reverse: boolean;
|
||||
}
|
||||
|
||||
interface TimelineProcessFlowProps {
|
||||
items: TimelineProcessFlowItem[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
animationType: CardAnimationType;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
itemClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
numberClassName?: string;
|
||||
contentWrapperClassName?: string;
|
||||
gapClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
}
|
||||
|
||||
const TimelineProcessFlow = ({
|
||||
items,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
animationType,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Timeline process flow section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
itemClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
numberClassName = "",
|
||||
contentWrapperClassName = "",
|
||||
gapClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
}: TimelineProcessFlowProps) => {
|
||||
const processLineRef = useRef<HTMLDivElement>(null);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length });
|
||||
|
||||
useEffect(() => {
|
||||
if (!processLineRef.current) return;
|
||||
|
||||
gsap.fromTo(
|
||||
processLineRef.current,
|
||||
{ yPercent: -100 },
|
||||
{
|
||||
yPercent: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: ".timeline-line",
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
scrub: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-full flex flex-col gap-6", containerClassName)}>
|
||||
<div className="relative w-content-width mx-auto">
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-full">
|
||||
<div className="timeline-line pointer-events-none absolute top-0 right-[var(--width-10)] md:right-auto md:left-1/2 md:-translate-x-1/2 w-px h-full z-0 overflow-hidden bg-foreground">
|
||||
<div className="w-full h-full bg-accent" ref={processLineRef} />
|
||||
</div>
|
||||
<ol className={cls("relative flex flex-col gap-10 md:gap-20 w-content-width mx-auto", gapClassName)}>
|
||||
{items.map((item, index) => (
|
||||
<li
|
||||
key={item.id}
|
||||
ref={(el) => {
|
||||
itemRefs.current[index] = el;
|
||||
}}
|
||||
className={cls(
|
||||
"relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between",
|
||||
item.reverse && "flex-col md:flex-row-reverse",
|
||||
itemClassName
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cls("relative w-70 md:w-30", mediaWrapperClassName)}
|
||||
>
|
||||
{item.media}
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"absolute top-1/2 right-[calc(var(--height-8)/-2)] md:right-auto md:left-1/2 md:-translate-x-1/2 -translate-y-1/2 h-8 aspect-square rounded-full flex items-center justify-center z-10 primary-button",
|
||||
numberClassName
|
||||
)}
|
||||
>
|
||||
<p className="text-sm text-background">{item.id}</p>
|
||||
</div>
|
||||
<div className={cls("relative w-70 md:w-30", contentWrapperClassName)}>
|
||||
{item.content}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineProcessFlow.displayName = "TimelineProcessFlow";
|
||||
|
||||
export default memo(TimelineProcessFlow);
|
||||
141
src/components/cardStack/types.ts
Normal file
141
src/components/cardStack/types.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig } from "@/types/button";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
export type { ButtonConfig, TextboxLayout, InvertedBackground };
|
||||
|
||||
export type TitleSegment =
|
||||
| { type: "text"; content: string }
|
||||
| { type: "image"; src: string; alt?: string };
|
||||
|
||||
export interface TimelineCardStackItem {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
export type GridVariant =
|
||||
| "uniform-all-items-equal"
|
||||
| "uniform-staggered-items"
|
||||
| "uniform-alternating-heights"
|
||||
| "uniform-alternating-heights-inverted"
|
||||
| "uniform-alternating-sizes"
|
||||
| "uniform-alternating-sizes-inverted"
|
||||
| "two-items-tall-short"
|
||||
| "two-items-short-tall"
|
||||
| "bento-grid"
|
||||
| "bento-grid-inverted"
|
||||
| "two-columns-alternating-heights"
|
||||
| "asymmetric-60-wide-40-narrow"
|
||||
| "three-columns-all-equal-width"
|
||||
| "four-items-2x2-equal-grid"
|
||||
| "four-items-2x2-alternating-heights"
|
||||
| "four-items-2x2-alternating-heights-inverted"
|
||||
| "four-items-2x2-staggered-grid"
|
||||
| "four-items-2x2-staggered-grid-inverted"
|
||||
| "one-large-right-three-stacked-left"
|
||||
| "items-top-row-full-width-bottom"
|
||||
| "full-width-top-items-bottom-row"
|
||||
| "one-large-left-three-stacked-right"
|
||||
| "timeline"
|
||||
| "timeline-three-columns";
|
||||
|
||||
export type CardAnimationType =
|
||||
| "none"
|
||||
| "opacity"
|
||||
| "slide-up"
|
||||
| "scale-rotate"
|
||||
| "blur-reveal";
|
||||
|
||||
export interface TextBoxProps {
|
||||
title?: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description?: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
}
|
||||
|
||||
export interface CardStackProps extends TextBoxProps {
|
||||
children: React.ReactNode;
|
||||
mode?: "auto" | "buttons";
|
||||
gridVariant?: GridVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
gridRowsClassName?: string;
|
||||
itemHeightClassesOverride?: string[];
|
||||
animationType: CardAnimationType;
|
||||
carouselThreshold?: number;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
gridClassName?: string;
|
||||
carouselClassName?: string;
|
||||
carouselItemClassName?: string;
|
||||
controlsClassName?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
export interface GridLayoutProps extends TextBoxProps {
|
||||
children: React.ReactNode;
|
||||
itemCount: number;
|
||||
gridVariant?: GridVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
gridRowsClassName?: string;
|
||||
itemHeightClassesOverride?: string[];
|
||||
animationType: CardAnimationType;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
gridClassName?: string;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
export interface AutoCarouselProps extends TextBoxProps {
|
||||
children: React.ReactNode;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
speed?: number;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
carouselClassName?: string;
|
||||
itemClassName?: string;
|
||||
ariaLabel: string;
|
||||
showTextBox?: boolean;
|
||||
dualMarquee?: boolean;
|
||||
topMarqueeDirection?: "left" | "right";
|
||||
bottomMarqueeDirection?: "left" | "right";
|
||||
bottomCarouselClassName?: string;
|
||||
marqueeGapClassName?: string;
|
||||
}
|
||||
|
||||
export interface ButtonCarouselProps extends TextBoxProps {
|
||||
children: React.ReactNode;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
carouselClassName?: string;
|
||||
carouselItemClassName?: string;
|
||||
controlsClassName?: string;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
export interface FullWidthCarouselProps extends TextBoxProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
carouselClassName?: string;
|
||||
dotsClassName?: string;
|
||||
ariaLabel: string;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user