novus-website/about.html at main · elaxptr/novus-website · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us | Novus</title>
    <meta name="description" content="Learn about Novus and our mission to innovate.">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <nav class="navbar">
        <div class="container nav-container">
            <a href="index.html" class="logo">NOVUS<span>.</span></a>
            <button class="hamburger" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link">Home</a></li>
                <li><a href="services.html" class="nav-link">Services</a></li>
                <li><a href="about.html" class="nav-link active">About</a></li>
                <li><a href="contact.html" class="nav-link">Contact</a></li>
                <li><a href="contact.html" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">Get
                        Started</a></li>
            </ul>
        </div>
    </nav>

    <header class="section" style="padding-top: 150px; padding-bottom: 80px; text-align: center;">
        <div class="container fade-in">
            <h1 style="margin-bottom: 1rem;">Who We Are</h1>
            <p style="font-size: 1.25rem; max-width: 600px; margin: 0 auto;">Dedicated innovators building the next
                generation of digital experiences.</p>
        </div>
    </header>

    <section class="section">
        <div class="container">
            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4rem; align-items: center;">
                <div class="fade-in">
                    <h2 style="margin-bottom: 1.5rem;">Our Story</h2>
                    <p style="margin-bottom: 1rem;">Founded in 2026, Novus started with a simple mission: to make
                        high-quality digital tools accessible to every business, regardless of size.</p>
                    <p style="margin-bottom: 1rem;">We believe in the power of simplicity and performance. Our team
                        combines decades of experience in software engineering, design, and business strategy to deliver
                        results that matter.</p>
                    <p>Every project we undertake is a partnership. We don't just build websites; we build relationships
                        and growth engines.</p>
                </div>
                <div class="fade-in"
                    style="background: #000; border-radius: var(--radius-lg); aspect-ratio: 1; overflow: hidden;">

                    <div
                        style="width: 100%; height: 100%; background: linear-gradient(135deg, #1e293b, #0f172a); display: flex; align-items: center; justify-content: center;">
                        <span style="opacity: 0.3; font-weight: 600; font-family: var(--font-family-heading);">Team
                            Image</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="section" style="background-color: var(--color-surface); padding: 4rem 0;">
        <div class="container">
            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center;">
                <div class="fade-in">
                    <div
                        style="font-size: 3rem; font-weight: 800; color: var(--color-secondary); margin-bottom: 0.5rem;">
                        50+</div>
                    <div style="color: var(--color-text-muted);">Projects Completed</div>
                </div>
                <div class="fade-in" style="transition-delay: 0.1s;">
                    <div style="font-size: 3rem; font-weight: 800; color: var(--color-accent); margin-bottom: 0.5rem;">
                        20+</div>
                    <div style="color: var(--color-text-muted);">Happy Clients</div>
                </div>
                <div class="fade-in" style="transition-delay: 0.2s;">
                    <div style="font-size: 3rem; font-weight: 800; color: #10b981; margin-bottom: 0.5rem;">5y</div>
                    <div style="color: var(--color-text-muted);">Years Experience</div>
                </div>
            </div>
        </div>
    </section>

    <footer style="background: black; padding: 4rem 0 2rem; border-top: 1px solid rgba(255,255,255,0.1);">
        <div class="container">
            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem;">
                <div>
                    <a href="index.html" class="logo"
                        style="margin-bottom: 1rem; display: block;">NOVUS<span>.</span></a>
                    <p style="font-size: 0.9rem;">Empowering businesses with modern digital solutions.</p>
                </div>
                <div>
                    <h4 style="margin-bottom: 1rem;">Links</h4>
                    <ul style="display: flex; flex-direction: column; gap: 0.5rem;">
                        <li><a href="index.html"
                                style="color: var(--color-text-muted); font-size: 0.9rem; transition: 0.2s;">Home</a>
                        </li>
                        <li><a href="services.html"
                                style="color: var(--color-text-muted); font-size: 0.9rem; transition: 0.2s;">Services</a>
                        </li>
                        <li><a href="about.html"
                                style="color: var(--color-text-muted); font-size: 0.9rem; transition: 0.2s;">About</a>
                        </li>
                        <li><a href="contact.html"
                                style="color: var(--color-text-muted); font-size: 0.9rem; transition: 0.2s;">Contact</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 style="margin-bottom: 1rem;">Contact</h4>
                    <p style="font-size: 0.9rem;">hello@novus.com</p>
                    <p style="font-size: 0.9rem;">+1 (555) 123-4567</p>
                </div>
            </div>
            <div style="text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem;">
                <p style="font-size: 0.8rem;">&copy; 2026 Novus Inc. All rights reserved.</p>
            </div>
        </div>
    </footer>

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

</html>