Spaces:

Dinilsonricardo
/

techdicas

Running

App Files Files Community

Dinilsonricardo commited on Apr 12, 2025

Commit

835d38e

verified ·

1 Parent(s): ad4253c

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +633 -19

README.md CHANGED Viewed

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

 ---
+title: techdicas
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 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,633 @@
-<!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="pt">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechDicas Angola - Tecnologia para Todos</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#031521',
+                        neon: '#00baff',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'Arial', 'sans-serif'],
+                    },
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'neon-glow': 'neon-glow 2s ease-in-out infinite alternate',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-10px)' },
+                        },
+                        'neon-glow': {
+                            '0%': { 'text-shadow': '0 0 5px #00baff, 0 0 10px #00baff, 0 0 15px #00baff, 0 0 20px #00baff' },
+                            '100%': { 'text-shadow': '0 0 10px #00baff, 0 0 20px #00baff, 0 0 30px #00baff, 0 0 40px #00baff' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/css">
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #031521;
+            color: white;
+            scroll-behavior: smooth;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, rgba(3,21,33,0.9) 0%, rgba(0,186,255,0.2) 100%);
+        }
+        .neon-border {
+            border: 1px solid rgba(0, 186, 255, 0.3);
+            box-shadow: 0 0 10px rgba(0, 186, 255, 0.3);
+        }
+        .neon-border:hover {
+            border: 1px solid rgba(0, 186, 255, 0.8);
+            box-shadow: 0 0 20px rgba(0, 186, 255, 0.5);
+        }
+        .neon-text {
+            text-shadow: 0 0 5px rgba(0, 186, 255, 0.5);
+        }
+        .neon-text:hover {
+            text-shadow: 0 0 10px rgba(0, 186, 255, 0.8);
+        }
+        .input-neon:focus {
+            outline: none;
+            border-color: #00baff;
+            box-shadow: 0 0 10px rgba(0, 186, 255, 0.5);
+        }
+        .hero-bg {
+            background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+            background-blend-mode: overlay;
+        }
+        .profile-img {
+            border: 3px solid #00baff;
+            box-shadow: 0 0 20px rgba(0, 186, 255, 0.5);
+        }
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 0;
+            overflow: hidden;
+        }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .whatsapp-btn {
+            animation: pulse-slow 2s infinite;
+        }
+        .whatsapp-btn:hover {
+            animation: none;
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <!-- WhatsApp Floating Button -->
+    <a href="https://wa.me/244946239878" target="_blank" class="fixed bottom-8 right-8 bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg whatsapp-btn z-50 transition-all duration-300 hover:bg-green-600">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.479 5.092 1.479 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.612-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
+    </a>
+    <!-- Header/Navigation -->
+    <header class="fixed top-0 left-0 right-0 bg-primary bg-opacity-90 backdrop-blur-md z-40 shadow-md">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo -->
+                <div class="flex items-center">
+                    <div class="w-10 h-10 rounded-full bg-neon flex items-center justify-center mr-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                        </svg>
+                    </div>
+                    <a href="#" class="text-2xl font-bold text-white neon-text">Tech<span class="text-neon">Dicas</span></a>
+                </div>
+                <!-- Mobile Menu Button -->
+                <div class="md:hidden">
+                    <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+                <!-- Desktop Navigation -->
+                <nav class="hidden md:flex space-x-8">
+                    <a href="#inicio" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Início</a>
+                    <a href="#sobre" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Sobre</a>
+                    <a href="#tecnologia" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Tecnologia</a>
+                    <a href="#internet" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Internet Ilimitada</a>
+                    <a href="#youtube" class="text-gray-300 hover:text-neon transition duration-300 neon-text">YouTube</a>
+                    <a href="#desafios" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Desafios</a>
+                    <a href="#contato" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Contato</a>
+                </nav>
+            </div>
+            <!-- Mobile Navigation -->
+            <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
+                <div class="flex flex-col space-y-3">
+                    <a href="#inicio" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Início</a>
+                    <a href="#sobre" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Sobre</a>
+                    <a href="#tecnologia" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Tecnologia</a>
+                    <a href="#internet" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Internet Ilimitada</a>
+                    <a href="#youtube" class="text-gray-300 hover:text-neon transition duration-300 neon-text">YouTube</a>
+                    <a href="#desafios" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Desafios</a>
+                    <a href="#contato" class="text-gray-300 hover:text-neon transition duration-300 neon-text">Contato</a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section id="inicio" class="hero-bg bg-primary min-h-screen flex items-center justify-center pt-20 gradient-bg">
+        <div class="container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white">
+                Bem-vindo ao <span class="text-neon">TechDicas</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                Tecnologia acessível para todos os angolanos
+            </p>
+            <div class="mb-12">
+                <h2 class="text-3xl md:text-5xl font-bold text-neon animate-neon-glow">
+                    "Comprar saldo nunca!"
+                </h2>
+            </div>
+            <a href="#sobre" class="inline-block bg-neon text-primary font-bold py-3 px-8 rounded-full hover:bg-opacity-90 transition duration-300 transform hover:scale-105 shadow-lg">
+                Explorar
+            </a>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="sobre" class="py-20 bg-primary">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Sobre o TechDicas</span>
+            </h2>
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <div class="profile-img w-64 h-64 rounded-full mx-auto overflow-hidden bg-gray-700">
+                        <!-- Placeholder for profile image -->
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-bold mb-4 text-neon">Dinilson Ricardo (Dylan)</h3>
+                    <p class="text-gray-300 mb-6">
+                        Criador do projeto TechDicas, apaixonado por tecnologia e por compartilhar conhecimento de forma acessível.
+                    </p>
+                    <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl neon-border">
+                        <h4 class="text-xl font-semibold mb-3 text-white">Nossa Missão</h4>
+                        <p class="text-gray-300 italic">
+                            "Levar conhecimento tecnológico acessível a todos os angolanos, de forma prática, criativa e moderna."
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technology Section -->
+    <section id="tecnologia" class="py-20 bg-gray-900">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Tecnologia para o Dia a Dia</span>
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- App Úteis Card -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2">
+                    <div class="text-neon mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Aplicativos Úteis</h3>
+                    <p class="text-gray-300">
+                        Descubra os melhores aplicativos para aumentar sua produtividade, organização e diversão no seu smartphone.
+                    </p>
+                </div>
+                <!-- Produtividade Card -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2">
+                    <div class="text-neon mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Produtividade</h3>
+                    <p class="text-gray-300">
+                        Truques e dicas para aproveitar ao máximo seu tempo usando a tecnologia a seu favor.
+                    </p>
+                </div>
+                <!-- IA Card -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2">
+                    <div class="text-neon mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">IA no Dia a Dia</h3>
+                    <p class="text-gray-300">
+                        Como usar inteligência artificial para facilitar sua vida, desde assistentes virtuais até ferramentas criativas.
+                    </p>
+                </div>
+                <!-- Segurança Card -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2">
+                    <div class="text-neon mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Segurança Digital</h3>
+                    <p class="text-gray-300">
+                        Proteja seus dados e privacidade online com nossas dicas essenciais de segurança digital.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Internet Ilimitada Section -->
+    <section id="internet" class="py-20 bg-primary">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Internet Ilimitada</span>
+            </h2>
+            <div class="max-w-4xl mx-auto text-center mb-16">
+                <p class="text-xl text-gray-300">
+                    Aprenda como ter internet ilimitada nas principais operadoras de Angola. Métodos testados e aprovados pela comunidade.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Africell Video -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border transition duration-500 transform hover:-translate-y-2">
+                    <h3 class="text-2xl font-bold mb-6 text-center text-neon">Africell</h3>
+                    <div class="video-container rounded-xl overflow-hidden">
+                        <iframe src="https://www.youtube.com/embed/KwiYbB-RXAY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="mt-6 text-center">
+                        <a href="https://youtu.be/KwiYbB-RXAY?si=pxcNz-ohFvVyFI0-" target="_blank" class="inline-block bg-neon text-primary font-bold py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
+                            Assistir no YouTube
+                        </a>
+                    </div>
+                </div>
+                <!-- Unitel Video -->
+                <div class="bg-gray-800 p-6 rounded-2xl neon-border transition duration-500 transform hover:-translate-y-2">
+                    <h3 class="text-2xl font-bold mb-6 text-center text-neon">Unitel</h3>
+                    <div class="video-container rounded-xl overflow-hidden">
+                        <iframe src="https://www.youtube.com/embed/vDv9WNrM5XA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="mt-6 text-center">
+                        <a href="https://youtu.be/vDv9WNrM5XA?si=swW4gtXMTfNR4gL6" target="_blank" class="inline-block bg-neon text-primary font-bold py-2 px-6 rounded-full hover:bg-opacity-90 transition duration-300">
+                            Assistir no YouTube
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- YouTube Section -->
+    <section id="youtube" class="py-20 bg-gray-900">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Nosso Canal no YouTube</span>
+            </h2>
+            <div class="max-w-4xl mx-auto text-center mb-16">
+                <p class="text-xl text-gray-300">
+                    Acompanhe nosso conteúdo no YouTube com dicas semanais de tecnologia, tutoriais e muito mais.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Video 1 Placeholder -->
+                <div class="bg-gray-800 rounded-2xl overflow-hidden neon-border transition duration-500 transform hover:-translate-y-2">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3 text-white">Dica de Tecnologia #1</h3>
+                        <p class="text-gray-300 mb-4">Aprenda truques úteis para seu smartphone</p>
+                        <div class="flex space-x-3">
+                            <a href="#" class="inline-block bg-gray-700 text-white font-medium py-1 px-4 rounded-full hover:bg-gray-600 transition duration-300">
+                                Assistir
+                            </a>
+                            <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="inline-block bg-red-600 text-white font-medium py-1 px-4 rounded-full hover:bg-red-700 transition duration-300 neon-text">
+                                Inscreva-se
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Video 2 Placeholder -->
+                <div class="bg-gray-800 rounded-2xl overflow-hidden neon-border transition duration-500 transform hover:-translate-y-2">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3 text-white">Dica de Produtividade</h3>
+                        <p class="text-gray-300 mb-4">Aumente sua eficiência com essas ferramentas</p>
+                        <div class="flex space-x-3">
+                            <a href="#" class="inline-block bg-gray-700 text-white font-medium py-1 px-4 rounded-full hover:bg-gray-600 transition duration-300">
+                                Assistir
+                            </a>
+                            <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="inline-block bg-red-600 text-white font-medium py-1 px-4 rounded-full hover:bg-red-700 transition duration-300 neon-text">
+                                Inscreva-se
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Video 3 Placeholder -->
+                <div class="bg-gray-800 rounded-2xl overflow-hidden neon-border transition duration-500 transform hover:-translate-y-2">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3 text-white">Segurança Digital</h3>
+                        <p class="text-gray-300 mb-4">Proteja seus dados online com essas dicas</p>
+                        <div class="flex space-x-3">
+                            <a href="#" class="inline-block bg-gray-700 text-white font-medium py-1 px-4 rounded-full hover:bg-gray-600 transition duration-300">
+                                Assistir
+                            </a>
+                            <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="inline-block bg-red-600 text-white font-medium py-1 px-4 rounded-full hover:bg-red-700 transition duration-300 neon-text">
+                                Inscreva-se
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="inline-block bg-red-600 text-white font-bold py-3 px-8 rounded-full hover:bg-red-700 transition duration-300 transform hover:scale-105 shadow-lg neon-text">
+                    Visite Nosso Canal
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Desafios Section -->
+    <section id="desafios" class="py-20 bg-primary">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Desafios Semanais</span>
+            </h2>
+            <div class="max-w-3xl mx-auto bg-gray-800 bg-opacity-50 p-8 rounded-2xl neon-border text-center">
+                <div class="text-5xl text-neon mb-6 animate-pulse">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </div>
+                <h3 class="text-2xl font-bold mb-4 text-white">Participe e Ganhe Saldo Grátis!</h3>
+                <p class="text-xl text-gray-300 mb-6">
+                    "Toda sexta-feira no grupo do WhatsApp, quem responder primeiro e corretamente uma pergunta, ganha saldo grátis!"
+                </p>
+                <a href="https://chat.whatsapp.com/FMryiQno3n1CcvANQ3963d" target="_blank" class="inline-block bg-green-500 text-white font-bold py-3 px-8 rounded-full hover:bg-green-600 transition duration-300 transform hover:scale-105 shadow-lg">
+                    Entrar no Grupo
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Contato Section -->
+    <section id="contato" class="py-20 bg-gray-900">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Entre em Contato</span>
+            </h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 text-neon">Informações de Contato</h3>
+                    <div class="mb-8">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-neon bg-opacity-20 p-3 rounded-full mr-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-neon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white">WhatsApp</h4>
+                                <a href="https://wa.me/244946239878" target="_blank" class="text-gray-300 hover:text-neon transition duration-300">+244 946 239 878</a>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="bg-neon bg-opacity-20 p-3 rounded-full mr-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-neon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold text-white">Facebook</h4>
+                                <a href="https://www.facebook.com/profile.php?id=61575193132740&mibextid=ZbWKwL" target="_blank" class="text-gray-300 hover:text-neon transition duration-300">TechDicas Angola</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl neon-border">
+                        <h4 class="text-xl font-semibold mb-4 text-white">Redes Sociais</h4>
+                        <div class="flex space-x-4">
+                            <a href="https://www.facebook.com/profile.php?id=61575193132740&mibextid=ZbWKwL" target="_blank" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>
+                            </a>
+                            <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition duration-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 text-neon">Envie uma Mensagem</h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Nome</label>
+                            <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent input-neon" placeholder="Seu nome">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-300 mb-1">E-mail</label>
+                            <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent input-neon" placeholder="seu@email.com">
+                        </div>
+                        <div>
+                            <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Mensagem</label>
+                            <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-neon focus:border-transparent input-neon" placeholder="Sua mensagem"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-neon text-primary font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition duration-300">
+                            Enviar Mensagem
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Links Úteis Section -->
+    <section id="links" class="py-20 bg-primary">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+                <span class="border-b-2 border-neon pb-2">Links Úteis</span>
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- VPN Card -->
+                <a href="https://sshmax.net/" target="_blank" class="bg-gray-800 p-8 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2 group">
+                    <div class="text-neon mb-6 text-4xl animate-float">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white text-center group-hover:text-neon transition duration-300">Criar Arquivos VPN</h3>
+                    <p class="text-gray-300 text-center">Acesse o SSHMax para criar seus arquivos de configuração VPN.</p>
+                </a>
+                <!-- Teste Internet Card -->
+                <a href="https://fast.com/en/gb/#" target="_blank" class="bg-gray-800 p-8 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2 group">
+                    <div class="text-neon mb-6 text-4xl animate-float">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white text-center group-hover:text-neon transition duration-300">Testar Velocidade</h3>
+                    <p class="text-gray-300 text-center">Verifique a velocidade real da sua conexão com o Fast.com.</p>
+                </a>
+                <!-- SNI Card -->
+                <a href="https://atsameip.intercode.ca" target="_blank" class="bg-gray-800 p-8 rounded-2xl neon-border hover:shadow-neon transition duration-500 transform hover:-translate-y-2 group">
+                    <div class="text-neon mb-6 text-4xl animate-float">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white text-center group-hover:text-neon transition duration-300">Buscar SNIs</h3>
+                    <p class="text-gray-300 text-center">Encontre SNIs válidas para suas configurações de internet.</p>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 rounded-full bg-neon flex items-center justify-center mr-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                        </svg>
+                    </div>
+                    <a href="#" class="text-2xl font-bold text-white neon-text">Tech<span class="text-neon">Dicas</span></a>
+                </div>
+                <div class="flex space-x-6 mb-6">
+                    <a href="https://www.facebook.com/profile.php?id=61575193132740&mibextid=ZbWKwL" target="_blank" class="text-gray-400 hover:text-neon transition duration-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>
+                    </a>
+                    <a href="https://youtube.com/@dinilsonricardo?si=aqIp1h8xH3I5q7nG" target="_blank" class="text-gray-400 hover:text-neon transition duration-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
+                    </a>
+                    <a href="https://wa.me/244946239878" target="_blank" class="text-gray-400 hover:text-neon transition duration-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.479 5.092 1.479 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.612-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
+                    </a>
+                </div>
+                <p class="text-gray-400 text-center">
+                    © 2025 TechDicas - Todos os direitos reservados
+                </p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                    // Scroll to target
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+        // Add shadow to header on scroll
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 50) {
+                header.classList.add('shadow-lg');
+            } else {
+                header.classList.remove('shadow-lg');
+            }
+        });
+    </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=Dinilsonricardo/techdicas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>