VIDYUTRA.github.io/index.html at main · VIDYUTRA/VIDYUTRA.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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Vidyutra Technologies - Engineering intelligent embedded and electronic systems.">
  <title>Vidyutra Technologies | Intelligent Engineering</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="navbar" id="home">
    <a href="#home" class="brand">
      <img src="logo.png" alt="Vidyutra Technologies logo">
    </a>

    <button class="menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>

    <nav class="nav-links">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#technologies">Technologies</a>
      <a href="#contact" class="nav-cta">Contact Us</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <div class="hero-grid"></div>
      <div class="hero-content reveal">
        <p class="eyebrow">ENGINEERING THE INTELLIGENT FUTURE</p>
        <h1>Powering ideas with <span>intelligent technology.</span></h1>
        <p class="hero-text">
          Vidyutra Technologies builds reliable embedded, electronics, IoT and automation
          solutions from concept to production.
        </p>
        <div class="hero-actions">
          <a href="#contact" class="btn btn-primary">Start a Project</a>
          <a href="#services" class="btn btn-secondary">Explore Services</a>
        </div>
      </div>

      <div class="hero-visual reveal">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="chip">
          <span>VT</span>
          <div class="chip-lines"></div>
        </div>
        <div class="floating-card card-top">
          <small>FOCUS</small>
          <strong>Embedded Systems</strong>
        </div>
        <div class="floating-card card-bottom">
          <small>DESIGN TO DEPLOYMENT</small>
          <strong>End-to-End Engineering</strong>
        </div>
      </div>
    </section>

    <section class="stats">
      <div class="stat reveal"><strong>Embedded</strong><span>System Design</span></div>
      <div class="stat reveal"><strong>IoT</strong><span>Connected Solutions</span></div>
      <div class="stat reveal"><strong>Electronics</strong><span>Hardware Development</span></div>
      <div class="stat reveal"><strong>Automation</strong><span>Smart Control Systems</span></div>
    </section>

    <section class="section about" id="about">
      <div class="section-label reveal">01 / ABOUT US</div>
      <div class="about-grid">
        <div class="reveal">
          <h2>Technology built with engineering discipline.</h2>
        </div>
        <div class="reveal">
          <p>
            Vidyutra Technologies is focused on turning complex engineering requirements
            into practical, reliable and scalable products. We combine electronics,
            firmware, communication technologies and intelligent automation into
            solutions that work in the real world.
          </p>
          <p>
            From a blank schematic to a deployed product, we aim to make engineering
            simpler for our clients. Humanity has already created enough unnecessary
            complexity. We prefer functioning hardware.
          </p>
          <a href="#contact" class="text-link">Work with us <span>→</span></a>
        </div>
      </div>
    </section>

    <section class="section services" id="services">
      <div class="section-heading reveal">
        <div>
          <p class="eyebrow">WHAT WE DO</p>
          <h2>Engineering services for modern products.</h2>
        </div>
        <p>From concept validation to production-ready systems.</p>
      </div>

      <div class="service-grid">
        <article class="service-card reveal">
          <div class="service-number">01</div>
          <div class="service-icon">⌁</div>
          <h3>Embedded Systems</h3>
          <p>Firmware development, RTOS, device drivers, communication protocols and system integration.</p>
          <a href="#contact">Learn more →</a>
        </article>

        <article class="service-card reveal">
          <div class="service-number">02</div>
          <div class="service-icon">◈</div>
          <h3>Electronics Design</h3>
          <p>Schematic design, PCB development, component selection, prototyping and testing.</p>
          <a href="#contact">Learn more →</a>
        </article>

        <article class="service-card reveal">
          <div class="service-number">03</div>
          <div class="service-icon">⌘</div>
          <h3>IoT Solutions</h3>
          <p>Connected devices, wireless communication, remote monitoring and cloud integration.</p>
          <a href="#contact">Learn more →</a>
        </article>

        <article class="service-card reveal">
          <div class="service-number">04</div>
          <div class="service-icon">↯</div>
          <h3>Automation</h3>
          <p>Smart control systems, industrial interfaces and intelligent automation solutions.</p>
          <a href="#contact">Learn more →</a>
        </article>
      </div>
    </section>

    <section class="section technologies" id="technologies">
      <div class="tech-content reveal">
        <p class="eyebrow">OUR TECHNOLOGY STACK</p>
        <h2>Built across the hardware and software boundary.</h2>
        <p>
          Our work connects the layers required to transform an idea into a real product.
        </p>
      </div>

      <div class="tech-list reveal">
        <div>Microcontrollers <span>STM32 · ESP32 · NXP</span></div>
        <div>Real-Time Systems <span>FreeRTOS · Bare Metal</span></div>
        <div>Communication <span>CAN · SPI · I²C · UART · LoRa</span></div>
        <div>Hardware <span>PCB · Sensors · Power Electronics</span></div>
        <div>Connected Systems <span>IoT · Wireless · Remote Monitoring</span></div>
      </div>
    </section>

    <section class="process section">
      <div class="section-label reveal">02 / HOW WE WORK</div>
      <div class="process-grid">
        <div class="process-step reveal"><span>01</span><h3>Understand</h3><p>Define the real engineering problem, requirements and constraints.</p></div>
        <div class="process-step reveal"><span>02</span><h3>Design</h3><p>Create the system architecture, electronics and software foundation.</p></div>
        <div class="process-step reveal"><span>03</span><h3>Build</h3><p>Develop prototypes and integrate hardware and firmware.</p></div>
        <div class="process-step reveal"><span>04</span><h3>Validate</h3><p>Test, refine and prepare the solution for real-world deployment.</p></div>
      </div>
    </section>

    <section class="contact-section" id="contact">
      <div class="contact-content reveal">
        <p class="eyebrow">LET'S BUILD SOMETHING REAL</p>
        <h2>Have an engineering challenge?</h2>
        <p>Tell us what you are trying to build. We will help turn the idea into a practical system.</p>
      </div>

      <form class="contact-form reveal" id="contactForm">
        <div class="form-row">
          <label>Name<input type="text" id="name" required placeholder="Your name"></label>
          <label>Email<input type="email" id="email" required placeholder="you@example.com"></label>
        </div>
        <label>Project type
          <select id="project">
            <option>Embedded Systems</option>
            <option>Electronics Design</option>
            <option>IoT Solution</option>
            <option>Automation</option>
            <option>Other</option>
          </select>
        </label>
        <label>Tell us about your project
          <textarea id="message" rows="5" required placeholder="What are you building?"></textarea>
        </label>
        <button class="btn btn-primary" type="submit">Send Project Details</button>
        <p class="form-status" id="formStatus"></p>
      </form>
    </section>
  </main>

  <footer>
    <div class="footer-brand">
      <img src="logo.png" alt="Vidyutra Technologies">
      <p>Intelligent engineering. Practical solutions.</p>
    </div>
    <div class="footer-links">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#technologies">Technologies</a>
      <a href="#contact">Contact</a>
    </div>
    <p class="copyright">© <span id="year"></span> Vidyutra Technologies. All rights reserved.</p>
  </footer>

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