mirror of
https://github.com/algora-io/tv.git
synced 2025-03-17 20:17:45 +02:00
680 lines
34 KiB
Plaintext
680 lines
34 KiB
Plaintext
<div class="min-h-screen text-white max-w-7xl mx-auto font-display">
|
|
<header class="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 px-4 gap-4">
|
|
<div class="flex items-center gap-2 text-lg font-semibold">
|
|
<img src={@ad.logo_url} class="h-12 w-12 rounded-full" />
|
|
<a
|
|
href={@ad.website_url |> String.replace(~r/[?#].*$/, "")}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="truncate max-w-[300px]"
|
|
>
|
|
<span>
|
|
<%= @ad.website_url
|
|
|> String.replace(~r/[?#].*$/, "")
|
|
|> String.replace(~r/^https?:\/\//, "")
|
|
|> String.replace(~r/\/$/, "") %>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<img
|
|
src={@ad.composite_asset_url}
|
|
alt={@ad.website_url}
|
|
class="box-content max-h-16 max-w-screen aspect-[1092/135] object-cover border-[3px] rounded-md lg:rounded-xl"
|
|
style={"border-color: #{@ad.border_color || "#fff"}"}
|
|
/>
|
|
<div class="shrink-0 hidden sm:flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
disabled
|
|
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 bg-white/5 ring-1 ring-white/10 text-white"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
disabled
|
|
type="button"
|
|
role="combobox"
|
|
aria-controls="radix-:r7:"
|
|
aria-expanded="false"
|
|
aria-autocomplete="none"
|
|
dir="ltr"
|
|
data-state="closed"
|
|
data-placeholder=""
|
|
class="flex h-10 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-white/5 ring-1 ring-white/10 text-white"
|
|
>
|
|
<span style="pointer-events: none;" class="mr-1">Last 30 days</span>
|
|
<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"
|
|
class="lucide lucide-chevron-down h-4 w-4 opacity-50"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="m6 9 6 6 6-6"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="space-y-4 px-4">
|
|
<div
|
|
class="rounded-lg lg:rounded-2xl border shadow-inner bg-white/5 ring-1 ring-white/10"
|
|
data-v0-t="card"
|
|
>
|
|
<div class="flex p-6 justify-center items-center">
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
|
|
<div>
|
|
<p class="text-xs text-gray-300 tracking-tight font-bold uppercase">Views</p>
|
|
<p class="text-2xl font-bold"><%= format_number(@stats.total_views) %></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-300 tracking-tight font-bold uppercase">Airtime</p>
|
|
<p class="text-2xl font-bold"><%= @stats.airtime %></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-300 tracking-tight font-bold uppercase">Streams</p>
|
|
<p class="text-2xl font-bold"><%= @stats.streams %></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-300 tracking-tight font-bold uppercase">Creators</p>
|
|
<p class="text-2xl font-bold"><%= @stats.creators %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid sm:grid-cols-2 gap-4">
|
|
<div class="rounded-lg lg:rounded-2xl border shadow-inner bg-white/5 ring-1 ring-white/10 p-6 min-w-0">
|
|
<h3 class="whitespace-nowrap text-xl font-semibold leading-none tracking-tight mb-3 ml-3">
|
|
Top Sources
|
|
</h3>
|
|
<div>
|
|
<div class="relative w-full overflow-auto">
|
|
<table class="w-full caption-bottom text-sm">
|
|
<thead class="[&_tr]:border-b">
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<th class="h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">
|
|
Source
|
|
</th>
|
|
<th class="h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 text-right">
|
|
Views
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
<%= for {source, views} <- @stats.views do %>
|
|
<%= if views > 0 do %>
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 flex items-center gap-2">
|
|
<.source_icon icon={source |> String.downcase() |> String.to_atom()} />
|
|
<%= source %>
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<%= format_number(views) %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg lg:rounded-2xl border shadow-inner bg-white/5 ring-1 ring-white/10 p-6 min-w-0">
|
|
<h3 class="whitespace-nowrap text-xl font-semibold leading-none tracking-tight mb-3 ml-3">
|
|
Top Languages
|
|
</h3>
|
|
<div>
|
|
<div class="relative w-full overflow-auto">
|
|
<table class="w-full caption-bottom text-sm">
|
|
<thead class="[&_tr]:border-b">
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<th class="h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">
|
|
Language
|
|
</th>
|
|
<th class="h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 text-center">
|
|
Creators
|
|
</th>
|
|
<th class="h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 text-right">
|
|
Views
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
<%= for {tech, data} <- @stats.tech_stack_data do %>
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 flex items-center gap-2">
|
|
<.tech_icon tech={tech} class="h-6 w-6" /> <%= tech %>
|
|
</td>
|
|
<td class="align-middle [&:has([role=checkbox])]:pr-0">
|
|
<div class="flex items-center justify-center -space-x-1">
|
|
<%= for creator <- Enum.take(data.creators, 5) do %>
|
|
<img
|
|
class="inline-block h-8 w-8 rounded-full ring-4 ring-[#16112f]"
|
|
src={creator.avatar_url}
|
|
alt={"Avatar of #{creator.name}"}
|
|
/>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<%= format_number(data.views) %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div :if={@blurb.video} class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div class="w-full cursor-pointer">
|
|
<.live_component module={PlayerComponent} id="analytics-player" />
|
|
</div>
|
|
<.link
|
|
href={"/#{@blurb.video.channel_handle}/#{@blurb.video.id}"}
|
|
class="hidden sm:block w-full max-w-sm p-6 bg-gray-800/40 hover:bg-gray-800/60 overflow-hidden rounded-lg lg:rounded-2xl shadow-inner shadow-white/[10%] lg:border border-white/[15%] hover:border/white/[20%]"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative h-20 w-20 shrink-0">
|
|
<img
|
|
src={@blurb.video.channel_avatar_url}
|
|
alt={@blurb.video.channel_handle}
|
|
class="w-full h-full p-1 rounded-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-semibold"><%= @blurb.video.channel_name %></div>
|
|
<div class="font-medium text-gray-300">@<%= @blurb.video.channel_handle %></div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 font-medium text-gray-100"><%= @blurb.video.title %></div>
|
|
<div class="pt-1 text-sm font-medium text-gray-300">
|
|
Streamed on <%= @blurb.video.inserted_at |> Calendar.strftime("%b %d, %Y") %>
|
|
</div>
|
|
</.link>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-lg lg:rounded-2xl border shadow-inner bg-white/5 ring-1 ring-white/10 p-6"
|
|
data-v0-t="card"
|
|
>
|
|
<h3 class="whitespace-nowrap text-xl font-semibold leading-none tracking-tight mb-3 ml-3">
|
|
Appearances
|
|
</h3>
|
|
<div>
|
|
<div class="relative w-full overflow-auto">
|
|
<table class="w-full caption-bottom text-sm">
|
|
<thead class="[&_tr]:border-b">
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<th class="h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">
|
|
Livestream
|
|
</th>
|
|
<th class="hidden lg:table-cell"></th>
|
|
<th class="hidden lg:table-cell h-12 px-4 pr-7 text-right align-middle font-medium [&:has([role=checkbox])]:pr-0">
|
|
Views
|
|
</th>
|
|
<th class="hidden lg:table-cell"></th>
|
|
<th class="hidden sm:table-cell h-12 px-4 align-middle font-medium [&:has([role=checkbox])]:pr-0 text-right">
|
|
Airtime
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
<%= for product_review <- @product_reviews do %>
|
|
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
|
|
<.link
|
|
navigate={"/#{product_review.video.user.handle}/#{product_review.video.id}?t=#{product_review.clip_from}"}
|
|
class="flex flex-col sm:flex-row items-start sm:items-center gap-4"
|
|
>
|
|
<img
|
|
src={product_review.thumbnail_url}
|
|
class="h-24 object-cover aspect-video rounded-lg"
|
|
/>
|
|
<div class="space-y-1">
|
|
<div class="text-sm text-gray-100">
|
|
<%= product_review.video.user.name %> • <%= product_review.video.title %>
|
|
</div>
|
|
<div class="text-xs text-gray-300">
|
|
Streamed on <%= product_review.video.inserted_at
|
|
|> Calendar.strftime("%b %d, %Y") %>
|
|
</div>
|
|
<div class="text-xs text-purple-300">
|
|
<%= Library.to_hhmmss(product_review.clip_from) %> - <%= Library.to_hhmmss(
|
|
product_review.clip_to
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</.link>
|
|
<div class="mt-4 lg:hidden flex items-center">
|
|
<div class="font-semibold">Views:</div>
|
|
<.link
|
|
:if={product_review.video.content_metrics.twitter_views > 0}
|
|
href={product_review.video.content_metrics.twitter_video_url}
|
|
class="ml-2 flex items-center gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.twitter_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
|
|
</svg>
|
|
</.link>
|
|
<.link
|
|
:if={product_review.video.content_metrics.twitch_views > 0}
|
|
href={product_review.video.content_metrics.twitch_stream_url}
|
|
class="ml-2 flex items-center gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.twitch_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-twitch"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 5v11a1 1 0 0 0 1 1h2v4l4 -4h5.584c.266 0 .52 -.105 .707 -.293l2.415 -2.414c.187 -.188 .293 -.442 .293 -.708v-8.585a1 1 0 0 0 -1 -1h-14a1 1 0 0 0 -1 1z" /><path d="M16 8l0 4" /><path d="M12 8l0 4" />
|
|
</svg>
|
|
</.link>
|
|
<.link
|
|
:if={product_review.video.content_metrics.youtube_views > 0}
|
|
href={product_review.video.content_metrics.youtube_video_url}
|
|
class="ml-2 flex items-center gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.youtube_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-youtube"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" /><path d="M10 9l5 3l-5 3z" />
|
|
</svg>
|
|
</.link>
|
|
</div>
|
|
|
|
<div class="mt-2 sm:hidden flex items-center">
|
|
<div class="font-semibold">Airtime:</div>
|
|
<div class="ml-2">
|
|
<%= format_duration(product_review.clip_to - product_review.clip_from) %>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="hidden lg:table-cell p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<.link
|
|
:if={product_review.video.content_metrics.twitter_views > 0}
|
|
href={product_review.video.content_metrics.twitter_video_url}
|
|
class="flex items-center justify-end gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.twitter_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
|
|
</svg>
|
|
</.link>
|
|
</td>
|
|
<td class="hidden lg:table-cell p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<.link
|
|
:if={product_review.video.content_metrics.twitch_views > 0}
|
|
href={product_review.video.content_metrics.twitch_stream_url}
|
|
class="flex items-center justify-end gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.twitch_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-twitch"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 5v11a1 1 0 0 0 1 1h2v4l4 -4h5.584c.266 0 .52 -.105 .707 -.293l2.415 -2.414c.187 -.188 .293 -.442 .293 -.708v-8.585a1 1 0 0 0 -1 -1h-14a1 1 0 0 0 -1 1z" /><path d="M16 8l0 4" /><path d="M12 8l0 4" />
|
|
</svg>
|
|
</.link>
|
|
</td>
|
|
<td class="hidden lg:table-cell p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<.link
|
|
:if={product_review.video.content_metrics.youtube_views > 0}
|
|
href={product_review.video.content_metrics.youtube_video_url}
|
|
class="flex items-center justify-end gap-2"
|
|
>
|
|
<%= format_number(product_review.video.content_metrics.youtube_views) %>
|
|
<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"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-youtube"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" /><path d="M10 9l5 3l-5 3z" />
|
|
</svg>
|
|
</.link>
|
|
</td>
|
|
<td class="hidden sm:table-cell p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right">
|
|
<%= format_duration(product_review.clip_to - product_review.clip_from) %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-7xl px-4">
|
|
<div class="mx-auto mt-16 max-w-2xl rounded-3xl bg-white/5 ring-2 ring-purple-500 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
|
|
<div class="p-8 sm:p-10 lg:flex-auto">
|
|
<h3 class="text-3xl font-bold tracking-tight text-white">
|
|
Become an Algora TV Partner
|
|
</h3>
|
|
<p class="mt-6 text-lg leading-7 text-gray-200">
|
|
We only partner with 5 devtool companies every month
|
|
</p>
|
|
<div class="mt-10 flex items-center gap-x-4">
|
|
<h4 class="flex-none text-base font-semibold leading-6 text-indigo-300">
|
|
What's included
|
|
</h4>
|
|
<div class="h-px flex-auto bg-indigo-400/40"></div>
|
|
</div>
|
|
<ul
|
|
role="list"
|
|
class="mt-8 grid grid-cols-1 gap-4 text-base leading-6 text-gray-200 sm:grid-cols-2 sm:gap-6"
|
|
>
|
|
<li class="flex gap-x-3">
|
|
<svg
|
|
class="h-6 w-5 flex-none text-purple-300"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
5 streamer airtime
|
|
</li>
|
|
<li class="flex gap-x-3">
|
|
<svg
|
|
class="h-6 w-5 flex-none text-purple-300"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
50 ad appearances
|
|
</li>
|
|
<li class="flex gap-x-3">
|
|
<svg
|
|
class="h-6 w-5 flex-none text-purple-300"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
5 live reactions
|
|
</li>
|
|
<li class="flex gap-x-3">
|
|
<svg
|
|
class="h-6 w-5 flex-none text-purple-300"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
5 weeks completion
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0 h-full">
|
|
<div class="rounded-2xl bg-gray-900/50 py-10 text-center ring-1 ring-inset ring-white/5 lg:flex lg:flex-col lg:justify-center lg:py-28">
|
|
<div class="mx-auto max-w-xs px-8">
|
|
<p class="text-xl font-semibold text-gray-300">Get started now</p>
|
|
<.link
|
|
href="https://cal.com/ioannisflo"
|
|
class="mt-6 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-lg font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>
|
|
Launch campaign
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-7xl px-4">
|
|
<div class="mx-auto max-w-2xl sm:max-w-5xl">
|
|
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl text-center">
|
|
Get your product in front of millions
|
|
</h2>
|
|
<p class="mt-2 text-lg leading-8 text-gray-300 text-center">
|
|
Reach a highly engaged, tech-focused audience across multiple platforms
|
|
</p>
|
|
<div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
|
|
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
|
|
<div class="relative aspect-video lg:w-[30rem] lg:shrink-0">
|
|
<img
|
|
src={~p"/images/in-video-ad.png"}
|
|
alt=""
|
|
class="absolute inset-0 h-full w-full rounded-sm bg-gray-900 object-cover"
|
|
/>
|
|
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-50/10"></div>
|
|
</div>
|
|
<div>
|
|
<div class="relative max-w-md">
|
|
<h3 class="mt-3 text-2xl font-semibold leading-6 text-white">
|
|
<span class="absolute inset-0"></span> In-video ads
|
|
</h3>
|
|
<p class="mt-5 text-lg leading-6 text-gray-200">
|
|
Get your message across during live streams. Simple, effective, and memorable.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
|
|
<div class="relative aspect-video lg:w-[30rem] lg:shrink-0">
|
|
<img
|
|
src="https://fly.storage.tigris.dev/algora/blurbs/4c519741-476c-4b74-ad50-fa72c2bddb1b.png"
|
|
alt=""
|
|
class="absolute inset-0 h-full w-full rounded-sm bg-gray-900 object-cover"
|
|
/>
|
|
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-50/10"></div>
|
|
</div>
|
|
<div>
|
|
<div class="relative max-w-md">
|
|
<h3 class="mt-3 text-2xl font-semibold leading-6 text-white">
|
|
<span class="absolute inset-0"></span> Live reactions
|
|
</h3>
|
|
<p class="mt-5 text-lg leading-6 text-gray-200">
|
|
Watch tech streamers try your product live. Real reactions, real engagement.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
|
|
<div class="relative aspect-video lg:w-[30rem] lg:shrink-0">
|
|
<img
|
|
src={~p"/images/sponsored-stream.png"}
|
|
alt=""
|
|
class="absolute inset-0 h-full w-full rounded-sm bg-gray-900 object-cover"
|
|
/>
|
|
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-50/10"></div>
|
|
</div>
|
|
<div>
|
|
<div class="relative max-w-md">
|
|
<h3 class="mt-3 text-2xl font-semibold leading-6 text-white">
|
|
<span class="absolute inset-0"></span> Sponsored streams
|
|
</h3>
|
|
<p class="mt-5 text-lg leading-6 text-gray-200">
|
|
Full-length streams showcasing and building with your product. Reach millions across Twitch, YouTube, and X.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="isolate overflow-hidden px-4">
|
|
<div class="relative mx-auto max-w-2xl py-12 lg:max-w-5xl">
|
|
<figure class="grid grid-cols-1 items-center gap-x-6 gap-y-4 lg:gap-x-8">
|
|
<div class="relative col-span-2 lg:col-start-1 lg:row-start-2">
|
|
<svg
|
|
viewBox="0 0 162 128"
|
|
fill="none"
|
|
aria-hidden="true"
|
|
class="absolute -top-12 left-0 -z-10 h-32 stroke-gray-100/10"
|
|
>
|
|
<path
|
|
id="b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb"
|
|
d="M65.5697 118.507L65.8918 118.89C68.9503 116.314 71.367 113.253 73.1386 109.71C74.9162 106.155 75.8027 102.28 75.8027 98.0919C75.8027 94.237 75.16 90.6155 73.8708 87.2314C72.5851 83.8565 70.8137 80.9533 68.553 78.5292C66.4529 76.1079 63.9476 74.2482 61.0407 72.9536C58.2795 71.4949 55.276 70.767 52.0386 70.767C48.9935 70.767 46.4686 71.1668 44.4872 71.9924L44.4799 71.9955L44.4726 71.9988C42.7101 72.7999 41.1035 73.6831 39.6544 74.6492C38.2407 75.5916 36.8279 76.455 35.4159 77.2394L35.4047 77.2457L35.3938 77.2525C34.2318 77.9787 32.6713 78.3634 30.6736 78.3634C29.0405 78.3634 27.5131 77.2868 26.1274 74.8257C24.7483 72.2185 24.0519 69.2166 24.0519 65.8071C24.0519 60.0311 25.3782 54.4081 28.0373 48.9335C30.703 43.4454 34.3114 38.345 38.8667 33.6325C43.5812 28.761 49.0045 24.5159 55.1389 20.8979C60.1667 18.0071 65.4966 15.6179 71.1291 13.7305C73.8626 12.8145 75.8027 10.2968 75.8027 7.38572C75.8027 3.6497 72.6341 0.62247 68.8814 1.1527C61.1635 2.2432 53.7398 4.41426 46.6119 7.66522C37.5369 11.6459 29.5729 17.0612 22.7236 23.9105C16.0322 30.6019 10.618 38.4859 6.47981 47.558L6.47976 47.558L6.47682 47.5647C2.4901 56.6544 0.5 66.6148 0.5 77.4391C0.5 84.2996 1.61702 90.7679 3.85425 96.8404L3.8558 96.8445C6.08991 102.749 9.12394 108.02 12.959 112.654L12.959 112.654L12.9646 112.661C16.8027 117.138 21.2829 120.739 26.4034 123.459L26.4033 123.459L26.4144 123.465C31.5505 126.033 37.0873 127.316 43.0178 127.316C47.5035 127.316 51.6783 126.595 55.5376 125.148L55.5376 125.148L55.5477 125.144C59.5516 123.542 63.0052 121.456 65.9019 118.881L65.5697 118.507Z"
|
|
/>
|
|
<use href="#b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" x="86" />
|
|
</svg>
|
|
<blockquote class="text-xl font-semibold leading-8 text-white sm:text-3xl sm:leading-9">
|
|
<p>
|
|
Every time Tigris partnered with Algora for live media & distribution we saw more developers try Tigris and experienced increased inbound from prospective customers.
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
<div class="col-end-1 w-16 lg:row-span-4 lg:w-56">
|
|
<img
|
|
class="rounded-xl lg:rounded-3xl w-full h-full"
|
|
src="https://avatars.githubusercontent.com/u/1632658?v=4"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<figcaption class="text-lg sm:text-2xl lg:col-start-1 lg:row-start-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="font-semibold text-white">Ovais Tariq</div>
|
|
<div class="text-gray-300">/</div>
|
|
<div class="text-[#7ceec0]">Co-Founder & CEO at Tigris Data</div>
|
|
</div>
|
|
<.link
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="mt-2 flex h-full flex-1 text-white no-underline hover:no-underline"
|
|
href="https://tigrisdata.com"
|
|
>
|
|
<img
|
|
src="https://assets-global.website-files.com/657988158c7fb30f4d9ef37b/657990b61fd3a5d674cf2298_tigris-logo.svg"
|
|
alt="Tigris"
|
|
class="h-8 w-auto"
|
|
/>
|
|
</.link>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<footer aria-labelledby="footer-heading" class="relative">
|
|
<h2 id="footer-heading" class="sr-only">Footer</h2>
|
|
<div class="mx-auto max-w-7xl px-6 pb-12 pt-4 lg:px-8">
|
|
<div class="border-t border-white/10 pt-12 md:flex md:items-center md:justify-between">
|
|
<div class="flex space-x-6 md:order-2">
|
|
<a href="https://twitter.com/algoraio" class="text-gray-500 hover:text-gray-400">
|
|
<span class="sr-only">X</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="https://github.com/algora-io/tv" class="text-gray-500 hover:text-gray-400">
|
|
<span class="sr-only">GitHub</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
fill-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"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://www.youtube.com/@algora-io" class="text-gray-500 hover:text-gray-400">
|
|
<span class="sr-only">YouTube</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-8 md:mt-0 md:order-1">
|
|
<.logo />
|
|
<p class="mt-2 text-lg leading-5 text-gray-200 tracking-tight">
|
|
We work with elite tech startups to provide elite advertising.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|