<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page</title>
<style>
html {
scroll-behavior: smooth;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
orange: "#f95559",
light: "#989797",
background: "#111112",
neutral: "#e8e8e8",
},
},
},
},
};
</script>
</head>
<body>
<nav class="bg-primary-background py-4 md:px-8 lg:px-10">
<div
class="mx-auto flex w-full flex-row max-w-screen-xl items-center justify-between relative"
>
<a
href="/"
class="text-xl font-bold text-primary-orange md:text-2xl lg:text-3xl pl-4 md:pl-0"
>
LOGO
</a>
<button
id="menu-toggle"
class="block md:hidden text-primary-light focus:outline-none pr-4"
>
<svg
id="menu-open-icon"
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg
id="menu-close-icon"
xmlns="http://www.w3.org/2000/svg"
class="hidden h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<div
id="menu"
class="absolute left-0 top-12 z-50 hidden w-full flex-col bg-primary-background px-4 py-4 md:static md:flex md:flex-row md:items-center md:justify-end gap-6"
>
<a
href="/#home"
class="text-primary-light transition-colors duration-300 hover:text-white max-w-max"
>Home</a
>
<a
href="/#about"
class="text-primary-light transition-colors duration-300 hover:text-white max-w-max"
>About</a
>
<a
href="#contact"
class="text-primary-light transition-colors duration-300 hover:text-white max-w-max"
>Contact</a
>
</div>
</div>
</nav>
<div class="bg-black px-4 py-6 md:px-8 md:py-8 lg:px-10 lg:py-10">
<div class="mx-auto max-w-screen-xl">
<!-- Hero Section -->
<section
class="grid grid-cols-1 gap-4 pb-10 md:gap-8 lg:grid-cols-2 lg:gap-10"
>
<div class="flex flex-col gap-4">
<h1
class="text-3xl font-semibold leading-tight text-primary-neutral md:text-4xl lg:text-5xl lg:leading-tight"
>
Get Your Website Complete With
<a
href="https://www.jamstackers.com"
target="_blank"
class="text-primary-orange hover:text-primary-light"
>Jamstackers.</a
>
</h1>
<a
href="#about"
type="button"
class="max-w-max bg-primary-light px-6 py-3 text-xl text-primary-background hover:bg-primary-orange hover:text-primary-neutral rounded-lg"
>Explore More</a
>
</div>
<img
src="https://dummyimage.com/600x200"
alt="hero_img"
class="h-60 w-full object-cover object-center"
/>
</section>
<!-- About Section -->
<section
class="grid grid-cols-1 items-center gap-4 py-10 md:gap-8 lg:grid-cols-2 lg:gap-10"
id="about"
>
<img
src="https://dummyimage.com/800x300"
alt="hero_img"
class="h-80 w-full object-cover object-center"
/>
<div class="order-first flex flex-col gap-2 lg:order-none">
<h2
class="text-2xl font-semibold text-primary-neutral md:text-3xl lg:text-4xl"
>
Our Mission & Vision
</h2>
<p class="text-primary-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
impedit autem, commodi quae facere pariatur. Quia tempore dolorem
repudiandae, id provident sequi amet hic, at cupiditate iste
corrupti minima reiciendis?
</p>
<p class="text-primary-light">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni
nam aut, fuga animi provident consequatur ab quis. Velit aliquid,
laboriosam, id labore rem consectetur iste iure voluptate, eaque
nihil ducimus.
</p>
<p class="text-primary-light">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni
nam aut, fuga animi provident consequatur ab quis. Velit aliquid,
laboriosam, id labore rem consectetur iste iure voluptate, eaque
nihil ducimus.
</p>
</div>
</section>
<!-- Features section -->
<section class="flex flex-col items-center justify-center gap-4 py-10">
<h2
class="text-2xl font-semibold text-primary-neutral md:text-3xl lg:text-4xl"
>
Our Features
</h2>
<div
class="grid grid-cols-1 items-start gap-10 pt-8 md:grid-cols-2 lg:grid-cols-4"
>
<div class="flex flex-col items-center justify-center gap-3">
<img
src="https://placehold.co/200x200"
alt="placeholder_image"
class="h-full w-full rounded-lg"
/>
<h3 class="text-lg font-medium text-primary-orange md:text-xl">
Free Components
</h3>
<p class="max-w-sm text-center text-primary-light">
Integrate jamstacker's components seamlessly, free and easily in
your website.
</p>
</div>
<div class="flex flex-col items-center justify-center gap-3">
<img
src="https://placehold.co/200x200"
alt="placeholder_image"
class="h-full w-full rounded-lg"
/>
<h3 class="text-lg font-medium text-primary-orange md:text-xl">
Landing Pages
</h3>
<p class="max-w-sm text-center text-primary-light">
Get the landing page and edit as per your requirements without
any framework knowledge.
</p>
</div>
<div class="flex flex-col items-center justify-center gap-3">
<img
src="https://placehold.co/200x200"
alt="placeholder_image"
class="w-full rounded-lg h-full"
/>
<h3 class="text-lg font-medium text-primary-orange md:text-xl">
Sketch AI
</h3>
<p class="max-w-sm text-center text-primary-light">
Provide your sketch to our embedded AI, it will generate code
for your website.
</p>
</div>
<div class="flex flex-col items-center justify-center gap-3">
<img
src="https://placehold.co/200x200"
alt="placeholder_image"
class="h-full w-full rounded-lg"
/>
<h3 class="text-lg font-medium text-primary-orange md:text-xl">
Premium Templates
</h3>
<p class="max-w-sm text-center text-primary-light">
You can get fully fledged template for variety of your business.
Also you can customize according to your need.
</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section
class="flex flex-col items-center justify-center gap-4 py-10"
id="contact"
>
<h2
class="text-2xl font-semibold text-primary-neutral md:text-3xl lg:text-4xl"
>
Get in Touch
</h2>
<div class="max-w-screen-sm mx-auto flex flex-col gap-3 w-full">
<form action="#" class="w-full flex flex-col gap-5">
<div class="flex flex-col gap-2 min-w-max">
<label
class="text-primary-light text-lg font-medium"
for="full_name"
>
Your Name:</label
>
<input
type="text"
required
name="full_name"
id="full_name"
class="min-w-max px-5 py-3 rounded-lg text-primary-background outline-none border-2 focus:border-primary-orange"
/>
</div>
<div class="flex flex-col gap-2 min-w-max">
<label
class="text-primary-light text-lg font-medium"
for="email_id"
>
Your Email:</label
>
<input
type="email"
required
name="email_id"
id="email_id"
class="min-w-max px-5 py-3 rounded-lg text-primary-background outline-none border-2 focus:border-primary-orange"
/>
</div>
<div class="flex flex-col gap-2 min-w-max">
<label
class="text-primary-light text-lg font-medium"
for="phone_number"
>
Your Phone Number:</label
>
<input
type="number"
required
name="phone_number"
id="phone_number"
class="min-w-max px-5 py-3 rounded-lg text-primary-background outline-none border-2 focus:border-primary-orange"
/>
</div>
<div class="flex flex-col gap-2 min-w-max">
<label
class="text-primary-light text-lg font-medium"
for="subject"
>
Subject:</label
>
<input
type="text"
required
name="subject"
id="subject"
class="min-w-max px-5 py-3 rounded-lg text-primary-background outline-none border-2 focus:border-primary-orange"
/>
</div>
<div class="flex flex-col gap-2 min-w-max">
<label
class="text-primary-light text-lg font-medium"
for="message"
>
Your Message:</label
>
<textarea
required
rows="4"
id="message"
name="message"
class="min-w-max px-5 py-3 rounded-lg text-primary-background outline-none border-2 focus:border-primary-orange"
></textarea>
</div>
<button
type="submit"
class="hover:bg-primary-light px-6 py-3 text-xl text-primary-background bg-primary-orange hover:text-primary-neutral duration-300 transition-colors rounded-lg"
>
Submit
</button>
</form>
</div>
</section>
<!-- Footer Section -->
<footer
class="border-t border-primary-neutral pt-5 inline-flex gap-2 w-full items-center justify-center"
>
<p class="text-primary-light">©</p>
<p id="year" class="text-primary-light"></p>
<p class="text-primary-light">All Rights Reserved.</p>
</footer>
</div>
</div>
<script>
const year = new Date().getFullYear();
document.getElementById("year").textContent = ` ${year}`;
const menuToggle = document.getElementById("menu-toggle");
const menu = document.getElementById("menu");
const openIcon = document.getElementById("menu-open-icon");
const closeIcon = document.getElementById("menu-close-icon");
menuToggle.addEventListener("click", () => {
menu.classList.toggle("hidden");
menu.classList.toggle("flex");
openIcon.classList.toggle("hidden");
closeIcon.classList.toggle("hidden");
});
</script>
</body>
</html>