usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
banatie-service/apps/landing/src/app/(landings)/blog/[slug]/code.html

445 lines
26 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Refined Technical Blog Article</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#8b5cf6",
"background-light": "#ffffff",
"background-dark": "#0B0F19",
"surface-light": "#f3f4f6",
"surface-dark": "#111827",
"border-light": "#e5e7eb",
"border-dark": "#1f2937",
"text-main-light": "#111827",
"text-main-dark": "#f9fafb",
"text-muted-light": "#6b7280",
"text-muted-dark": "#9ca3af",
// New colors for the dark sidebar components
"card-dark": "#13141f",
"card-border": "#2d2e3e",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.text-main-light'),
a: {
color: theme('colors.primary'),
'&:hover': {
color: '#7c3aed',
},
},
h1: { color: theme('colors.text-main-light') },
h2: { color: theme('colors.text-main-light') },
h3: { color: theme('colors.text-main-light') },
h4: { color: theme('colors.text-main-light') },
strong: { color: theme('colors.text-main-light') },
code: { color: theme('colors.primary') },
blockquote: {
borderLeftColor: theme('colors.primary'),
fontStyle: 'italic',
},
},
},
dark: {
css: {
color: theme('colors.text-main-dark'),
a: {
color: '#a78bfa',
'&:hover': {
color: '#c4b5fd',
},
},
h1: { color: theme('colors.text-main-dark') },
h2: { color: theme('colors.text-main-dark') },
h3: { color: theme('colors.text-main-dark') },
h4: { color: theme('colors.text-main-dark') },
strong: { color: theme('colors.text-main-dark') },
code: { color: theme('colors.primary') },
blockquote: { borderLeftColor: theme('colors.primary') },
},
},
}),
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.custom-scrollbar::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1f2937;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
</style>
</head>
<body class="bg-background-light text-text-main-light antialiased transition-colors duration-200">
<nav class="sticky top-0 z-50 w-full border-b border-white/10 bg-[#0B0F19] text-white">
<div class="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 font-bold text-xl tracking-tight">
<div class="h-8 w-8 rounded-lg bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center">
<span class="material-icons text-white text-lg">auto_awesome</span>
</div>
<span>Banatie</span>
</div>
<div class="hidden md:flex ml-10 space-x-6 text-sm font-medium text-gray-300">
<a class="hover:text-white transition-colors" href="#">Product</a>
<a class="hover:text-white transition-colors" href="#">Solutions</a>
<a class="text-white" href="#">Blog</a>
<a class="hover:text-white transition-colors" href="#">Docs</a>
</div>
</div>
<div class="flex items-center gap-4">
<a class="hidden sm:inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background-dark" href="#">
Log in
</a>
<a class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background-dark" href="#">
Get Access
</a>
</div>
</div>
</nav>
<header class="relative overflow-hidden bg-background-dark text-white pt-12 pb-16 lg:pt-20 lg:pb-24">
<div class="absolute inset-0 z-0">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
<div class="absolute top-1/2 right-0 w-[500px] h-[500px] bg-pink-600/10 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/2"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&amp;w=2070&amp;auto=format&amp;fit=crop')] bg-cover bg-center opacity-10 mix-blend-overlay pointer-events-none"></div>
</div>
<div class="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
<div class="lg:col-span-7 mb-12 lg:mb-0">
<nav aria-label="Breadcrumb" class="flex mb-8 text-xs text-gray-400 font-medium">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<a class="hover:text-white transition-colors" href="#">Blog</a>
</li>
<li>
<div class="flex items-center">
<span class="material-icons text-[14px] text-gray-600 mx-1">chevron_right</span>
<a class="hover:text-white transition-colors" href="#">Engineering</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<span class="material-icons text-[14px] text-gray-600 mx-1">chevron_right</span>
<span class="text-gray-200">Optimizing Image Generation Pipelines</span>
</div>
</li>
</ol>
</nav>
<div class="flex items-center gap-2 mb-8">
<span class="inline-flex items-center rounded-full bg-primary/20 px-3 py-1 text-xs font-medium text-primary ring-1 ring-inset ring-primary/30">
Engineering
</span>
<span class="text-gray-400 text-sm flex items-center gap-1 ml-2">
<span class="material-icons text-[16px]">schedule</span> 8 min read
</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-tight text-white">
Optimizing Image Generation Pipelines at Scale
</h1>
<p class="text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed">
Learn how we reduced latency by 40% using edge caching and predictive pre-generation strategies for our high-throughput API endpoints.
</p>
<div class="flex items-center gap-4 border-t border-white/10 pt-8">
<img alt="Author Avatar" class="h-12 w-12 rounded-full ring-2 ring-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7lcPRCoZjsFsjDPuss98IvtV47CsxB3edKZH1Jy8D7TtC52cTc1lpxd6PZcqHk3lZWGFU5P-8tUB4xVMImKueltROJN-34JuWGPTdU-hEY8Z2r3ooKCANBoeB4QkCv3iZwpjpuwQlz_LJuMRCdiSJwmAfIv839cg90Lw50ekECfdKsH_zdM8g4Ig3oDsHB8sxcdoNbgZXLGdJ5K-P2QhA8FhKI9RBmvtGCLndihNZdRw405BTYJBYoQORCZ0qMfCmggjeD8Nbx2g"/>
<div>
<div class="font-medium text-white text-base">Alex Chen</div>
<div class="text-sm text-gray-400">Senior Infrastructure Engineer • Oct 24, 2023</div>
</div>
</div>
</div>
<div class="lg:col-span-5 relative">
<div class="relative rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black/40 backdrop-blur-sm">
<img alt="Abstract technical graphic showing network nodes" class="w-full h-auto object-cover aspect-[4/3] mix-blend-lighten opacity-90" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQduWhcJrwC_QkSUkZ4bCXD5uh4Co2BxXWYMoN8DgTfrdRDQhMNRXYyPA-aEIkLj61sxdw64W-HhLZU8RGNh_YZ5AV2mZDgI5LArVucyhwJdotgRIDJ-oZDZYXHpD25WfsQiZVYKyDlDKBja610LlPzPJmWKOII3MbybkXab1D9xr93TEJ-AoDxFc7j2Bc_ylOKyqVfTLshdwDQDJNAVbnA-H6AavvVbnMyBUdMnFEnW-lVXROEE0mxhvwTyBqEjf68BMoqrr8sGo"/>
<div class="absolute bottom-6 left-6 z-20 bg-gray-900/90 backdrop-blur border border-white/10 rounded-lg p-3 shadow-xl max-w-[280px]">
<div class="flex items-center gap-2 mb-2">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="font-mono text-xs text-green-400">
$ latency --check<br/>
&gt; 45ms (optimized)
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="bg-background-light border-t-0 -mt-1 pt-12 lg:pt-16 pb-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-12">
<aside class="hidden lg:block lg:col-span-1">
<div class="sticky top-28 flex flex-col gap-4 items-center">
<button aria-label="Share on Twitter" class="p-2 rounded-full bg-white text-gray-500 hover:text-primary transition-colors border border-gray-200 shadow-sm group">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</button>
<button aria-label="Share on LinkedIn" class="p-2 rounded-full bg-white text-gray-500 hover:text-blue-600 transition-colors border border-gray-200 shadow-sm">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
</button>
<button aria-label="Copy Link" class="p-2 rounded-full bg-white text-gray-500 hover:text-gray-900 transition-colors border border-gray-200 shadow-sm">
<span class="material-icons text-[20px]">link</span>
</button>
</div>
</aside>
<div class="lg:col-span-8">
<article class="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl">
<p class="lead text-xl text-gray-600 mb-8 font-light">
When we first launched Banatie's image generation API, we optimized for quality. But as our user base grew, so did the demand for speed. Here is how we tackled the challenge of delivering AI-generated assets in milliseconds.
</p>
<h2>The Latency Bottleneck</h2>
<p>
Our initial architecture was straightforward: a request hits our API gateway, gets queued, processed by a GPU worker, and the resulting image is uploaded to S3. Simple, but slow.
</p>
<p>
Users integrating our API into real-time applications needed <a href="#">faster response times</a>. We identified two main areas for improvement:
</p>
<ul class="marker:text-primary">
<li><strong>Cold Starts:</strong> Spinning up new GPU instances took 2-3 minutes.</li>
<li><strong>Network Overhead:</strong> Round trips between the inference server and storage added 200ms+.</li>
</ul>
<div class="my-8 rounded-lg border-l-4 border-blue-500 bg-blue-50 p-6 shadow-sm">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 mt-1">
<span class="material-icons text-blue-600">info</span>
</div>
<div>
<h5 class="font-bold text-gray-900 mt-0 mb-2">Pro Tip: Analyze your P99</h5>
<p class="text-sm text-gray-700 m-0 leading-relaxed">
Don't just look at average latency. Your P99 (99th percentile) latency tells you the experience of your users during worst-case scenarios. Optimizing for P99 often yields the most stable system.
</p>
</div>
</div>
</div>
<h2>Implementing Edge Caching</h2>
<p>
To solve the network overhead, we moved our delivery layer to the edge. By utilizing a global CDN, we could serve cached results instantly for repeated prompts.
</p>
<div class="my-8 overflow-hidden rounded-xl border border-gray-200 bg-[#1e1e1e] shadow-xl">
<div class="flex items-center justify-between border-b border-white/5 bg-[#252526] px-4 py-2">
<div class="flex items-center gap-2">
<div class="h-3 w-3 rounded-full bg-[#ff5f56]"></div>
<div class="h-3 w-3 rounded-full bg-[#ffbd2e]"></div>
<div class="h-3 w-3 rounded-full bg-[#27c93f]"></div>
</div>
<span class="ml-4 text-xs font-mono text-gray-400">middleware/cache-control.ts</span>
<div class="flex-grow"></div>
<button class="text-xs text-gray-400 hover:text-white transition-colors">Copy</button>
</div>
<div class="p-6 overflow-x-auto custom-scrollbar">
<pre class="font-mono text-sm leading-relaxed text-[#d4d4d4] m-0 p-0 bg-transparent"><code><span class="text-[#c586c0]">export function</span> <span class="text-[#dcdcaa]">setCacheHeaders</span>(res: Response) {
<span class="text-[#6a9955]">// Cache for 1 hour at the edge, validate stale in background</span>
res.<span class="text-[#dcdcaa]">setHeader</span>(
<span class="text-[#ce9178]'Cache-Control'&lt;/span&gt;, &lt;span class=" s-maxage="3600," stale-while-revalidate="600'&lt;/span" text-[#ce9178]'public,="">
);
<span class="text-[#6a9955]">// Custom tag for purging</span>
res.<span class="text-[#dcdcaa]">setHeader</span>(<span class="text-[#ce9178]'Surrogate-Key'&lt;/span&gt;, &lt;span class=" span="" text-[#ce9178]'gen-api-v1'<="">);
}</span></span></code></pre>
</div>
</div>
<h3>The Results</h3>
<p>
After deploying these changes, we saw a dramatic drop in TTFB (Time To First Byte).
</p>
<blockquote class="my-10 border-l-4 border-primary bg-gray-50 p-6 text-xl italic font-medium leading-relaxed text-gray-800 shadow-sm rounded-r-lg">
"The latency improvements were immediate. Our dashboard loads felt instantaneous compared to the previous version, directly impacting our user retention metrics."
</blockquote>
<figure class="my-10 group">
<div class="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
<img alt="Graph comparing latency before and after optimization" class="w-full h-auto object-cover transform transition-transform duration-500 group-hover:scale-[1.02]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEgg1FA9f6Km5tYQk_92Az_mAXuc6G9ps8KamUSB_VMXwrhcFJLCpgJe7doa6ZdFLQkzJhAcT2OB_E69yQLWyKEPm7Oni0f9YV2_XjH5-jgfAMsv95vBD5r-o35be_5UmmD8-lY40hslbOB075pmwCZ56ISj5VKQARpU5s1zi1nBQvsXWK-5QywJOLp0X8VDhYlB-igMlqCGLhZh5AJ4ufr9hamWVmBiCBa__p7S_hKHjpMxbxs0Qhow_bFjM2vb2eAiUtx3wQjGI"/>
</div>
<figcaption class="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">
<span class="material-icons text-[16px]">insert_chart</span>
<span>Latency reduction over a 24-hour period post-deployment</span>
</figcaption>
</figure>
<h2>Predictive Pre-Generation</h2>
<p>
For our enterprise clients, we introduced predictive generation. By analyzing usage patterns, we can pre-warm the cache with variations of commonly requested assets before the user even asks for them.
</p>
<p>
This is particularly useful for e-commerce clients who update their catalogs at predictable times.
</p>
<div class="mt-12 pt-8 border-t border-gray-200">
<h3 class="text-lg font-semibold mb-4 text-gray-900">Conclusion</h3>
<p class="text-gray-600">
Optimization is never finished. We are currently exploring WebAssembly for client-side resizing to further offload our servers. Stay tuned for Part 2!
</p>
</div>
</article>
</div>
<aside class="hidden lg:block lg:col-span-3">
<div class="sticky top-28 space-y-8">
<div class="rounded-xl bg-gray-50 border border-gray-200 p-5 shadow-sm">
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 border-b border-gray-200 pb-2">
On This Page
</h4>
<nav class="flex flex-col space-y-3 text-sm">
<a class="text-gray-900 font-medium pl-2 border-l-2 border-primary transition-colors hover:text-primary" href="#">The Latency Bottleneck</a>
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">Implementing Edge Caching</a>
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">The Results</a>
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">Predictive Pre-Generation</a>
</nav>
</div>
<div>
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
Related Docs
</h4>
<div class="space-y-3 text-sm">
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">description</span>
API Caching Policy
</a>
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">terminal</span>
CLI Reference
</a>
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">webhook</span>
Webhooks Guide
</a>
</div>
</div>
<div class="rounded-xl border border-gray-700 bg-slate-800 p-6 shadow-xl relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="relative z-10">
<h4 class="font-bold text-white text-lg mb-2">Build faster with Banatie</h4>
<p class="text-sm text-gray-400 mb-6 leading-relaxed">
Integrate AI image generation into your app in minutes. Start for free.
</p>
<a class="block w-full rounded-lg bg-primary px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg hover:bg-violet-600 transition-all transform hover:-translate-y-0.5" href="#">
Get API Key
</a>
</div>
</div>
<div>
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
Related Articles
</h4>
<div class="space-y-6">
<a class="group block rounded-xl border border-gray-200 overflow-hidden bg-white hover:border-primary/50 transition-colors shadow-sm" href="#">
<div class="aspect-video w-full bg-gray-100 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-primary/10 group-hover:scale-105 transition-transform duration-500"></div>
<div class="absolute inset-0 flex items-center justify-center text-primary/40">
<span class="material-icons text-4xl">auto_graph</span>
</div>
</div>
<div class="p-4">
<h5 class="text-base font-semibold text-gray-900 group-hover:text-primary transition-colors leading-tight mb-2">
Understanding Diffusion Models
</h5>
<p class="text-xs text-gray-500">
Oct 12 • 5 min read
</p>
</div>
</a>
<a class="group block rounded-xl border border-gray-200 overflow-hidden bg-white hover:border-primary/50 transition-colors shadow-sm" href="#">
<div class="aspect-video w-full bg-gray-100 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 group-hover:scale-105 transition-transform duration-500"></div>
<div class="absolute inset-0 flex items-center justify-center text-blue-500/40">
<span class="material-icons text-4xl">speed</span>
</div>
</div>
<div class="p-4">
<h5 class="text-base font-semibold text-gray-900 group-hover:text-primary transition-colors leading-tight mb-2">
Managing API Quotas effectively
</h5>
<p class="text-xs text-gray-500">
Sep 28 • 4 min read
</p>
</div>
</a>
</div>
</div>
</div>
</aside>
</div>
</div>
</main>
<footer class="bg-background-dark text-gray-400 border-t border-white/10">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="col-span-2 lg:col-span-2">
<div class="flex items-center gap-2 font-bold text-white text-xl tracking-tight mb-4">
<div class="h-6 w-6 rounded bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center">
<span class="material-icons text-white text-xs">auto_awesome</span>
</div>
<span>Banatie</span>
</div>
<p class="text-sm leading-6 mb-6 max-w-sm">
Empowering developers to build the next generation of creative applications with production-ready AI infrastructure.
</p>
<div class="flex gap-4">
<a class="hover:text-white transition-colors" href="#"><span class="sr-only">Twitter</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a>
<a class="hover:text-white transition-colors" href="#"><span class="sr-only">GitHub</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" fill-rule="evenodd"></path></svg></a>
</div>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Product</h3>
<ul class="space-y-3 text-sm">
<li><a class="hover:text-white transition-colors" href="#">Features</a></li>
<li><a class="hover:text-white transition-colors" href="#">Pricing</a></li>
<li><a class="hover:text-white transition-colors" href="#">API Reference</a></li>
<li><a class="hover:text-white transition-colors" href="#">Integrations</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Resources</h3>
<ul class="space-y-3 text-sm">
<li><a class="hover:text-white transition-colors" href="#">Documentation</a></li>
<li><a class="hover:text-white transition-colors" href="#">Guides</a></li>
<li><a class="text-white font-medium" href="#">Blog</a></li>
<li><a class="hover:text-white transition-colors" href="#">Community</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-white mb-4">Company</h3>
<ul class="space-y-3 text-sm">
<li><a class="hover:text-white transition-colors" href="#">About</a></li>
<li><a class="hover:text-white transition-colors" href="#">Careers</a></li>
<li><a class="hover:text-white transition-colors" href="#">Legal</a></li>
<li><a class="hover:text-white transition-colors" href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs">
<p>© 2023 Banatie Inc. All rights reserved.</p>
<div class="flex gap-6">
<a class="hover:text-white" href="#">Privacy Policy</a>
<a class="hover:text-white" href="#">Terms of Service</a>
</div>
</div>
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink