Spaces:

TheGr8
/

tuperito

Running

App Files Files Community

TheGr8 commited on Sep 21, 2025

Commit

090961a

verified ·

1 Parent(s): d2ad478

change background to white - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +189 -18
prompts.txt +104 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tuperito
-emoji: 🐢
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tuperito
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,190 @@
-<!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">
+    <title>Asesoría de Reclamaciones de Seguros</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <style>
+        .glass-card {
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
+        }
+        .cta-button {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(22, 163, 74, 0.2);
+        }
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(22, 163, 74, 0.3);
+        }
+    </style>
+</head>
+<body class="font-sans antialiased text-gray-800">
+    <!-- Glass Navigation -->
+    <header class="fixed w-full z-50">
+        <nav class="glass-card backdrop-blur-md border-b border-white/10">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16 md:h-20">
+                    <!-- Logo -->
+                    <div class="flex-shrink-0 flex items-center">
+                        <div class="flex items-center">
+                            <i data-feather="scale" class="text-blue-500 w-8 h-8"></i>
+                            <span class="ml-2 text-xl font-bold text-gray-800">Tuperito<span class="text-blue-500">.com</span></span>
+                        </div>
+                    </div>
+                    <!-- Desktop Menu -->
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-center space-x-8">
+                            <a href="index.html" class="text-gray-700 px-3 py-2 rounded-md text-sm font-medium bg-white/10">Inicio</a>
+                            <a href="sobre-nosotros.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Sobre Nosotros</a>
+                            <a href="servicios.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Servicios</a>
+                            <a href="contactanos.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Contáctanos</a>
+                            <a href="aviso-legal.html" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:bg-white/5 transition duration-300">Aviso Legal</a>
+                        </div>
+                    </div>
+                    <!-- CTA Button -->
+                    <div class="hidden md:block ml-4">
+                        <a href="contactanos.html" class="cta-button bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-8 rounded-lg text-sm flex items-center gap-2">
+                            <i data-feather="phone" class="w-4 h-4"></i> Consulta Gratis
+                        </a>
+                    </div>
+                    <!-- Mobile menu button -->
+                    <div class="md:hidden flex items-center">
+                        <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-white/10 focus:outline-none transition duration-300">
+                            <i data-feather="menu" class="block h-6 w-6"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Mobile Menu -->
+            <div class="mobile-menu hidden md:hidden bg-blue-900/90 backdrop-blur-md">
+                <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                    <a href="index.html" class="text-gray-700 block px-3 py-2 rounded-md text-base font-medium bg-white/10">Inicio</a>
+                    <a href="sobre-nosotros.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Sobre Nosotros</a>
+                    <a href="servicios.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Servicios</a>
+                    <a href="contactanos.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Contáctanos</a>
+                    <a href="aviso-legal.html" class="text-gray-700 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium hover:bg-white/5">Aviso Legal</a>
+                    <a href="contactanos.html" class="mt-2 block w-full bg-green-600 hover:bg-green-700 text-white text-center font-medium py-3 px-6 rounded-lg">Consulta Gratis</a>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
+        <div class="absolute inset-0 bg-[url('http://static.photos/office/1200x630/42')] bg-cover bg-center">
+            <div class="absolute inset-0 bg-gradient-to-b from-blue-200/30 via-blue-300/40 to-blue-400/50"></div>
+        </div>
+        <div class="glass-card max-w-4xl mx-auto p-8 md:p-12 rounded-2xl text-center relative z-10" data-aos="fade-up">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-700 mb-6">¿Problemas con tu seguro?</h1>
+            <h3 class="text-4xl md:text-5xl font-bold text-gray-700 mb-4">Tu oficina experta en peritaje de seguros</h2>
+            <p class="text-lg text-gray-700 mb-8">Consulta inicial gratuita y sin compromiso</p>
+            <a href="contactanos.html" class="cta-button inline-flex items-center bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-12 rounded-lg text-lg">
+                Consulta Gratis <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-blue-50 to-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-700 mb-4">Expertos en <span class="text-blue-500">Peritaje de Seguros</span></h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Informes periciales de parte y mediación con Aseguradoras. Gestión integral de siniestros, desde la peritación hasta el final de la reparación o indemnización.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Service Card 1 -->
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/insurance/640x360/1" alt="Auto Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <!-- Service Card 2 -->
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/home/640x360/2" alt="Home Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <!-- Service Card 3 -->
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/business/640x360/3" alt="Business Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <!-- Service Card 4 -->
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/health/640x360/4" alt="Health Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <!-- Second Row -->
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/legal/640x360/5" alt="Legal Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/travel/640x360/6" alt="Travel Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/life/640x360/7" alt="Life Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+                <div class="glass-card rounded-xl p-0 hover:shadow-lg transition-all duration-300 m-2">
+                    <img src="http://static.photos/accident/640x360/8" alt="Accident Insurance" class="w-full h-48 object-cover rounded-lg">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Info Section -->
+    <section class="py-16 bg-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="glass-card p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
+                <h3 class="text-2xl font-bold text-gray-700 mb-6">Profesionales en el <span class="text-blue-500">trabajo</span></h3>
+                <p class="text-lg text-gray-600 mb-8">
+                    Solo por realizar una consulta y saber si puedes reclamar a tu Compañía Aseguradora, no te cobramos
+                </p>
+                <p class="text-lg text-gray-600">
+                    Nuestros expertos en Ingeniería te orientarán acerca de la reclamación que puedes realizar, el tipo de siniestro y en caso de contratarnos, podemos defender en el Juzgado tus intereses en caso de no existir un acuerdo previo
+                </p>
+            </div>
+        </div>
+    </section>
+    <script>
+        // Mobile menu toggle
+        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+            document.querySelector('.mobile-menu').classList.toggle('hidden');
+            const icon = document.querySelector('.mobile-menu-button i');
+            if (document.querySelector('.mobile-menu').classList.contains('hidden')) {
+                feather.replace();
+            } else {
+                icon.setAttribute('data-feather', 'x');
+                feather.replace();
+            }
+        });
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        feather.replace();
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,104 @@

