develop-updateui #1
@@ -1,46 +1,42 @@
|
||||
<template>
|
||||
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)"><img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />
|
||||
<span class="font-bold text-xl tracking-tight text-slate-900">EcoStream</span>
|
||||
<section class=":m: relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden min-h-svh flex">
|
||||
<!-- <div class="absolute inset-0 bg-grid-pattern opacity-[0.4] -z-10"></div> -->
|
||||
<div
|
||||
class=":m: absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[800px] h-[800px] bg-primary-light/40 rounded-full blur-3xl -z-10 mix-blend-multiply animate-pulse duration-1000">
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#features" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Features</a>
|
||||
<a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Pricing</a>
|
||||
<div
|
||||
class=":m: absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-teal-100/50 rounded-full blur-3xl -z-10 mix-blend-multiply">
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<RouterLink to="/login" class="text-sm font-semibold text-slate-600 hover:text-slate-900 cursor-pointer">Log in</RouterLink>
|
||||
<RouterLink to="/sign-up" class="bg-slate-900 hover:bg-black text-white px-5 py-2.5 rounded-lg text-sm font-semibold cursor-pointer">
|
||||
Start for free
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-[0.4] -z-10"></div>
|
||||
<div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[800px] h-[800px] bg-brand-100/50 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
|
||||
<div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-teal-100/50 rounded-full blur-3xl -z-10 mix-blend-multiply"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-slate-900 mb-6 leading-[1.1]">
|
||||
|
||||
<div class="max-w-7xl m-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-extrabold tracking-tight text-slate-900 mb-6 leading-[1.1] animate-backwards">
|
||||
Video infrastructure for <br>
|
||||
<span class="text-gradient">modern internet.</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-slate-500 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
<p class="text-xl text-slate-500 max-w-2xl mx-auto mb-10 leading-relaxed animate-backwards delay-50">
|
||||
Seamlessly host, encode, and stream video with our developer-first API.
|
||||
Optimized for speed, built for scale.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<RouterLink to="/get-started" class="flex btn btn-secondary !rounded-xl !p-4 press-animated">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="46 -286 524 580"><path d="M56 284v-560L560 4 56 284z" fill="#fff"/></svg>
|
||||
<RouterLink to="/get-started" class="flex btn btn-success !rounded-xl !p-4 press-animated">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="46 -286 524 580">
|
||||
<path d="M56 284v-560L560 4 56 284z" fill="#fff" />
|
||||
</svg>
|
||||
Get Started
|
||||
</RouterLink>
|
||||
<RouterLink to="/docs" class="flex btn btn-outline-primary !rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -261 468 503"><path d="M256-139V72c0 18-14 32-32 32s-32-14-32-32v-211l-41 42c-13 12-33 12-46 0-12-13-12-33 0-46l96-96c13-12 33-12 46 0l96 96c12 13 12 33 0 46-13 12-33 12-46 0l-41-42zm-32 291c44 0 80-36 80-80h80c35 0 64 29 64 64v32c0 35-29 64-64 64H64c-35 0-64-29-64-64v-32c0-35 29-64 64-64h80c0 44 36 80 80 80zm144 24c13 0 24-11 24-24s-11-24-24-24-24 11-24 24 11 24 24 24z" fill="#14a74b"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" viewBox="0 0 596 468">
|
||||
<path
|
||||
d="M10 314c0-63 41-117 98-136-1-8-2-16-2-24 0-79 65-144 144-144 55 0 104 31 128 77 14-8 30-13 48-13 53 0 96 43 96 96 0 16-4 31-10 44 44 20 74 64 74 116 0 71-57 128-128 128H154c-79 0-144-64-144-144zm199-73c-9 9-9 25 0 34s25 9 34 0l31-31v102c0 13 11 24 24 24s24-11 24-24V244l31 31c9 9 25 9 34 0s9-25 0-34l-72-72c-10-9-25-9-34 0l-72 72z"
|
||||
fill="#14a74b" />
|
||||
<path
|
||||
d="M281 169c9-9 25-9 34 0l72 72c9 9 9 25 0 34s-25 9-34 0l-31-31v102c0 13-11 24-24 24s-24-11-24-24V244l-31 31c-9 9-25 9-34 0s-9-25 0-34l72-72z"
|
||||
fill="#fff" />
|
||||
</svg>
|
||||
Upload video
|
||||
</RouterLink>
|
||||
</div>
|
||||
@@ -50,63 +46,104 @@
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="mb-16 md:text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-slate-900 mb-4">Everything you need to ship video</h2>
|
||||
<p class="text-lg text-slate-500">Focus on building your product. We'll handle the complex video infrastructure.</p>
|
||||
<p class="text-lg text-slate-500">Focus on building your product. We'll handle the complex video
|
||||
infrastructure.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="md:col-span-2 bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-primary/60 transition-all group overflow-hidden relative">
|
||||
<div
|
||||
class=":m: md:col-span-2 bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-primary/60 transition-all group overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center mb-6 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="532" viewBox="-8 -258 529 532"><path d="M342 32c-2 69-16 129-35 172-10 23-22 40-32 49-10 10-16 11-19 11h-1c-3 0-9-1-19-11-10-9-22-26-32-49-19-43-33-103-35-172h173zm169 0c-9 103-80 188-174 219 30-51 50-129 53-219h121zm-390 0c3 89 23 167 53 218C80 219 11 134 2 32h119zm53-266c-30 51-50 129-53 218H2c9-102 78-186 172-218zm82-14c3 0 9 1 19 11 10 9 22 26 32 50 19 42 33 102 35 171H169c3-69 16-129 35-171 10-24 22-41 32-50s16-11 19-11h1zm81 13c94 31 165 116 174 219H390c-3-90-23-168-53-219z" fill="#059669"/></svg>
|
||||
<div
|
||||
class="w-12 h-12 bg-white rounded-xl flex items-center justify-center mb-6 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="532" viewBox="-8 -258 529 532">
|
||||
<path
|
||||
d="M342 32c-2 69-16 129-35 172-10 23-22 40-32 49-10 10-16 11-19 11h-1c-3 0-9-1-19-11-10-9-22-26-32-49-19-43-33-103-35-172h173zm169 0c-9 103-80 188-174 219 30-51 50-129 53-219h121zm-390 0c3 89 23 167 53 218C80 219 11 134 2 32h119zm53-266c-30 51-50 129-53 218H2c9-102 78-186 172-218zm82-14c3 0 9 1 19 11 10 9 22 26 32 50 19 42 33 102 35 171H169c3-69 16-129 35-171 10-24 22-41 32-50s16-11 19-11h1zm81 13c94 31 165 116 174 219H390c-3-90-23-168-53-219z"
|
||||
fill="#059669" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-2">Global Edge Network</h3>
|
||||
<p class="text-slate-500 max-w-md">Content delivered from 200+ PoPs worldwide. Automatic region selection ensures the lowest latency for every viewer.</p>
|
||||
<p class="text-slate-500 max-w-md">Content delivered from 200+ PoPs worldwide. Automatic region
|
||||
selection ensures the lowest latency for every viewer.</p>
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 opacity-10 translate-x-1/4 translate-y-1/4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-10 -258 532 532"><path d="M464 8c0-19-3-38-8-56l-27-5c-8-2-15 2-19 9-6 11-19 17-31 13l-14-5c-8-2-17 0-22 5-4 4-4 10 0 14l33 33c5 5 8 12 8 19 0 12-8 23-20 26l-6 1c-3 1-6 5-6 9v12c0 13-4 27-13 38l-25 34c-6 8-16 13-26 13-18 0-32-14-32-32V88c0-9-7-16-16-16h-32c-26 0-48-22-48-48V-4c0-13 6-24 16-32l39-30c6-4 13-6 20-6 3 0 7 1 10 2l32 10c7 3 15 3 22 1l36-9c10-2 17-11 17-22 0-8-5-16-13-20l-29-15c-3-2-8-1-11 2l-4 4c-4 4-11 7-17 7-4 0-8-1-11-3l-15-7c-7-4-15-2-20 4l-13 17c-6 7-16 8-22 1-3-2-5-6-5-10v-41c0-6-1-11-4-16l-10-18C102-154 48-79 48 8c0 115 93 208 208 208S464 123 464 8zM0 8c0-141 115-256 256-256S512-133 512 8 397 264 256 264 0 149 0 8z" fill="#1e3050"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-10 -258 532 532">
|
||||
<path
|
||||
d="M464 8c0-19-3-38-8-56l-27-5c-8-2-15 2-19 9-6 11-19 17-31 13l-14-5c-8-2-17 0-22 5-4 4-4 10 0 14l33 33c5 5 8 12 8 19 0 12-8 23-20 26l-6 1c-3 1-6 5-6 9v12c0 13-4 27-13 38l-25 34c-6 8-16 13-26 13-18 0-32-14-32-32V88c0-9-7-16-16-16h-32c-26 0-48-22-48-48V-4c0-13 6-24 16-32l39-30c6-4 13-6 20-6 3 0 7 1 10 2l32 10c7 3 15 3 22 1l36-9c10-2 17-11 17-22 0-8-5-16-13-20l-29-15c-3-2-8-1-11 2l-4 4c-4 4-11 7-17 7-4 0-8-1-11-3l-15-7c-7-4-15-2-20 4l-13 17c-6 7-16 8-22 1-3-2-5-6-5-10v-41c0-6-1-11-4-16l-10-18C102-154 48-79 48 8c0 115 93 208 208 208S464 123 464 8zM0 8c0-141 115-256 256-256S512-133 512 8 397 264 256 264 0 149 0 8z"
|
||||
fill="#1e3050" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:row-span-2 bg-slate-900 rounded-2xl p-8 text-white relative overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-slate-800/50 to-transparent"></div>
|
||||
<div class=":m: md:row-span-2 bg-slate-900 rounded-2xl p-8 text-white relative overflow-hidden group">
|
||||
<div class=":m: absolute inset-0 bg-gradient-to-b from-slate-800/50 to-transparent"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mb-6 backdrop-blur-sm border border-white/10">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -146 468 384"><path d="M392-136c-31 0-56 25-56 56v280c0 16 13 28 28 28h28c31 0 56-25 56-56V-80c0-31-25-56-56-56zM168 4c0-31 25-56 56-56h28c16 0 28 13 28 28v224c0 16-12 28-28 28h-56c-15 0-28-12-28-28V4zM0 88c0-31 25-56 56-56h28c16 0 28 13 28 28v140c0 16-12 28-28 28H56c-31 0-56-25-56-56V88z" fill="#fff"/></svg>
|
||||
<div
|
||||
class=":m: w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mb-6 backdrop-blur-sm border border-white/10">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -146 468 384">
|
||||
<path
|
||||
d="M392-136c-31 0-56 25-56 56v280c0 16 13 28 28 28h28c31 0 56-25 56-56V-80c0-31-25-56-56-56zM168 4c0-31 25-56 56-56h28c16 0 28 13 28 28v224c0 16-12 28-28 28h-56c-15 0-28-12-28-28V4zM0 88c0-31 25-56 56-56h28c16 0 28 13 28 28v140c0 16-12 28-28 28H56c-31 0-56-25-56-56V88z"
|
||||
fill="#fff" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Live Streaming API</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed mb-8">Scale to millions of concurrent viewers with ultra-low latency. RTMP ingest and HLS playback supported natively.</p>
|
||||
<p class="text-slate-400 text-sm leading-relaxed mb-8">Scale to millions of concurrent viewers
|
||||
with ultra-low latency. RTMP ingest and HLS playback supported natively.</p>
|
||||
|
||||
<!-- Visual -->
|
||||
<div class="bg-slate-800/50 rounded-lg p-4 border border-white/5 font-mono text-xs text-brand-300">
|
||||
<div
|
||||
class="bg-slate-800/50 rounded-lg p-4 border border-white/5 font-mono text-xs text-brand-300">
|
||||
<div class="flex justify-between items-center mb-3 border-b border-white/5 pb-2">
|
||||
<span class="text-slate-500">Live Status</span>
|
||||
<span class="flex items-center gap-1.5 text-red-500 text-[10px] uppercase font-bold tracking-wider animate-pulse"><span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span> On Air</span>
|
||||
<span
|
||||
class=":m: flex items-center gap-1.5 text-red-500 text-[10px] uppercase font-bold tracking-wider animate-pulse"><span
|
||||
class="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span> On Air</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between"><span class="text-slate-400">Bitrate:</span> <span class="text-white">6000 kbps</span></div>
|
||||
<div class="flex justify-between"><span class="text-slate-400">FPS:</span> <span class="text-white">60</span></div>
|
||||
<div class="flex justify-between"><span class="text-slate-400">Latency:</span> <span class="text-brand-400">~2s</span></div>
|
||||
<div class="flex justify-between"><span class="text-slate-400">Bitrate:</span> <span
|
||||
class="text-white">6000 kbps</span></div>
|
||||
<div class="flex justify-between"><span class="text-slate-400">FPS:</span> <span
|
||||
class="text-white">60</span></div>
|
||||
<div class="flex justify-between"><span class="text-slate-400">Latency:</span> <span
|
||||
class="text-brand-400">~2s</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Feature -->
|
||||
<div class="bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-brand-200 transition-all group hover:shadow-lg hover:shadow-brand-500/5">
|
||||
<div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-purple-600 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 570 570"><path d="M50 428c-5 5-5 14 0 19s14 5 19 0l237-237c5-5 5-14 0-19s-14-5-19 0L50 428zm16-224c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zM174 60c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zm215 29c-5 5-5 14 0 19s14 5 19 0l39-39c5-5 5-14 0-19s-14-5-19 0l-39 39zm21 357c-5 5-5 14 0 19s14 5 19 0l18-18c5-5 5-14 0-19s-14-5-19 0l-18 18z" fill="#a6acb9"/><path d="M170 26c14-15 36-15 50 0l18 18c15 14 15 36 0 50l-18 18c-14 15-36 15-50 0l-18-18c-15-14-15-36 0-50l18-18zm35 41c5-5 5-14 0-19-6-5-14-5-20 0l-11 12c-5 5-5 13 0 19 5 5 14 5 19 0l12-12zm204 342c21-21 55-21 76 0l18 18c21 21 21 55 0 76l-18 18c-21 21-55 21-76 0l-18-18c-21-21-21-55 0-76l18-18zm38 38c5-5 5-14 0-19s-14-5-19 0l-18 18c-5 5-5 14 0 19s14 5 19 0l18-18zM113 170c-15-15-37-15-51 0l-18 18c-14 14-14 36 0 50l18 18c14 15 37 15 51 0l18-18c14-14 14-36 0-50l-18-18zm-16 41-12 12c-5 5-14 5-19 0-5-6-5-14 0-20l11-11c6-5 14-5 20 0 5 5 5 14 0 19zM485 31c-21-21-55-21-76 0l-39 39c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l39-39c21-21 21-55 0-76l-54-54zm-38 38-39 39c-5 5-14 5-19 0s-5-14 0-19l39-39c5-5 14-5 19 0s5 14 0 19zm-49 233c21-21 21-55 0-76l-54-54c-21-21-55-21-76 0L31 409c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l237-237zm-92-92L69 447c-5 5-14 5-19 0s-5-14 0-19l237-237c5-5 14-5 19 0s5 14 0 19z" fill="#1e3050"/></svg>
|
||||
<div
|
||||
class=":m: bg-slate-50 rounded-2xl p-8 border border-slate-100 transition-all group hover:(border-brand-200 shadow-lg shadow-brand-500/5)">
|
||||
<div
|
||||
class=":m: w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-purple-600 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 570 570">
|
||||
<path
|
||||
d="M50 428c-5 5-5 14 0 19s14 5 19 0l237-237c5-5 5-14 0-19s-14-5-19 0L50 428zm16-224c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zM174 60c-5 5-5 13 0 19 5 5 14 5 19 0l12-12c5-5 5-14 0-19-6-5-14-5-20 0l-11 12zm215 29c-5 5-5 14 0 19s14 5 19 0l39-39c5-5 5-14 0-19s-14-5-19 0l-39 39zm21 357c-5 5-5 14 0 19s14 5 19 0l18-18c5-5 5-14 0-19s-14-5-19 0l-18 18z"
|
||||
fill="#a6acb9" />
|
||||
<path
|
||||
d="M170 26c14-15 36-15 50 0l18 18c15 14 15 36 0 50l-18 18c-14 15-36 15-50 0l-18-18c-15-14-15-36 0-50l18-18zm35 41c5-5 5-14 0-19-6-5-14-5-20 0l-11 12c-5 5-5 13 0 19 5 5 14 5 19 0l12-12zm204 342c21-21 55-21 76 0l18 18c21 21 21 55 0 76l-18 18c-21 21-55 21-76 0l-18-18c-21-21-21-55 0-76l18-18zm38 38c5-5 5-14 0-19s-14-5-19 0l-18 18c-5 5-5 14 0 19s14 5 19 0l18-18zM113 170c-15-15-37-15-51 0l-18 18c-14 14-14 36 0 50l18 18c14 15 37 15 51 0l18-18c14-14 14-36 0-50l-18-18zm-16 41-12 12c-5 5-14 5-19 0-5-6-5-14 0-20l11-11c6-5 14-5 20 0 5 5 5 14 0 19zM485 31c-21-21-55-21-76 0l-39 39c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l39-39c21-21 21-55 0-76l-54-54zm-38 38-39 39c-5 5-14 5-19 0s-5-14 0-19l39-39c5-5 14-5 19 0s5 14 0 19zm-49 233c21-21 21-55 0-76l-54-54c-21-21-55-21-76 0L31 409c-21 21-21 55 0 76l54 54c21 21 55 21 76 0l237-237zm-92-92L69 447c-5 5-14 5-19 0s-5-14 0-19l237-237c5-5 14-5 19 0s5 14 0 19z"
|
||||
fill="#1e3050" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-2">Instant Encoding</h3>
|
||||
<p class="text-slate-500 text-sm">Upload raw files and get optimized HLS/DASH streams in seconds.</p>
|
||||
<p class="text-slate-500 text-sm">Upload raw files and get optimized HLS/DASH streams in seconds.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Standard Feature -->
|
||||
<div class="bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-brand-200 transition-all group hover:shadow-lg hover:shadow-brand-500/5">
|
||||
<div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-orange-600 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -226 532 468"><path d="M32-216c18 0 32 14 32 32v336c0 9 7 16 16 16h400c18 0 32 14 32 32s-14 32-32 32H80c-44 0-80-36-80-80v-336c0-18 14-32 32-32zM144-24c18 0 32 14 32 32v64c0 18-14 32-32 32s-32-14-32-32V8c0-18 14-32 32-32zm144-64V72c0 18-14 32-32 32s-32-14-32-32V-88c0-18 14-32 32-32s32 14 32 32zm80 32c18 0 32 14 32 32v96c0 18-14 32-32 32s-32-14-32-32v-96c0-18 14-32 32-32zm144-96V72c0 18-14 32-32 32s-32-14-32-32v-224c0-18 14-32 32-32s32 14 32 32z" fill="#1e3050"/></svg>
|
||||
<div
|
||||
class=":m: bg-slate-50 rounded-2xl p-8 border border-slate-100 transition-all group hover:(border-brand-200 shadow-lg shadow-brand-500/5)">
|
||||
<div
|
||||
class=":m: w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-orange-600 border border-slate-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="-10 -226 532 468">
|
||||
<path
|
||||
d="M32-216c18 0 32 14 32 32v336c0 9 7 16 16 16h400c18 0 32 14 32 32s-14 32-32 32H80c-44 0-80-36-80-80v-336c0-18 14-32 32-32zM144-24c18 0 32 14 32 32v64c0 18-14 32-32 32s-32-14-32-32V8c0-18 14-32 32-32zm144-64V72c0 18-14 32-32 32s-32-14-32-32V-88c0-18 14-32 32-32s32 14 32 32zm80 32c18 0 32 14 32 32v96c0 18-14 32-32 32s-32-14-32-32v-96c0-18 14-32 32-32zm144-96V72c0 18-14 32-32 32s-32-14-32-32v-224c0-18 14-32 32-32s32 14 32 32z"
|
||||
fill="#1e3050" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-2">Deep Analytics</h3>
|
||||
<p class="text-slate-500 text-sm">Session-level insights, quality of experience (QoE) metrics, and more.</p>
|
||||
<p class="text-slate-500 text-sm">Session-level insights, quality of experience (QoE) metrics, and
|
||||
more.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,8 +157,12 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
|
||||
<div v-for="pack in pricing.packs" :key="pack.name" :class="cn(':uno: p-8 rounded-2xl relative overflow-hidden hover:border-primary transition-colors flex flex-col justify-between', pack.tag == 'POPULAR' ? 'border-primary/80 border-2' : 'border-slate-200 border')" :style="{background: pack.bg}">
|
||||
<div v-if="pack.tag" class="absolute top-0 right-0 bg-primary/80 text-white text-xs font-bold px-3 py-1 rounded-bl-lg uppercase">{{ pack.tag }}</div>
|
||||
<div v-for="pack in pricing.packs" :key="pack.name"
|
||||
:class="cn(':uno: p-8 rounded-2xl relative overflow-hidden hover:border-primary transition-colors flex flex-col justify-between', pack.tag == 'POPULAR' ? 'border-primary/80 border-2' : 'border-slate-200 border')"
|
||||
:style="{ background: pack.bg }">
|
||||
<div v-if="pack.tag"
|
||||
class=":m: absolute top-0 right-0 bg-primary/80 text-white text-xs font-bold px-3 py-1 rounded-bl-lg uppercase">
|
||||
{{ pack.tag }}</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-slate-900 text-xl mb-2">{{ pack.name }}</h3>
|
||||
<div class="flex items-baseline gap-1 mb-6">
|
||||
@@ -130,60 +171,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8 text-sm text-slate-600">
|
||||
<li v-for="value in pack.features" :key="value" class="flex items-center gap-3"><Check-Icon class="fas fa-check text-brand-500"/> {{ value }}</li>
|
||||
<li v-for="value in pack.features" :key="value" class="flex items-center gap-3"><Check-Icon
|
||||
class="fas fa-check text-brand-500" /> {{ value }}</li>
|
||||
</ul>
|
||||
<router-link to="/sign-up" :class="cn('btn flex justify-center w-full !py-2.5', pack.tag == 'POPULAR' ? 'btn-primary' : 'btn-outline-primary')">{{ pack.buttonText }}</router-link>
|
||||
<router-link to="/sign-up"
|
||||
:class="cn('btn flex justify-center w-full !py-2.5', pack.tag == 'POPULAR' ? 'btn-primary' : 'btn-outline-primary')">{{
|
||||
pack.buttonText }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-slate-100 pt-16 pb-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
|
||||
<div class="col-span-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-6 h-6 bg-brand-600 rounded flex items-center justify-center text-white">
|
||||
<img class="h-6 w-6" src="/apple-touch-icon.png" alt="Logo" />
|
||||
</div>
|
||||
<span class="font-bold text-lg text-slate-900">EcoStream</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-sm max-w-xs">Building the video layer of the internet. Designed for developers.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Product</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><a href="#" class="hover:text-brand-600">Features</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Pricing</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Company</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><a href="#" class="hover:text-brand-600">About</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Blog</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Legal</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><a href="#" class="hover:text-brand-600">Privacy</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8 border-t border-slate-100 text-center text-sm text-slate-400">
|
||||
© 2026 EcoStream Inc. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Head>
|
||||
<title>EcoStream - Video infrastructure for modern internet</title>
|
||||
<meta name="description" content="Seamlessly host, encode, and stream video with our developer-first API. Optimized for speed, built for scale." />
|
||||
</Head>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Head } from '@unhead/vue/components'
|
||||
|
||||
84
src/routes/home/Layout.vue
Normal file
84
src/routes/home/Layout.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<header>
|
||||
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<router-link to="/" class="flex items-center gap-2 cursor-pointer">
|
||||
<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />
|
||||
<span class="font-bold text-xl tracking-tight text-slate-900">EcoStream</span>
|
||||
</router-link>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#features"
|
||||
class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Features</a>
|
||||
<a href="#pricing"
|
||||
class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">Pricing</a>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<RouterLink to="/login"
|
||||
class="text-sm font-semibold text-slate-600 hover:text-slate-900 cursor-pointer">Log in
|
||||
</RouterLink>
|
||||
<RouterLink to="/sign-up"
|
||||
class="bg-slate-900 hover:bg-black text-white px-5 py-2.5 rounded-lg text-sm font-semibold cursor-pointer">
|
||||
Start for free
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="animate-fade-in delay-50 grow">
|
||||
<router-view />
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-slate-100 pt-16 pb-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
|
||||
<div class="col-span-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-6 h-6 bg-brand-600 rounded flex items-center justify-center text-white">
|
||||
<img class="h-6 w-6" src="/apple-touch-icon.png" alt="Logo" />
|
||||
</div>
|
||||
<span class="font-bold text-lg text-slate-900">EcoStream</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-sm max-w-xs">Building the video layer of the internet. Designed for
|
||||
developers.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Product</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><a href="#" class="hover:text-brand-600">Features</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Pricing</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Company</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><a href="#" class="hover:text-brand-600">About</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Blog</a></li>
|
||||
<li><a href="#" class="hover:text-brand-600">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-slate-900 mb-4 text-sm">Legal</h4>
|
||||
<ul class="space-y-2 text-sm text-slate-500">
|
||||
<li><router-link to="/privacy" class="hover:text-brand-600">Privacy</router-link></li>
|
||||
<li><router-link to="/terms" class="hover:text-brand-600">Terms</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8 border-t border-slate-100 text-center text-sm text-slate-400">
|
||||
© 2026 EcoStream Inc. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<Head>
|
||||
<title>EcoStream - Video infrastructure for modern internet</title>
|
||||
<meta name="description"
|
||||
content="Seamlessly host, encode, and stream video with our developer-first API. Optimized for speed, built for scale." />
|
||||
</Head>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Head } from '@unhead/vue/components'
|
||||
</script>
|
||||
61
src/routes/home/Privacy.vue
Normal file
61
src/routes/home/Privacy.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto space-y-10" style="opacity: 1; transform: none;">
|
||||
<div class="grow pt-32 pb-12 px-4">
|
||||
<div class="max-w-4xl mx-auto space-y-10">
|
||||
<div class="space-y-3">
|
||||
<p
|
||||
class="inline-block px-4 py-1.5 rounded-full bg-info/20 font-bold text-sm uppercase">
|
||||
{{ pageContent.data.pageSubheading }}</p>
|
||||
<h1 class="text-4xl md:text-5xl font-heading font-extrabold">{{ pageContent.data.pageHeading }}</h1>
|
||||
<p class="text-slate-600 text-lg font-medium">{{ pageContent.data.description }}</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl border border-gray-200 shadow-hard space-y-6">
|
||||
<section v-for="(item, index) in pageContent.data.list" :key="index">
|
||||
<h2 class="text-2xl font-bold mb-4">{{ item.heading }}</h2>
|
||||
<p class="leading-relaxed">{{ item.text }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useHead} from "@unhead/vue";
|
||||
const title = "Privacy Policy - Ecostream";
|
||||
const description = "Read about Ecostream's commitment to protecting your privacy and data security.";
|
||||
const pageContent = {
|
||||
head: {
|
||||
title,
|
||||
meta: [
|
||||
{ name: "description", content: description },
|
||||
{ property: "og:title", content: title },
|
||||
{ property: "og:description", content: description },
|
||||
{ property: "twitter:title", content: title },
|
||||
{ property: "twitter:description", content: description },
|
||||
{ property: "twitter:image", content: "https://Ecostream.com/thumb.png" }
|
||||
]
|
||||
},
|
||||
data: {
|
||||
pageHeading: "Legal & Privacy Policy",
|
||||
pageSubheading: "Legal & Privacy Policy",
|
||||
description: "Our legal and privacy policy.",
|
||||
list: [{
|
||||
heading: "1. Privacy Policy",
|
||||
text: "At Ecostream, we take your privacy seriously. This policy describes how we collect, use, and protect your personal information. We only collect information that is necessary for the operation of our service, including email addresses for account creation and payment information for subscription processing."
|
||||
},
|
||||
{
|
||||
heading: "2. Data Collection",
|
||||
text: "We collect data such as IP addresses, browser types, and access times to analyze trends and improve our service. Uploaded content is stored securely and is only accessed as required for the delivery of our hosting services."
|
||||
},
|
||||
{
|
||||
heading: "3. Cookie Policy",
|
||||
text: "We use cookies to maintain user sessions and preferences. By using our website, you consent to the use of cookies in accordance with this policy."
|
||||
},
|
||||
{
|
||||
heading: "4. DMCA & Copyright",
|
||||
text: "Ecostream respects the intellectual property rights of others. We respond to notices of alleged copyright infringement in accordance with the Digital Millennium Copyright Act (DMCA). Please report any copyright violations to our support team."
|
||||
}]
|
||||
}
|
||||
}
|
||||
useHead(pageContent.head);
|
||||
</script>
|
||||
67
src/routes/home/Terms.vue
Normal file
67
src/routes/home/Terms.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto space-y-10" style="opacity: 1; transform: none;">
|
||||
<div class="grow pt-32 pb-12 px-4">
|
||||
<div class="max-w-4xl mx-auto space-y-10">
|
||||
<div class="space-y-3">
|
||||
<p
|
||||
class="inline-block px-4 py-1.5 rounded-full bg-info/20 font-bold text-sm uppercase">
|
||||
{{ pageContent.data.pageSubheading }}</p>
|
||||
<h1 class="text-4xl md:text-5xl font-heading font-extrabold">{{ pageContent.data.pageHeading }}</h1>
|
||||
<p class="text-slate-600 text-lg font-medium">{{ pageContent.data.description }}</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl border border-gray-200 shadow-hard space-y-6">
|
||||
<section v-for="(item, index) in pageContent.data.list" :key="index">
|
||||
<h2 class="text-2xl font-bold mb-4">{{ item.heading }}</h2>
|
||||
<p class="leading-relaxed">{{ item.text }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useHead} from "@unhead/vue";
|
||||
const title = "Terms and Conditions - Ecostream";
|
||||
const description = "Read Ecostream's terms and conditions for using our video hosting and streaming services.";
|
||||
const pageContent = {
|
||||
head: {
|
||||
title,
|
||||
meta: [
|
||||
{ name: "description", content: description },
|
||||
{ property: "og:title", content: title },
|
||||
{ property: "og:description", content: description },
|
||||
{ property: "twitter:title", content: title },
|
||||
{ property: "twitter:description", content: description },
|
||||
{ property: "twitter:image", content: "https://Ecostream.com/thumb.png" }
|
||||
]
|
||||
},
|
||||
data: {
|
||||
pageHeading: "Terms and Conditions Details",
|
||||
pageSubheading: "Terms and Conditions",
|
||||
description: "Our terms and conditions set forth important guidelines and rules for using Ecostream's services.",
|
||||
list: [
|
||||
{
|
||||
heading: "1. Acceptance of Terms",
|
||||
text: "By accessing and using Ecostream, you accept and agree to be bound by the terms and provision of this agreement."
|
||||
},
|
||||
{
|
||||
heading: "2. Service Usage",
|
||||
text: "You agree to use our service only for lawful purposes. You are prohibited from posting or transmitting any unlawful, threatening, libelous, defamatory, obscene, or profane material. We reserve the right to terminate accounts that violate these terms."
|
||||
},
|
||||
{
|
||||
heading: "3. Content Ownership",
|
||||
text: "You retain all rights and ownership of the content you upload to Ecostream. However, by uploading content, you grant us a license to host, store, and display the content as necessary to provide our services."
|
||||
},
|
||||
{
|
||||
heading: "4. Limitation of Liability",
|
||||
text: "Ecostream shall not be liable for any direct, indirect, incidental, special, or consequential damages resulting from the use or inability to use our service."
|
||||
},
|
||||
{
|
||||
heading: "5. Changes to Terms",
|
||||
text: "We reserve the right to modify these terms at any time. Your continued use of the service after any such changes constitutes your acceptance of the new terms."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
useHead(pageContent.head);
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type ReactiveHead, type ResolvableValue } from "@unhead/vue";
|
||||
import { headSymbol } from '@unhead/vue'
|
||||
import { headSymbol } from "@unhead/vue";
|
||||
import {
|
||||
createMemoryHistory,
|
||||
createRouter,
|
||||
@@ -16,6 +16,10 @@ const routes: RouteData[] = [
|
||||
{
|
||||
path: "/",
|
||||
component: () => import("@/components/RootLayout.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
component: () => import("./home/Layout.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
@@ -29,6 +33,18 @@ const routes: RouteData[] = [
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/terms",
|
||||
name: "terms",
|
||||
component: () => import("./home/Terms.vue"),
|
||||
},
|
||||
{
|
||||
path: "/privacy",
|
||||
name: "privacy",
|
||||
component: () => import("./home/Privacy.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
component: () => import("./auth/layout.vue"),
|
||||
@@ -69,9 +85,9 @@ const routes: RouteData[] = [
|
||||
component: () => import("./overview/Overview.vue"),
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Overview - Holistream',
|
||||
title: "Overview - Holistream",
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "upload",
|
||||
@@ -79,9 +95,9 @@ const routes: RouteData[] = [
|
||||
component: () => import("./upload/Upload.vue"),
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Upload - Holistream',
|
||||
title: "Upload - Holistream",
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "video",
|
||||
@@ -89,12 +105,15 @@ const routes: RouteData[] = [
|
||||
component: () => import("./video/Videos.vue"),
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Videos - Holistream',
|
||||
title: "Videos - Holistream",
|
||||
meta: [
|
||||
{ name: 'description', content: 'Manage your video content.' },
|
||||
{
|
||||
name: "description",
|
||||
content: "Manage your video content.",
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "payments-and-plans",
|
||||
@@ -102,12 +121,15 @@ const routes: RouteData[] = [
|
||||
component: () => import("./plans/Plans.vue"),
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Payments & Plans - Holistream',
|
||||
title: "Payments & Plans - Holistream",
|
||||
meta: [
|
||||
{ name: 'description', content: 'Manage your plans and billing information.' },
|
||||
{
|
||||
name: "description",
|
||||
content: "Manage your plans and billing information.",
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "notification",
|
||||
@@ -115,9 +137,9 @@ const routes: RouteData[] = [
|
||||
component: () => import("./notification/Notification.vue"), // TODO: create notification page
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Notification - Holistream',
|
||||
title: "Notification - Holistream",
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
@@ -125,9 +147,9 @@ const routes: RouteData[] = [
|
||||
component: () => import("./profile/Profile.vue"), // TODO: create profile page
|
||||
meta: {
|
||||
head: {
|
||||
title: 'Profile - Holistream',
|
||||
title: "Profile - Holistream",
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -135,7 +157,7 @@ const routes: RouteData[] = [
|
||||
path: "/:pathMatch(.*)*",
|
||||
name: "not-found",
|
||||
component: () => import("./NotFound.vue"),
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -145,6 +167,12 @@ const createAppRouter = () => {
|
||||
? createMemoryHistory() // server
|
||||
: createWebHistory(), // client
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
}
|
||||
return { top: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
@@ -162,6 +190,6 @@ const createAppRouter = () => {
|
||||
}
|
||||
});
|
||||
return router;
|
||||
}
|
||||
};
|
||||
|
||||
export default createAppRouter;
|
||||
|
||||
Reference in New Issue
Block a user