Add 2 files

index.html

@@ -6,74 +6,44 @@
     <title>Attorney James Montgomery | Distinguished Legal Counsel</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
-        
-        body {
-            font-family: 'Montserrat', sans-serif;
-            overflow: hidden;
-            height: 100vh;
-        }
-        
-        .gold-text {
-            color: #D4AF37;
-        }
-        
-        .gold-border {
-            border-color: #D4AF37;
-        }
-        
-        .gold-bg {
-            background-color: #D4AF37;
-        }
-        
-        .playfair {
-            font-family: 'Playfair Display', serif;
-        }
-        
-        .bg-pattern {
-            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-29c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM60 91c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM35 41c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.cdnfonts.com/css/beautiful-minds" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Constantia&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'beautiful-minds': ['Beautiful Minds', 'sans-serif'],
+                        'constantia': ['Constantia', 'serif']
+                    },
+                    colors: {
+                        'gold': '#D4AF37',
+                    },
+                    backgroundImage: {
+                        'gold-pattern': "url(\"data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-29c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM60 91c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM35 41c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E\")"
+                    }
+                }
+            }
         }
-        
-        .achievement-item {
-            position: relative;
-            padding-left: 2rem;
-        }
-        
-        .achievement-item:before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 0.6rem;
-            width: 1rem;
-            height: 1rem;
-            background-color: #D4AF37;
-            transform: rotate(45deg);
-        }
-        
-        .resume-btn {
-            transition: all 0.3s ease;
-        }
-        
-        .resume-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
-        }
-        
-        .contact-link:hover {
-            color: #D4AF37 !important;
-        }
-    </style>
+    </script>
 </head>
-<body class="bg-black text-white">
-    <div class="container mx-auto h-screen flex flex-col justify-between px-6 py-12 bg-pattern">
+<body class="bg-black text-white font-constantia overflow-x-hidden min-h-screen">
+    <!-- Language Button -->
+    <button id="languageBtn" class="fixed top-5 right-5 z-50 bg-black/70 border border-gold text-white px-4 py-2 rounded-full flex items-center gap-2 hover:bg-gold hover:text-black transition-all duration-300">
+        <i class="fas fa-language"></i>
+        <span>IT</span>
+    </button>
+    
+    <div class="container mx-auto min-h-screen flex flex-col justify-between px-6 py-12 bg-gold-pattern">
         <!-- Header -->
         <header class="flex justify-between items-center">
-            <div class="text-2xl font-bold playfair gold-text">J.MONTGOMERY</div>
+            <div class="text-2xl font-bold font-beautiful-minds text-gold">J.MONTGOMERY</div>
             <nav class="hidden md:flex space-x-8">
-                <a href="#about" class="text-white hover:text-yellow-400 transition">About</a>
-                <a href="#achievements" class="text-white hover:text-yellow-400 transition">Achievements</a>
-                <a href="#contact" class="text-white hover:text-yellow-400 transition">Contact</a>
+                <a href="#about" class="text-white hover:text-gold transition">About</a>
+                <a href="#achievements" class="text-white hover:text-gold transition">Achievements</a>
+                <a href="#contact" class="text-white hover:text-gold transition">Contact</a>
             </nav>
             <button class="md:hidden text-white">
                 <i class="fas fa-bars text-2xl"></i>
@@ -84,48 +54,56 @@
         <main class="flex-grow flex flex-col md:flex-row items-center justify-center gap-12">
             <!-- Left Column - Portrait -->
             <div class="w-full md:w-1/3 flex justify-center">
-                <div class="relative">
-                    <div class="w-64 h-80 md:w-72 md:h-96 bg-gray-800 relative overflow-hidden">
-                        <div class="absolute inset-0 border-4 border-transparent hover:border-yellow-400 transition-all duration-300"></div>
-                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
-                        <div class="absolute inset-0 flex items-end p-6">
-                            <h2 class="playfair text-3xl font-bold">James Montgomery</h2>
-                        </div>
+                <div class="relative w-72 h-96">
+                    <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
+                         alt="Attorney James Montgomery" 
+                         class="w-full h-full object-cover grayscale-[30%] contrast-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
+                    <div class="absolute inset-0 flex items-end p-6">
+                        <h2 class="font-beautiful-minds text-3xl font-bold" id="nameTitle">JAMES MONTGOMERY</h2>
                     </div>
-                    <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-yellow-400 flex items-center justify-center">
-                        <span class="text-black font-bold text-sm">15+ Years Experience</span>
+                    <div class="absolute -bottom-5 -right-5 w-20 h-20 bg-gold flex items-center justify-center rotate-6">
+                        <span class="text-black font-bold text-xs text-center" id="experienceText">15+ YEARS<br>EXPERIENCE</span>
                     </div>
                 </div>
             </div>
             
             <!-- Right Column - Info -->
             <div class="w-full md:w-2/3 space-y-8">
-                <h1 class="playfair text-4xl md:text-5xl font-bold">
-                    Distinguished <span class="gold-text">Legal</span> Counsel
+                <h1 class="font-beautiful-minds text-4xl md:text-5xl font-bold tracking-tight">
+                    <span id="mainTitle">DISTINGUISHED</span> <span class="text-gold" id="legalText">LEGAL</span> <span id="counselText">COUNSEL</span>
                 </h1>
                 
-                <p class="text-lg text-gray-300 max-w-2xl">
+                <p class="text-lg text-gray-300 max-w-2xl" id="descriptionText">
                     Specializing in corporate law, intellectual property, and high-stakes litigation with a proven track record of securing favorable outcomes for clients ranging from Fortune 500 companies to individual entrepreneurs.
                 </p>
                 
                 <!-- Achievements -->
                 <div id="achievements" class="space-y-4">
-                    <h3 class="text-xl font-semibold gold-text">Notable Achievements</h3>
+                    <h3 class="text-xl font-semibold text-gold font-beautiful-minds" id="achievementsTitle">NOTABLE ACHIEVEMENTS</h3>
                     <ul class="space-y-3">
-                        <li class="achievement-item">Successfully argued before the Supreme Court in landmark IP case (2021)</li>
-                        <li class="achievement-item">Recipient of the National Law Journal's "Top 40 Under 40" award</li>
-                        <li class="achievement-item">Negotiated $250M merger between tech giants with zero litigation</li>
-                        <li class="achievement-item">Maintained 92% success rate in jury trials over the past decade</li>
+                        <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement1">
+                            Successfully argued before the Supreme Court in landmark IP case (2021)
+                        </li>
+                        <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement2">
+                            Recipient of the National Law Journal's "Top 40 Under 40" award
+                        </li>
+                        <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement3">
+                            Negotiated $250M merger between tech giants with zero litigation
+                        </li>
+                        <li class="relative pl-8 before:absolute before:left-0 before:top-3 before:w-4 before:h-4 before:bg-gold before:rotate-45" id="achievement4">
+                            Maintained 92% success rate in jury trials over the past decade
+                        </li>
                     </ul>
                 </div>
                 
                 <!-- CTA Buttons -->
                 <div class="flex flex-wrap gap-4 pt-4">
-                    <a href="#" class="resume-btn gold-bg text-black font-bold px-8 py-3 rounded-sm flex items-center gap-2">
-                        <i class="fas fa-file-alt"></i> Download Resume
+                    <a href="#" class="bg-gold text-black font-bold px-8 py-3 rounded-sm flex items-center gap-2 hover:-translate-y-1 hover:shadow-lg hover:shadow-gold/30 transition-all duration-300">
+                        <i class="fas fa-file-alt"></i> <span id="resumeBtnText">DOWNLOAD RESUME</span>
                     </a>
-                    <a href="#contact" class="border-2 gold-border text-white font-bold px-8 py-3 rounded-sm hover:bg-yellow-400 hover:bg-opacity-10 transition">
-                        Schedule Consultation
+                    <a href="#contact" class="border-2 border-gold text-white font-bold px-8 py-3 rounded-sm hover:bg-gold/10 transition">
+                        <span id="consultationBtnText">SCHEDULE CONSULTATION</span>
                     </a>
                 </div>
             </div>
@@ -134,18 +112,85 @@
         <!-- Footer -->
         <footer id="contact" class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-gray-800">
             <div class="mb-4 md:mb-0">
-                <h3 class="text-lg font-semibold gold-text playfair">James Montgomery, Esq.</h3>
-                <p class="text-gray-400">Principal Attorney | Montgomery & Associates</p>
+                <h3 class="text-lg font-semibold text-gold font-beautiful-minds" id="footerName">JAMES MONTGOMERY, ESQ.</h3>
+                <p class="text-gray-400" id="footerTitle">PRINCIPAL ATTORNEY | MONTGOMERY & ASSOCIATES</p>
             </div>
-            <div class="flex space-x-6">
-                <a href="tel:+15551234567" class="contact-link text-white hover:text-yellow-400 transition">
+            <div class="flex flex-col md:flex-row gap-4 md:gap-6">
+                <a href="tel:+15551234567" class="text-white hover:text-gold transition flex items-center">
                     <i class="fas fa-phone mr-2"></i> (555) 123-4567
                 </a>
