<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font-awesome icons cdn link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- tailwind css cdn -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
keyframes: {
fadeInUp: {
"0%": { opacity: "0", transform: "translateY(25px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
fadeIn: {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
fadeOut: {
"0%": { opacity: "1" },
"100%": { opacity: "0" },
},
topRight: {
"0%": { transform: "translate(0px, 0px)" },
"50%": { transform: "translate(20px, -20px)" },
"100%": { transform: "translate(0px, 0px)" },
},
right: {
"0%": { transform: "translate(0px, 0px)" },
"50%": { transform: "translate(20px, 0px)" },
"100%": { transform: "translate(0px, 0px)" },
},
left: {
"0%": { transform: "translate(0px, 0px)" },
"50%": { transform: "translate(-20px, 0px)" },
"100%": { transform: "translate(0px, 0px)" },
},
bottomRight: {
"0%": { transform: "translate(0px, 0px)" },
"50%": { transform: "translate(20px, 20px)" },
"100%": { transform: "translate(0px, 0px)" },
},
randomMove: {
"0%": { transform: "translate(0px, 0px)" },
"25%": { transform: "translate(16px, 0px)" },
"50%": { transform: "translate(16px, 16px)" },
"100%": { transform: "translate(0px, 0px)" },
},
randomMoveLeft: {
"0%": { transform: "translate(0px, 0px)" },
"25%": { transform: "translate(-16px, 0px)" },
"50%": { transform: "translate(-16px, 16px)" },
"75%": { transform: "translate(0px, 16px)" },
"100%": { transform: "translate(0px, 0px)" },
},
randomMoveRight: {
"0%": { transform: "translate(0px, 0px)" },
"25%": { transform: "translate(16px, 0px)" },
"50%": { transform: "translate(16px, -16px)" },
"75%": { transform: "translate(0px, -16px)" },
"100%": { transform: "translate(0px, 0px)" },
},
},
animation: {
randomMove: "randomMove 2s infinite ease-in-out",
randomMoveLeft: "randomMoveLeft 2.5s infinite ease-in-out",
randomMoveRight: "randomMoveRight 2s infinite ease-in-out",
fadeIn: "fadeIn 1.5s ease-in",
fadeOut: "fadeOut 1.5s ease-out",
fadeInUp: "fadeInUp .8s ease-in",
topRight: "topRight 2s infinite ease-in-out",
right: "right 2s infinite ease-in-out",
left: "left 2s infinite ease-in-out",
bottomRight: "bottomRight 2s infinite ease-in-out",
},
colors: {
cat: {
red: {
10: "#da373d",
},
blue: {
10: "#1e90ff",
},
gray: { 10: "#fafbfc" },
},
},
},
},
};
</script>
<!-- alpine js -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("subscribeForm", () => ({
submitted: false,
loading: false,
submitForm() {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.submitted = true;
}, 3000);
},
}));
});
</script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<!-- navigation -->
<nav
x-data="{ open: false }"
class="sticky left-0 top-0 w-full border-b border-b-white/5 bg-white/80 px-4 py-3 backdrop-blur-md z-50"
>
<div class="mx-auto max-w-screen-xl relative">
<div class="flex items-center justify-between">
<a href="#home" class="text-2xl font-black">DIGITAL.</a>
<ul class="hidden lg:flex inset-0 items-center justify-between">
<li>
<a
href="#about"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>About</a
>
</li>
<li>
<a
href="#blog"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Blog</a
>
</li>
<li>
<a
href="#contact"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Contact</a
>
</li>
<li>
<a
href="#pricing"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Pricing</a
>
</li>
<li>
<a
href="#features"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Features</a
>
</li>
<li>
<a
href="#team"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Team</a
>
</li>
</ul>
<div class="hidden lg:flex items-center gap-4">
<a
class="text-lg items-center rounded-md border px-2.5 py-1.5 font-sans font-normal bg-transparent group hover:bg-gray-100"
href="https//www.jamstackers.com"
target="_blank"
>
<i
class="fa-regular fa-star group-hover:text-blue-600 text-xl"
></i>
<span class="text-black group-hover:text-blue-600 ms-2"
>Star</span
>
</a>
<button
type="button"
class="rounded-md bg-gray-500 px-4 py-2 font-medium text-white transition-all duration-300 ease-in-out hover:bg-gray-400"
>
Download
</button>
</div>
<!-- Toggle button -->
<button
@click="open = !open"
class="lg:hidden h-6 w-6 text-black"
type="button"
>
<template x-if="!open">
<i class="fa-solid fa-bars"></i>
</template>
<template x-if="open">
<i class="fa-solid fa-x"></i>
</template>
</button>
</div>
</div>
<!-- Mobile menu -->
<div
x-show="open"
:class="{ 'translate-y-12 ease-in-out duration-500 transition-all': open, 'translate-y-96 ease-in-out duration-500 transition-all': !open }"
class="lg:hidden absolute top-0 left-0 w-full bg-white/95 px-4 py-3 backdrop-blur-md"
>
<ul class="flex flex-col w-full">
<li>
<a
href="#about"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>About</a
>
</li>
<li>
<a
href="#blog"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Blog</a
>
</li>
<li>
<a
href="#contact"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Contact</a
>
</li>
<li>
<a
href="#pricing"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Pricing</a
>
</li>
<li>
<a
href="#features"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Features</a
>
</li>
<li>
<a
href="#team"
class="px-2.5 font-sans text-xl font-medium hover:text-blue-600"
>Team</a
>
</li>
</ul>
</div>
</nav>
<!-- hero section-->
<section id="home" class="bg-slate-50/10 backdrop-blur-2xl">
<div
class="relative mx-auto max-w-screen-xl px-6 py-16 md:py-20 lg:py-32"
>
<div class="flex flex-col justify-center items-start gap-4">
<h1
class="font-sans text-5xl font-bold text-white/40 animate-fadeInUp"
>
Digital<span class="text-4xl text-purple-800 ml-2">product.</span>
</h1>
<p
class="animate-fadeInUp mt-2.5 text-start font-sans text-gray-50 text-lg lg:text-xl max-w-sm"
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
similique sed incidunt. Quasi amet vitae, voluptatem nobis repellat
</p>
<a
href="https:www.jamstackers.com/"
target="_blank"
class="animate-fadeIn font-sans font-bold text-2xl bg-orange-600 text-white hover:bg-transparent border border-orange-600 hover:border rounded-lg mt-2.5 px-4 py-3"
>
BUY NOW
</a>
<span
class="animate-fadeInUp text-white text-base lg:text-lg mt-12 md:mt-24"
>
started at price $19/months with 4.9
<i class="fa-regular fa-star fill-yellow"></i>
</span>
</div>
</div>
<div class="absolute left-0 top-0 -z-10 h-full w-full">
<img
src="https://images.pexels.com/photos/250459/pexels-photo-250459.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="hero - image"
width="1600"
height="1600"
quality="100"
class="h-full w-full object-cover object-center"
/>
</div>
</section>
<!-- body section -->
<section class="py-12 md:py-20 px-6 mx-auto max-w-screen-xl">
<div
id="home"
class="flex flex-col justify-center items-center gap-2 animate-fadeInUp"
>
<!-- github link -->
<a
class="rounded-md border px-4 py-3 flex items-center gap-1 font-sans font-normal bg-transparent group hover:bg-gray-100"
href="https//www.jamstackers.com"
target="_blank"
>
<i class="fa-brands fa-github text-black text-xl"></i>
<span class="text-black group-hover:text-blue-600 text-sm md:text-lg">
View on Github
</span></a
>
<!-- figma link -->
<a
class="rounded-md border px-4 py-3 flex items-center gap-1 font-sans font-normal bg-transparent group hover:bg-gray-100"
href="https//www.jamstackers.com"
target="_blank"
>
<i class="fa-brands fa-figma text-black text-xl"></i>
<span class="text-black group-hover:text-blue-600 text-sm md:text-lg">
Get Figma file</span
>
</a>
</div>
</section>
<!-- frequently ask question -->
<section
class="bg-essential-gray-10 border-b"
x-data="{
frequentlyAsk: [
{
id: 1,
question: 'Email and user settings',
answer: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur netsum loris fugit, sed quia magni dolores eos qui ratione sequi nesciunt, neque et quis autem velis reprehenderit ets quis velit.'
},
{
id: 2,
question: 'Import new billing system data',
answer: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur netsum loris fugit, sed quia magni dolores eos qui ratione sequi nesciunt, neque et quis autem velis reprehenderit ets quis velit.'
},
{
id: 3,
question: 'Working with integrated apps',
answer: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur netsum loris fugit, sed quia magni dolores eos qui ratione sequi nesciunt, neque et quis autem velis reprehenderit ets quis velit.'
},
{
id: 4,
question: 'Two-factor authentication',
answer: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur netsum loris fugit, sed quia magni dolores eos qui ratione sequi nesciunt, neque et quis autem velis reprehenderit ets quis velit.'
}
],
selectedId: null
}"
>
<div class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="grid grid-cols-1 md:grid-cols-2 gap-8 place-items-start h-full w-full"
>
<img
src="https://images.pexels.com/photos/7987749/pexels-photo-7987749.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="frequently ask question - image"
class="object-center object-cover h-full w-full rounded-lg animate-right"
/>
<div class="flex flex-col mt-3.5 w-full h-full animate-fadeInUp">
<h2
class="capitalize text-2xl md:text-3xl mb-5 h-full w-full font-sans font-medium"
>
Frequently Asked Questions
</h2>
<!-- Iterate over the frequentlyAsk array -->
<template x-for="item in frequentlyAsk" :key="item.id">
<div class="border-b mb-4 animate-fadeInUp">
<h5>
<button
class="text-lg md:text-xl font-sans font-medium text-black pb-2.5 pt-2 w-full text-left"
x-text="item.question"
@click="selectedId = selectedId === item.id ? null : item.id"
></button>
</h5>
<!-- Show the answer only if the item's id matches the selectedId -->
<div
class="py-2.5 text-gray-700"
x-show="selectedId === item.id"
x-text="item.answer"
></div>
</div>
</template>
</div>
</div>
</div>
</section>
<!-- our team -->
<section id="about" class="bg-essential-gray-10 border-t border-b">
<div class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12 flex flex-col justify-center items-center"
>
<h2
class="font-sans font-extrabold tracking-tight text-gray-900 text-center text-3xl mb-4 animate-fadeInUp"
>
Our Team
</h2>
<p
class="font-sans font-light text-gray-500 text-xl text-center mb-5 animate-fadeInUp"
>
Communicate with flexible tools that go where your team goes.
</p>
</div>
<div
id="team"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-screen-lg mx-auto"
>
<!-- designer -->
<div
class="flex flex-col justify-center items-center p-5 w-full h-full bg-white border shadow rounded-lg animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/7710088/pexels-photo-7710088.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="designer - image"
class="mb-2.5 rounded-full object-center object-cover mb-6 h-40 w-40"
/>
<h3
class="font-sans font-semibold text-2xl text-black text-center mb-3.5"
>
Designers
</h3>
<p
class="font-sans font-normal text-lg tracking-tight text-center mb-3.5"
>
Curabitur quam etsum lacus netsum nulat iaculis ets vitae etsum
nisle varius sed aliquam ets vitae netsum.
</p>
<a
href="#about"
class="rounded-lg text-sm text-center text-blue-600 hover:text-white font-sans font-medium border border-blue-600 hover:bg-blue-600 px-3 py-4"
>
Essentials for Designers
</a>
</div>
<!-- marketers -->
<div
class="flex flex-col justify-center items-center p-5 w-full h-full bg-white border shadow rounded-lg animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/8279811/pexels-photo-8279811.jpeg"
alt="marketers - image"
class="mb-2.5 rounded-full object-center object-cover mb-6 h-40 w-40"
/>
<h3
class="font-sans font-semibold text-2xl text-black text-center mb-3.5"
>
Marketers
</h3>
<p
class="font-sans font-normal text-lg tracking-tight text-center mb-3.5"
>
Curabitur quam etsum lacus netsum nulat iaculis ets vitae etsum
nisle varius sed aliquam ets vitae netsum.
</p>
<a
href="#about"
class="rounded-lg text-sm text-center text-blue-600 hover:text-white font-sans font-medium border border-blue-600 hover:bg-blue-600 px-3 py-4"
>
Essentials for Marketers
</a>
</div>
<!-- agencies -->
<div
class="flex flex-col justify-center items-center p-5 w-full h-full bg-white border shadow rounded-lg animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/8353797/pexels-photo-8353797.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="agencies - image"
class="mb-2.5 rounded-full object-center object-cover mb-6 h-40 w-40"
/>
<h3
class="font-sans font-semibold text-2xl text-black text-center mb-3.5"
>
Agencies
</h3>
<p
class="font-sans font-normal text-lg tracking-tight text-center mb-3.5"
>
Curabitur quam etsum lacus netsum nulat iaculis ets vitae etsum
nisle varius sed aliquam ets vitae netsum.
</p>
<a
href="#about"
class="rounded-lg text-sm text-center text-blue-600 hover:text-white font-sans font-medium border border-blue-600 hover:bg-blue-600 px-3 py-4"
>
Essentials for Agencies
</a>
</div>
</div>
</div>
</section>
<!-- pricing section -->
<section id="pricing" class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12 flex flex-col justify-center items-center"
>
<h2
class="font-sans font-extrabold tracking-tight text-gray-900 text-center text-3xl mb-4 animate-fadeInUp"
>
Our Pricing
</h2>
<p
class="font-sans font-light text-gray-500 text-xl text-center mb-5 animate-fadeInUp"
>
Here at Landwind we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center gap-10"
>
<div
class="flex flex-col w-full p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow xl:p-8 animate-fadeInUp"
>
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="font-light text-gray-500 sm:text-lg">
Best option for personal use & for your next project.
</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$19</span>
<span class="text-gray-500">/month</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
<a
class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
target="_blank"
>Get started</a
>
</div>
<div
class="flex flex-col w-full p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow xl:p-8 animate-fadeInUp"
>
<h3 class="mb-4 text-2xl font-semibold">Company</h3>
<p class="font-light text-gray-500 sm:text-lg">
Relevant for multiple users, extended & premium support.
</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$199</span>
<span class="text-gray-500">/month</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Team size:
<span class="font-semibold">10 developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Premium support:
<span class="font-semibold">24 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Free updates:
<span class="font-semibold">24 months</span></span
>
</li>
</ul>
<a
class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
target="_blank"
>Get started</a
>
</div>
<div
class="flex flex-col w-full p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow xl:p-8 animate-fadeInUp"
>
<h3 class="mb-4 text-2xl font-semibold">Enterprise</h3>
<p class="font-light text-gray-500 sm:text-lg">
Best for large scale uses and extended redistribution rights.
</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$1999</span>
<span class="text-gray-500">/month</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Team size:
<span class="font-semibold">100+ developers</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Premium support:
<span class="font-semibold">36 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<i
class="fa-solid fa-check flex-shrink-0 w-5 h-5 text-green-500"
></i>
<span
>Free updates:
<span class="font-semibold">36 months</span></span
>
</li>
</ul>
<a
class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
target="_blank"
>Get started</a
>
</div>
</div>
</section>
<!-- features -->
<section id="features" class="bg-essential-gray-10 border-t border-b">
<div class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="max-w-screen-lg mx-auto mb-8 text-center lg:mb-12 flex flex-col justify-center items-center"
>
<h2
class="font-sans font-extrabold tracking-tight text-gray-900 text-center text-3xl mb-4 animate-fadeInUp"
>
Amazing Features
</h2>
<p
class="font-sans font-light text-gray-500 text-xl text-center mb-5 animate-fadeInUp"
>
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration, by injected humour, or new
randomised words.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="flex flex-col justify-center items-center px-3.5">
<div>
<i
class="fa-solid fa-gauge text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
</div>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
Powerful Dashboard
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
<div class="flex flex-col justify-center items-center px-3.5">
<i
class="fa-solid fa-chart-column text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
User Friendly
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
<div class="flex flex-col justify-center items-center px-3.5">
<i
class="fa-solid fa-bell text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
Smart Notifications
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
<div class="flex flex-col justify-center items-center px-3.5">
<i
class="fa-solid fa-hand-holding-dollar text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
Cost Control
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
<div class="flex flex-col justify-center items-center px-3.5">
<i
class="fa-solid fa-rocket text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
Unique Features
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
<div class="flex flex-col justify-center items-center px-3.5">
<i
class="fa-brands fa-rocketchat text-blue-600 mb-2.5 text-6xl animate-fadeInUp"
></i>
<h4
class="font-sans font-medium text-2xl text-black text-center mb-2.5 animate-fadeInUp"
>
Support 24/7
</h4>
<p
class="text-lg text-gray-500 font-sans font-normal text-center mb-3.5 animate-fadeInUp"
>
Utise wisi enim minim veniam, quis et stationes ullamcorper
suscipit ets lobotis nisle consequat nihis etim.
</p>
</div>
</div>
</div>
</section>
<!-- our blog -->
<section id="blog" class="bg-essential-gray-10">
<div class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="max-w-screen-lg mx-auto mb-8 text-center lg:mb-12 flex flex-col justify-center items-center"
>
<h2
class="font-sans font-extrabold tracking-tight text-gray-900 text-center text-3xl mb-4 animate-fadeInUp"
>
Our Blog
</h2>
<p
class="font-sans font-light text-gray-500 text-xl text-center mb-5 animate-fadeInUp"
>
Latest news, tips and best practices.
</p>
</div>
<div
id="blog"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"
>
<!-- blog -->
<div
class="flex flex-col justify-center rounded-lg overflow-hidden bg-white border shadow animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/3769118/pexels-photo-3769118.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="blog - image"
class="object-cover object-center h-[240px] w-full"
/>
<div class="flex flex-col justify-center pt-1.5 px-6 mb-8">
<h3 class="my-2.5 text-xl font-sans font-medium text-center">
<a href="">The Guide To LinkedIn Ads</a>
</h3>
<p
class="font-sans font-normal text-lg text-gray-500 text-center"
>
Quis autem velis ets reprehender net etid quiste voluptate
velite esse quam nihis etsa sedit netsid varias.
</p>
</div>
</div>
<div
class="flex flex-col justify-center rounded-lg overflow-hidden bg-white border shadow animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/45718/pexels-photo-45718.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="blog - image"
class="object-cover object-center h-[240px] w-full"
/>
<div class="flex flex-col justify-center pt-1.5 px-6 mb-8">
<h3 class="my-2.5 text-xl font-sans font-medium text-center">
<a href="">Affinity Designer Quick Start</a>
</h3>
<p
class="font-sans font-normal text-lg text-gray-500 text-center"
>
Quis autem velis ets reprehender net etid quiste voluptate
velite esse quam nihis etsa sedit netsid varias.
</p>
</div>
</div>
<div
class="flex flex-col justify-center rounded-lg overflow-hidden bg-white border shadow animate-fadeInUp"
>
<img
src="https://images.pexels.com/photos/3184423/pexels-photo-3184423.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="blog - image"
class="object-cover object-center h-[240px] w-full"
/>
<div class="flex flex-col justify-center pt-1.5 px-6 mb-8">
<h3 class="my-2.5 text-xl font-sans font-medium text-center">
<a href="">Our Happy Team</a>
</h3>
<p
class="font-sans font-normal text-lg text-gray-500 text-center"
>
Quis autem velis ets reprehender net etid quiste voluptate
velite esse quam nihis etsa sedit netsid varias.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- contact -->
<section class="bg-essential-gray-10 border-t border-b">
<div class="mx-auto max-w-screen-xl px-6 py-12 md:py-20">
<div
class="grid grid-cols-1 items-center gap-10 md:grid-cols-2 h-full w-full"
>
<!-- form -->
<form
id="contact"
class="flex flex-col h-full w-full animate-fadeInUp"
>
<h4 class="mb-5 font-sans text-2xl font-medium">Get in Touch</h4>
<input
type="text"
placeholder="Full Name*"
class="mb-2.5 rounded-lg border px-4 py-3"
/>
<input
type="email"
placeholder="Email Address*"
class="mb-2.5 rounded-lg border px-4 py-3"
/>
<input
type="text"
placeholder="Phone Number*"
class="mb-2.5 rounded-lg border px-4 py-3"
/>
<textarea
class="mb-2.5 rounded-lg border px-4 py-3"
placeholder="Your Message..."
rows="6"
></textarea>
<button
type="submit"
class="rounded-lg border bg-blue-600 p-5 font-sans font-medium uppercase text-white hover:border-blue-600 hover:bg-transparent hover:text-blue-600"
>
Send message
</button>
</form>
<div class="flex flex-col h-full w-full animate-fadeInUp">
<!-- location map -->
<h4 class="mb-5 font-sans text-2xl font-medium">How to find us</h4>
<div class="rounded-lg border p-2.5 mb-5">
<img
src="https://cdn.pixabay.com/photo/2014/04/02/16/29/map-307442_1280.png"
class="object-cover object-center h-full w-full"
/>
</div>
<h5 class="mb-5 font-sans text-2xl font-medium">Head Office</h5>
<p class="mb-2 pb-2.5 group">
<i class="fa-solid fa-location-dot fill-blue-600 h-4 w-4"></i>
<a
href="https://www.google.com/map/"
target="_blank"
class="ml-1 text-lg font-sans font-normal group-hover:text-blue-600"
>
10 Oxford Street, London, UK, E1 1EC
</a>
</p>
<p class="mb-2 pb-2.5 group">
<i class="fa-solid fa-envelope fill-blue-600 h-4 w-4"></i>
<a
href="mailto:[email protected]"
class="ml-1 text-lg font-sans font-normal group-hover:text-blue-600"
>
[email protected]</a
>
</p>
<p class="mb-2 pb-2.5 group">
<i class="fa-solid fa-phone fill-blue-600 h-4 w-4"></i>
<a
href="tel:+42 525 222 212"
class="ml-1 text-lg font-sans font-normal group-hover:text-blue-600"
>
+42 525 222 212
</a>
</p>
</div>
</div>
</div>
</section>
<!-- subscribe -->
<section id="home" class="bg-blue-500 backdrop-blur-2xl">
<div
class="relative mx-auto max-w-screen-xl px-6 py-16 md:py-20 lg:py-32"
>
<div
class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12 flex flex-col justify-center items-center"
>
<h2
class="animate-fadeInUp font-sans font-extrabold tracking-tight text-white text-center text-3xl mb-4"
>
Seen enough? We are currently in the closed beta. Please enter your
email to join the waiting list.
</h2>
</div>
<div
x-data="subscribeForm"
class="w-full max-w-screen-sm mx-auto animate-fadeInUp"
>
<!-- Form -->
<form
x-show="!submitted"
@submit.prevent="submitForm"
class="flex flex-col justify-center items-center"
>
<input
type="email"
class="rounded-lg p-5 w-full font-sans font-normal"
placeholder="Enter your email..."
/>
<button
type="submit"
class="mt-2.5 text-white border border-black font-sans font-medium p-5 rounded-lg w-full duration-300 ease-in-out transition-all"
:class="loading ? 'bg-rose-600' : 'hover:bg-rose-600'"
:disabled="loading"
>
<span x-show="!loading">Subscribe</span>
<span x-show="loading">Please wait...</span>
</button>
</form>
<!-- Message -->
<p
x-show="submitted"
class="mt-4 text-gray-600 font-sans font-bold text-center bg-white rounded-lg p-10"
>
Thank you for your subscription!
</p>
</div>
</div>
</section>
<!-- footer section -->
<footer class="mx-auto max-w-screen-xl py-12 md:py-16 lg:py-20 px-">
<div
class="mx-auto max-w-screen-md flex flex-col justify-center items-center gap-6 mb-5"
>
<a
href="#home"
class="font-sans font-extrabold capitalize text-2xl animate-fadeInUp"
>DIGITAL.</a
>
<div
class="flex inset-0"
x-data="{year: new Date().getFullYear(), nextYear: new Date().getFullYear() + 1}"
>
<p class="text-sm font-sans font-light text-center animate-fadeInUp">
© <span x-text="`${year} - ${nextYear}`"></span> All Rights
Reserved.
</p>
</div>
<!-- social link logo -->
<div>
<ul class="flex justify-center mt-5 space-x-5 animate-fadeInUp">
<li>
<a class="text-gray-500 hover:text-gray-900" target="_blank">
<i class="fa-brands fa-facebook w-5 h-5"></i>
</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-900" target="_blank">
<i class="fa-brands fa-instagram w-5 h-5"></i>
</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-900" target="_blank">
<i class="fa-brands fa-square-x-twitter w-5 h-5"></i>
</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-900" target="_blank">
<i class="fa-brands fa-github w-5 h-5"></i>
</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-900" target="_blank">
<i class="fa-brands fa-dribbble w-5 h-5"></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>