Scalar - SaaS Landing Page

Create a complete, responsive SaaS marketing website for “Scalar.ai”,
an AI visibility platform that helps brands understand and improve
their presence across search engines, generative AI answers, and
answer-based platforms through SEO, GEO, and AEO.

Build the entire landing page from this brief, including its visual
compositions, realistic product previews, responsive layouts, and
working marketing interactions.

TECH STACK
Use Vite, React, TypeScript, TanStack Start, and TanStack Router.
Use native CSS with variables, Flexbox, Grid, and container queries.
Use IntersectionObserver for viewport reveals.
Use CSS keyframes and scroll-driven animations where supported.
Use lightweight pointer tracking for interactive card spotlights.
Use Phosphor Icons for the mobile menu and close controls.
Use custom SVG assets for the brand mark, sparkle bullets,
verified badges, and social logos.

VISUAL SYSTEM
- Main background: near-black #0C0E12.
- Card and footer surface: charcoal #13161B.
- Slightly lighter pricing headers: #191C22.
- Primary text: off-white #F7F7F7.
- Secondary text: muted gray #94979C.
- Supporting text: light gray #CECFD2.
- Borders: #22262F and #373A41.
- Accent: warm gold #FBB902.
- Use Inter for the interface, headings, and body copy.
- Use Satoshi for the Scalar.ai wordmark.
- Main headings should be confident, compact, and sentence case.
- Desktop hero heading: approximately 48px with 60px line height.
- Section headings: approximately 36px with 44px line height.
- Use a centered container approximately 1280px wide with 32px padding.
- Use approximately 32px gaps between major cards.
- Use 12–16px corner radii for cards and larger radii for dashboard frames.
- Primary buttons are white pills with dark text.
- Secondary buttons are dark pills with thin gray borders.
- Gold is reserved for brand identity, product data, and highlighted plans.
- Use atmospheric mountain landscapes with dark skies, subtle warm
  horizon light, and deep shadows behind product imagery.

PAGE STRUCTURE, IN THIS ORDER

1. FIXED NAVIGATION
Create an approximately 80px-tall navigation bar.
Left: a gold radial, organic starburst SVG mark beside “Scalar.ai”.
Center: Features, Pricing, and Reviews links.
Right: a white pill-shaped “Create Account” button.
Keep the links genuinely centered regardless of logo and button width.

At the top of the page, the navigation background is transparent.
After scrolling, transition to a translucent dark background with
backdrop blur and a faint bottom border.

On mobile and tablet widths, replace the desktop links with a
Phosphor menu icon. Opening it reveals a dark rounded dropdown beneath
the header with three generously spaced navigation links.
Change the menu icon to a close icon while open.
Close the menu after selecting a link.

2. CINEMATIC HERO
Create a full-width hero with a dark mountain-valley landscape.
The scene should include mountain silhouettes on both sides,
a low horizon, and warm light beneath a dark sky.

Center the content above the landscape:
Headline:
“Make Your Brand Discoverable Across Every AI Search”

Supporting paragraph:
“Improve your visibility across search engines, generative answers,
and answer-based platforms with smarter optimization for SEO, GEO,
and AEO.”

Add a white pill “Get Started” button below the paragraph.
Use generous space between the copy and product preview.

Place a large centered dashboard mockup in the lower half of the hero.
At desktop scale, make it approximately 835px wide.
Use a layered charcoal frame with thin borders, a roughly 22px outer
radius, an inner rounded screen, and a soft shadow.
Let the screen continue into the lower edge of the hero composition.

DASHBOARD PREVIEW DESIGN
Create a realistic dark analytics interface:
- Left sidebar with the Scalar.ai logo.
- Navigation: Home, Brands, Keywords, Article, and Compare.
- Settings, language selection, and a user profile block near the bottom.
- Main header with a sample brand name and short description.
- Gold “Generate Article” button plus Refresh, Export, and Settings.
- Tabs: Overview, Trends, Evidences, and Content.
- “Overview Details” heading and an All Time date selector.
- A wide Insight card with summary copy and a View Insights button.
- Three metric cards: Visibility Score, Share of Voice, GEO Alignment.
- Use large gold semicircular gauges over dark-gray tracks.
- Add compact sentiment chips, baseline data, and recommendation cards.

