Logo Component

The Logo component displays your brand identity across the website. It combines your logo image and brand name into a clickable element that automatically links users back to the homepage.

Key Benefits

Faster content creation
Better targeting
Automation workflows
Customizable sizing for different layouts
Flexible configuration options

Features

Customizable image dimensions (width/height props)
Flexible container sizing (containerSize prop)
Toggle text visibility (showText prop)
Extendable styling (className/textClassName props)
Responsive ready (works with Tailwind breakpoints)
Performance optimized (Next.js Image with priority)
Accessible (automatic alt text)
Type-safe (TypeScript interfaces)

Installation

Import the component using:

import Logo from "@/components/layout/logo";

Basic Usage

You can place the Logo component anywhere in your application:

import Logo from "@/components/layout/logo";
 
export default function Header() {
  return (
    <header>
      <Logo />
    </header>
  );
}

The component automatically:

Displays your logo image
Displays your brand name
Links to the homepage (/)
Optimizes image loading for performance
Uses your configured brand settings

Props API

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `number` | `50` | Width of the logo image in pixels |
| `height` | `number` | `50` | Height of the logo image in pixels |
| `showText` | `boolean` | `true` | Toggle visibility of the brand name text |
| `containerSize` | `8 \| 10 \| 12 \| 14 \| 16 \| 20` | `10` | Size of the logo container div (`h-{size} w-{size}`) |
| `className` | `string` | `""` | Additional CSS classes for the logo container |
| `textClassName` | `string` | `""` | Additional CSS classes for the brand text |
| `imageClassName` | `string` | `""` | Additional CSS classes for the image |

Example with Props

// Large logo for desktop
<Logo width={80} height={80} containerSize={16} />
 
// Small logo for mobile
<Logo width={30} height={30} containerSize={8} />
 
// Logo without brand text (icon only)
<Logo showText={false} />
 
// With custom styling
<Logo
  width={60}
  height={60}
  className="hover:opacity-80 transition-opacity"
  textClassName="text-2xl font-bold"
/>

Brand Configuration

The Logo component pulls its content from the shared brand configuration.

File location:

content/
└── shared/
    └── brand.ts

Example:

export const BRAND = {
  name: "Pulse",
  highlight: "AI",
  logo: "/images/logo.png",
};

Customizing the Brand Name

Update the name property to change your main brand name.

export const BRAND = {
  name: "Acme",
  highlight: "Cloud",
  logo: "/images/logo.png",
};

Result: AcmeCloud

Customizing the Highlighted Text

The highlight property is rendered with the primary color, letting you emphasize a portion of your brand name without editing the component.

export const BRAND = {
  name: "Pulse",
  highlight: "AI",
  logo: "/images/logo.png",
};

Changing the Logo Image

Replace the logo value with the path to your image.

export const BRAND = {
  name: "Pulse",
  highlight: "AI",
  logo: "/images/brand/logo.svg",
};

Supported formats: SVG, PNG, JPG, WEBP

Place the image inside the public directory:

public/
└── images/
    └── brand/
        └── logo.svg

Logo Size

The logo image is rendered using Next.js Image with customizable dimensions:

<Image
  src={BRAND.logo}
  alt={`${BRAND.name} logo`}
  width={width}
  height={height}
  priority
/>

Adjusting Size

1. Image dimensions (pixel size):

<Logo width={60} height={60} />

2. Container size (Tailwind classes):

<Logo containerSize={12} /> // h-12 w-12

Responsive Sizing Example

<Logo
  width={40}
  height={40}
  containerSize={8}
  className="md:gap-4"
  textClassName="text-base md:text-xl"
/>

Styling

The component uses Tailwind CSS utilities with flexible customization options.

Default Structure

<Link href="/" className="flex items-center gap-3">
  <div className="flex h-10 w-10 items-center justify-center rounded-full">
    <Image ... />
  </div>
  <span className="text-lg font-semibold">
    {BRAND.name}
    <span className="text-primary">{BRAND.highlight}</span>
  </span>
</Link>

Customization Options

