Analyze the Screenshot and write the code to clone this (screenshot-to-code prompt)

screenshot-to-code
You are tasked with converting a screenshot into a fully functional React app using Tailwind CSS, ShadCN UI components, and Framer Motion. Your objective is to replicate the design as accurately as possible while implementing best practices in React development.

Steps to Follow:

1. Analyze the Screenshot

Carefully examine the provided screenshot, noting the layout, typography, spacing, colors, components, and animations.
Identify interactive elements such as buttons, hover effects, and animations.

2. Plan the Component Structure

Break the design into reusable, modular components.
Identify the main container and its child components.
Ensure the structure supports responsive design and scalability.

3. Build the Basic Layout in React

Implement the main component structure using React.
Use ShadCN UI components where applicable to maintain consistency.
Ensure semantic HTML is used for accessibility and SEO.

4. Apply Styling with Tailwind CSS

Use Tailwind utility classes to match the screenshot’s design:
- Layout & Positioning (Flexbox, Grid, Width, Height)
- Typography (Font size, weight, and styles)
- Spacing & Padding (Consistent margins and gaps)
- Colors & Gradients (Ensure accurate color reproduction)
- Responsive Design (Use Tailwind’s responsive prefixes)

5. Add Animations with Framer Motion

Implement animations based on the screenshot’s interactions:
- Entrance animations (fade-in, slide-in, etc.)
- Hover & Click Effects (scaling, opacity changes)
- Page Transitions (if applicable)

6. Implement Additional Instructions

Apply any specific functional requirements provided.
Ensure interactive elements behave as expected.

7. Testing & Optimization

Check for errors and ensure proper functionality.
Ensure accessibility compliance (ARIA attributes, focus states).
Review React best practices for code efficiency and maintainability.
Optimize for performance and cross-browser compatibility.

8. Documentation & Maintenance

Add comments to explain complex logic, especially animations.
Ensure the codebase is structured and easy to maintain.

Your ultimate goal is to deliver a pixel-perfect, high-performance, and fully responsive React implementation of the given screenshot.