Fix FigmaのシンプルなランディングページをNext.jsで1枚作って with harry-dev model

[gitauto-for-dev]

Original issue: #5

Since the issue provided does not contain specific details about the feature request or bug fix, and there are no file paths provided to suggest changes in the pull request body, I'll create a generic template for a feature request based on the issue title. This template can be adjusted once more specific details are available.

## What is the feature

The feature involves creating a simple landing page using Next.js based on a Figma design.

## Why we need the feature

A landing page is crucial for any project as it serves as the first point of interaction with potential users or clients. By designing it according to a specific Figma design, we ensure that the page not only meets the aesthetic and branding requirements but also leverages Next.js for improved performance and SEO benefits.

## How to implement and why

1. **Figma Design Analysis**: Start by thoroughly analyzing the Figma design to understand all the components and layouts required. This step ensures that we capture every detail in the design to be reflected in the Next.js implementation.

2. **Setup Next.js Project**: Initialize a new Next.js project. Next.js is chosen for its server-side rendering capabilities, which help in achieving faster page loads and better SEO.

3. **Component Creation**: Break down the Figma design into reusable components. This approach helps in managing the development process more efficiently and allows for better scalability and maintainability of the code.

4. **Styling**: Utilize CSS modules or styled-components for styling each component. These methods help in scoping the CSS to individual components, preventing style leaks and conflicts.

5. **Responsive Design**: Ensure that the landing page is responsive and looks good on all devices. This might involve using flexible layouts and media queries.

6. **Optimization and Testing**: Once the page is developed, optimize the images and test the page for performance issues. Also, ensure cross-browser compatibility.

7. **Deployment**: Deploy the landing page using Vercel, which is seamlessly integrated with Next.js, for instant global deployment.

This step-by-step approach ensures that the landing page not only matches the Figma design but also leverages Next.js's capabilities for performance and SEO. By focusing on component-based development and optimization, we can create a high-quality landing page that meets the project's requirements.

This template assumes the creation of a landing page based on a Figma design as the primary feature request. Adjustments can be made to this template based on further details or specific requirements.

Test these changes locally

git checkout -b harry-dev/issue-#5-b5fa4917-4dfe-475f-ab32-03842c2f769e
git pull origin harry-dev/issue-#5-b5fa4917-4dfe-475f-ab32-03842c2f769e