跳到主要内容
返回画廊
PAID · 已付费

FlowMate

Landing Pageheropage_type: landing2026-04-06

Create a modern, production-ready landing page for "FlowMate" - an AI workflow automation platform. Use React, TypeScript, Vite, Tailwind CSS, Framer Motion, and Lucide React.

Design System

Colors:

  • Background: #fefffc (off-white)
  • Text Primary: #2c2c2c (dark gray)
  • Text Secondary: #444141
  • Text Tertiary: #646464
  • Text Muted: #b4b8b4
  • Borders: #dde3dd, #dee2de, #e8e8e8
  • Hover Background: #eef1ed
  • Button Black: black with hover #2c2c2c

Typography:

  • Custom Font: PPMondwest (serif) from URL: https://www.generalintelligencecompany.com/_next/static/media/17330fd087386262-s.p.woff2
  • Font settings: fontKerning: 'none', letterSpacing: '-0.04em'
  • System fonts as fallback

Layout Structure

Desktop (1024px+):

  • Fixed sidebar: 240px width, left side
  • Content area: margin-left 240px
  • Fixed navbar: positioned at top of content area (left: 240px)

Mobile/Tablet:

  • No sidebar
  • Full-width navbar at top
  • Stacked content

Components

1. Sidebar (Desktop Only)

  • Fixed position, 240px wide, full height
  • Border: 2px solid #dde3dd
  • Logo image at top: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_072635_e0ca60b6-0b6c-49a3-825d-b2b6a53dd63d.png&w=1280&q=85
  • Navigation items: Home, Video, Features, Cards
  • Active state: bg-[#eef1ed] with text-[#2c2c2c]
  • Inactive: text-[#b4b8b4] with hover effects
  • Smooth scroll with IntersectionObserver tracking

2. Navbar

  • Fixed at top, semi-transparent background: bg-[#fefffc]/90 with backdrop-blur-sm
  • Desktop positioning: left-0 lg:left-[240px]
  • Logo/Brand: "FlowMate" in PPMondwest, 28px mobile, 32px desktop
  • Right side items:
    • "Pricing" link (hidden on mobile)
    • "Community" link (hidden on mobile)
    • "Log in" button: white background, 2px border #dde3dd, rounded-full
    • "Sign up" button: black background, white text, rounded-full

3. Hero Section

  • Padding: responsive (pt-12 to pt-20, pb-12 to pb-20)
  • Heading: "Transform your workflow using plain English"
    • Font: PPMondwest
    • Size: 32px mobile → 50px tablet → 70px desktop
    • Line height: 0.95
    • Max width: 900px (700px on lg)
  • Subheading: "FlowMate connects to your current apps, builds smart workflows, and manages operations. Powering the platforms you already know and trust."
    • Color: #444141
    • Max width: 620px (520px on lg)
  • CTA button: "View our intro video" with custom arrow SVG icon
  • Use TextFade animation (direction: up, stagger: 0.15s)

4. Video Section (Liquid Glass Effect)

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_073438_071156e5-2a7a-45d8-a8d9-c628d2144e88.mp4

Glass morphism overlay card:

  • Centered over video
  • Typewriter effect text: "Daily check rival companies and ping me on messenger"
  • Speed: 50ms per character
  • Styling: 
    backdrop-filter: blur(16px)
background-image: linear-gradient(in oklab, rgba(255, 255, 255, 0.35) 0px, rgba(255, 255, 255, 0.12) 100%)
border: 6px solid rgba(255, 255, 255, 0.2)
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5)
  • Icons: Paperclip (lucide) and circular send button with ArrowUp
  • Framer Motion spring animation on scroll

5. Features Grid

Title: "Discover what FlowMate can accomplish for your team"

6 Feature Cards (3 columns on desktop, 2 on tablet, 1 on mobile):

  1. Research this company (FlowMate)

    • Description: "Execute investor-grade business analysis: generate detailed spreadsheets, gather web intel, compare rivals, and build team dossiers."
    • Icon: Generic tool icon

  2. Check the dev team's progress

    • Description: "View a quick overview of your developer squad's activity, goals, and blockers."
    • Icons: Linear + Slack logos

  3. Build my CV from available information

    • Description: "Generate a shareable PDF curriculum using stored facts and web sources, excluding any private contact info."
    • Icon: Generic tool icon

  4. Turn this into retro pixels

    • Description: "Transform any photo into vintage pixelated graphics with custom resolution."
    • No icons

  5. Track Industry Sites and Send Weekly Digest Each Monday

    • Description: "Watch leading tech and development sources for fresh content then deliver Monday briefings with main insights and URLs."
    • Icon: Generic tool icon

  6. Morning schedule digest

    • Description: "Every AM, outline your agenda with important background and recommended preparation."
    • Icons: Gmail + Google Calendar logos

Card Styling:

  • Border: 2px solid #dee2de
  • Rounded: 2xl
  • Hover: border color changes to #b8beb8
  • Icons in circular gray backgrounds at bottom

6. Cards Carousel

Auto-rotating carousel (4 second intervals) with 5 cards:

Card 1: For Everyone

  • Text: "Unleash your creative vision"
  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081328_19f48c5b-ea4d-4f23-8f80-7374f31015d4.png&w=1280&q=85

Card 2: For Teams

  • Text: "Smart helper supporting each teammate daily"
  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081342_ad378347-1ebd-4b17-a716-ee895bf739c0.png&w=1280&q=85

Card 3: For Enterprises

  • Text: "Elevate your whole organization using business AI"
  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081415_a6e8a76c-224e-417b-bf99-6b86d6494644.png&w=1280&q=85

Card 4: Platform

  • Text: "Enhanced with FlowMate"
  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081513_cf1cd2c1-2122-4de6-90ed-acae8bfbdb00.png&w=1280&q=85

Card 5: Security

  • Text: "Creating trusted and helpful AI"
  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081541_9d2d28bf-d6a3-4b31-b0bb-cfc5202d4fcd.png&w=1280&q=85

Carousel Features:

  • Shows 3 cards at a time (1 on mobile)
  • Manual navigation: Previous/Next buttons with ChevronLeft/Right icons
  • Framer Motion AnimatePresence with slide animations
  • Transition: duration: 0.7, ease: [0.32, 0.72, 0, 1]
  • Cards: 500px height, gradient overlay, hover scale effect

Animations

TextFade Component:

  • Spring animation on scroll into view
  • Stagger children with configurable delay
  • Direction: up or down
  • Default variants: y: 18 offset, opacity fade

Video Section:

  • Spring animation: { opacity: 1, y: 0 } from { opacity: 0, y: 18 }

Carousel:

  • Entry: slide from right/left with scale 0.95
  • Exit: slide opposite direction
  • Smooth transitions with custom easing

Technical Requirements

Dependencies:

  • React 18.3+
  • Framer Motion 12.38+
  • Lucide React 0.344+
  • Tailwind CSS 3.4+
  • TypeScript 5.5+

Build Setup:

  • Vite bundler
  • ESLint configuration
  • PostCSS with Autoprefixer

Responsive Breakpoints:

  • Mobile: default
  • Tablet: md (768px)
  • Desktop: lg (1024px)

All sections have proper border separation (border-t border-[#e8e8e8]) and the entire page uses smooth scrolling behavior with section anchors.

回到全部 177 条