Treat this dashboard as a product illustration with sample data.
It does not need a backend or functional analytics engine.
Construct the preview with HTML/CSS/SVG or use a complete high-resolution
asset if one is available. Avoid unfinished placeholder panels.

3. FEATURE BENTO GRID
Center the heading:
“We’ve helped hundreds of global companies”
Add the subtitle:
“From managing clients to optimizing progress”

Create five charcoal feature cards:
- Two wide cards in the first row.
- Three narrower cards in the second row.

Each card has a thin border, approximately 16px corner radius,
text at the top, and a layered product illustration below.
Clip decorative layers inside the card.

FIRST WIDE CARD — KNOW YOUR AI REPUTATION
Explain the relationship between AI Answer score and Model Memory.
Place a large dashboard preview at a slight horizontal skew.
Overlay three smaller reputation cards along the left side.
Include ChatGPT and Gemini labels, “Excellent”, and a 90% score.
Give the lower floating cards progressively softer opacity.

SECOND WIDE CARD — WIN WITH SHARE OF VOICE
Explain share of voice, position, consistency, and sentiment.
Place a slightly skewed analytics dashboard behind a floating
sentiment-chart card.
Use fine gold chart lines and a dark interface.

THREE LOWER CARDS
- Keyword Intelligence: keyword rows, intent labels, and gold data bars.
- AI-Citation Content Engine: article-generation interface with evidence,
  feedback, and export controls.
- Brand Visibility Dashboard: compact brand metrics and gold gauges.

Keep the illustrations visually complete and proportionally scaled.
Scale illustration coordinates with their container while keeping
the headings and body text readable.

4. FEATURED CASE STUDY
Use a full-width atmospheric background that blends into the dark page.
Center a small eyebrow: “Our Study Case”.

Headline:
“World Cup 2026: Social Sentiment, Odds & the Favorites’ Curse”

Add a short editorial summary describing an illustrative analysis
of social sentiment, prediction markets, and bookmaker odds.
Include a white “View Case Study” pill.

Below, show a very wide dashboard preview inside a rounded charcoal frame.
Use a thicker border than the hero mockup, approximately 8px at desktop.
Display a deliberate top crop of the dashboard so the visible composition
emphasizes the header, insight panel, and metric gauges.
Keep the crop consistent as the frame scales.

5. PRICING
Center the heading:
“Select the best plan for your AI visibility goals.”
Add a muted explanatory paragraph.

Below, create a rounded segmented billing control:
- Monthly.
- Yearly with a small gold “20% OFF” badge.
Use a sliding dark selection pill and accessible pressed states.

Display three equal-height pricing cards in one desktop row.
Each card has:
- Rounded corners and a thin border.
- A lighter charcoal upper panel.
- Plan name and short description.
- Large price with a smaller “/month” label.
- Full-width pill CTA.
- A divider.
- A lower feature list with small custom SVG sparkle bullets.

STARTER
Monthly: $10. Yearly equivalent: $8/month.
Description: for solo founders and small brands.
Features:
3 brands, 50 search prompts, weekly visibility report,
basic SEO/GEO/AEO insights, and 1 user seat.
Use a dark outlined Get Started button.

GROWTH
Monthly: $30. Yearly equivalent: $24/month.
Description: for teams improving AI search visibility.
Features:
10 brands, 250 search prompts, daily visibility report,
competitor comparison, intent-based recommendations, and up to 5 seats.
Use a white Get Started button.
Highlight this card with a thin animated gold gradient border.
Add a gold “Best Value” badge near the title.
Use gold pricing and gold emphasis within feature text.
Place a large, faint decorative starburst behind the upper panel.
Add a restrained warm glow behind the card.

SCALE
Monthly: $100. Yearly equivalent: $80/month.
Description: for agencies and companies managing multiple markets.
Features:
Unlimited brands, 1,000+ search prompts, advanced SEO/GEO/AEO insights,
multi-client workspace, priority support, and custom onboarding.
Use a dark outlined “Talk to sales” button.

Switch all three prices immediately when billing frequency changes.
Keep price containers stable so the layout does not jump.
Describe yearly prices as monthly equivalents billed annually.

