feat(web): add Next.js 14 app with Tailwind CSS
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
52
apps/web/app/globals.css
Normal file
52
apps/web/app/globals.css
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Primary Colors - Blue */
|
||||||
|
--color-primary-50: #E6EBF2;
|
||||||
|
--color-primary-100: #C2D1E3;
|
||||||
|
--color-primary-200: #9BB4D1;
|
||||||
|
--color-primary-300: #7497BF;
|
||||||
|
--color-primary-400: #5781B2;
|
||||||
|
--color-primary-500: #3A6BA5;
|
||||||
|
--color-primary-600: #2E5A8E;
|
||||||
|
--color-primary-700: #244977;
|
||||||
|
--color-primary-800: #1E3A5F;
|
||||||
|
--color-primary-900: #152A47;
|
||||||
|
|
||||||
|
/* Accent Colors - Green */
|
||||||
|
--color-accent-50: #EEFBF3;
|
||||||
|
--color-accent-100: #D4F5E0;
|
||||||
|
--color-accent-200: #A9EBBC;
|
||||||
|
--color-accent-300: #7EE19A;
|
||||||
|
--color-accent-400: #53D778;
|
||||||
|
--color-accent-500: #22C55E;
|
||||||
|
--color-accent-600: #1CA04C;
|
||||||
|
--color-accent-700: #167A3A;
|
||||||
|
--color-accent-800: #105528;
|
||||||
|
--color-accent-900: #0A2F16;
|
||||||
|
|
||||||
|
/* Background and Foreground */
|
||||||
|
--background: #ffffff;
|
||||||
|
--foreground: #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: #0a0a0a;
|
||||||
|
--foreground: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--background);
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
@apply antialiased;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
apps/web/app/layout.tsx
Normal file
24
apps/web/app/layout.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Padel Pro",
|
||||||
|
description: "Sistema de Gestión para Clubes de Pádel",
|
||||||
|
keywords: ["padel", "club", "reservas", "gestión", "deportes"],
|
||||||
|
authors: [{ name: "Padel Pro Team" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="es">
|
||||||
|
<body className={inter.className}>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
30
apps/web/app/page.tsx
Normal file
30
apps/web/app/page.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-primary-50 to-primary-100">
|
||||||
|
<div className="text-center space-y-8 px-4">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-bold text-primary-800">
|
||||||
|
Padel Pro
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-primary-600 max-w-2xl mx-auto">
|
||||||
|
Sistema de Gestion para Clubes de Padel
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
|
||||||
|
<Link
|
||||||
|
href="/dashboard"
|
||||||
|
className="px-8 py-3 bg-primary-800 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/reservas"
|
||||||
|
className="px-8 py-3 bg-accent-500 text-white font-semibold rounded-lg hover:bg-accent-600 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
Reservas
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
apps/web/next.config.js
Normal file
10
apps/web/next.config.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
transpilePackages: ["@padel-pro/shared"],
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{ protocol: "https", hostname: "res.cloudinary.com" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
module.exports = nextConfig;
|
||||||
26
apps/web/package.json
Normal file
26
apps/web/package.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "@padel-pro/web",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev --port 3000",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "14.2.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.11.0",
|
||||||
|
"@types/react": "^18.2.0",
|
||||||
|
"@types/react-dom": "^18.2.0",
|
||||||
|
"autoprefixer": "^10.4.17",
|
||||||
|
"postcss": "^8.4.35",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
apps/web/postcss.config.js
Normal file
6
apps/web/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
47
apps/web/tailwind.config.ts
Normal file
47
apps/web/tailwind.config.ts
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: [
|
||||||
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: "#E6EBF2",
|
||||||
|
100: "#C2D1E3",
|
||||||
|
200: "#9BB4D1",
|
||||||
|
300: "#7497BF",
|
||||||
|
400: "#5781B2",
|
||||||
|
500: "#3A6BA5",
|
||||||
|
600: "#2E5A8E",
|
||||||
|
700: "#244977",
|
||||||
|
800: "#1E3A5F",
|
||||||
|
900: "#152A47",
|
||||||
|
DEFAULT: "#1E3A5F",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
50: "#EEFBF3",
|
||||||
|
100: "#D4F5E0",
|
||||||
|
200: "#A9EBBC",
|
||||||
|
300: "#7EE19A",
|
||||||
|
400: "#53D778",
|
||||||
|
500: "#22C55E",
|
||||||
|
600: "#1CA04C",
|
||||||
|
700: "#167A3A",
|
||||||
|
800: "#105528",
|
||||||
|
900: "#0A2F16",
|
||||||
|
DEFAULT: "#22C55E",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Inter", "sans-serif"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
26
apps/web/tsconfig.json
Normal file
26
apps/web/tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user