Next.js Responsive Eye-Catching Component (TypeScript)

Component Structure

• Create a new component file (e.g., EyeCatchingComponent.tsx) in your components directory.
• Utilize TypeScript for type safety and improved code maintainability.
• Implement responsive styling using CSS-in-JS (e.g., styled-components, emotion) or Tailwind CSS with TypeScript types.

Code Example (styled-components)

import React from 'react';
import styled from 'styled-components';

interface EyeCatchingComponentProps {
  title: string;
  description: string;
  imageUrl: string;
}

const Container = styled.div`
  background-color: #f0f8ff; /* Light background */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 800px;
  margin: 2rem auto;

  @media (max-width: 768px) {
    padding: 1.5rem;
  }
`;

const Title = styled.h2`
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 1rem;
`;

const Description = styled.p`
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
`;

const Image = styled.img`
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 1.5rem;
`;

const EyeCatchingComponent: React.FC<EyeCatchingComponentProps> = ({ title, description, imageUrl }) => {
  return (
    <Container>
      <Title>{title}</Title>
      <Image src={imageUrl} alt={title} />
      <Description>{description}</Description>
    </Container>
  );
};

export default EyeCatchingComponent;

Usage in Next.js Page

• Import the component into your Next.js page or component.
• Pass the required props (title, description, imageUrl).

import EyeCatchingComponent from '../components/EyeCatchingComponent';

export default function HomePage() {
  return (
    <div>
      <EyeCatchingComponent
        title="Welcome to Our Awesome App!"
        description="Experience the best features and user interface. Our app is designed to provide you with a seamless and enjoyable experience."
        imageUrl="/images/hero-image.jpg" // Replace with your image path
      />
      {/* Other page content */}
    </div>
  );
}

Styling Considerations

• Eye-Catching Design: Use vibrant colors, smooth transitions, and engaging animations to make the component visually appealing.
• Responsive Design: Implement media queries to ensure the component looks good on various screen sizes.
• Accessibility: Ensure the component is accessible by providing proper alt text for images and using semantic HTML.
• Performance: Optimize images for web and minimize unnecessary re-renders.

TypeScript Best Practices

• Use interfaces or types to define props for components.
• Leverage TypeScript's type inference to catch errors early.
• Use strict mode in your tsconfig.json for better type checking.
• Use type annotations for complex data structures.

Image Optimization

• Optimize images for web using tools like next/image or services like Cloudinary.
• Use appropriate image formats (e.g., WebP) for better performance.

Responsive Image example using next/image

import Image from 'next/image';
//... inside EyeCatchingComponent
<Image src={imageUrl} alt={title} width={800} height={400} layout="responsive" />