Skip to content

Commit

Permalink
Setup basic hero area
Browse files Browse the repository at this point in the history
  • Loading branch information
@zacksiri
zacksiri committed Aug 20, 2024
1 parent 1ae1755 commit 6fe3f48
Show file tree
Hide file tree
Showing 2 changed files with 277 additions and 4 deletions.
4 changes: 1 addition & 3 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ const { title, description, ogImage, noindex } = Astro.props;
{ ["scroll-animation"]: baseConfig.scrollAnimations },
]}
>
<main>
<slot />
</main>
<slot />
</body>
</html>
277 changes: 276 additions & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
import Layout from "../layouts/Layout.astro";
import { baseConfig } from "../config/base";
const SEO = {
title: "OpsMaru | Toolkit for monetizing your web application.",
description:
Expand All @@ -9,5 +11,278 @@ const SEO = {
---

<Layout>
<h1>Astro</h1>
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src={baseConfig.logo.src}
alt={baseConfig.logo.alt}
/>
</a>
</div>
<div class="flex lg:hidden">
<button
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm font-semibold leading-6 text-gray-900"
>Product</a
>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900"
>Features</a
>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm font-semibold leading-6 text-gray-900"
>Log in <span aria-hidden="true">&rarr;</span></a
>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div class="lg:hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-50"></div>
<div
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="relative isolate">
<svg
class="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
aria-hidden="true"
>
<defs>
<pattern
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
width="200"
height="200"
x="50%"
y="-1"
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none"></path>
</pattern>
</defs>
<svg x="50%" y="-1" class="overflow-visible fill-gray-50">
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"></path>
</svg>
<rect
width="100%"
height="100%"
stroke-width="0"
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"></rect>
</svg>
<div
class="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
aria-hidden="true"
>
<div
class="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="clip-path: polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)"
>
</div>
</div>
<div class="overflow-hidden">
<div
class="mx-auto max-w-7xl px-6 pb-32 pt-36 sm:pt-60 lg:px-8 lg:pt-32"
>
<div
class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center"
>
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1
class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
>
Monetize your web apps
</h1>
<p
class="mt-6 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-none"
>
Provide one-click install experience for your web apps. You've
got stargazers on your open-source project don't let it go to
waste. Convert those stargazers into customers. We give you
the tools to saasify your web apps.
</p>
<div class="mt-10 flex items-center gap-x-6">
<a
href="#"
class="rounded-md bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
>Get started</a
>
<a
href="#"
class="text-sm font-semibold leading-6 text-gray-900"
>Live demo <span aria-hidden="true">→</span></a
>
</div>
</div>
<div
class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0"
>
<div
class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80"
>
<div class="relative">
<img
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
alt=""
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
>
</div>
</div>
</div>
<div
class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36"
>
<div class="relative">
<img
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
alt=""
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
>
</div>
</div>
<div class="relative">
<img
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
alt=""
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
>
</div>
</div>
</div>
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div class="relative">
<img
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
alt=""
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
>
</div>
</div>
<div class="relative">
<img
src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
alt=""
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</Layout>

0 comments on commit 6fe3f48

Please sign in to comment.