Initial commit
This commit is contained in:
4
.env
Normal file
4
.env
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
VITE_API_URL=https://dev.api.webild.io
|
||||
VITE_PROJECT_ID=072acb1a-1bd1-496c-9bc4-018eee053fd6
|
||||
|
||||
46
.gitea/workflows/build.yml
Normal file
46
.gitea/workflows/build.yml
Normal file
@@ -0,0 +1,46 @@
|
||||
name: Code Check
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
check:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
run: git clone --depth 1 --branch ${{ gitea.ref_name }} ${{ gitea.server_url }}/${{ gitea.repository }}.git . || exit 1
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
if [ -f "vite.config.ts" ]; then
|
||||
if [ -d "/var/node_modules_cache_v4/node_modules" ]; then
|
||||
ln -s /var/node_modules_cache_v4/node_modules ./node_modules
|
||||
elif [ -f "pnpm-lock.yaml" ]; then
|
||||
npm install -g pnpm --silent
|
||||
pnpm install --frozen-lockfile
|
||||
else
|
||||
npm ci --prefer-offline --no-audit
|
||||
fi
|
||||
elif [ -d "/var/node_modules_cache/node_modules" ]; then
|
||||
ln -s /var/node_modules_cache/node_modules ./node_modules
|
||||
else
|
||||
npm ci --prefer-offline --no-audit
|
||||
fi
|
||||
timeout-minutes: 5
|
||||
|
||||
- name: TypeScript check
|
||||
run: npm run typecheck 2>&1 | tee build.log
|
||||
timeout-minutes: 3
|
||||
|
||||
- name: ESLint check
|
||||
run: npm run lint 2>&1 | tee -a build.log
|
||||
timeout-minutes: 3
|
||||
|
||||
- name: Upload build log on failure
|
||||
if: failure()
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: build-log
|
||||
path: build.log
|
||||
retention-days: 1
|
||||
453
src/App.tsx
Normal file
453
src/App.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
|
||||
import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
|
||||
import TestimonialAvatarCard from '@/components/sections/testimonial/TestimonialAvatarCard';
|
||||
import { Sparkles, Star, User, Zap } from "lucide-react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="FlowDesk"
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
tag="Next-Gen Project Management"
|
||||
title="Manage Flow, Not Just Tasks"
|
||||
description="FlowDesk is the professional project management platform built to help teams align, track, and ship faster with AI-powered insights."
|
||||
primaryButton={{
|
||||
text: "Start for Free",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "See How It Works",
|
||||
href: "#features",
|
||||
}}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Chen",
|
||||
handle: "@alex",
|
||||
text: "FlowDesk transformed our team's delivery timeline by 30%.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-male-tech-cto-1776606269206-c9c33622.png",
|
||||
},
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarah",
|
||||
text: "The cleanest Kanban experience I've used to date.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-female-softwa-1776606280536-80740258.png",
|
||||
},
|
||||
{
|
||||
name: "James Wilson",
|
||||
handle: "@jwilson",
|
||||
text: "Absolutely essential for scaling our dev team.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606260580-33a20985.png",
|
||||
},
|
||||
{
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elenar",
|
||||
text: "The AI insights saved us hours of manual reporting.",
|
||||
rating: 4,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-diverse-techn-1776606291591-9dcc3f91.png",
|
||||
},
|
||||
{
|
||||
name: "Marcus Thorne",
|
||||
handle: "@mthorne",
|
||||
text: "Finally, a tool that actually understands complex workflows.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/high-tech-abstract-background-with-float-1776606303899-0f63be24.png",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606260580-33a20985.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Philosophy"
|
||||
quote="Productivity is not about working harder, it's about clarity in the workflow."
|
||||
author="Mark Sterling"
|
||||
role="Founder, FlowDesk"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-diverse-techn-1776606291591-9dcc3f91.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesBento
|
||||
tag="Powerful Features"
|
||||
title="Everything Your Team Needs"
|
||||
description="Stop juggling tools. Centralize your operations with FlowDesk."
|
||||
features={[
|
||||
{
|
||||
title: "Task Tracking",
|
||||
description: "Intuitive tracking from creation to completion.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Workflow Control",
|
||||
subheading: "Phase-based management",
|
||||
items: [
|
||||
{
|
||||
label: "Define Tasks",
|
||||
detail: "Add detailed descriptions.",
|
||||
},
|
||||
{
|
||||
label: "Assignees",
|
||||
detail: "Tag team members easily.",
|
||||
},
|
||||
{
|
||||
label: "Deadlines",
|
||||
detail: "Never miss a shipping date.",
|
||||
},
|
||||
],
|
||||
completedLabel: "Done",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606322983-4c51e311.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
{
|
||||
title: "Team Collaboration",
|
||||
description: "Synchronize with real-time updates.",
|
||||
bentoComponent: "chat-marquee",
|
||||
aiIcon: Star,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "Is the API ready?",
|
||||
aiResponse: "Yes, deploying to staging now.",
|
||||
},
|
||||
],
|
||||
placeholder: "Collaborate here...",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606260580-33a20985.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
{
|
||||
title: "Time Analytics",
|
||||
description: "Track productivity across projects.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-male-tech-cto-1776606269206-c9c33622.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
{
|
||||
title: "Kanban Board",
|
||||
description: "Visualize your workflow.",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-female-softwa-1776606280536-80740258.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606332827-180a3b3c.png",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606342612-98f97f8f.png",
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-diverse-techn-1776606291591-9dcc3f91.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
{
|
||||
title: "Integrations",
|
||||
description: "Connect your favorite stack.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Zap,
|
||||
items: [
|
||||
"Github",
|
||||
"Slack",
|
||||
"Jira",
|
||||
"Vercel",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/high-tech-abstract-background-with-float-1776606303899-0f63be24.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
{
|
||||
title: "AI Assistant",
|
||||
description: "Automated workflow insights.",
|
||||
bentoComponent: "icon-text-marquee",
|
||||
centerIcon: Sparkles,
|
||||
texts: [
|
||||
"Automated reports",
|
||||
"Task summarization",
|
||||
"Smart scheduling",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-office-desk-setup-with-a-lapt-1776606312348-6a2ff795.png",
|
||||
imageAlt: "A high-end project management dashboard UI with dark theme, showing Kanban boards, task lists, and a",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductRatingCards
|
||||
tag="Add-on Modules"
|
||||
title="Extend FlowDesk"
|
||||
description="Enhance your experience with advanced add-on modules."
|
||||
products={[
|
||||
{
|
||||
brand: "Core",
|
||||
name: "Team Sync",
|
||||
price: "Included",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606353772-aa2a06ff.png",
|
||||
},
|
||||
{
|
||||
brand: "Add-on",
|
||||
name: "Time Tracker",
|
||||
price: "$15",
|
||||
rating: 5,
|
||||
reviewCount: "400",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606362937-42879a07.png",
|
||||
},
|
||||
{
|
||||
brand: "Add-on",
|
||||
name: "Gantt Pro",
|
||||
price: "$25",
|
||||
rating: 4,
|
||||
reviewCount: "250",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606371333-cef24d2e.png",
|
||||
},
|
||||
{
|
||||
brand: "Add-on",
|
||||
name: "Advanced Analytics",
|
||||
price: "$30",
|
||||
rating: 5,
|
||||
reviewCount: "100",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606380367-193b661d.png",
|
||||
},
|
||||
{
|
||||
brand: "Add-on",
|
||||
name: "Custom Workflows",
|
||||
price: "$40",
|
||||
rating: 5,
|
||||
reviewCount: "50",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606389668-71559a95.png",
|
||||
},
|
||||
{
|
||||
brand: "Add-on",
|
||||
name: "Global Audit Log",
|
||||
price: "$50",
|
||||
rating: 4,
|
||||
reviewCount: "30",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606398943-ce05d37e.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSplitCards
|
||||
tag="Simple Pricing"
|
||||
title="Select Your Plan"
|
||||
description="Choose the perfect fit for your team size."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$9",
|
||||
period: "/mo",
|
||||
description: "Best for small teams just getting started.",
|
||||
primaryButton: {
|
||||
text: "Buy Starter",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Included features:",
|
||||
features: [
|
||||
"5 team members",
|
||||
"Core features",
|
||||
"Standard support",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$29",
|
||||
period: "/mo",
|
||||
description: "Perfect for growing teams scaling fast.",
|
||||
primaryButton: {
|
||||
text: "Buy Pro",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Everything in Starter plus:",
|
||||
features: [
|
||||
"20 team members",
|
||||
"AI Assistant",
|
||||
"Priority support",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "$99",
|
||||
period: "/mo",
|
||||
description: "Full access for high-demand organizations.",
|
||||
primaryButton: {
|
||||
text: "Buy Enterprise",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Everything in Pro plus:",
|
||||
features: [
|
||||
"Unlimited members",
|
||||
"SSO & Security",
|
||||
"Dedicated manager",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsMinimalCards
|
||||
tag="Impact"
|
||||
title="Proven Results"
|
||||
metrics={[
|
||||
{
|
||||
value: "10k+",
|
||||
description: "Teams onboarded",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
description: "Uptime guarantee",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
description: "Expert support",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialAvatarCard
|
||||
tag="Social Proof"
|
||||
title="Trusted by CTOs"
|
||||
primaryButton={{
|
||||
text: "Read Case Studies",
|
||||
href: "#",
|
||||
}}
|
||||
avatars={[
|
||||
{
|
||||
name: "John D.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-male-tech-cto-1776606409720-2b01252d.png",
|
||||
},
|
||||
{
|
||||
name: "Lisa K.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-female-softwa-1776606418342-9cb38247.png",
|
||||
},
|
||||
{
|
||||
name: "Rob S.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-diverse-techn-1776606426652-016d17ed.png",
|
||||
},
|
||||
{
|
||||
name: "Kate M.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-portrait-of-a-male-tech-cto-1776606435411-ae96bff9.png",
|
||||
},
|
||||
{
|
||||
name: "Sam R.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-high-end-project-management-dashboard--1776606260580-33a20985.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="FAQ"
|
||||
title="Common Questions"
|
||||
description="Answers to the most frequently asked questions."
|
||||
items={[
|
||||
{
|
||||
question: "Does it integrate with Jira?",
|
||||
answer: "Yes, we support native Jira syncing.",
|
||||
},
|
||||
{
|
||||
question: "Can I upgrade anytime?",
|
||||
answer: "Yes, change your plan from the settings dashboard.",
|
||||
},
|
||||
{
|
||||
question: "Is security standard?",
|
||||
answer: "Yes, we are SOC2 compliant.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/high-tech-abstract-background-with-float-1776606303899-0f63be24.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitEmail
|
||||
tag="Get Started"
|
||||
title="Join FlowDesk Today"
|
||||
description="Start managing your projects like a pro."
|
||||
inputPlaceholder="Enter your professional email"
|
||||
buttonText="Get Access"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-office-desk-setup-with-a-lapt-1776606312348-6a2ff795.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleReveal
|
||||
brand="FlowDesk"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 FlowDesk. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Newsletter",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
176
src/index.css
Normal file
176
src/index.css
Normal file
@@ -0,0 +1,176 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=${figtree.variable}:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
@import "./styles/masks.css";
|
||||
@import "./styles/animations.css";
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayBlueAccent */
|
||||
--background: #000000;
|
||||
--card: #481f1f;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #280101;
|
||||
--secondary-cta: #361311;
|
||||
--secondary-cta-text: #f6d4d4;
|
||||
--accent: #51000b;
|
||||
--background-accent: #ff2231;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* @layout/content-width/medium */
|
||||
--width-content-width: clamp(40rem, 80vw, 100rem);
|
||||
|
||||
/* @utilities/masks */
|
||||
--vw-1_5: 1.5vw;
|
||||
--width-x-padding-mask-fade: 5vw;
|
||||
|
||||
/* @layout/carousel */
|
||||
--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-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
|
||||
--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);
|
||||
|
||||
/* @typography/text-sizing/medium */
|
||||
--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);
|
||||
}
|
||||
|
||||
/* @typography/text-sizing/medium (mobile) */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--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-content-width: 80vw;
|
||||
--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-2: var(--width-content-width);
|
||||
--width-carousel-item-3: var(--width-content-width);
|
||||
--width-carousel-item-4: var(--width-content-width);
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* Colors */
|
||||
--color-background: var(--background);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary-cta: var(--primary-cta);
|
||||
--color-primary-cta-text: var(--primary-cta-text);
|
||||
--color-secondary-cta: var(--secondary-cta);
|
||||
--color-secondary-cta-text: var(--secondary-cta-text);
|
||||
--color-accent: var(--accent);
|
||||
--color-background-accent: var(--background-accent);
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: '${figtree.variable}', sans-serif;
|
||||
--font-mono: monospace;
|
||||
|
||||
/* Border Radius */
|
||||
--radius: var(--radius);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
/* Width */
|
||||
--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-2: var(--width-carousel-item-2);
|
||||
--width-carousel-item-3: var(--width-carousel-item-3);
|
||||
--width-carousel-item-4: var(--width-carousel-item-4);
|
||||
|
||||
/* Typography */
|
||||
--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);
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: '${figtree.variable}', sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: '${figtree.variable}', sans-serif;
|
||||
}
|
||||
|
||||
/* WEBILD_CARD_STYLE */
|
||||
/* @cards/solid */
|
||||
.card {
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
/* WEBILD_PRIMARY_BUTTON */
|
||||
/* @primaryButtons/depth-layers */
|
||||
.primary-button {
|
||||
background: var(--color-primary-cta);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent);
|
||||
}
|
||||
|
||||
/* WEBILD_SECONDARY_BUTTON */
|
||||
/* @secondaryButtons/radial-glow */
|
||||
.secondary-button {
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
|
||||
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
|
||||
var(--color-secondary-cta);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
}
|
||||
10
vercel.json
Normal file
10
vercel.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"buildCommand": "npm run build",
|
||||
"outputDirectory": "dist",
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user