Hugging Face's logo

Spaces:
streamerbtw1002
/
vortex-labs
Running

App Files Community
vortex-labs
File size: 5,287 Bytes
30b463b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vortex Labs - Innovation Unleashed</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%236366f1'/%3E%3Cpath d='M50 20 L60 40 L80 40 L65 55 L70 75 L50 60 L30 75 L35 55 L20 40 L40 40 Z' fill='white'/%3E%3C/svg%3E">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#ec4899',
                        accent: '#10b981'
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'float-slow': 'float 10s ease-in-out infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'spin-slow': 'spin 8s linear infinite',
                        'bounce-slow': 'bounce 4s infinite',
                        'gradient': 'gradient 8s ease infinite',
                        'marquee': 'marquee 20s linear infinite',
                        'marquee-reverse': 'marquee 20s linear infinite reverse',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-950 text-white overflow-x-hidden">
    <!-- Animated Background -->
    <div class="fixed inset-0 -z-10 opacity-20">
        <div class="absolute top-0 left-0 w-96 h-96 bg-primary rounded-full blur-3xl animate-float"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-secondary rounded-full blur-3xl animate-float-slow"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent rounded-full blur-3xl animate-pulse-slow"></div>
    </div>

    <!-- Loading Screen -->
    <div id="loader" class="fixed inset-0 bg-gray-950 z-50 flex items-center justify-center transition-opacity duration-500">
        <div class="relative">
            <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
            <div class="absolute inset-0 w-16 h-16 border-4 border-secondary border-t-transparent rounded-full animate-spin-slow"></div>
        </div>
    </div>

    <!-- Cursor Follower -->
    <div id="cursor" class="fixed w-6 h-6 bg-primary rounded-full pointer-events-none z-50 transition-transform duration-100 mix-blend-difference"></div>

    <!-- Navigation -->
    <vortex-navbar></vortex-navbar>

    <!-- Hero Section -->
    <section class="min-h-screen flex items-center justify-center px-4 relative">
        <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
        <div class="text-center max-w-5xl mx-auto pt-20">
            <div class="mb-6 opacity-0 animate-fade-in" style="animation-delay: 0.2s;">
                <span class="inline-block px-4 py-2 bg-primary/10 border border-primary/30 rounded-full text-primary text-sm font-medium backdrop-blur-sm animate-pulse">
                    <i data-feather="zap" class="inline w-4 h-4 mr-2"></i>
                    Innovating Tomorrow, Today
                </span>
            </div>
            <h1 class="text-5xl md:text-7xl font-bold mb-6 opacity-0 animate-fade-in-up" style="animation-delay: 0.4s;">
                We Craft
                <span class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent animate-gradient">
                    Digital Vortexes
                </span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto opacity-0 animate-fade-in-up" style="animation-delay: 0.6s;">
                Transforming ideas into immersive experiences through cutting-edge technology and bold design.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center opacity-0 animate-fade-in" style="animation-delay: 0.8s;">
                <a href="about.html" class="vortex-btn-primary">
                    <span>Explore Our Universe</span>
                    <i data-feather="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
                </a>
                <a href="contact.html" class="vortex-btn-secondary">
                    <i data-feather="message-circle" class="w-5 h-5"></i>
                    <span>Start a Project</span>
                </a>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce-slow">
            <div class="w-6 h-10 border-2 border-gray-400 rounded-full flex justify-center">
                <div class="w-1 h-3 bg-gray-400 rounded-full mt-2 animate-pulse"></div>
            </div>
        </div>
    </section>

    <!-- Marquee -->
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>