PurixOS Website

A stunning React website for PurixOS inspired by Nothing's minimalist design philosophy. Built with modern React, Framer Motion animations, and styled-components.

🚀 Features

• Modern React Architecture - Built with React 18 and functional components
• Smooth Animations - Powered by Framer Motion for buttery smooth interactions
• Responsive Design - Looks perfect on all devices
• Nothing-Inspired Design - Clean, minimalist aesthetic with premium feel
• Interactive Elements - Hover effects, scroll animations, and micro-interactions
• Performance Optimized - Lazy loading and optimized animations

🎨 Design Highlights

• Minimalist UI - Clean typography and spacious layouts
• Gradient Accents - Subtle gradients for visual hierarchy
• Interactive OS Mockup - Animated desktop simulation
• Smooth Scrolling - Seamless navigation between sections
• Cursor Trail Effect - Interactive cursor following
• Animated Statistics - Counter animations on scroll
• Workspace Demo - Interactive workspace switching
• Security Visualization - Animated privacy features

📦 Installation

1. Install Dependencies

   npm install

2. Start Development Server

   npm start

3. Build for Production

   npm run build

🛠️ Tech Stack

• React 18 - Modern React with hooks
• Framer Motion - Animation library
• Styled Components - CSS-in-JS styling
• React Intersection Observer - Scroll-based animations
• React Router DOM - Navigation (ready for multi-page expansion)

📱 Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: 320px - 767px

🎯 Sections

1. Hero - Main landing with animated OS mockup
2. Features - Core OS capabilities with icons
3. Showcase - Interactive workspace and privacy demos
4. Download - Two download options with system requirements
5. Community - Statistics and community links
6. Footer - Links and company information

🎨 Color Palette

• Primary Background: #000000
• Text Primary: #ffffff
• Text Secondary: #888888
• Accent Gradients: Various themed gradients
• Border: rgba(255, 255, 255, 0.1)

🔧 Customization

Changing Colors

Edit the styled-components in each component file to modify colors, spacing, and typography.

Adding Sections

Create new components in the src/components/ directory and import them in App.js.

Modifying Animations

Adjust Framer Motion variants in component files to customize animation timing and effects.

📄 Project Structure

src/
├── components/
│   ├── Navbar.js          # Navigation bar
│   ├── Hero.js            # Hero section
│   ├── OSMockup.js        # Animated OS demo
│   ├── Features.js        # Features grid
│   ├── Showcase.js        # Interactive demos
│   ├── Download.js        # Download options
│   ├── Community.js       # Community stats
│   ├── Footer.js          # Footer section
│   └── CursorTrail.js     # Cursor effect
├── App.js                 # Main app component
├── index.js              # React entry point
└── index.css             # Global styles

🚀 Performance Tips

• Images are optimized for web
• Animations use GPU acceleration
• Components are optimized for re-renders
• Intersection Observer reduces unnecessary animations

🎭 Easter Eggs

• Konami Code: Try the classic cheat code for a surprise!
• Interactive Elements: Hover over various elements for micro-interactions
• Real-time Clock: The OS mockup shows actual time

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 Support

For support, email [email protected] or join our Discord community.

---

Built with ❤️ for PurixOS - Pure Innovation in Computing