+I'll create a professional hero section for your insurance claims service with a beautiful blue/white palette and glossy effects.
+Created a professional hero section for your insurance claims service! The design features a beautiful blue/white palette with green CTA accents and sophisticated glossy effects throughout.
+Key Features:
+Glass morphism design with backdrop blur and subtle borders
+Professional background with calm blue gradients and office buildings
+Responsive typography that scales beautifully on all devices
+Success-green CTA button with hover animations
+Semantic design system with custom color tokens and effects
+The hero prominently displays your Spanish messaging about insurance claims assistance with the free consultation offer, all wrapped in a modern, trustworthy design perfect for legal services.
+Added a professional glass navigation menu with all requested pages! The navigation features your exact Spanish menu items with beautiful glass morphism effects that match your design system.
+Navigation Features:
+Fixed glass header with backdrop blur and transparency
+Responsive mobile menu with smooth animations
+Active page highlighting and hover effects
+Professional logo with scale icon for legal services
+Success CTA button for immediate consultations
+Complete Pages Created:
+Sobre Nosotros: Company mission, team expertise, professional credentials
+Servicios: Detailed insurance services (auto, home, commercial, health) with 4-step process
+Contáctanos: Full contact form, emergency contact, office information
+Aviso Legal: Complete legal notice with company registration details
+Política de Privacidad: GDPR-compliant privacy policy for Spanish law firm
+Added a professional glass navigation menu with all requested pages! The navigation features your exact Spanish menu items with beautiful glass morphism effects that match your design system.
+Navigation Features:
+Fixed glass header with backdrop blur and transparency
+Responsive mobile menu with smooth animations
+Active page highlighting and hover effects
+Professional logo with scale icon for legal services
+Success CTA button for immediate consultations
+Complete Pages Created:
+Sobre Nosotros: Company mission, team expertise, professional credentials
+Servicios: Detailed insurance services (auto, home, commercial, health) with 4-step process
+Contáctanos: Full contact form, emergency contact, office information
+Aviso Legal: Complete legal notice with company registration details
+Política de Privacidad: GDPR-compliant privacy policy for Spanish law firm
+Added a professional glass navigation menu.
+The navigation must have items with beautiful glass morphism effects
+Navigation Features:
+Fixed glass header with backdrop blur and transparency
+Responsive mobile menu with smooth animations
+Active page highlighting and hover effects
+Professional logo with scale icon for legal services
+Success CTA button for immediate consultations
+Complete Pages Created:
+Sobre Nosotros: Company mission, team expertise, professional credentials
+Servicios: Detailed insurance services (auto, home, commercial, health) with 4-step process
+Contáctanos: Full contact form, emergency contact, office information
+Aviso Legal: Complete legal notice with company registration details
+Política de Privacidad: GDPR-compliant privacy policy for Spanish law firm
+change background image to office
+remove everything in it and add ths text as heading - ¿Problemas con tu seguro?
+Tu oficina experta en peritaje de seguros
+undo
+add sub heading - Consulta inicial gratuita y sin compromiso.
+make button width a bit wider
+make button lenth longer
+make button width and length shorter
+put arrow icon on same line as text in button
+make width a bit larger of button
+the background image change to a office and remove blue filter
+add a sunset filter to background
+change background filter to a light blue
+change menu text to darker grey and change title to tuperito.com
+change box text to same grey except button
+buttons make width larger
+change tuperito.com to Tuperito.com and .com change to blue color
+the text - Tu oficina experta en peritaje de seguros - make the same size as title of the block
+add another section below with the following
+below hero section and this text - Informes periciales de parte y mediación con Aseguradoras. Gestión integral de siniestros, desde la peritación hasta el final de la reparación o indemnización
+this is a subheading - Expertos en Peritaje de Seguros
+Add 2x2 images accordingly below text
+Add a section with the follwing
+"Expertos en Peritaje de Seguros" heading, your description text, and a 4x4 grid of professional insurance peritaje service images with glass card styling and hover effects.
+delete second section row
+add the following section;
+"Expertos en Peritaje de Seguros" heading, your description text, and a 4x4 grid of professional insurance peritaje service images with glass card styling and hover effects. change this part of the title to blue - Peritaje de Seguros
+add a second row of images and delete text below images
+make the row and column width of images 15 pixels
+set row and column width zero pixels
+add 10 pixels space between the images
+add this below
+Add this information below
+Profesionales en el trabajo
+Solo por realizar una consulta y saber si puedes reclamar a tu Compañía Aseguradora, no te cobramos
+Nuestros expertos en Ingeniería te orientarán acerca de la reclamación que puedes realizar, el tipo de siniestro y en caso de contratarnos, podemos defender en el Juzgado tus intereses en caso de no existir un acuerdo previo
+move this section to end and change the word trabajo to blue
+also add a block around the text with a light shadow
+change background to a light grey
+change background to white