Merge branch 'componente-arboles' of https://github.com/igrowker/i003…

…-adoptree-front into componente-arboles

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,16 @@
+---
+title: '⚠️🛑 {{ env.ACTION_TYPE }} Failed in {{ payload.repository.name }}'
+labels: 'bug, automation'
+---
+
+La acción **{{ env.ACTION_TYPE }}** falló en la ejecución del flujo de trabajo en la rama **{{ env.BRANCH }}**. Por favor, revisa los errores y toma las medidas necesarias.
+
+### Detalles del error:
+
+- [Enlace al flujo de trabajo fallido]({{ env.URL_ACTION_RUN }})
+
+### Pasos a seguir:
+
+1. Revisa los logs del flujo de trabajo para identificar los errores.
+2. Aplica las correcciones necesarias según el contexto del fallo (ya sea de lint, build u otro).
+3. Vuelve a hacer commit y push de los cambios para ejecutar el flujo de trabajo nuevamente.

.github/README.md

@@ -0,0 +1,35 @@
+[![Deploy to Vercel](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy.yml)
+[![Build](https://github.com/igrowker/i003-adoptree-front/actions/workflows/build.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/build.yml)
+[![Lint](https://github.com/igrowker/i003-adoptree-front/actions/workflows/lint.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/lint.yml)
+[![Deploy Preview to Vercel](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy-merge.yml/badge.svg)](https://github.com/igrowker/i003-adoptree-front/actions/workflows/deploy-merge.yml)
+# Pipeline de CI para Build y Lint
+
+## Descripción
+
+Esta pipeline de integración continua (CI) está diseñada para verificar el estado de compilación y aplicar reglas de linting al código del repositorio. El objetivo es garantizar que el código esté en buen estado antes de ser fusionado o desplegado en otros entornos.
+
+## Ejecución
+
+La ejecución de la pipeline de `Build` de CI se realiza automáticamente cada vez que se realiza un `Push` en el repositorio. Si se detecta un error en la compilación o en la verificación de la sintaxis, se creará un issue en el repositorio para que se puedan revisar y solucionar los problemas.
+
+La ejecución de la pipeline de `Lint` de CI se realiza automáticamente cada vez que se realiza una `Pull Request` en el repositorio. Si se detecta un error en la verificación de la sintaxis, se creará un issue en el repositorio para que se puedan revisar y solucionar los problemas.
+
+# Pipeline de CI para Deploy del Preview
+
+## Descripción
+
+Esta pipeline de integración continua (CI) está diseñada para desplegar el código del repositorio en un entorno de producción y en un entorno de desarrollo. El objetivo es poder ver el resultado de los cambios antes de que se fusionen en el repositorio principal y su publicación en el entorno de producción.
+
+## Ejecución
+
+La ejecución de la pipeline de `Deploy Preview to Vercel` de CI se realiza automáticamente cada vez que se realiza una `Pull Request` en las ramas `main` o `develop`. Si se detecta un error en la despliegue, se creará un issue y un comentario en el repositorio para que se puedan revisar y solucionar los problemas. Además, si todo sale bien, se creará un comentario en el Pull Request para informar la `Url` del preview del entorno de desarrollo.
+
+# Pipeline de CI para Deploy del Production
+
+## Descripción
+
+Esta pipeline `Deploy to Vercel` es la encargada de desplegar el código del repositorio en el entorno de producción en Vercel.
+
+## Ejecución
+
+La ejecución de la pipeline de `Deploy to Vercel` de CI se realiza automáticamente cada vez que se realiza una `Push` o `Merge` a la rama `main`. Si se detecta un error en la despliegue, se creará un issue para que se puedan revisar y solucionar los problemas.

.github/workflows/build.yml

@@ -0,0 +1,55 @@
+name: Build
+
+on:
+  push: null
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: read
+      statuses: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci --no-audit --no-fund
+
+      - name: Build
+        run: npm run build
+
+      - name: Create issue if build fails
+        if: failure()
+        uses: JasonEtco/create-an-issue@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          ACTION_TYPE: 'Build'
+          URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+          BRANCH: ${{ github.ref }}
+        with:
+          assignees: ${{ github.event.sender.login }}
+      - name: Comment on PR if failed
+        if: failure()
+        uses: unsplash/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        with:
+          msg: 'Falló el build de la rama :disappointed:. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+      - name: Comment on PR
+        uses: unsplash/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        with:
+          msg: 'El build ha sido exitoso :+1: :thumbsup:.'

.github/workflows/deploy-merge.yml

@@ -0,0 +1,69 @@
+name: Deploy Preview to Vercel
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - main
+      - develop
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Install Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: npm
+        cache-dependency-path: '**/package-lock.json'
+
+    - name: Install dependencies
+      run: npm install --no-audit --no-fund
+
+    - name: Deploy to Vercel (Preview)
+      id: deploy
+      uses: amondnet/vercel-action@v25
+      with:
+        vercel-token: ${{ secrets.VERCEL_TOKEN }}
+        github-token: ${{ secrets.GH_TOKEN }}
+        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+        scope: ${{ secrets.VERCEL_ORG_ID }}
+        working-directory: ./
+        github-comment: true
+    - name: Print preview URL
+      run: |
+        echo ${{ steps.deploy.outputs.preview-url }}
+
+    - name: Create issue if deploy fails
+      if: failure()
+      uses: JasonEtco/create-an-issue@v2
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        ACTION_TYPE: 'Deploy'
+        URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        BRANCH: ${{ github.ref }}
+        with:
+        assignees: ${{ github.event.sender.login }}
+    - name: Comment on PR if failed
+      if: failure()
+      uses: unsplash/[email protected]
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+      with:
+        msg: 'Ocurrió un error al desplegar la rama. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).'
+    - name: Comment on PR
+      uses: unsplash/[email protected]
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+      with:
+        msg: 'El despliegue del Preview ha sido exitoso :+1: :thumbsup:.'

.github/workflows/deploy.yml

@@ -0,0 +1,60 @@
+name: Deploy to Vercel
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+concurrency: 
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Install Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: npm
+        cache-dependency-path: '**/package-lock.json'
+
+    - name: Install dependencies
+      run: npm install --no-audit --no-fund
+
+    - name: Deploy to Vercel (Preview)
+      id: deploy
+      uses: amondnet/vercel-action@v25
+      with:
+        vercel-token: ${{ secrets.VERCEL_TOKEN }}
+        github-token: ${{ secrets.GH_TOKEN }}
+        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+        scope: ${{ secrets.VERCEL_ORG_ID }}
+        vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}
+        working-directory: ./
+        github-comment: true
+    - name: Print preview URL
+      run: |
+        echo ${{ steps.deploy.outputs.preview-url }}
+
+    - name: Create issue if deploy fails
+      if: failure()
+      uses: JasonEtco/create-an-issue@v2
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        ACTION_TYPE: 'Deploy'
+        URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        BRANCH: ${{ github.ref }}
+        with:
+        assignees: ${{ github.event.sender.login }}

.github/workflows/lint.yml

@@ -0,0 +1,60 @@
+name: Lint
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - main
+      - develop
+
+permissions: {}
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: read
+      statuses: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci --no-audit --no-fund
+
+      - name: Lint
+        run: npm run lint:ci
+
+      - name: Create issue if lint fails
+        if: failure()
+        uses: JasonEtco/create-an-issue@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          ACTION_TYPE: 'Lint'
+          URL_ACTION_RUN: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+          BRANCH: ${{ github.ref }}
+        with:
+          assignees: ${{ github.event.sender.login }}
+      - name: Comment on PR if failed
+        if: failure()
+        uses: unsplash/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        with:
+          msg: 'Falló la verificación del Lint :dissapointed:. Por favor revisa los errores y toma las medidas necesarias. Action Run: [Action](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+      - name: Comment on PR
+        uses: unsplash/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        with:
+          msg: 'El linter ha verificado el código :+1: :thumbsup:.'

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vercel

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:ci": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -19,7 +20,8 @@
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "template-vite-react": "file:"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/App.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import Navbar from './components/Navbar/Navbar';
+import Cards from './components/Cards/Cards';
+import Beneficios from './components/Beneficios/Beneficios';
+import Banner from './components/Banner/Banner';
 import './App.css';
-import Arboles from './components/Arboles/Arboles'; // Importar el componente de árboles
+import Agriculture from './components/Agriculture/Agriculture';
+import Arboles from './components/Arboles/Arboles';
 
 const App: React.FC = () => {
   return (
-    <div>
-      {/* Aquí renderizas el componente de árboles */}
+    <>
+      <Navbar />
+      <Banner />
+      <Cards />
+      <Beneficios />
+      <Agriculture />
       <Arboles />
-    </div>
+    </>
   );
 };
 

src/components/Arboles/Arboles.css

@@ -13,5 +13,4 @@
 .fuente{
 font-family: "Covered By Your Grace", cursive;
 font-size: 32px;
-}
-
+}