publicando

.dockerignore

@@ -0,0 +1,11 @@
+# Ignore node_modules, we'll install them in the container
+node_modules
+# Ignore build output, it will be generated in the container
+build
+# Ignore Docker files
+Dockerfile
+docker-compose.yml
+# Ignore git folder
+.git
+# Ignore svelte kit files
+.svelte-kit

Dockerfile

@@ -0,0 +1,40 @@
+# Use a Bun base image for the build stage
+FROM oven/bun:1-alpine AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json ./
+COPY bun.lock ./
+RUN bun install
+
+# Copy the rest of the application source code
+COPY . .
+
+# Build the SvelteKit application
+RUN bun run build
+
+# Use a smaller Bun image for the production stage
+FROM oven/bun:1-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Set the port for the SvelteKit server
+ENV PORT=5173
+
+# Copy the built application from the builder stage
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/bun.lock ./bun.lock
+
+# Install production dependencies
+RUN bun install --production
+
+# Expose the port the app will run on
+EXPOSE 5173
+
+# The command to start the server
+# The entry point is typically build/index.js for the node adapter
+CMD ["bun", "build/index.js"]

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  web:
+    build: .
+    ports:
+      - "5173:5173"
+    container_name: eits-web

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	// Landing Page
 </script>
 
@@ -11,6 +11,10 @@
 <!--     margin-bottom: 1rem; -->
 
 <section class="hero">
+	<video autoplay loop muted playsinline class="hero-video">
+		<source src="/videos/factory.mp4" type="video/mp4">
+		Your browser does not support the video tag.
+	</video>
 	<div class="container hero-content">
 		<h1>Soluciones Integrales de Ingeniería y Tecnología</h1>
     <span class="eits">
@@ -20,8 +24,8 @@
         <span class="first-letter">S</span>olutions</span>
 		<p style="margin-top: 15px">Impulsamos el crecimiento sostenible de la industria con automatización y tecnología avanzada</p>
 		<div class="hero-btns">
-			<a href="/contact" class="btn btn-primary">Contáctanos</a>
-			<a href="/services" class="btn btn-outline">Nuestros Servicios</a>
+			<a href="/contacto" class="btn btn-primary">Contáctanos</a>
+			<a href="/servicios" class="btn btn-outline">Nuestros Servicios</a>
 		</div>
 	</div>
 </section>
@@ -48,7 +52,7 @@
 			</div>
 		</div>
 		<div class="center-btn">
-			<a href="/services" class="btn btn-outline">Ver todos los servicios</a>
+			<a href="/servicios" class="btn btn-outline">Ver todos los servicios</a>
 		</div>
 	</div>
 </section>
@@ -75,9 +79,39 @@
 
 <style>
 	.hero {
-		background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
-		padding: 6rem 0;
+		position: relative;
+		padding: 8rem 0;
 		text-align: center;
+		overflow: hidden;
+		color: var(--color-white);
+	}
+
+	.hero::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 1;
+	}
+
+	.hero-video {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: auto;
+		height: auto;
+		min-width: 100%;
+		min-height: 100%;
+		transform: translate(-50%, -50%);
+		z-index: 0;
+	}
+
+	.hero-content {
+		position: relative;
+		z-index: 2;
 	}
 
 	.hero h1 {
@@ -86,15 +120,16 @@
 		max-width: 800px;
 		margin-left: auto;
 		margin-right: auto;
+		color: var(--color-white);
 	}
 
 	.hero p {
 		font-size: 1.25rem;
-		color: var(--color-text-light);
 		margin-bottom: 2.5rem;
 		max-width: 600px;
 		margin-left: auto;
 		margin-right: auto;
+		color: #e0e0e0;
 	}
 
 	.hero-btns {
@@ -143,6 +178,13 @@
 		text-align: center;
 	}
 
+  .feature {
+    text-align: center;
+		padding: 1.5rem;
+    border: 1px solid #eee;
+		border-radius: var(--radius-md);
+  }
+
 	.feature h3 {
 		color: var(--color-secondary);
 	}
@@ -150,13 +192,13 @@
   .eits {
     font-size: 1.3rem;
     line-height: 1.2;
-    color: black;
     margin-bottom: 100px;
+    color: var(--color-white);
   }
 
   .first-letter {
       font-weight: bold;
       font-size: 1.4rem;
-      color: black;
+      color: var(--color-white);
   }
 </style>