Initial commit

This commit is contained in:
2026-04-19 16:47:30 +03:00
commit ee65d915bc
5 changed files with 689 additions and 0 deletions

4
.env Normal file
View File

@@ -0,0 +1,4 @@
VITE_API_URL=https://dev.api.webild.io
VITE_PROJECT_ID=072acb1a-1bd1-496c-9bc4-018eee053fd6

View 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
View 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
View 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
View File

@@ -0,0 +1,10 @@
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}