6. CUSTOMER REVIEWS
Center “Our reviews” and:
“Hear first-hand from our incredible community of customers.”

Create three vertical columns of review cards on desktop.
Use two distinct testimonials per column and duplicate the sets only
to create seamless animation.
Move the left and right columns upward and the middle column downward,
with slightly different slow speeds.
Fade cards near the top and bottom using gradient masks.
Pause the marquee on hover and keyboard focus.

Each review card contains:
- A company wordmark near the top.
- A medium-length testimonial in muted gray.
- A circular avatar near the bottom.
- Customer name with a small verified SVG badge.
- Role and company in smaller muted text.

Use charcoal cards, thin borders, approximately 12px corner radii,
and comfortable padding.
Use coherent demo companies such as Powersurge, Goodwell, Stack3d Lab,
Railspeed, Quixotic, and Magnolia.

On mobile, convert the composition into one horizontal marquee with
approximately 280px-wide cards and soft fades at the left and right edges.

7. FINAL CONVERSION SECTION
Create a two-column layout.
Left:
Large headline:
“Join 4,000+ startups growing with Scalar.ai”

Below, show three benefits with gold SVG starburst bullets:
- 30-day free trial.
- Personalized onboarding.
- Access to all features.

Add two pill buttons side by side:
Dark outlined “Learn more”.
White “Get started”.

Right:
Create a layered visual composition with a dark mountain landscape
and an oversized dashboard mockup.
Use a rounded upper-left corner on the landscape panel.
Offset the dashboard down and to the right, allowing it to extend
beyond the landscape’s visible area.
Clip the overall composition deliberately without causing page overflow.
Preserve its proportions when resizing.

8. FOOTER
Use a slightly lighter charcoal background.
Place the gold mark and Scalar.ai wordmark at the upper-left.
Below, add:
“Discoverable Across Every AI Search”

Add Homepage, Pricing, and Reviews links in one row.
Create a thin full-width divider.
Place copyright at the lower-left and four SVG social icons at the right:
X, LinkedIn, Facebook, and GitHub.
Keep the footer compact and clearly aligned with the main container.

MOTION
- Reveal headings and cards with approximately 28px upward movement
  and a soft opacity transition.
- Stagger neighboring cards slightly.
- Give the hero landscape a very slow zoom or pan.
- Animate the hero mockup entrance and a subtle floating movement.
- Use progressive CSS scroll-driven parallax for the hero and case study,
  with a static fallback in unsupported browsers.
- Add a cursor-following gold spotlight inside feature cards.
- Add a subtle cursor-following border glow.
- On hover, lift the card slightly and move illustration layers on
  separate paths: straighten skewed previews, cascade mini cards,
  lift charts, and raise lower screenshots.
- Rotate the Growth card’s gold gradient border slowly.
- Use a restrained shine on gold badges.
- Keep all decorative layers pointer-events: none.
- Respect prefers-reduced-motion by presenting a complete static layout.
- Hide duplicated marquee content from assistive technology.

RESPONSIVE AND FUNCTIONAL REQUIREMENTS
At desktop widths, retain the two-plus-three bento arrangement,
three pricing columns, three review columns, and split final CTA.
At tablet and mobile widths, stack bento cards, pricing, and the CTA.
Reduce heading sizes and outer padding while keeping readable line lengths.
Keep dashboard compositions proportional and prevent horizontal overflow.
Adjust hero spacing on short laptop screens so the product preview
remains visible near the first fold.
Ensure mobile landscape crops still show mountains and horizon details.

Navigation and CTA anchors must work.
Get Started and Create Account can lead to Pricing.
Plan buttons can lead to the final conversion section.
These are marketing-page interactions, not a full authentication,
payment, or AI product implementation.
Use complete English demo copy and clearly identify sample customer
claims, analytics, and case-study data.

OPTIONAL FIGMA REFINEMENT
Deliver a complete first version using this brief alone.
If a Figma reference is supplied later, use it to refine exact spacing,
typography, colors, image crops, card dimensions, illustration layering,
and section proportions for pixel-perfect alignment.
Preserve the established structure, responsiveness, and working
interactions during that refinement.