Create a landing page for a SaaS product that specializes in helping users build websites effortlessly with AI. The landing page should be modern, engaging, and optimized for conversions. Below are the guidelines and detailed requirements to help craft the UI for this landing page."

1. Color Palette
Follow the 60-30-10 rule for the color scheme:
Primary color (60%): A soft modern Blue (#4A90E2), symbolizing trust and innovation.
Secondary color (30%): Light Gray (#F0F4F8) for backgrounds and less prominent sections.
Accent color (10%): Vibrant Coral (#FF6A61) for CTA buttons, hyperlinks, and interactive elements to grab attention.
2. Typography
Use a modern sans-serif font pairing:
Heading font: "Poppins" (bold weights for attention-grabbing headlines and thin weights for subtler subheadings).
Body font: "Inter" for crisp, high readability.
Font hierarchy:
Headings: Use a larger font size guided by the Golden Ratio, such as 38px (H1), 30px (H2), and proportional decreases for smaller headers.
Body text: Maintain 16px-18px font size for easy readability.
Line height: Ensure a line height of around 1.5x the font size for better readability.
3. App Type
The SaaS product is an AI-powered web development application aimed at a non-technical audience, such as small entrepreneurs, marketers, or freelancers who want to create websites quickly and efficiently.
The landing page should convey simplicity, speed, and user-friendliness, while also emphasizing AI-assisted capabilities that make website building accessible for everyone.
4. UI Layout and Elements
The UI design must be adaptive, ensuring responsiveness across devices, including desktops, tablets, and mobile phones.
Utilize center alignment for core elements (hero section, forms, CTAs) with appropriate spacing for visual clarity.
Design blocks with inner alignment; ensure all elements within a block are perfectly enclosed within it.
Spacing and Distances:

Use multiples of 8px for spacing between elements (e.g., 8px, 16px, 24px, 32px, etc.).
Maintain consistent paddings, margins, and gutters within each block.
Landing Page Sections and Detailed Elements
Hero Section:
Full-width background image or solid color with gradient.
Headline: A bold, benefit-focused statement (e.g., "Build Stunning Websites Effortlessly with AI").
Subheadline: A smaller, descriptive line expanding on the core value proposition.
Call-To-Actions:
Primary: "Get Started for Free" (large button with accent color).
Secondary: "Watch Demo" as a smaller text link with an icon.
Supporting visual: Illustration, mockup, or animation of the AI-driven website builder in action.
Features Section:
Grid-based layout with 3-4 key features (use icons + short descriptions).
Example features:
"AI-Powered Design Assistance"
"Customizable Templates"
"One-Click Publishing"
"Responsive Across Devices"
Include a "Learn More" link or expandable cards for each feature.
Testimonials Section:
Carousel or grid format showcasing 2–3 user testimonials.
Elements:
Profile picture of the user.
Name, Title/Role, and their feedback.
Optional: Rating system (e.g., 5 stars).
AI in Action / How It Works Section:
Three to four simple steps represented visually (e.g., icons or illustrations for each step).
Step 1: "Input your website idea."
Step 2: "Customize with AI design suggestions."
Step 3: "Publish your site instantly."
Include a short video or animated GIF demo.
Pricing Section:
Adaptive pricing table with 2–3 tiers (e.g., Free, Pro, Enterprise).
Highlight the most popular tier using the accent color.
Include a comparison of features within each tier.
Clear CTA buttons under each pricing plan: “Choose Plan.”
FAQ Section:
Collapsible accordion format for 5–6 commonly asked questions.
Keep answers concise and in simple language for clarity.
Footer:
Left side: Company logo and tagline.
Right side: Quick links (About Us, Blog, Contact, Privacy Policy).
Bottom row: Social media icons and a subscription box for newsletters.
Additional Notes
Visual Structure:
Create a visually pleasing layout by applying the Golden Ratio for spacing and proportions.
Each section should feel distinct but harmonious as users scroll.
Interaction Considerations:
Hover effects for buttons and links (e.g., shadow or slight scaling effect).
Smooth scroll animations as users move between sections.
Performance Optimization:
Use optimized images and SVGs for fast loading.
Test the design for responsiveness on different browsers and screen sizes.
By adhering to these guidelines, the landing page should combine aesthetic appeal with functional, conversion-oriented UX design. Use HTML CSS js to create this ui