BirdLingo/index.html at main · Techharik/BirdLingo · GitHub

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BirdLingo Suite | Hackathon Showcase</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=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono&display=swap');

        body {
            font-family: 'Space+Grotesk', sans-serif;
            background-color: #0a0a0a;
        }

        .mono {
            font-family: 'JetBrains Mono', monospace;
        }

        .orange-glow {
            color: #ff6b00;
            text-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
        }

        .green-glow {
            color: #22c55e;
            text-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        }

        .hack-border {
            border: 2px solid #1a1a1a;
            transition: all 0.3s ease;
        }

        .hack-border:hover {
            border-color: #ff6b00;
            box-shadow: 5px 5px 0px #22c55e;
        }

        .badge-soon {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border: 1px solid #22c55e;
        }
    </style>
</head>

<body class="text-slate-300">

    <nav class="border-b-2 border-slate-900 bg-black sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="bg-[#ff6b00] text-black font-black px-2 py-1 text-xl italic">BL</span>
                <span class="mono font-bold text-white tracking-tighter">BIRDLINGO_LABS</span>
            </div>
            <div class="mono text-[10px] hidden md:block">
                <span class="text-[#22c55e]">● SYSTEM_READY</span> | <span class="text-slate-500">BUILD_v2.0.26</span>
            </div>
        </div>
    </nav>

    <header class="py-20 px-6 max-w-7xl mx-auto border-x-2 border-slate-900">
        <div class="mb-4 mono text-[#22c55e] font-bold tracking-widest uppercase text-sm">
            // Project Submission: Global Design Tooling
        </div>
        <h1 class="text-6xl md:text-8xl font-bold text-white mb-8 leading-none">
            Break the <span class="orange-glow italic">Language</span> Barrier.
        </h1>
        <p class="text-xl text-slate-400 max-w-2xl mono mb-10">
            A suite of Figma tools engineered to automate localization, detect layout breaking-points, and bridge the
            gap between design and code.
        </p>
        <div class="flex gap-4">
            <div class="h-1 w-24 bg-[#ff6b00]"></div>
            <div class="h-1 w-24 bg-[#22c55e]"></div>
        </div>
    </header>

    <section class="max-w-7xl mx-auto px-6 pb-32 border-x-2 border-slate-900">
        <div class="grid md:grid-cols-2 gap-8">

            <div class="hack-border bg-[#0f0f0f] p-8 relative overflow-hidden group">
                <div class="flex justify-between items-start mb-6">
                    <i class="fa-solid fa-language text-4xl text-[#ff6b00]"></i>
                    <span class="mono text-[10px] text-slate-500">PROJECT_01</span>
                </div>
                <h3 class="text-3xl font-bold text-white mb-2 uppercase">Birdlingo Translation</h3>
                <p class="text-slate-400 mono text-sm mb-6 leading-relaxed">
                    The core engine. Convert Figma screens into multiple languages instantly for localization previews.
                </p>
                <div class="flex gap-2">
                    <span class="text-[10px] px-2 py-1 bg-white/5 border border-white/10 rounded uppercase">Live</span>
                    <span class="text-[10px] px-2 py-1 bg-white/5 border border-white/10 rounded uppercase">Figma
                        API</span>
                </div>
            </div>

            <div class="hack-border bg-[#0f0f0f] p-8 relative group">
                <div class="flex justify-between items-start mb-6">
                    <i class="fa-solid fa-bridge text-4xl text-[#22c55e]"></i>
                    <span class="mono text-[10px] text-slate-500">PROJECT_02</span>
                </div>
                <h3 class="text-3xl font-bold text-white mb-2 uppercase">Birdlingo Bridge</h3>
                <p class="text-slate-400 mono text-sm mb-6 leading-relaxed">
                    A JSON multilingual generator. Bridges the gap by turning design layers into production-ready i18n
                    keys.
                </p>
                <div class="flex gap-2 text-[#22c55e] mono text-xs">
                    <i class="fa-solid fa-check"></i> Functional Prototype
                </div>
            </div>

            <div class="hack-border bg-[#0f0f0f]/50 p-8 opacity-70 group border-dashed">
                <div class="flex justify-between items-start mb-6">
                    <i
                        class="fa-solid fa-triangle-exclamation text-4xl text-slate-500 group-hover:text-[#ff6b00] transition-colors"></i>
                    <span class="badge-soon text-[10px] px-2 py-1 font-bold uppercase tracking-widest">Coming
                        Soon</span>
                </div>
                <h3 class="text-3xl font-bold text-white mb-2 uppercase italic">Birdlingo Detect</h3>
                <p class="text-slate-500 mono text-sm mb-6 leading-relaxed">
                    Automated overflow highlighting. Scans your UI for text expansion issues in 40+ languages.
                </p>
            </div>

            <div class="hack-border bg-[#0f0f0f]/50 p-8 opacity-70 group border-dashed">
                <div class="flex justify-between items-start mb-6">
                    <i
                        class="fa-solid fa-table-cells text-4xl text-slate-500 group-hover:text-[#22c55e] transition-colors"></i>
                    <span class="badge-soon text-[10px] px-2 py-1 font-bold uppercase tracking-widest">Coming
                        Soon</span>
                </div>
                <h3 class="text-3xl font-bold text-white mb-2 uppercase italic">Birdlingo Grid View</h3>
                <p class="text-slate-500 mono text-sm mb-6 leading-relaxed">
                    Mass-generate images across different languages in a single grid layout for marketing assets.
                </p>
            </div>

        </div>
    </section>

    <footer class="border-t-2 border-slate-900 py-10 px-6">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="mono text-xs">
                <span class="text-[#ff6b00]">BUILD_LOG:</span> LingoDev Hack.
            </div>
            <div class="flex gap-6">
                <a href="#" class="hover:text-[#ff6b00] transition-colors"><i
                        class="fa-brands fa-github text-xl"></i></a>
                <a href="#" class="hover:text-[#22c55e] transition-colors"><i
                        class="fa-brands fa-discord text-xl"></i></a>
            </div>
        </div>
    </footer>

</body>

</html>