-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpartnerships.html
More file actions
319 lines (303 loc) · 22.3 KB
/
partnerships.html
File metadata and controls
319 lines (303 loc) · 22.3 KB
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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Partner with Osano | The Leader in Data Privacy</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Custom Tailwind Configuration -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
'osano-purple': '#7a3ff1',
'osano-purple-dark': '#6935d1',
'osano-dark': '#0E0416',
'osano-gray': '#F8F9FA',
'osano-light-purple': '#F0E7FA',
'osano-text': '#344054',
}
}
}
}
</script>
<style>
/* Small style tweaks for better aesthetics */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gradient-bg {
background-image: radial-gradient(circle at top right, rgba(122, 63, 241, 0.08), transparent 40%), radial-gradient(circle at bottom left, rgba(122, 63, 241, 0.08), transparent 50%);
}
</style>
</head>
<body class="bg-white text-osano-text font-sans">
<!--
DEVELOPER NOTES:
- This is a single-file HTML mockup using Tailwind CSS for styling.
- BRANDING UPDATE: Colors have been updated to match Osano's live site (purple, dark navy, etc.).
- All assets (icons) are inline SVGs for simplicity and performance.
- The layout is fully responsive, using flexbox, grid, and Tailwind's responsive prefixes (sm:, md:, lg:).
- The color palette is defined in the custom Tailwind config in the <head>.
-->
<!-- Header -->
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-gray-200">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<!-- Osano Logo -->
<a href="#" class="flex items-center">
<img src="https://tbgsecurity.com/wp-content/uploads/2022/07/osano-purple-logo.png" alt="Osano Logo" class="h-8 w-auto">
</a>
<nav class="hidden md:flex items-center space-x-8">
<a href="#" class="text-osano-text hover:text-osano-purple transition-colors">Why Partner?</a>
<a href="#" class="text-osano-text hover:text-osano-purple transition-colors">Program Tiers</a>
<a href="#" class="text-osano-text hover:text-osano-purple transition-colors">Success Stories</a>
</nav>
<a href="#get-started" class="hidden md:inline-block bg-osano-purple text-white font-semibold px-5 py-2.5 rounded-lg hover:bg-osano-purple-dark transition-colors shadow-sm">
Become a Partner
</a>
<button class="md:hidden text-osano-dark">
<!-- Mobile Menu Icon (Lucide) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</button>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="relative py-20 md:py-32 bg-white gradient-bg">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold text-osano-dark leading-tight mb-6">
Partner with the Leader <br class="hidden md:block"> in Data Privacy
</h1>
<p class="max-w-3xl mx-auto text-lg md:text-xl text-slate-600 mb-10">
Join forces with Osano to deliver unparalleled value to your clients, accelerate your growth, and build a more transparent digital world.
</p>
<div class="flex justify-center space-x-4">
<a href="#get-started" class="bg-osano-purple text-white font-semibold px-8 py-4 rounded-lg hover:bg-osano-purple-dark transition-all transform hover:scale-105 shadow-lg">
Apply to Partner
</a>
<a href="#" class="bg-white text-osano-purple font-semibold px-8 py-4 rounded-lg hover:bg-osano-light-purple transition-colors border border-gray-300 shadow-sm">
Learn More
</a>
</div>
</div>
</section>
<!-- "Why Partner with Osano?" Section -->
<section class="py-20 bg-osano-gray">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-osano-dark">A Partnership Built for Growth & Trust</h2>
<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">We empower our partners to become trusted advisors and technology leaders in the new data economy.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Benefit 1: Generate New Revenue -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all">
<div class="bg-purple-100 text-osano-purple rounded-full h-12 w-12 flex items-center justify-center mb-5">
<!-- Lucide Icon: TrendingUp -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
</div>
<h3 class="text-xl font-bold text-osano-dark mb-3">Generate New Revenue</h3>
<p class="text-slate-600">Fill your sales funnel with qualified leads and create new service lines by offering the industry's most trusted privacy platform to your clients.</p>
</div>
<!-- Benefit 2: Become a Trusted Advisor -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all">
<div class="bg-purple-100 text-osano-purple rounded-full h-12 w-12 flex items-center justify-center mb-5">
<!-- Lucide Icon: ShieldCheck -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
</div>
<h3 class="text-xl font-bold text-osano-dark mb-3">Become a Trusted Advisor</h3>
<p class="text-slate-600">Elevate your brand by aligning with a B Corp and thought leader. Provide your clients with the tools they need to navigate complex privacy laws confidently.</p>
</div>
<!-- Benefit 3: Enhance Your Product -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all">
<div class="bg-purple-100 text-osano-purple rounded-full h-12 w-12 flex items-center justify-center mb-5">
<!-- Lucide Icon: Zap -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2z"/></svg>
</div>
<h3 class="text-xl font-bold text-osano-dark mb-3">Enhance Your Product</h3>
<p class="text-slate-600">Integrate with Osano to create a stickier product. Automate consent management and data mapping to deliver a seamless, compliant experience for your users.</p>
</div>
</div>
</div>
</section>
<!-- Partnership Tiers Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-osano-dark">Find the Partnership That's Right for You</h2>
<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">We offer flexible programs designed to match your business model and goals.</p>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<!-- Tier 1: Technology Partners -->
<div class="border border-gray-200 rounded-xl p-8 flex flex-col">
<h4 class="font-bold text-osano-purple mb-2">FOR TECH PLATFORMS & SAAS</h4>
<h3 class="text-2xl font-bold text-osano-dark mb-4">Technology Partners</h3>
<p class="text-slate-600 mb-6 flex-grow">Build powerful integrations that connect Osano's privacy intelligence to your platform, creating undeniable value for mutual customers.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Dedicated engineering support & API access</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Co-marketing opportunities to showcase your integration</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Listing in our App Marketplace</span></li>
</ul>
<a href="#get-started" class="mt-auto w-full text-center bg-purple-50 text-osano-purple font-semibold px-6 py-3 rounded-lg hover:bg-purple-100 transition-colors">
Build with Us
</a>
</div>
<!-- Tier 2: Service & Advisory Partners -->
<div class="border-2 border-osano-purple rounded-xl p-8 flex flex-col bg-white shadow-2xl relative">
<span class="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 bg-osano-purple text-white text-xs font-bold px-3 py-1 rounded-full">MOST POPULAR</span>
<h4 class="font-bold text-osano-purple mb-2">FOR LAW FIRMS & CONSULTANTS</h4>
<h3 class="text-2xl font-bold text-osano-dark mb-4">Service & Advisory Partners</h3>
<p class="text-slate-600 mb-6 flex-grow">Refer your clients to the platform you trust. Provide them with a clear path from legal advice to technical implementation.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Generous referral commissions</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>A dedicated partner manager and resources</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Co-branded materials and joint thought leadership</span></li>
</ul>
<a href="#get-started" class="mt-auto w-full text-center bg-osano-purple text-white font-semibold px-6 py-3 rounded-lg hover:bg-osano-purple-dark transition-colors">
Advise with Us
</a>
</div>
<!-- Tier 3: Channel Partners -->
<div class="border border-gray-200 rounded-xl p-8 flex flex-col">
<h4 class="font-bold text-osano-purple mb-2">FOR AGENCIES & RESELLERS</h4>
<h3 class="text-2xl font-bold text-osano-dark mb-4">Channel Partners</h3>
<p class="text-slate-600 mb-6 flex-grow">Bundle Osano with your services to offer a complete, compliant solution. Ideal for marketing agencies, MSPs, and VARs.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Flexible resale and co-sell models</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Comprehensive sales and product training</span></li>
<li class="flex items-start"><span class="text-osano-purple mr-3 mt-1">✓</span><span>Access to a partner portal and marketing funds</span></li>
</ul>
<a href="#get-started" class="mt-auto w-full text-center bg-purple-50 text-osano-purple font-semibold px-6 py-3 rounded-lg hover:bg-purple-100 transition-colors">
Sell with Us
</a>
</div>
</div>
</div>
</section>
<!-- Featured Integration Section (HubSpot) -->
<section class="py-20 bg-osano-gray">
<div class="container mx-auto px-6">
<div class="bg-white rounded-xl shadow-xl overflow-hidden md:flex items-center">
<div class="md:w-1/2 p-8 md:p-12">
<h4 class="font-bold text-osano-purple mb-2">FEATURED INTEGRATION</h4>
<h2 class="text-3xl font-bold text-osano-dark mb-4">Privacy-First Marketing with HubSpot</h2>
<p class="text-slate-600 mb-6">Our new HubSpot integration empowers CMOs and their teams to respect user consent without sacrificing growth. Automatically sync consent preferences from your website's Osano banner to your HubSpot contacts, ensuring every campaign is compliant.</p>
<div class="space-y-4 mb-8">
<p class="flex items-center"><span class="inline-block h-5 w-5 rounded-full bg-green-100 text-green-600 mr-3 flex-shrink-0 flex items-center justify-center">✓</span><span>Build trust with automated compliance.</span></p>
<p class="flex items-center"><span class="inline-block h-5 w-5 rounded-full bg-green-100 text-green-600 mr-3 flex-shrink-0 flex items-center justify-center">✓</span><span>Protect your brand from costly privacy fines.</span></p>
<p class="flex items-center"><span class="inline-block h-5 w-5 rounded-full bg-green-100 text-green-600 mr-3 flex-shrink-0 flex items-center justify-center">✓</span><span>Enable your marketing team to move fast, safely.</span></p>
</div>
<a href="#" class="text-osano-purple font-semibold hover:underline">Learn more about the HubSpot Integration →</a>
</div>
<div class="md:w-1/2 p-8 bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
<!-- Placeholder for integration graphic -->
<div class="flex items-center space-x-4">
<div class="bg-white/90 p-4 rounded-lg shadow-2xl">
<svg class="h-16 w-16 text-osano-purple" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<span class="text-white font-bold text-4xl">+</span>
<div class="bg-white/90 p-4 rounded-lg shadow-2xl">
<svg class="h-16 w-16 text-orange-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.2 3.1a1.8 1.8 0 0 0-2.4 0l-6.6 6.6a1.8 1.8 0 0 0 0 2.4l6.6 6.6a1.8 1.8 0 0 0 2.4 0l6.6-6.6a1.8 1.8 0 0 0 0-2.4l-6.6-6.6Z"/></svg>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-3xl mx-auto text-center">
<img src="https://placehold.co/100x100/e2e8f0/334155?text=GC" alt="General Counsel Headshot" class="w-24 h-24 rounded-full mx-auto mb-6">
<p class="text-xl md:text-2xl font-medium text-osano-dark leading-relaxed">
"We recommend Osano to all our clients navigating data privacy. It's the only platform that gives our legal advice a clear, actionable path to implementation. The partnership is a win for us and a win for our clients."
</p>
<div class="mt-6">
<p class="font-bold text-osano-dark">Jane Doe, Partner</p>
<p class="text-slate-500">Tech & Data Law Group</p>
</div>
</div>
</div>
</section>
<!-- "Get Started" / CTA Section -->
<section id="get-started" class="py-20 bg-osano-gray">
<div class="container mx-auto px-6">
<div class="bg-osano-dark rounded-xl text-white p-10 md:p-16 text-center shadow-2xl">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Grow with Osano?</h2>
<p class="max-w-2xl mx-auto text-slate-300 mb-8">
Let's explore how a partnership can help you achieve your goals. Fill out the form below, and our partnership team will be in touch shortly.
</p>
<form class="max-w-xl mx-auto">
<div class="grid sm:grid-cols-2 gap-4 mb-4">
<input type="text" placeholder="First Name" class="w-full p-3 rounded-md text-osano-text focus:ring-2 focus:ring-osano-purple focus:outline-none">
<input type="text" placeholder="Last Name" class="w-full p-3 rounded-md text-osano-text focus:ring-2 focus:ring-osano-purple focus:outline-none">
</div>
<div class="mb-4">
<input type="email" placeholder="Work Email" class="w-full p-3 rounded-md text-osano-text focus:ring-2 focus:ring-osano-purple focus:outline-none">
</div>
<div class="mb-6">
<input type="text" placeholder="Company Name" class="w-full p-3 rounded-md text-osano-text focus:ring-2 focus:ring-osano-purple focus:outline-none">
</div>
<button type="submit" class="w-full bg-osano-purple text-white font-semibold py-4 rounded-lg hover:bg-osano-purple-dark transition-colors text-lg">
Submit Application
</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200">
<div class="container mx-auto px-6 py-12">
<div class="grid md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="lg:col-span-2">
<div class="mb-4">
<a href="#" class="flex items-center">
<img src="https://tbgsecurity.com/wp-content/uploads/2022/07/osano-purple-logo.png" alt="Osano Logo" class="h-8 w-auto">
</a>
</div>
<p class="text-slate-500 max-w-sm">The leading data privacy platform for building trust and ensuring compliance.</p>
</div>
<div>
<h4 class="font-semibold text-osano-dark mb-4">Partners</h4>
<ul class="space-y-3">
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Technology</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Service & Advisory</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Channel</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Apply Now</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-osano-dark mb-4">Company</h4>
<ul class="space-y-3">
<li><a href="#" class="text-slate-500 hover:text-osano-purple">About Us</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Careers</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Press</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-osano-dark mb-4">Legal</h4>
<ul class="space-y-3">
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Privacy Policy</a></li>
<li><a href="#" class="text-slate-500 hover:text-osano-purple">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-200 pt-8 text-center text-slate-500 text-sm">
<p>© 2025 Osano, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>