40 lines
1.9 KiB
Markdown
40 lines
1.9 KiB
Markdown
# Vision Startpage Project
|
|
|
|
## Overview
|
|
|
|
This project is a highly customizable and stylish startpage built with React. The goal is to create a visually appealing and functional dashboard that serves as a user's entry point to the web.
|
|
|
|
## Key Features & Design Principles
|
|
|
|
* **Technology Stack:** The project is built using React and TypeScript.
|
|
* **Aesthetics:** The user interface should have a modern, "glassy" or "frosted glass" look (neumorphism/glassmorphism). This involves using transparency, blur effects, and subtle shadows to create a sense of depth.
|
|
* **Typography:** Specific font families and types will be used to maintain a consistent and elegant design.
|
|
* **Modals:** All modals in the application should follow a specific and consistent design language, contributing to the overall user experience.
|
|
* **Production Quality Code:** All code must be written to production standards, with a strong emphasis on readability, maintainability, and performance.
|
|
* **Creative & Beautiful Code:** Code should not only be functional but also well-structured, elegant, and creative.
|
|
|
|
* **Dropdown Component:** A reusable dropdown component (`components/Dropdown.tsx`) has been created for consistent styling and functionality across the application. It features a dark, glassy look with a custom arrow icon.
|
|
|
|
**Usage Example:**
|
|
```typescript jsx
|
|
import Dropdown from './components/Dropdown';
|
|
|
|
// ... inside a React component
|
|
<Dropdown
|
|
options={[
|
|
{ value: 'option1', label: 'Option 1' },
|
|
{ value: 'option2', label: 'Option 2' },
|
|
]}
|
|
value={selectedValue}
|
|
onChange={handleSelectChange}
|
|
name="myDropdown"
|
|
/>
|
|
```
|
|
|
|
## Development Guidelines
|
|
|
|
* Follow the existing code style and conventions.
|
|
* Ensure all new components and features align with the established design principles.
|
|
* Write clean, commented, and reusable code.
|
|
* DO NOT run `npm run dev`, and instead, run `npm run build`.
|