Hugging Face's logo

Spaces:
luigi12345
/
AI_services
Running

App Files Community
AI_services / index.html
luigi12345's picture
luigi12345
Update index.html
2f40bfc verified
raw
history blame contribute delete
10.8 kB
<!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>