Customizing Your Landing Page Design

Make this landing page uniquely yours by customizing the design system, colors, typography, and component styles.

Color Scheme

Update Theme Colors

Edit src/styles/globals.css to change the color palette:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --secondary: 210 40% 96.1%;
    /* ... other colors */
  }
}

Use Tailwind Classes

Apply colors directly in components:

<button className="bg-primary text-primary-foreground hover:bg-primary/90">
  Get Started
</button>

Typography

Change Fonts

Update src/app/layout.tsx to use different fonts:

import { Inter, Poppins } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })
const poppins = Poppins({
  weight: ['400', '600', '700'],
  subsets: ['latin']
})

Typography Scale

Customize font sizes in tailwind.config.ts:

export default {
  theme: {
    extend: {
      fontSize: {
        'hero': '4.5rem',
        'section-title': '2.5rem',
      }
    }
  }
}

Component Styling

Modify Existing Sections

Example: Customize the Hero section in src/components/layout/sections/hero.tsx:

<section className="relative py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800">
  <div className="container mx-auto px-4">
    <h1 className="text-6xl font-bold text-center">
      Your Amazing Headline
    </h1>
  </div>
</section>

Add Custom Animations

Define animations in tailwind.config.ts:

export default {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in',
        'slide-up': 'slideUp 0.6s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

Use in components:

<div className="animate-fade-in">
  Content here
</div>

Dark Mode

Customize Dark Mode Colors

Update dark mode colors in globals.css:

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  /* ... other colors */
}

Toggle Dark Mode

The theme switcher is already included. Users can toggle via the navbar icon.

Responsive Design

Mobile-First Approach

Use Tailwind's responsive prefixes:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Cards */}
</div>

Breakpoint Customization

Add custom breakpoints in tailwind.config.ts:

export default {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Spacing & Layout

Container Sizes

Adjust container widths in your sections:

<div className="container max-w-7xl mx-auto px-4">
  {/* Content */}
</div>

Section Padding

Customize vertical spacing:

<section className="py-16 md:py-24 lg:py-32">
  {/* Section content */}
</section>

Best Practices

1. Consistency: Use the design system variables for consistency
2. Accessibility: Maintain color contrast ratios (use tools like WebAIM)
3. Performance: Optimize images and avoid excessive animations
4. Testing: Test across different devices and screen sizes

Advanced Customization

Add Custom Utility Classes

Create reusable utilities in globals.css:

@layer utilities {
  .text-gradient {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Component Variants

Use class-variance-authority for component variants:

import { cva } from "class-variance-authority"

const buttonVariants = cva(
  "rounded-lg font-semibold",
  {
    variants: {
      variant: {
        primary: "bg-primary text-white",
        secondary: "bg-secondary text-foreground",
      },
      size: {
        sm: "px-4 py-2 text-sm",
        lg: "px-6 py-3 text-lg",
      }
    }
  }
)

Resources

• Tailwind CSS Documentation
• shadcn/ui Components
• Color Palette Generators
• Google Fonts

Start customizing and make this landing page truly yours!