-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (187 loc) · 13.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lux - Revolutionizing Everyday Transactions</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('prism.jpeg');
background-size: cover;
background-position: center 69%; /* This raises the background image */
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Ensure text remains readable */
.bg-gray-800 {
background-color: rgba(31, 41, 55, 0.8); /* semi-transparent dark background */
}
.bg-gray-900 {
background-color: rgba(17, 24, 39, 0.8); /* semi-transparent darker background for header/footer */
}
.light-orange {
color: #ffc3a0;
}
.gradient-text {
background-image: linear-gradient(to right, #ddd6fe, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-black bg-opacity-80 text-white">
<div class="min-h-screen flex flex-col">
<header class="bg-gray-900 bg-opacity-80 text-white text-center py-4">
<h1 class="text-4xl font-light flex items-center justify-center">
LUX
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2">
<defs>
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ff0000"/>
<stop offset="16.67%" style="stop-color:#ff8000"/>
<stop offset="33.33%" style="stop-color:#ffff00"/>
<stop offset="50%" style="stop-color:#00ff00"/>
<stop offset="66.67%" style="stop-color:#0000ff"/>
<stop offset="83.33%" style="stop-color:#8000ff"/>
<stop offset="100%" style="stop-color:#ff00ff"/>
</linearGradient>
</defs>
<path d="M13 3L4 14H11L9 21L20 9H13L15 3H13Z" stroke="url(#rainbow)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</h1>
</header>
<nav class="bg-gray-800 bg-opacity-80 py-2">
<ul class="flex justify-center space-x-4">
<li><button class="text-white hover:text-gray-200 transition duration-300" onclick="showTab('about')">About</button></li>
<li><button class="text-gray-400 hover:text-gray-200 transition duration-300" onclick="showTab('signup')">Sign Up</button></li>
<li><button class="text-gray-400 hover:text-gray-200 transition duration-300" onclick="showTab('contact')">Contact</button></li>
</ul>
</nav>
<main class="flex-grow container mx-auto px-4 py-8">
<div id="about" class="space-y-6">
<h2 class="text-3xl font-light mb-4 gradient-text">Enriching Everyday Transactions</h2>
<p class="mb-4"><span class="font-semibold text-violet-200">Lux</span>: Empowering local economies and strengthening communities through smarter, community-focused financial technology.</p>
<!-- For Customers Section -->
<div class="bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-2xl font-light text-violet-200 mb-4">For Customers:</h3>
<ul class="list-disc pl-6 space-y-2">
<li><span class="light-orange font-semibold">Support Your Community:</span> Use Lux to shop and eat locally, directly supporting small businesses in your area.</li>
<li><span class="light-orange font-semibold">Earn Cash Back & More:</span> Receive high-percentage cash back on your purchases, with the option to earn rewards in dollars or Bitcoin.</li>
<li><span class="light-orange font-semibold">Privacy First:</span> Enjoy secure, private transactions. Our technology ensures your location and personal data remain anonymous.</li>
<li><span class="light-orange font-semibold">No Credit Card Fees:</span> By leveraging the Bitcoin Lightning Network, we eliminate traditional processing fees, keeping more of your rewards in your pocket.</li>
<li><span class="light-orange font-semibold">Engage & Reward:</span> Create a unique profile, connect with merchants, leave reviews, post photos, and follow favorite local spots. Earn cash back for posts and interactions, send money directly to businesses or friends, and donate to local churches or charities. </li>
<li><span class="light-orange font-semibold">Exclusive Offers:</span> Discover high-cashback deals and special promotions from local merchants, highlighted and color-coded in the app.</li>
</ul>
</div>
<!-- For Merchants Section -->
<div class="bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-2xl font-light text-violet-200 mb-4">For Merchants:</h3>
<ul class="list-disc pl-6 space-y-2">
<li><span class="light-orange font-semibold">Boost Your Business:</span> Attract more customers by offering flexible cashback rewards and exclusive incentives directly through the app.</li>
<li><span class="light-orange font-semibold">Save & Market:</span> Skip traditional credit card fees and use those savings to offer cashback directly to your customers. This not only cuts out middlemen but acts as a powerful marketing tool. For instance, if you’d usually pay a 3% fee to banks, you can instead offer that 3% as cashback to drive traffic and sales.</li>
<li><span class="light-orange font-semibold">Flexible Promotions:</span> Adjust rewards based on your needs—offer higher cashback on slower days or scale back during peak times, adapting as your business requires.</li>
<li><span class="light-orange font-semibold">Build Your Brand:</span> Set up a unique business profile, engage with customers, and build loyalty through reviews, posts, and special offers.</li>
<li><span class="light-orange font-semibold">Transparent Transactions & Trend Insights:</span> Gain a comprehensive view of sales and customer interactions, with full transparency and privacy. Lux’s platform leverages anonymized data to deliver actionable insights on local spending trends, helping merchants adapt to customer preferences and optimize offerings. Our commitment to privacy ensures valuable analytics without compromising customer trust.</li>
<li><span class="light-orange font-semibold">Flat Fee:</span> EBenefit from flat, affordable transaction fees, and access premium analytics to help your business grow smarter.</li>
</ul>
</div>
<!-- Why Choose Lux Section -->
<div class="bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-2xl font-light text-violet-200 mb-4">How it Works:</h3>
<ul class="list-disc pl-6 space-y-2">
<li><span class="light-orange font-semibold">Seamless Transactions:</span> Pay effortlessly by scanning a QR code, tapping with NFC via Apple Pay, or using a Lux physical card. Cashback rewards are instantly added to your balance. </li>
<li><span class="light-orange font-semibold">Color Coded Rewards:</span> Quickly identify offers in the feed or map view: Red means 1% cashback, orange is 2%, yellow is 3%, up to violet, which offers 7% or more (up to 21%).</li>
</ul>
</div>
<!-- Local Businesses Section -->
<div class="bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h3 class="text-2xl font-light text-violet-200 mb-4">Here are some merchants that are opting into Lux:</h3>
<div class="space-y-4">
<div class="bg-gray-700 rounded-lg p-4 flex items-center">
<!-- TODO: Replace with actual image of Logic Workout Classes -->
<img src="IMG_9609.jpg" alt="Logic Workout Classes" class="rounded-lg mr-4" style="width: 150px; height: 150px; object-fit: cover;">
<div>
<h4 class="text-xl font-semibold text-violet-200">Logic Workout Classes</h4>
<p class="mb-2">Enjoy <strong>15% cashback</strong> on in-person group training sessions.</p>
</div>
</div>
<div class="bg-gray-700 rounded-lg p-4 flex items-center">
<!-- TODO: Replace with actual image of Sogno Toscano Cafe -->
<img src="sognoToscano.jpg" alt="Sogno Toscano Cafe and Wine Bar" class="rounded-lg mr-4" style="width: 150px; height: 150px; object-fit: cover;">
<div>
<h4 class="text-xl font-semibold text-violet-200">Sogno Toscano Cafe and Wine Bar</h4>
<p class="mb-2">Get <strong>20% cashback</strong> on all purchases.</p>
</div>
</div>
</div>
</div>
<p class="font-semibold text-lg text-center">
Sign up for the <a href="#" onclick="showTab('signup')" class="text-violet-200 hover:text-violet-100 transition duration-300">waitlist</a> now and be among the first to benefit from superior transactions!
</p>
<div class="mt-8 flex justify-around">
<!-- TODO: Replace with actual app screenshots -->
<img src="luxphoto1.png" alt="Lux Mobile App Screenshot 1" class="rounded-lg border border-violet-200" style="max-width: 250px; height: auto;">
<img src="luxphoto2.png" alt="Lux Mobile App Screenshot 2" class="rounded-lg border border-gray-600" style="max-width: 250px; height: auto;">
<img src="luxphoto3.png" alt="Lux Mobile App Screenshot 3" class="rounded-lg border border-violet-200" style="max-width: 250px; height: auto;">
</div>
</div>
<div id="signup" class="hidden bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h2 class="text-3xl font-light text-center mb-6 gradient-text">Join the Waitlist</h2>
<!-- TODO: Replace 'your_formspree_id' with your actual Formspree endpoint -->
<form action="https://formspree.io/f/mjkbdplb" method="POST" class="max-w-md mx-auto">
<div class="mb-4">
<label for="email" class="block mb-2">Email:</label>
<input type="email" id="email" name="email" required class="w-full px-3 py-2 bg-gray-700 rounded text-white">
</div>
<div class="mb-4">
<p class="mb-2">I'm interested in joining as a:</p>
<div class="flex space-x-4">
<label class="flex items-center">
<input type="radio" name="accountType" value="customer" required class="mr-2">
Customer
</label>
<label class="flex items-center">
<input type="radio" name="accountType" value="merchant" required class="mr-2">
Merchant
</label>
</div>
</div>
<button type="submit" class="w-full bg-violet-200 text-gray-900 py-2 px-4 rounded hover:bg-violet-300 transition duration-300">
Join Waitlist
</button>
</form>
</div>
<div id="contact" class="hidden bg-gray-800 bg-opacity-80 rounded-lg p-6 border border-gray-700">
<h2 class="text-3xl font-light text-center mb-6 gradient-text">Contact Us</h2>
<p class="text-center text-lg">
Reach out, send us an email at <a href="mailto:[email protected]" class="text-violet-200 hover:text-violet-100 transition duration-300">[email protected]</a>
</p>
</div>
</main>
<footer class="bg-gray-900 bg-opacity-80 text-white text-center py-4 mt-8">
<p>© 2024 Lux</p>
</footer>
</div>
<script>
function showTab(tabName) {
// Hide all tabs
document.querySelectorAll('main > div').forEach(tab => tab.classList.add('hidden'));
// Show the selected tab
document.getElementById(tabName).classList.remove('hidden');
// Update active state in navigation
document.querySelectorAll('nav button').forEach(button => {
if (button.textContent.toLowerCase() === tabName) {
button.classList.add('text-white');
button.classList.remove('text-gray-400');
} else {
button.classList.remove('text-white');
button.classList.add('text-gray-400');
}
});
}
</script>
</body>
</html>