landing-for-digital-product/EXAMPLES.md

📝 Code Examples

Создание компонента

Feature компонент

// features/your-card.tsx
"use client";

import { motion } from "framer-motion";
import { Card } from "@/shared/ui/card";

interface YourCardProps {
  title: string;
  description: string;
}

export function YourCard({ title, description }: YourCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
    >
      <Card className="p-6">
        <h3 className="text-2xl font-bold">{title}</h3>
        <p>{description}</p>
      </Card>
    </motion.div>
  );
}

Widget секция

// widgets/your-section.tsx
"use client";

import { SectionContainer } from "@/features/section-container";
import { SectionHeader } from "@/features/section-header";

export function YourSection() {
  return (
    <SectionContainer id="your-section">
      <SectionHeader title="Заголовок" withGradient />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Контент */}
      </div>
    </SectionContainer>
  );
}

Работа с состоянием

"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Анимации

Fade in + Slide up

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>