Chameleon

Landing Page

Customize your landing page

Landing Page

Learn how to customize Chameleon's landing page content, layout, and styling.

Overview

The landing page is the main entry point for visitors and includes hero sections, feature highlights, pricing information, and call-to-action elements. All content is managed through translation files and can be customized for different languages.

Page Structure

Main Sections

  • Hero Section - Main headline and call-to-action
  • Features Section - Key feature highlights
  • Pricing Section - Pricing plans and packages
  • Testimonials - User reviews and feedback
  • Footer - Links and company information

File Structure

src/app/[locale]/(default)/
├── page.tsx                    # Main landing page
├── layout.tsx                  # Page layout
└── components/
    └── blocks/
        ├── hero.tsx           # Hero section
        ├── features.tsx       # Features section
        ├── pricing.tsx        # Pricing section
        └── footer.tsx         # Footer section

Content Editing

Hero Section

Edit the hero section content:

// src/i18n/pages/landing/en.json
{
  "hero": {
    "title": "Generate AI Content with Chameleon",
    "subtitle": "Create amazing images, videos, and text with the power of AI",
    "cta_primary": "Get Started",
    "cta_secondary": "Learn More"
  }
}

// src/i18n/pages/landing/zh.json
{
  "hero": {
    "title": "使用 Chameleon 生成 AI 内容",
    "subtitle": "利用 AI 的力量创建令人惊叹的图像、视频和文本",
    "cta_primary": "开始使用",
    "cta_secondary": "了解更多"
  }
}

Features Section

// src/i18n/pages/landing/en.json
{
  "features": {
    "title": "Powerful AI Features",
    "subtitle": "Everything you need to create amazing content",
    "items": [
      {
        "title": "Image Generation",
        "description": "Create stunning images with AI",
        "icon": "image"
      },
      {
        "title": "Video Creation",
        "description": "Generate videos from text prompts",
        "icon": "video"
      }
    ]
  }
}

Pricing Section

// src/i18n/pages/pricing/en.json
{
  "pricing": {
    "title": "Choose Your Plan",
    "subtitle": "Flexible pricing for every need",
    "plans": [
      {
        "name": "Starter",
        "price": "$9",
        "period": "month",
        "features": [
          "1,000 credits",
          "Basic AI models",
          "Email support"
        ]
      }
    ]
  }
}

Usage

Using Translations

// src/components/blocks/hero.tsx
import { useTranslations } from "next-intl";

export function Hero() {
  const t = useTranslations("landing.hero");
  
  return (
    <section className="hero">
      <h1>{t("title")}</h1>
      <p>{t("subtitle")}</p>
      <div className="cta-buttons">
        <button className="btn-primary">{t("cta_primary")}</button>
        <button className="btn-secondary">{t("cta_secondary")}</button>
      </div>
    </section>
  );
}

Customizing Components

// src/components/blocks/features.tsx
import { useTranslations } from "next-intl";

export function Features() {
  const t = useTranslations("landing.features");
  
  return (
    <section className="features">
      <div className="container">
        <h2>{t("title")}</h2>
        <p>{t("subtitle")}</p>
        <div className="features-grid">
          {t.raw("items").map((feature: any, index: number) => (
            <div key={index} className="feature-card">
              <div className="feature-icon">
                <Icon name={feature.icon} />
              </div>
              <h3>{feature.title}</h3>
              <p>{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

File Locations

  • src/app/[locale]/(default)/page.tsx - Main landing page
  • src/components/blocks/hero.tsx - Hero section component
  • src/components/blocks/features.tsx - Features section
  • src/components/blocks/pricing.tsx - Pricing section
  • src/i18n/pages/landing/ - Landing page translations
  • src/i18n/pages/pricing/ - Pricing page translations

Common Tasks

Update Hero Content

  1. Edit src/i18n/pages/landing/en.json
  2. Update title, subtitle, and CTA text
  3. Edit corresponding Chinese file
  4. Test changes on both languages

Add New Feature

  1. Add feature to features.items array in translation files
  2. Update feature icon if needed
  3. Test feature display on landing page

Customize Pricing

  1. Edit src/i18n/pages/pricing/en.json
  2. Update plan names, prices, and features
  3. Update corresponding Chinese file
  4. Test pricing section display

Change Styling

// src/components/blocks/hero.tsx
export function Hero() {
  return (
    <section className="hero bg-gradient-to-r from-blue-500 to-purple-600">
      <div className="container mx-auto px-4 py-20">
        <h1 className="text-4xl font-bold text-white mb-4">
          {t("title")}
        </h1>
        {/* ... */}
      </div>
    </section>
  );
}

Troubleshooting

Content not updating

Problem: Changes to translation files not showing

Solution:

  1. Check file path is correct
  2. Verify JSON syntax is valid
  3. Clear browser cache
  4. Restart development server

Styling issues

Problem: Components not styled correctly

Solution:

  1. Check Tailwind CSS classes
  2. Verify component structure
  3. Check for CSS conflicts
  4. Test responsive design

Translation missing

Problem: Some text not translated

Solution:

  1. Check translation key exists
  2. Verify namespace is correct
  3. Check for typos in keys
  4. Test with different locales

Next Steps