Skip to main content

Landing Page Guide

This guide walks you through creating a complete landing page with Pixello, from initial prompt to a polished, production-ready page.

Overview​

We'll create a landing page with:

  • Hero section: Eye-catching header with headline and CTA
  • Features section: Three feature cards highlighting key benefits
  • Call-to-action: Final CTA to drive conversions
  • Footer: Simple footer with links

Step 1: Start Your Project​

Make sure you have a Next.js or React project set up:

npx create-next-app@latest landing-page
cd landing-page

Step 2: Create the Design​

Open Pixello in your editor and use this prompt:

"Create a modern landing page with a hero section featuring a headline and subheadline, a features section with three cards, a call-to-action section, and a simple footer. Use a clean, professional design with good spacing and typography."

Pixello will:

  1. Generate a design JSON file
  2. Create React components
  3. Open the canvas for visual editing

Step 3: Review Generated Files​

After generation, you'll see:

your-project/
├── designs/
│   └── landing-page.json
├── app/ (or components/)
│   ├── Hero.tsx
│   ├── Features.tsx
│   ├── CTA.tsx
│   └── Footer.tsx
└── ...

Step 4: Customize in Canvas​

Open the canvas and customize:

Hero Section​

  • Headline: Change to your value proposition
  • Subheadline: Add supporting text
  • CTA Button: Update text and link
  • Background: Adjust colors or add gradient

Features Section​

  • Feature Cards: Edit titles and descriptions
  • Icons: Add or modify icons
  • Layout: Adjust spacing and alignment

CTA Section​

  • Message: Update the call-to-action text
  • Button: Customize button style and text
  • Links: Add navigation links
  • Copyright: Update copyright text

Step 5: Refine in Code​

Switch to your code editor and enhance:

Add Interactivity​

// Hero.tsx
'use client';

import { useState } from 'react';

export default function Hero() {
  const [email, setEmail] = useState('');
  
  return (
    <section>
      {/* ... existing code ... */}
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
    </section>
  );
}

Add Animations​

// Features.tsx
'use client';

import { motion } from 'framer-motion';

export default function Features() {
  return (
    <section>
      {features.map((feature, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: index * 0.1 }}
        >
          {/* feature content */}
        </motion.div>
      ))}
    </section>
  );
}

Integrate APIs​

// CTA.tsx
'use client';

import { useState } from 'react';

export default function CTA() {
  const [loading, setLoading] = useState(false);
  
  const handleSubmit = async () => {
    setLoading(true);
    // Call your API
    await fetch('/api/signup', { method: 'POST' });
    setLoading(false);
  };
  
  return (
    <section>
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? 'Signing up...' : 'Get Started'}
      </button>
    </section>
  );
}

Step 6: Make It Responsive​

Pixello generates responsive code, but you can enhance it:

Mobile Optimization​

// Hero.tsx
export default function Hero() {
  return (
    <section className="px-4 md:px-8 lg:px-16">
      <h1 className="text-3xl md:text-5xl lg:text-6xl">
        Your Headline
      </h1>
      {/* ... */}
    </section>
  );
}

Test on Devices​

  • Use browser dev tools to test different screen sizes
  • Check on actual mobile devices
  • Ensure touch interactions work well

Step 7: Add SEO​

Enhance your page for search engines:

// app/page.tsx (Next.js)
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Your Landing Page Title',
  description: 'Your landing page description',
  openGraph: {
    title: 'Your Landing Page Title',
    description: 'Your landing page description',
    images: ['/og-image.jpg'],
  },
};

export default function Page() {
  return (
    <>
      <Hero />
      <Features />
      <CTA />
      <Footer />
    </>
  );
}

Step 8: Optimize Performance​

Image Optimization​

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero-image.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
    />
  );
}

Code Splitting​

import dynamic from 'next/dynamic';

const Features = dynamic(() => import('./Features'), {
  loading: () => <p>Loading...</p>,
});

Step 9: Deploy​

Your landing page is ready to deploy:

npm run build
npm run start

Deploy to Vercel, Netlify, or your preferred hosting platform.

Tips & Best Practices​

Keep It Simple​

  • Focus on one main message
  • Use clear, concise copy
  • Don't overwhelm with too many sections

Test Everything​

  • Test all links and buttons
  • Verify forms work correctly
  • Check on multiple browsers

Iterate​

  • Use analytics to see what works
  • A/B test different headlines
  • Continuously improve based on data

Common Patterns​

Social Proof​

Add testimonials or logos:

<section className="testimonials">
  <h2>Trusted by developers</h2>
  <div className="logos">
    {/* Company logos */}
  </div>
</section>

Pricing​

Include a pricing section:

<section className="pricing">
  <div className="plans">
    {/* Pricing cards */}
  </div>
</section>

FAQ​

Add frequently asked questions:

<section className="faq">
  <h2>Frequently Asked Questions</h2>
  <div className="questions">
    {/* FAQ items */}
  </div>
</section>

What's Next?​

Now that you've built a landing page: