Skip to content

Commit 8e40866

Browse files
letsgetrustyletsgetrusty
committed
Added /start-with-francesco
1 parent 426211e commit 8e40866

1 file changed

Lines changed: 136 additions & 0 deletions

File tree

‎src/start-with-francesco/index.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" type="image/png" href="/favicon.png">
7+
<title>Let's Get Rusty</title>
8+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
9+
<style>
10+
@media (min-width: 768px) {
11+
.section-flex {
12+
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s, background 0.3s;
13+
flex: 1 1 0%;
14+
}
15+
.section-flex.section-hovered {
16+
flex: 51 1 0%;
17+
filter: none;
18+
}
19+
.section-flex.section-shrunk {
20+
flex: 49 1 0%;
21+
}
22+
.section-flex.section-unhovered {
23+
filter: brightness(0.7) grayscale(0.1);
24+
}
25+
.section-flex.section-unhovered .cta-btn,
26+
.section-flex.section-unhovered .section-text {
27+
opacity: 0.6;
28+
transition: opacity 0.3s;
29+
}
30+
}
31+
</style>
32+
</head>
33+
<body class="min-h-screen flex flex-col relative bg-gradient-to-br from-amber-700 to-amber-600">
34+
<!-- Navigation -->
35+
<nav class="absolute top-0 left-0 right-0 z-50 p-4">
36+
<div class="container mx-auto flex items-center justify-between">
37+
<!-- Logo -->
38+
<div class="flex items-center">
39+
<img src="/lgr_logo.png" alt="LGR Logo" class="h-10 w-auto mr-3">
40+
<span class="text-xl font-bold text-white">Let's Get Rusty</span>
41+
</div>
42+
<!-- Navigation Links -->
43+
<div class="flex space-x-6 md:space-x-8 text-base md:text-md text-white">
44+
<a href="#" id="home-button" class="hover:underline">Home</a>
45+
<a href="#" id="contact-button" class="hover:underline">Contact</a>
46+
</div>
47+
</div>
48+
</nav>
49+
50+
<div class="flex flex-col md:flex-row flex-grow">
51+
<!-- Left Side: Company -->
52+
<div class="section-flex w-full md:w-1/2 flex items-center justify-center bg-gradient-to-br from-zinc-900 to-zinc-800 p-8 md:p-12 py-[100px] text-white">
53+
<div class="max-w-xl w-full">
54+
<div class="text-center">
55+
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6 section-text">Are you a company?</h1>
56+
<p class="text-lg md:text-xl mb-8 section-text">Are you a team lead, manager, VP or CTO?</p>
57+
<ul class="mb-10 space-y-3 inline-block text-left text-lg section-text">
58+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Custom training programs for your team</li>
59+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Expert consultation on Rust implementation</li>
60+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Enterprise support & integration</li>
61+
</ul>
62+
<div class="flex justify-center">
63+
<button id="company-cta-button" class="bg-white text-zinc-900 font-semibold px-8 py-3 rounded-lg shadow hover:bg-zinc-300 transition cursor-pointer cta-btn">My Team Needs Training</button>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
<!-- Right Side: Engineer -->
69+
<div class="section-flex w-full md:w-1/2 flex items-center justify-center bg-gradient-to-br from-amber-700 to-amber-600 p-8 md:p-12 py-[100px] text-white">
70+
<div class="max-w-xl w-full">
71+
<div class="text-center">
72+
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6 section-text">Are you a developer?</h1>
73+
<p class="text-lg md:text-xl mb-8 section-text">Are you struggling to learn & master Rust?</p>
74+
<ul class="mb-10 space-y-3 inline-block text-left text-lg section-text">
75+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Live, person-to-person Rust training</li>
76+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Access to Rust recruiter network</li>
77+
<li class="flex items-center"><span class="text-green-400 mr-3">&#10003;</span>Designed to land you a Rust job…fast</li>
78+
</ul>
79+
<div class="flex justify-center">
80+
<button id="engineer-cta-button" class="bg-white text-amber-600 font-semibold px-8 py-3 rounded-lg shadow hover:bg-amber-200 transition cursor-pointer cta-btn">Start Learning</button>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
<!-- Footer -->
87+
<footer class="absolute bottom-0 right-0 text-right text-amber-100/30 py-4 pr-8 z-50">
88+
© 2025 LET'S GET RUSTY All rights reserved.
89+
</footer>
90+
<script>
91+
function addButtonHandler(id, handler) {
92+
const btn = document.getElementById(id);
93+
if (btn) {
94+
btn.addEventListener('click', function(event) {
95+
event.preventDefault();
96+
handler();
97+
});
98+
}
99+
}
100+
101+
document.addEventListener('DOMContentLoaded', function() {
102+
addButtonHandler('home-button', function() {
103+
window.location.href = window.location.pathname;
104+
});
105+
addButtonHandler('contact-button', function() {
106+
window.location.href = 'mailto:bogdan@letsgetrusty.com?subject=My%20team%20can%20definitely%20use%20some%20help%20from%20you%20:)&body=Hi%20Bogdan,%0A%0AMy%20team%20needs%20corporate%20Rust%20training%20and/or%20consultation.%20Are%20you%20able%20to%20help?%0A%0ALet%27s%20have%20a%20chat%20:)%0A%0ABest,%0A';
107+
});
108+
addButtonHandler('company-cta-button', function() {
109+
window.location.href = 'mailto:bogdan@letsgetrusty.com?subject=My%20team%20can%20definitely%20use%20some%20help%20from%20you%20:)&body=Hi%20Bogdan,%0A%0AMy%20team%20needs%20corporate%20Rust%20training%20and/or%20consultation.%20Are%20you%20able%20to%20help?%0A%0ALet%27s%20have%20a%20chat%20:)%0A%0ABest,%0A';
110+
});
111+
addButtonHandler('engineer-cta-button', function() {
112+
window.location.href = `https://product.letsgetrusty.com${window.location.pathname}`;
113+
});
114+
const sections = document.querySelectorAll('.section-flex');
115+
sections.forEach((section, idx) => {
116+
section.addEventListener('mouseenter', () => {
117+
section.classList.add('section-hovered');
118+
sections.forEach((other, i) => {
119+
if (i !== idx) {
120+
other.classList.add('section-shrunk', 'section-unhovered');
121+
}
122+
});
123+
});
124+
section.addEventListener('mouseleave', () => {
125+
section.classList.remove('section-hovered');
126+
sections.forEach((other, i) => {
127+
if (i !== idx) {
128+
other.classList.remove('section-shrunk', 'section-unhovered');
129+
}
130+
});
131+
});
132+
});
133+
});
134+
</script>
135+
</body>
136+
</html>

0 commit comments

Comments
 (0)