SaaS Landing

1import * as React from "react";
2import {
3  ArrowRight,
4  Check,
5  Command,
6  Play,
7  Sparkles,
8  TrendingUp,
9  Users,
10} from "lucide-react";
11 
12import { ContactForm01 } from "@/components/blocks/contact-form-01";
13import { FeatureSection01 } from "@/components/blocks/feature-section-01";
14import { Footer01 } from "@/components/blocks/footer-01";
15import { Pricing01 } from "@/components/blocks/pricing-01";
16import { SiteHeader01 } from "@/components/blocks/site-header-01";
17import { TestimonialSection01 } from "@/components/blocks/testimonial-section-01";
18import { Avatar, AvatarFallback } from "@/components/ui/avatar";
19import { Badge } from "@/components/ui/badge";
20import { Button } from "@/components/ui/button";
21import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
22import { Progress } from "@/components/ui/progress";
23import { cn } from "@/lib/utils";
24 
25function SaasLanding01({ className, ...props }: React.ComponentProps<"div">) {
26  return (
27    <div
28      className={cn("min-h-screen bg-background text-foreground", className)}
29      data-slot="saas-landing-template"
30      {...props}
31    >
32      <SiteHeader01 />
33      <main>
34        <section
35          className="relative overflow-hidden px-5 pb-20 pt-20 sm:px-8 sm:pb-28 sm:pt-28"
36          id="top"
37        >
38          <div className="absolute inset-x-0 top-0 -z-10 h-[720px] [background-image:radial-gradient(circle_at_50%_0%,color-mix(in_oklch,var(--primary)_28%,transparent),transparent_48%),linear-gradient(to_right,color-mix(in_oklch,var(--foreground)_5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklch,var(--foreground)_5%,transparent)_1px,transparent_1px)] [background-size:auto,52px_52px,52px_52px] [mask-image:linear-gradient(to_bottom,black,transparent_90%)]" />
39          <div className="mx-auto max-w-7xl">
40            <div className="mx-auto max-w-4xl text-center">
41              <Badge variant="secondary">
42                <Sparkles /> The operating system for focused teams
43              </Badge>
44              <h1 className="mt-7 text-balance text-5xl font-semibold leading-[.97] tracking-[-.065em] sm:text-7xl lg:text-[5.4rem]">
45                Turn ambitious plans into{" "}
46                <span className="text-primary">visible momentum.</span>
47              </h1>
48              <p className="mx-auto mt-7 max-w-2xl text-balance text-base leading-relaxed text-muted-foreground sm:text-lg">
49// … truncated