Spaces:

luigi12345
/

AI_services

Running

App Files Files Community

luigi12345 commited on 25 days ago

Commit

2f40bfc

verified ·

1 Parent(s): 9e38a9e

Update index.html

Browse files

Files changed (1) hide show

index.html +305 -19

index.html CHANGED Viewed

@@ -1,19 +1,305 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Optimiza tu negocio con soluciones de Inteligencia Artificial. Chatbots, automatización y desarrollo de apps para mejorar la eficiencia y el impacto.">
+    <meta name="keywords" content="IA, Chatbots, Automatización, Desarrollo de Apps, Eficiencia, Transformación Digital">
+    <meta name="author" content="Sami Halawa">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <title>Optimiza tu Negocio con IA | Sami Halawa</title>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/shoelace.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/themes/light.css">
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #7c3aed;
+            --accent-color: #06b6d4;
+            --background-color: #f8fafc;
+            --text-color: #1e293b;
+            --card-background: rgba(255, 255, 255, 0.7);
+            --glass-background: rgba(255, 255, 255, 0.6);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --glass-shadow: rgba(17, 12, 46, 0.15);
+        }
+        /* Estilos generales */
+        body {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+            line-height: 1.7;
+            margin: 0;
+            padding: 0;
+            color: var(--text-color);
+            background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
+            overflow-x: hidden;
+        }
+        .glass-effect {
+            background: var(--glass-background);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 8px 32px 0 var(--glass-shadow);
+            border-radius: 24px;
+        }
+        /* Header styles */
+        header {
+            position: fixed;
+            width: 100%;
+            z-index: 1000;
+            padding: 1rem;
+            background: var(--glass-background);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--glass-border);
+        }
+        nav sl-button::part(base) {
+            font-weight: 500;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+        }
+        nav sl-button[type="primary"]::part(base) {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border: none;
+        }
+        /* Hero section */
+        #hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 6rem 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+        #hero::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at top right, var(--accent-color) 0%, transparent 70%),
+                        radial-gradient(circle at bottom left, var(--secondary-color) 0%, transparent 70%);
+            opacity: 0.1;
+            z-index: -1;
+        }
+        #hero h1 {
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            line-height: 1.2;
+        }
+        #hero p {
+            font-size: 1.25rem;
+            max-width: 600px;
+            margin-bottom: 2.5rem;
+        }
+        /* Services section */
+        #services {
+            padding: 6rem 2rem;
+        }
+        .service-card {
+            padding: 2rem;
+            margin: 1rem;
+            transition: transform 0.3s ease;
+        }
+        .service-card:hover {
+            transform: translateY(-5px);
+        }
+        /* Testimonials section */
+        .testimonial-card {
+            padding: 2rem;
+            margin: 1rem;
+            text-align: left;
+        }
+        .testimonial-card p {
+            font-size: 1.1rem;
+            font-style: italic;
+            margin-bottom: 1.5rem;
+        }
+        /* Contact section */
+        #contact {
+            padding: 6rem 2rem;
+            background: var(--glass-background);
+            backdrop-filter: blur(12px);
+        }
+        /* Animations */
+        @keyframes fadeUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .animate-fadeUp {
+            animation: fadeUp 0.6s ease forwards;
+        }
+        /* Custom button styles */
+        sl-button[size="large"]::part(base) {
+            padding: 1rem 2rem;
+            font-size: 1.1rem;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border: none;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        sl-button[size="large"]::part(base):hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+        /* Responsive design */
+        @media (max-width: 768px) {
+            #hero h1 {
+                font-size: 2.5rem;
+            }
+            #hero p {
+                font-size: 1.1rem;
+            }
+            .service-card {
+                margin: 0.5rem;
+            }
+        }
+        /* Custom tab styles */
+        sl-tab-group::part(base) {
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        sl-tab::part(base) {
+            padding: 1rem 1.5rem;
+            font-weight: 500;
+        }
+        sl-tab[active]::part(base) {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        /* Footer styles */
+        footer {
+            background: var(--glass-background);
+            backdrop-filter: blur(12px);
+            padding: 2rem;
+            text-align: center;
+            border-top: 1px solid var(--glass-border);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <sl-header>
+            <nav slot="end">
+                <sl-button href="#services" type="default">Servicios</sl-button>
+                <sl-button href="#offer" type="primary">Oferta Especial</sl-button>
+                <sl-button href="#contact" type="default">Contacto</sl-button>
+            </nav>
+        </sl-header>
+    </header>
+    <main>
+        <section id="hero">
+            <h1>Optimiza tu Negocio con Inteligencia Artificial</h1>
+            <p>Descubre cómo la IA puede transformar tu forma de trabajar, mejorar la eficiencia y aumentar tu impacto.</p>
+            <sl-button href="https://api.whatsapp.com/send?phone=34679794037&amp;text=Hola%20Sami,%20quiero%20saber%20m%C3%A1s%20sobre%20tus%20servicios%20de%20IA." size="large" type="primary">Hablemos Hoy</sl-button>
+        </section>
+        <section id="services">
+            <h2>Servicios</h2>
+            <sl-tab-group>
+                <sl-tab slot="nav" panel="chatbots">Chatbots Inteligentes</sl-tab>
+                <sl-tab slot="nav" panel="automation">Automatización</sl-tab>
+                <sl-tab slot="nav" panel="development">Desarrollo de Apps</sl-tab>
+                <sl-tab-panel name="chatbots">
+                    <article>
+                        <h3>Chatbots Inteligentes</h3>
+                        <p>Creación de chatbots personalizados que mejoran la atención al cliente y optimizan el soporte.</p>
+                    </article>
+                </sl-tab-panel>
+                <sl-tab-panel name="automation">
+                    <article>
+                        <h3>Automatización</h3>
+                        <p>Automatiza tareas repetitivas y libera tiempo para enfocarte en lo importante.</p>
+                    </article>
+                </sl-tab-panel>
+                <sl-tab-panel name="development">
+                    <article>
+                        <h3>Desarrollo de Apps</h3>
+                        <p>Diseño y desarrollo de apps y plataformas escalables para expandir tu negocio.</p>
+                    </article>
+                </sl-tab-panel>
+            </sl-tab-group>
+        </section>
+        <section id="offer">
+            <h2>Oferta Especial</h2>
+            <p>Solicita un <b>chatbot personalizado</b> completamente gratis y comienza a transformar tu negocio hoy mismo.</p>
+            <sl-button href="https://api.whatsapp.com/send?phone=34679794037&amp;text=Hola%20Sami,%20quiero%20solicitar%20el%20chatbot%20gratuito." size="large" type="primary">Solicitar Oferta</sl-button>
+        </section>
+        <section id="testimonials">
+            <h2>Testimonios</h2>
+            <sl-carousel class="testimonials-carousel">
+                <sl-carousel-item>
+                    <sl-card class="testimonial-card">
+                        <p>"Gracias a los servicios de Sami, hemos mejorado nuestras operaciones en un 40%."</p>
+                        <footer>
+                            <strong>- Carlos, Consultor de Marketing</strong>
+                        </footer>
+                    </sl-card>
+                </sl-carousel-item>
+                <sl-carousel-item>
+                    <sl-card class="testimonial-card">
+                        <p>"La automatización ha cambiado la forma en que gestionamos tareas diarias."</p>
+                        <footer>
+                            <strong>- Laura, Diseñadora Gráfica</strong>
+                        </footer>
+                    </sl-card>
+                </sl-carousel-item>
+            </sl-carousel>
+        </section>
+        <section id="contact">
+            <h2>Contacto</h2>
+            <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
+            <p>WhatsApp: <a href="https://api.whatsapp.com/send?phone=34679794037&amp;text=Hola%20Sami,%20quiero%20hablar%20sobre%20tus%20servicios.">+34 679794037</a></p>
+            <p>Dirección: Cristo Victoria, 28026 Madrid, España</p>
+        </section>
+    </main>
+    <footer>
+        <sl-footer>
+            <p>&copy; 2024 Sami Halawa | Optimiza tu Negocio</p>
+        </sl-footer>
+    </footer>
+</body>
+</html>