| Element | Default | Customization |
|---------|---------|---------------|
| Spacing | `gap-3` | Via `className` prop |
| Typography | `text-lg` | Via `textClassName` prop |
| Font weight | `font-semibold` | Via `textClassName` prop |
| Container size | `h-10 w-10` | Via `containerSize` prop |
| Border radius | `rounded-full` | Via `className` prop |

Styling Examples

// Add hover effects
<Logo className="hover:scale-105 transition-transform" />
 
// Change text size
<Logo textClassName="text-2xl font-bold" />
 
// Remove rounded corners
<Logo className="rounded-none" />
 
// Different gap spacing
<Logo className="gap-5" />

Common Locations

import Logo from "@/components/layout/logo";
 
export default function Navbar() {
  return (
    <nav className="flex items-center">
      <Logo width={50} height={50} />
    </nav>
  );
}

Footer

import Logo from "@/components/layout/logo";
 
export default function Footer() {
  return (
    <footer>
      <Logo
        width={40}
        height={40}
        showText={true}
        textClassName="text-sm"
      />
    </footer>
  );
}

import Logo from "@/components/layout/logo";
 
export default function MobileMenu() {
  return (
    <div className="p-4">
      <Logo
        width={30}
        height={30}
        showText={false}
        containerSize={8}
      />
    </div>
  );
}

Hero Section

import Logo from "@/components/layout/logo";
 
export default function Hero() {
  return (
    <section className="text-center">
      <Logo
        width={120}
        height={120}
        containerSize={20}
        textClassName="text-4xl"
        className="justify-center"
      />
    </section>
  );
}

Use Cases with Props

Header with Brand Emphasis

<Logo
  width={60}
  height={60}
  textClassName="text-2xl font-extrabold"
/>

Minimal Footer Logo

<Logo
  width={30}
  height={30}
  containerSize={8}
  textClassName="text-sm font-medium"
/>

Icon-Only Logo

<Logo
  width={40}
  height={40}
  showText={false}
/>

Responsive Logo

<Logo
  width={40}
  height={40}
  className="md:gap-4 lg:gap-6"
  textClassName="text-base md:text-xl lg:text-2xl"
/>

Performance Notes

The Logo component is optimized for performance:

Uses Next.js Image optimization
Loads with priority
Uses eager loading for fast rendering
Helps improve Largest Contentful Paint (LCP)

Because the logo is visible immediately when the page loads, it is recommended to keep the priority prop enabled.

Accessibility

The component automatically generates descriptive alt text:

alt={`${BRAND.name} logo`}

Best practices:

Keep showText enabled for screen readers when possible
Use meaningful alt text through the brand configuration
Ensure sufficient color contrast for the brand text

Component Implementation

import Image from "next/image";
import Link from "next/link";
import { BRAND } from "@/content/shared/brand";
 
interface LogoProps {
  width?: number;
  height?: number;
  showText?: boolean;
  containerSize?: 8 | 10 | 12 | 14 | 16 | 20;
  className?: string;
  textClassName?: string;
  imageClassName?: string;
}
 
const containerSizeMap = {
  8: "h-8 w-8",
  10: "h-10 w-10",
  12: "h-12 w-12",
  14: "h-14 w-14",
  16: "h-16 w-16",
  20: "h-20 w-20",
};
 
export default function Logo({
  width = 50,
  height = 50,
  showText = true,
  containerSize = 10,
  className = "",
  textClassName = "",
  imageClassName = "",
}: LogoProps) {
  const containerClass = containerSizeMap[containerSize] || "h-10 w-10";
 
  return (
    <Link
      href="/"
      className={`flex items-center gap-3 ${className}`}
    >
      <div
        className={`flex ${containerClass} items-center justify-center rounded-full`}
      >
        <Image
          src={BRAND.logo}
          alt={`${BRAND.name} logo`}
          width={width}
          height={height}
          loading="eager"
          priority
          className={imageClassName}
        />
      </div>
 
      {showText && (
        <span className={`text-lg font-semibold ${textClassName}`}>
          {BRAND.name}
          <span className="text-primary">{BRAND.highlight}</span>
        </span>
      )}
    </Link>
  );
}

Summary

The Logo component provides a centralized way to manage your brand identity throughout Pulse AI. To update your branding, simply edit the values in:

content/shared/brand.ts

All instances of the Logo component across the application will automatically reflect your changes.