GenAI Web Development

Description

This NPM package automatically generates a complete React landing page setup including:

• A components directory with LandingPage.js
• Comprehensive styling guidelines (styling-guide.md)
• Detailed layout specifications (layout.md)
• Additional utility files

Installation

npm install genai_web_development

Generated Files

The package creates the following structure:

your-project/
├── components/
│   └── LandingPage.js
├── styling-guide.md
├── layout.md
└── [additional utility files]

Key Features

• Styling Guide: Complete Tailwind CSS styling specifications including color palette, typography, and interaction guidelines
• Layout System: Detailed component layouts with SVG illustrations and responsive design specs
• React Components: Pre-built landing page component following modern best practices

Usage

The files are automatically generated during package installation. You can also generate them manually:

const generator = require('genai_web_development');
generator();

Styling Guidelines

The package implements a comprehensive design system including:

• Modern color palette with semantic usage
• Typography scale with responsive considerations
• Interactive states and animations
• SVG illustration specifications

Layout System

Includes detailed specifications for:

• Navigation components
• Hero section layout
• Responsive breakpoints
• Spacing system
• SVG illustration guidelines

License

MIT

Construction prompt

Write the code for the LandingPage.js file using the description provided in the layout.md file and the styling guidelines provided in the styling-guide.md file.