_             
  ___ __ _  ___| |_ _   _ ___ 
 / __/ _` |/ __| __| | | / __|
| (_| (_| | (__| |_| |_| \__ \
 \___\__,_|\___|\__|\__,_|___/
Submit

Landing Pattern 01

Style direction: Reference landing study

$ npx cactus add bartix
Copied!
Aa
InterDisplay
Aa
InterBody

Image Placeholder Rule

  • Wherever the design calls for an image, logo, screenshot, illustration, thumbnail, avatar, chart preview, or product mockup, render an empty div with a neutral gray background instead.
  • Keep the placeholder empty and match the intended size, aspect ratio, border radius, and spacing, but do not build dashboard shells, browser chrome, fake charts, or other coded internals to simulate the visual.

Design Tokens

Colors

TokenValueUsage
Background#ffffffPage background
Surface#FAFAFACard fills, feature backgrounds
Primary#FF5C35Brand orange — logo, accents, highlights
Dark#18181BCTA buttons, dark text accents
Text Primary#1D1D1FHeadlines, primary body text
Text Secondary#6b7280Descriptions, supporting copy
Accent Blue#4D61FCCharts, progress bars, secondary accent
Dark Section BG#262329Testimonial section dark background
Footer BG#2A262EFooter dark background
Green Accent#4CAF50Icon background tint, success indicator
Orange Accent#FF9800Icon background tint
Blue Accent#2196F3Icon background tint
Yellow Accent#FFC107Icon background tint
Red Accent#F44336Icon background tint

Fonts

UsageFont FamilyFallback
BodyIntersystem-ui, sans-serif
HeadingIntersystem-ui, sans-serif

Component Structure

Build the following components in this exact order. Each is a separate file under src/components/. The page assembles them top-to-bottom in App.tsx.

#Component FileDescription
1Navbar.tsxFixed white header with orange logo square, wordmark, nav links, CTA
2Hero.tsxLarge left-aligned headline, subtitle, two CTAs, right-side dashboard mockup with grid background
3LogoBar.tsxHorizontal row of 5 partner logos with divider borders
4FeaturesGrid.tsx4-column grid of feature cards with colored icon circles
5SplitSectionBDR.tsxLeft text + right dashboard card with bar chart (Product views)
6SplitSectionSDR.tsxRight text + left customer profile card (reversed layout)
7SplitSectionLead.tsxLeft text + right horizontal bar chart card (Sales Comparison)
8GrowthPriority.tsxCentered heading + 2-column feature cards with dashboard mockups on top
9Testimonial.tsxDark section with image placeholder, large quote, stats, and attribution
10Differentiators.tsxCentered heading + 3-column cards with embedded UI mockups
11StatsSection.tsx3-column stats row — trust message, active users, star rating
12BottomCTA.tsxLarge centered headline, subtitle, and primary CTA button
13Footer.tsxDark multi-column footer with logo, nav links, social icons, contact

App.tsx assembly order:

<Navbar />
<Hero />
<LogoBar />
<FeaturesGrid />
<SplitSectionBDR />
<SplitSectionSDR />
<SplitSectionLead />
<GrowthPriority />
<Testimonial />
<Differentiators />
<StatsSection />
<BottomCTA />
<Footer />

Visual Design Reference

Light mode only — clean, modern SaaS CRM product page with generous whitespace and orange brand accent. No dark/light toggle.

Overall Aesthetic

  • White background with #FAFAFA surface for cards and feature sections
  • Confident, large typography using Inter font throughout
  • Orange (#FF5C35) as primary brand color — used in logo, icon tints, highlights, and social buttons
  • Dark near-black (#18181B) for primary CTA buttons
  • Soft rounded cards with rounded-[32px] or rounded-[40px] radius
  • Grid dot pattern background used as decoration behind dashboard mockups
  • Dashboard/chart mockups built with HTML/CSS (bar charts, progress bars, profile cards)
  • Large section headings with tight tracking

Component #1: Navbar

  • Fixed top header, white background with bg-white/95 backdrop-blur-md, z-50
  • Padding: px-10 py-5
  • Left: orange square logo (w-8 h-8 rounded bg-[#FF5C35] with asterisk) + bold “Bartix” wordmark (text-2xl font-bold)
  • Center (hidden mobile): nav links — “All Pages” with chevron dropdown, “Company”, “Pricing”, “Blogs” — text-[15px] font-medium text-gray-800
  • Right: dark pill CTA button (bg-[#18181B] text-white rounded-full px-5 py-2.5) with “Get This Template” text and white arrow circle icon

Component #2: Hero

  • Split layout: flex-col md:flex-row, max-width 1200px, centered
  • Padding top from navbar: pt-28 + pt-10 pb-20
  • Left side (45%):
    • Headline: text-[76px] font-semibold tracking-[-0.03em] leading-[1.05] — “Get every task done from your single app.”
    • Subtitle: text-gray-500 text-[19px] leading-relaxed max-w-[440px]
    • Two buttons:
      • Primary: dark pill bg-[#18181B] text-white rounded-full px-6 py-3.5 with arrow icon, shadow-lg
      • Secondary: white bordered pill bg-white border border-gray-200 shadow-sm rounded-full px-6 py-3.5
  • Right side (55%):
    • Grid background pattern overlay: 32px grid with mask-image: radial-gradient(ellipse_at_center, black_40%, transparent_70%)
    • Dashboard mockup: w-[740px] h-[540px] bg-white rounded-[32px] with heavy soft shadow, border
    • Dashboard has sidebar (w-56 bg-[#FAFAFA]) with logo, menu items (active item highlighted in orange tint), and main content area with bar chart card and revenue forecast card
    • Sidebar menu: “MAIN MENU” label, Dashboard (active, orange), Contacts, Companies, Deals; “MARKETING” label, Products, Emails
    • Main area: “Total sales” card with $28.500, green percentage badge, bar chart; “Revenue forecast” card with horizontal line chart

Component #3: LogoBar

  • Full-width section with border-t border-gray-100, white background, py-14
  • 5 partner logos evenly spaced horizontally, opacity-70
  • Each logo is text-based with a small colored shape icon
  • Max-width 1000px, centered

Component #4: FeaturesGrid

  • White background, py-24, max-width 1240px
  • grid grid-cols-1 md:grid-cols-4 gap-8
  • Each card: bg-[#FAFAFA] p-8 rounded-[32px] shadow-sm
    • Colored circle icon (w-14 h-14 rounded-full) with tinted background — green, orange, blue, yellow
    • Title: font-semibold text-[20px]
    • Description: text-gray-500 text-[15px] leading-relaxed
  • Features: Cost Efficiency, Scalability & Flexibility, Enhanced Security, Automatic Updates

Component #5: SplitSectionBDR

  • py-20, max-width 1240px, flex-col md:flex-row gap-20
  • Left (45%): heading text-[44px] font-semibold tracking-[-0.02em], paragraph, 2-column sub-features grid with icon circles and descriptions
  • Right (55%): grid background overlay, white card rounded-[32px] with shadow containing a bar chart (Product views, daily breakdown Mo-Su)
    • Bars: gray inactive, dark/black active with tooltip popup showing value
    • Tooltip: dark bg with white text, positioned above bar with triangle pointer

Component #6: SplitSectionSDR

  • Same as Split Section but reversed: md:flex-row-reverse
  • Right (45%): heading “Sales Development Representative”, checklist items with filled dark check circles
  • Left (55%): grid background, customer profile card with avatar circle (orange bg with initials), name/title, “Potential Client” badge pill, and gray placeholder area below

Component #7: SplitSectionLead

  • Same layout as #5 (not reversed)
  • Left (45%): heading “Salesforce Lead Generation Specialist”, 2-column sub-features (Segmentation, Website Analytics)
  • Right (55%): grid background, white card with “Sales Comparison” horizontal bar chart
    • Two bars: Tokopedia (blue #4D61FC, 75% width) and shopee (gray, 33% width)
    • Axis labels: 0, 20K, 40K, 60K

Component #8: GrowthPriority

  • Centered section, py-24, max-width 5xl
  • Heading: text-[48px] font-semibold tracking-tight
  • Subtitle: text-gray-500 text-[18px] max-w-[600px] mx-auto
  • grid grid-cols-1 md:grid-cols-2 gap-8
  • Each card: bg-[#FAFAFA] rounded-[40px] p-10 with grid background overlay
    • Top: white inner card with shadow — one has an operating expenses chart with orange highlight bar; the other has a customer archive audio player mockup
    • Bottom: title text-[24px] font-semibold, description, dark pill CTA “Book A Demo”

Component #9: Testimonial

  • Dark background bg-[#262329], white text, py-28
  • flex-col md:flex-row gap-20, max-width 1100px
  • Left (40%): large image placeholder with aspect-[4/4.5] rounded-[32px] shadow-2xl
  • Right (60%):
    • Large quote: text-[38px] font-semibold leading-[1.3]
    • Attribution: name + role, company logo placeholder
    • Two stat items: large text-[52px] numbers with text-gray-400 labels
    • “Read Full Story” link in text-[#FF5C35]
    • Bottom divider: border-b border-gray-700/50

Component #10: Differentiators

  • White background, py-32, max-width 1240px
  • Heading: text-[48px] font-semibold tracking-tight centered
  • Subtitle: text-gray-500 text-[18px] max-w-[700px] centered
  • grid grid-cols-1 md:grid-cols-3 gap-8
  • Each card: bg-[#FAFAFA] rounded-[40px] p-8 h-[440px] flex flex-col shadow-sm
    • Top (220px): embedded UI mockup — one has a large percentage stat, one has pill-shaped workflow buttons, one has a contact profile card with checkmarks
    • Bottom: title font-semibold text-xl, description text-gray-500 text-[15px]

Component #11: StatsSection

  • pb-32, max-width 1240px
  • grid grid-cols-1 md:grid-cols-3 gap-8 h-[260px]
  • Card 1 (spans 1 col): text card with text-[36px] heading “Trusted by 25,000+ happy customers” + description
  • Card 2: centered big number text-[80px] font-semibold + label
  • Card 3: “4.9” rating with orange stars ★★★★ + “Rated by 1,938 happy customers”
  • All cards: bg-[#FAFAFA] rounded-[40px] p-12 shadow-sm

Component #12: BottomCTA

  • White background, py-24, max-w-3xl mx-auto text-center
  • Headline: text-[64px] font-semibold tracking-tight leading-[1.1]
  • Subtitle: text-gray-500 text-[19px] max-w-xl
  • Dark pill CTA button with arrow icon, shadow-xl
  • Dark background bg-[#2A262E], white text, pt-24 pb-12
  • grid grid-cols-1 md:grid-cols-5 gap-12, max-width 1240px
  • Column 1 (span 2): large logo + wordmark
  • Columns 2-4: Navigation, Template, Others — link lists with text-gray-300 hover:text-white
  • Headings: font-semibold text-gray-400 text-[16px]
  • Bottom bar: border-t border-gray-700/50, social media icons (orange circles with white text), email + phone

Interaction & Animation Patterns

  • Hover transitions on all buttons: hover:bg-black transition-colors
  • Button arrow icons: white circle with dark arrow inside
  • Logo bar at reduced opacity: opacity-70
  • Cards with subtle shadow-sm
  • Active sidebar item: orange tinted background bg-[#FF5C35]/10 text-[#FF5C35]

Spacing & Layout Rules

  • Max content width: 1240px centered
  • Section padding: py-20 to py-32
  • Card border radius: rounded-[32px] for standard cards, rounded-[40px] for large feature cards
  • Button style: pill-shaped rounded-full with generous padding (px-5 py-2.5 to px-8 py-4)
  • Typography scale: Hero 76px / Section headings 44-64px / Card titles 20-24px / Body 15-19px
  • Inter font everywhere, font-semibold for headings
  • Grid background pattern: 32px grid with very light lines, masked with radial gradient