Valor Deportivo

Valor Deportivo is a modern web platform designed for the commercialization and analysis of sports forecasts. The project focuses on transparency, profitability analysis, and premium membership management, offering a fluid and visually appealing user experience.

🚀 Key Features

Profitability Analysis: Visualization of daily and monthly performance data (MonthlyProfitabilitySection, ProfitabilitySection), allowing users to view return on investment (ROI) and net profits categorized by sport.
Total Transparency: Section dedicated to displaying betting history and results, ensuring user trust (TransparencySection).
Real-Time Ticker: News ticker with updates and recent match results (LiveTicker).
Membership System: Integration for managing premium plans, including support for Telegram Stars and Freemium models (MembershipModal).
Premium Experience: High-quality user interface with fluid animations (GSAP) and smooth scrolling (Lenis).
Responsive Design: Fully adapted for mobile and desktop devices.

🛠️ Tech Stack

The project is built using the latest technologies for modern web development:

Framework: Next.js 16 (App Router)
UI Library: React 19
Language: TypeScript
Styles: Tailwind CSS
Animations & UX:
- GSAP (GreenSock Animation Platform)
- Lenis (Smooth Scrolling)
Charts: Recharts
Icons: Lucide React

🔗 Live Demo: https://vd.editech.dev

📂 Project Structure

The project follows a modular architecture based on the Next.js App Router:

web_apuestas_deportivas/
├── public/                 # Static files (images, icons, SVGs)
├── src/
│   ├── app/               # Navigation routes (Next.js App Router)
│   │   ├── layout.tsx     # Main application layout
│   │   └── page.tsx       # Landing Page
│   ├── components/        # UI components and Sections
│   │   ├── CTASection/    # Calls to action
│   │   ├── HeroSection/   # Main section (Above the fold)
│   │   ├── LiveTicker/    # Real-time results ticker
│   │   ├── Navbar/        # Navigation bar
│   │   ├── StatsSection/  # Metrics visualization
│   │   └── ...            # Other modular components
│   ├── hooks/             # Custom Hooks (Reusable business logic)
│   │   └── useMatchesData.ts # Data fetching and processing logic
│   └── lib/               # Utilities and configuration
│       └── utils.ts       # Helper functions (Tailwind merge, etc.)
├── .env.local             # Environment variables (Not included in repo)
├── next.config.ts         # Next.js configuration
├── tailwind.config.ts     # Styles and design configuration
└── package.json           # Dependencies and scripts

🔧 Installation and Setup

Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Start the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser to view the application.
Build for production:
```
npm run build
npm start
```

🤝 Contribution

Contributions are welcome. Please ensure you use eslint to maintain code quality.

npm run lint

License and Legal Notice

This project is open source under the MIT license, designed primarily as a portfolio piece and technical demonstration.

[!IMPORTANT] Hybrid Architecture: This repository contains exclusively the source code for the Frontend (Next.js Application). The critical business logic, the Multi-Algorithm Engine, and the analysis bots operate in a private, proprietary server environment. The information displayed on this website is consumed through secure endpoints and masked data sheets.