🏠 MySagra Website

Open-source fair-code solution for managing and organizing community festivals.

This is the official marketing website for MySagra, built with Next.js and Tailwind CSS. It showcases MySagra's features, provides documentation links, and serves as the main entry point for the MySagra ecosystem.

🚀 Features

• Modern Landing Page: Clean, responsive design with MySagra branding
• SEO Optimized: Complete meta tags, OpenGraph, and JSON-LD structured data
• Performance First: Built with Next.js 15 and optimized for Core Web Vitals
• Mobile Ready: Fully responsive design with Tailwind CSS v4
• Accessibility: WCAG compliant with proper ARIA labels and focus management
• Fast Loading: Optimized images, fonts, and assets

🛠️ Tech Stack

• Framework: Next.js 15.4.6 with App Router
• Styling: Tailwind CSS v4 with custom color palette
• Language: TypeScript for type safety
• Icons: Lucide React for consistent iconography
• Fonts: Inter from Google Fonts
• Deployment: Optimized for Vercel deployment

🎨 Brand Colors

/* MySagra Custom Palette */
--sagra-yellow: #fecc01;     /* Primary brand color */
--sagra-orange: #fc9003;     /* Secondary brand color */
--charcoal: #1e1e1e;         /* Dark text/backgrounds */
--ivory: #fff7e6;            /* Light backgrounds */
--basil: #22c55e;            /* Success/positive actions */
--tomato: #ef4444;           /* Alerts/warnings */
--slate: #334155;            /* Secondary text */
--gray: #6b7280;             /* Muted text */

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

git clone https://github.com/MySagra/website.git
cd website

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Start the development server

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the result.

📁 Project Structure

├── src/
│   ├── app/
│   │   ├── globals.css      # Global styles & Tailwind imports
│   │   ├── layout.tsx       # Root layout with SEO metadata
│   │   └── page.tsx         # Main landing page
├── public/
│   ├── favicon.png          # High-res favicon (2657x2177)
│   ├── logo-mysagra.svg     # MySagra brand logo
│   └── *.svg                # Additional icons
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

🎯 Key Sections

Landing Page Components

• Header: Fixed navigation with MySagra logo and CTA buttons
• Hero: Main value proposition with interactive dashboard mockup
• Features: 6-card grid showcasing MySagra capabilities
• How It Works: 4-step process explanation
• Open Source: Community contribution information
• Installation: Docker and manual deployment guides
• CTA Section: Final conversion with GitHub links
• Footer: Complete site navigation and social links

SEO & Performance

• Complete meta tags and OpenGraph data
• JSON-LD structured data for search engines
• Optimized images with Next.js Image component
• Core Web Vitals optimization
• Mobile-first responsive design

🔧 Customization

Updating Content

• Hero Section: Edit src/app/page.tsx lines 95-130
• Features: Modify feature cards in src/app/page.tsx lines 160-220
• Brand Colors: Update CSS variables in src/app/globals.css
• SEO Metadata: Configure src/app/layout.tsx metadata object

Adding New Sections

1. Create new section component in src/app/page.tsx
2. Add navigation link in header
3. Update anchor links throughout the page
4. Test responsive behavior

📦 Build & Deploy

Production Build

npm run build
npm run start

Deploy on Vercel

1. Push to GitHub
2. Connect repository to Vercel
3. Deploy automatically on every push to main

Environment Variables

No environment variables required for the marketing website.

🔗 MySagra Ecosystem

• 🏠 Website (this repo): Marketing and documentation site
• ⚙️ Backend: mysagra-backend - Express.js REST API
• 🖥️ Frontend: mysagra-frontend - Next.js web application
• 📚 Documentation: docs.mysagra.com

🤝 Contributing

We welcome contributions! Please see our Contributing Guide.

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Test locally: npm run dev
5. Commit: git commit -m 'Add amazing feature'
6. Push: git push origin feature/amazing-feature
7. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Documentation: docs.mysagra.com
• Issues: GitHub Issues
• Discord: Join our community
• Email: nicolo.spampa@gmail.com

---

Built with ❤️ by the MySagra community
Open-source fair-code solution for managing and organizing community festivals