20squares.github.io/index.html at main · 20squares/20squares.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20[ ]</title>
    <meta name="description"
        content="20squares is a full-stack engineering firm specializing in cryptographic protocol design, economic modeling, and high-stakes distributed systems.">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">

    <!-- Favicon -->
    <link rel="icon" href="img/logowhite.svg">
</head>

<body>
    <header>
        <div class="container">
            <nav>
                <a href="index.html" class="logo">
                    <img src="img/logowhite.svg" alt="20squares Logo" style="height: 32px; width: auto; opacity: 0.9;">
                </a>
                <div class="mobile-menu-btn">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="nav-links">
                    <a href="crypto.html">Crypto</a>
                    <a href="systems.html">Systems</a>
                    <a href="ventures.html">Ventures</a>
                    <a href="about.html">About</a>

                </div>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container fade-in">
                <span class="hero-label">Industrial-Grade Economic Engineering</span>
                <h1>High-Stakes <span style="color: var(--text-muted);">Digital Economies</span></h1>
                <p>We design, build, and audit the infrastructure of complex economic systems. From markets and pricing
                    to decentralized finance, we deliver production-ready software for mission-critical environments.
                </p>
                <div class="grid-2" style="margin-top: 30px; gap: 40px;">
                    <div style="background: var(--card-bg); padding: 30px; border: 1px solid var(--card-border);">
                        <h3 style="margin-top: 0;">Crypto Services</h3>
                        <p style="font-size: 0.9rem;">Smart contracts, RWA tokenization, and protocol engineering.</p>
                        <a href="crypto.html" class="btn">View Crypto</a>
                    </div>
                    <div style="background: var(--card-bg); padding: 30px; border: 1px solid var(--card-border);">
                        <h3 style="margin-top: 0;">Complex Systems</h3>
                        <p style="font-size: 0.9rem;">Economic modeling, mechanism design, and revenue analytics.</p>
                        <a href="systems.html" class="btn">View Systems</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div>
                    <img src="img/logowhite.svg" alt="20squares"
                        style="height: 24px; margin-bottom: 20px; opacity: 0.5;">
                    <p style="font-size: 0.8rem; max-width: 300px;">Mannheim, Germany<br>DE362667647</p>
                </div>
                <div class="footer-links">
                    <h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-main);">Contact</h4>
                    <ul>
                        <li><a href="mailto:info@20squares.xyz">info@20squares.xyz</a></li>
                        <li><a href="mailto:info@20squares.com">info@20squares.com</a></li>
                        <li><span style="color: var(--text-muted);">name@20squares.xyz</span> <span
                                style="color: var(--text-muted); font-size: 0.8em;">(Team)</span></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-main);">Connect</h4>
                    <ul>
                        <li><a href="https://www.linkedin.com/company/20squares" target="_blank">LinkedIn</a></li>
                        <li><a href="https://blog.20squares.xyz" target="_blank">Blog</a></li>
                    </ul>
                </div>

            </div>
            <div
                style="margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--card-border); display: flex; justify-content: space-between; font-size: 0.75rem;">
                <span>&copy; 2025 20squares UG.</span>
                <a href="impressum.html">Impressum</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>

</html>