Hero компонент

Обзор

Hero секция — это первый визуальный элемент, который видит пользователь при посещении лендинга. Этот компонент играет ключевую роль в привлечении внимания и передаче основного ценностного предложения продукта.

В нашем проекте Hero секция состоит из нескольких компонентов:

  • Hero.tsx - основной контейнерный компонент
  • HeroBadge.tsx - компонент для отображения бейджа (например, "Product of the day")
  • HeroButton.tsx - компонент для кнопки призыва к действию
  • HeroSocialProof.tsx - компонент для отображения социального доказательства
  • HeroTechCard.tsx - компонент для отображения технологий в правой части секции

Структура компонентов

1. Hero.tsx

Основной контейнерный компонент, который объединяет все элементы Hero секции:

"use client";

import Image from "next/image";
import HeroBadge from "./HeroBadge";
import HeroButton from "./HeroButton";
import HeroSocialProof from "./HeroSocialProof";
import HeroTechCard from "./HeroTechCard";

export default function Hero() {
  const techStack = [
    // Массив технологий для отображения
    {
      name: "Next.js",
      bgColor: "bg-black",
      icon: (/* SVG иконка */),
    },
    // Другие технологии...
  ];

  return (
    <section className="section relative overflow-hidden">
      <div className="container">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          {/* Левая часть - текстовый контент */}
          <div className="lg:w-1/2 space-y-8">
            {/* Бейдж продукта */}
            <HeroBadge label="Product of the day" value="2nd" />

            {/* Основной заголовок */}
            <div className="space-y-4">
              <h1>
                Ship your startup
                <br />
                in days,{" "}
                <span className="inline-block bg-gray-800 px-4 py-1">
                  not weeks
                </span>
              </h1>
              <p className="text-xl text-gray-300">
                The NextJS boilerplate with all you need to build your SaaS...
              </p>
            </div>

            {/* Кнопка призыва к действию */}
            <div>
              <HeroButton href="/pricing">Get Boilerplate</HeroButton>
              <p className="mt-4 text-sm text-gray-400">
                <span className="text-green-500">$100 off</span> for the first...
              </p>
            </div>

            {/* Социальное доказательство */}
            <HeroSocialProof count={6681} text="makers ship faster" />
          </div>

          {/* Правая часть - Визуальный блок с технологиями */}
          <div className="lg:w-1/2 relative">
            <div className="grid grid-cols-2 gap-4">
              {/* Карточки технологий */}
              {techStack.map((tech, index) => (
                <HeroTechCard
                  key={index}
                  name={tech.name}
                  bgColor={tech.bgColor}
                  icon={tech.icon}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

2. HeroBadge.tsx

Компонент для отображения бейджа в верхней части Hero секции:

import { Badge } from "@/components/ui/badge";

interface HeroBadgeProps {
  label: string;
  value: string;
}

export default function HeroBadge({ label, value }: HeroBadgeProps) {
  return (
    <Badge
      variant="outline"
      className="px-3 py-1 gap-2 border-gray-700 rounded-full"
    >
      <span className="text-xs font-medium text-gray-400">{label}</span>
      <span className="text-yellow-500 font-bold">{value}</span>
    </Badge>
  );
}

3. HeroButton.tsx

Компонент для кнопки призыва к действию в Hero секции:

import Link from "next/link";
import { Button } from "@/components/ui/button";

interface HeroButtonProps {
  href: string;
  children: React.ReactNode;
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
  size?: "default" | "sm" | "lg" | "icon";
}

export default function HeroButton({ 
  href, 
  children, 
  variant = "default", 
  size = "lg" 
}: HeroButtonProps) {
  return (
    <Button asChild variant={variant} size={size} className="px-8">
      <Link href={href}>
        {children}
      </Link>
    </Button>
  );
}

4. HeroSocialProof.tsx

Компонент для отображения блока социального доказательства:

import { Avatar, AvatarFallback } from "@/components/ui/avatar";

interface HeroSocialProofProps {
  count: number;
  text: string;
}

export default function HeroSocialProof({ count, text }: HeroSocialProofProps) {
  return (
    <div className="pt-6">
      <div className="flex -space-x-2 mb-2">
        {/* Аватары пользователей */}
        {Array.from({ length: 5 }).map((_, i) => (
          <Avatar key={i} className="w-8 h-8 border-2 border-black bg-gray-700">
            <AvatarFallback className="bg-gray-700 text-xs">
              {String.fromCharCode(65 + i)}
            </AvatarFallback>
          </Avatar>
        ))}
      </div>
      
      <div className="flex items-center">
        {/* Звезды рейтинга */}
        <div className="flex">
          {Array.from({ length: 5 }).map((_, i) => (
            <svg key={i} /* ... */ className="w-4 h-4 text-yellow-500">
              {/* SVG код звезды */}
            </svg>
          ))}
        </div>
        
        {/* Текст с количеством */}
        <span className="ml-2 text-sm text-gray-300">
          {count} {text}
        </span>
      </div>
    </div>
  );
}

5. HeroTechCard.tsx

Компонент для отображения технологий в правой части Hero секции:

import { Card, CardContent } from "@/components/ui/card";

interface HeroTechCardProps {
  icon: React.ReactNode;
  name: string;
  bgColor: string;
}

export default function HeroTechCard({
  icon,
  name,
  bgColor,
}: HeroTechCardProps) {
  return (
    <Card className="bg-gray-800 border-gray-700">
      <CardContent className="p-4 flex items-center justify-center">
        <div className="text-center">
          <div className={`${bgColor} inline-block p-2 rounded-lg mb-2`}>
            {icon}
          </div>
          <div className="text-sm font-medium">{name}</div>
        </div>
      </CardContent>
    </Card>
  );
}

Использование Hero секции

Для добавления Hero секции на лендинг, импортируйте и используйте компонент Hero в нужном месте страницы:

import Hero from "@/app/(landing)/_components/Hero";

export default function LandingPage() {
  return (
    <main>
      <Hero />
      {/* Другие секции страницы */}
    </main>
  );
}

Кастомизация

Изменение текстового содержания

Для изменения текстов в Hero секции, отредактируйте соответствующие строки в компоненте Hero.tsx:

<h1>
  Ваш новый заголовок
  <br />
  здесь,{" "}
  <span className="inline-block bg-gray-800 px-4 py-1">
    с выделением
  </span>
</h1>
<p className="text-xl text-gray-300">
  Новый подзаголовок с описанием вашего продукта.
</p>

{/* Изменение текста кнопки */}
<HeroButton href="/pricing">Ваш текст кнопки</HeroButton>

{/* Изменение социального доказательства */}
<HeroSocialProof count={1000} text="довольных клиентов" />

Изменение списка технологий

Чтобы изменить список отображаемых технологий, отредактируйте массив techStack в компоненте Hero.tsx:

const techStack = [
  {
    name: "Ваша Технология",
    bgColor: "bg-blue-700", // Цвет фона для иконки
    icon: (
      <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
        {/* SVG иконка вашей технологии */}
      </svg>
    ),
  },
  // Добавьте другие технологии
];

Стилизация компонентов

Все компоненты Hero секции используют Tailwind CSS для стилизации. Чтобы изменить внешний вид, вы можете отредактировать классы в соответствующих компонентах:

// Пример изменения стилей основного контейнера Hero
<section className="section relative overflow-hidden bg-gradient-to-b from-gray-900 to-black">
  {/* ... */}
</section>

// Пример изменения стилей бейджа
<Badge
  variant="outline"
  className="px-3 py-1 gap-2 border-blue-600 rounded-full bg-blue-900/20"
>
  {/* ... */}
</Badge>

// Пример изменения стилей кнопки
<Button asChild variant="default" size="lg" className="px-8 bg-blue-600 hover:bg-blue-700">
  {/* ... */}
</Button>

Создание своей версии Hero секции

Если вам нужно создать собственную версию Hero секции, вы можете использовать существующие компоненты как основу и модифицировать их под свои нужды:

import HeroBadge from "@/app/(landing)/_components/HeroBadge";
import HeroButton from "@/app/(landing)/_components/HeroButton";
import Image from "next/image";

export default function CustomHero() {
  return (
    <section className="py-16 bg-gradient-to-r from-blue-900 to-purple-900">
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          {/* Левая часть с текстом */}
          <div className="space-y-6">
            <HeroBadge label="Новый продукт" value="2024" />
            
            <h1 className="text-4xl md:text-5xl font-bold">
              Ваш уникальный заголовок здесь
            </h1>
            
            <p className="text-xl text-gray-300">
              Описание вашего продукта или сервиса с акцентом на ценностное предложение.
            </p>
            
            <div className="flex gap-4">
              <HeroButton href="/demo">Попробовать демо</HeroButton>
              <HeroButton href="/about" variant="outline">Узнать больше</HeroButton>
            </div>
          </div>
          
          {/* Правая часть с изображением */}
          <div className="relative h-[400px]">
            <Image 
              src="/images/your-product.png"
              alt="Ваш продукт"
              fill
              style={{ objectFit: "contain" }}
              className="rounded-lg"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

Рекомендации по использованию

  • Заголовок Hero секции должен быть кратким, ясным и передавать основную ценность продукта
  • Используйте контрастные цвета для кнопок призыва к действию, чтобы привлечь внимание
  • Включайте элементы социального доказательства для повышения доверия
  • Адаптируйте макет для мобильных устройств (компонент уже имеет адаптивный дизайн)
  • Не перегружайте Hero секцию лишней информацией — сосредоточьтесь на одном ключевом сообщении
  • Визуальные элементы должны дополнять текст, а не отвлекать от него
  • Убедитесь, что переходы по кнопкам ведут на релевантные страницы

Заключение

Hero секция — это ключевой элемент любого лендинга, который создает первое впечатление о вашем продукте и влияет на решение пользователя продолжить взаимодействие с сайтом. Правильно оформленная Hero секция может значительно повысить конверсию и эффективность вашего лендинга.

Благодаря модульной структуре наших компонентов, вы можете легко кастомизировать Hero секцию под свои нужды, изменяя тексты, стили и визуальные элементы.