<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Micro Tube</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modal-video@2.4.8/css/modal-video.css">
<script src="https://cdn.jsdelivr.net/npm/modal-video@2.4.8/js/modal-video.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Outfit', sans-serif;
}
html {
overflow-y: scroll;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/pinecone-router@4.x.x/dist/router.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-white text-foreground" x-data="main">
<section x-data="{ showMenu: false }" class="relative bg-slate-900 overflow-hidden">
<nav class="relative py-8 px-4 lg:px-10 z-10">
<div class="flex justify-between items-center">
<a href="/" class="text-xl text-white font-semibold">
<i class="fa-brands fa-html5 text-4xl"></i>
</a>
<button @click="showMenu = true" class="text-white text-xl">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</nav>
<div class="relative z-10 container px-4 mx-auto pb-40">
<div class="max-w-4xl pt-20">
<p class="max-w-md text-lg text-white">Subscribe to our manually curated videos and get the latest in
your inbox every week.</p>
<h2 class="mt-8 mb-8 text-5xl lg:text-7xl text-white font-bold">Curated Videos for the Curious Mind</h2>
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"
novalidate class="flex flex-wrap lg:flex-nowrap max-w-md" action="/">
<input class="mb-2 lg:mb-0 w-full lg:w-2/3 py-4 pl-4 text-sm border" type="email" name="EMAIL"
id="mce-EMAIL" placeholder="Type your e-mail" required />
<button type="submit"
class="w-full lg:w-auto py-5 px-8 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400">Subscribe</button>
</form>
</div>
</div>
<div x-show="showMenu" class="navbar-menu fixed top-0 right-0 bottom-0 w-5/6 max-w-sm z-50">
<div class="navbar-backdrop fixed inset-0 bg-blue-800 opacity-70" @click="showMenu = false"></div>
<nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
<div class="flex items-center mt-2 mb-16 pr-6">
<button @click="showMenu = false"
class="ml-auto mr-4 text-xl text-gray-800 font-semibold leading-none">
<i class="fa-solid fa-bars"></i>
</button>
</div>
<ul>
<li class="mb-1"><a href="/"
class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded"
@click="showMenu = false">Home</a></li>
<li class="mb-1"><a href="/about"
class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded"
@click="showMenu = false">About</a></li>
<li class="mb-1"><a href="/company"
class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded"
@click="showMenu = false">Company</a></li>
<li class="mb-1"><a href="/privacy"
class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded"
@click="showMenu = false">Privacy</a></li>
<li class="mb-1"><a href="/terms"
class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded"
@click="showMenu = false">Terms</a></li>
</ul>
<div class="mt-auto px-10">
<p class="mt-6 mb-4 text-sm text-center text-blue-400">
<span>© <span x-text="new Date().getFullYear()"></span> All rights reserved © JamStackers</span>
</p>
</div>
</nav>
</div>
</section>
<div class=" mx-auto container max-w-screen-lg ">
<div class="w-full flex min-h-screen">
<div class="relative py-20">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4 -mb-20">
<template x-for="(item, index) in items" :key="index">
<div class="cursor-pointer w-full lg:w-1/3 px-4 mb-20 js-modal-btn"
:data-video-id="item.embed_id">
<div>
<div class="relative flex mb-8 overflow-hidden">
<a href="#" class="aspect-w-16 aspect-h-9 w-full">
<img class="w-full h-full object-contain" :src="item.thumbnail" alt="" />
</a>
<span
class="absolute bottom-0 right-0 rounded-t-xl font-bold pl-8 pr-8 py-3 -mr-2 text-xs text-gray-50 bg-slate-900 clip-path-left-small"
x-text="item.length"></span>
</div>
<h2 class="mb-4 text-2xl font-semibold font-heading text-slate-900"
x-text="item.title"></h2>
<p class="mb-3 text-base text-gray-500 leading-loose" x-text="item.description"></p>
<template x-for="tag in item.tags">
<div class="mr-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
x-text="tag"></div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<section class="py-24 bg-slate-900">
<div class="container mx-auto px-4 mb-10">
<div class="max-w-2xl mx-auto text-center">
<a class="inline-block mb-10 text-white text-lg font-semibold" href="#">
<i class="fa-brands fa-html5 text-5xl"></i>
</a>
<ul class="mb-8 flex flex-wrap space-x-10 items-center justify-center text-sm">
<li class="mb-2 md:mb-0"><a class="text-white hover:text-blue-100" to="/about">About</a></li>
<li class="mb-2 md:mb-0"><a class="text-white hover:text-blue-100" to="/company">Company</a></li>
<li class="mb-2 md:mb-0"><a class="text-white hover:text-blue-100" to="/privacy">Privacy</a></li>
<li class="mb-2 md:mb-0"><a class="text-white hover:text-blue-100" to="/terms">Terms</a></li>
</ul>
<div class="flex justify-center text-white">
<a class="inline-flex justify-center items-center w-12 h-12 mr-4 bg-blue-900" href="#">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a class="inline-flex justify-center items-center w-12 h-12 mr-4 bg-blue-900" href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="inline-flex justify-center items-center w-12 h-12 mr-4 bg-blue-900" href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</div>
<p class="text-center text-sm text-blue-300 pt-8 px-4 border-t border-slate-800">All rights reserved ©
jamstackers <span x-text="new Date().getFullYear()"></span></p>
</section>
<script>
function main() {
return {
items: [
{
"description": "Directed by J.A. Bayona, the trailer highlights the rescue mission to save the dinosaurs from an erupting volcano on Isla Nublar, featuring both thrilling and emotional moments.",
"embed_id": "fb5ELWi-ekk",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/fb5ELWi-ekk/maxresdefault.jpg",
"title": "Jurassic World Dominion (2022)",
"tags": ['movie', 'trailer']
},
{
"description": "Directed by J.A. Bayona, the trailer highlights the rescue mission to save the dinosaurs from an erupting volcano on Isla Nublar, featuring both thrilling and emotional moments.",
"embed_id": "vn9mMeWcgoM",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/vn9mMeWcgoM/maxresdefault.jpg",
"title": "Jurassic World: Fallen Kingdom (2018)",
"tags": ['dinosaurs']
},
{
"description": "Directed by Colin Trevorrow, this film revitalized the franchise with a new theme park, Jurassic World. The trailer introduces the Indominus Rex, a genetically engineered dinosaur, and the chaos that ensues.",
"embed_id": "RFinNxS5KN4",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/RFinNxS5KN4/maxresdefault.jpg",
"title": "Jurassic World (2015)",
"tags": ['jurassic']
},
{
"description": "Directed by Joe Johnston, this film brings back Sam Neill as Dr. Alan Grant. The trailer showcases new dinosaurs and the perilous adventures on Isla Sorna.",
"embed_id": "cVA4BO2v7zs",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/cVA4BO2v7zs/maxresdefault.jpg",
"title": "Jurassic Park III (2001)",
"tags": ['jurassic', 'dinosaurs']
},
{
"description": "The sequel to Jurassic Park, also directed by Steven Spielberg. The trailer teases the return to the dinosaur-inhabited island, featuring more action and suspense.",
"embed_id": "RxrvaneULkE",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/RxrvaneULkE/maxresdefault.jpg",
"title": "The Lost World: Jurassic Park (1997)",
"tags": ['jurassic', 'dinosaurs']
},
{
"description": "Directed by Steven Spielberg, this is the original film that started the franchise. The trailer highlights the groundbreaking visual effects and the thrilling dinosaur encounters on Isla Nublar.",
"embed_id": "QWBKEmWWL38",
"length": "2 mins",
"provider": "youtube",
"thumbnail": "https://img.youtube.com/vi/QWBKEmWWL38/maxresdefault.jpg",
"title": "Jurassic Park (1993)",
"tags": ['jurassic', 'dinosaurs']
},
],
async init() {
setTimeout(function () {
new ModalVideo('.js-modal-btn');
}, 1000)
}
}
}
</script>
</body>
</html>