-                <a href="mailto:james@montgomerylaw.com" class="contact-link text-white hover:text-yellow-400 transition">
-                    <i class="fas fa-envelope mr-2"></i> james@montgomerylaw.com
+                <a href="mailto:james@montgomerylaw.com" class="text-white hover:text-gold transition flex items-center">
+                    <i class="fas fa-envelope mr-2"></i> JAMES@MONTGOMERYLAW.COM
                 </a>
             </div>
         </footer>
     </div>
+
+    <script>
+        const translations = {
+            en: {
+                nameTitle: "JAMES MONTGOMERY",
+                mainTitle: "DISTINGUISHED",
+                legalText: "LEGAL",
+                counselText: "COUNSEL",
+                descriptionText: "Specializing in corporate law, intellectual property, and high-stakes litigation with a proven track record of securing favorable outcomes for clients ranging from Fortune 500 companies to individual entrepreneurs.",
+                achievementsTitle: "NOTABLE ACHIEVEMENTS",
+                achievement1: "Successfully argued before the Supreme Court in landmark IP case (2021)",
+                achievement2: "Recipient of the National Law Journal's \"Top 40 Under 40\" award",
+                achievement3: "Negotiated $250M merger between tech giants with zero litigation",
+                achievement4: "Maintained 92% success rate in jury trials over the past decade",
+                resumeBtnText: "DOWNLOAD RESUME",
+                consultationBtnText: "SCHEDULE CONSULTATION",
+                footerName: "JAMES MONTGOMERY, ESQ.",
+                footerTitle: "PRINCIPAL ATTORNEY | MONTGOMERY & ASSOCIATES",
+                experienceText: "15+ YEARS<br>EXPERIENCE"
+            },
+            it: {
+                nameTitle: "JAMES MONTGOMERY",
+                mainTitle: "CONSULENZA",
+                legalText: "LEGALE",
+                counselText: "DI ECCELLENZA",
+                descriptionText: "Specializzato in diritto societario, proprietà intellettuale e contenziosi ad alto rischio con un comprovato track record nel garantire esiti favorevoli per clienti che vanno dalle aziende Fortune 500 ai singoli imprenditori.",
+                achievementsTitle: "RISULTATI IMPORTANTI",
+                achievement1: "Discusso con successo davanti alla Corte Suprema in un caso fondamentale di proprietà intellettuale (2021)",
+                achievement2: "Vincitore del premio \"Top 40 Under 40\" del National Law Journal",
+                achievement3: "Negoziati 250 milioni di dollari di fusione tra colossi tecnologici senza contenzioso",
+                achievement4: "Mantenuto un tasso di successo del 92% nei processi con giuria nell'ultimo decennio",
+                resumeBtnText: "SCARICA CURRICULUM",
+                consultationBtnText: "PRENOTA CONSULENZA",
+                footerName: "JAMES MONTGOMERY, AVV.",
+                footerTitle: "AVVOCATO PRINCIPALE | MONTGOMERY & ASSOCIATES",
+                experienceText: "15+ ANNI<br>ESPERIENZA"
+            }
+        };
+
+        let currentLanguage = 'en';
+        const languageBtn = document.getElementById('languageBtn');
+
+        function updateContent(language) {
+            const translation = translations[language];
+            for (const [key, value] of Object.entries(translation)) {
+                const element = document.getElementById(key);
+                if (element) {
+                    if (key === 'experienceText') {
+                        element.innerHTML = value;
+                    } else {
+                        element.textContent = value;
+                    }
+                }
+            }
+        }
+
+        languageBtn.addEventListener('click', function() {
+            currentLanguage = currentLanguage === 'en' ? 'it' : 'en';
+            updateContent(currentLanguage);
+            this.innerHTML = currentLanguage === 'en' 
+                ? '<i class="fas fa-language"></i><span>IT</span>' 
+                : '<i class="fas fa-language"></i><span>EN</span>';
+        });
+
+        // Initialize with English content
+        updateContent('en');
+    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tinolin/coco1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1 +1,4 @@
- I need you to create a single-screen (no scrolling) responsive website with black, gold, and white colors for a lawyer, with a brief description of their achievements and the option to download their resume.
+ I need you to create a single-screen (no scrolling) responsive website with black, gold, and white colors for a lawyer, with a brief description of their achievements and the option to download their resume.
+la imagen no se ve podrías corregir? además me gustaría que utilizaras la fuente antenna y mattock
+agregarías un botón de traduccion en italiano? y cambia de fuentes a "beautiful minds" y "Constantia"
+no funciona bien ya que se ve duplicado. Además me gustaría que los estilos esten realizados con tailwind integramente