Skip to content

Commit

Permalink
landing page done
Browse files Browse the repository at this point in the history
  • Loading branch information
@auspicious123
auspicious123 committed Dec 18, 2024
1 parent 2a4e9ee commit 9a65d6d
Show file tree
Hide file tree
Showing 8 changed files with 208 additions and 50 deletions.
128 changes: 80 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -855,12 +855,12 @@ <h1 class="text-6xl lg:text-9xl font-black mb-8 hero-content" style="line-height
class="w-full sm:w-1/3 rounded-xl border border-white p-6 min-h-15"
style="background: linear-gradient(to bottom, #a713bd, #5b0292)"
>
<div class="flex items-end justify-center">
<a href="https://studio.myriadflow.com/" class="flex items-end justify-center space-x-2">
<div class="text-white text-3xl font-semibold text-center">Studio Launchpad</div>
<div class="pb-2">
<img src="./resources/pink_arrow.svg" width="20" height="20" alt="logo" />
</div>
</div>
</a>
<div class="text-white text-base mt-4">
Launch phygital NFTs and immersive AI-powered experiences effortlessly with our
user-friendly, no-code tools.
Expand All @@ -870,12 +870,12 @@ <h1 class="text-6xl lg:text-9xl font-black mb-8 hero-content" style="line-height
class="w-full sm:w-1/3 rounded-xl border border-white p-6 min-h-15"
style="background: linear-gradient(to bottom, #a713bd, #5b0292)"
>
<div class="flex items-end justify-center">
<a href="https://discover.myriadflow.com/" class="flex items-end justify-center">
<div class="text-white text-3xl font-semibold text-center">Discover Marketplace</div>
<div class="pb-2">
<img src="./resources/pink_arrow.svg" width="20" height="20" alt="logo" />
</div>
</div>
</a>
<div class="text-white text-base mt-4">
Go-to-marketplace for phygital NFTs that connects brands, creators, and users with
unique digital and physical collectibles.
Expand All @@ -885,14 +885,14 @@ <h1 class="text-6xl lg:text-9xl font-black mb-8 hero-content" style="line-height
class="w-full sm:w-1/3 rounded-xl border border-white p-6 min-h-15"
style="background: linear-gradient(to bottom, #a713bd, #5b0292)"
>
<div class="flex items-end justify-center">
<a href="https://webxr.myriadflow.com/" class="flex items-end justify-center">
<div class="text-white text-3xl font-semibold text-center">
AI-Powered Experiences
</div>
<div class="pb-2">
<img src="./resources/pink_arrow.svg" width="20" height="20" alt="logo" />
</div>
</div>
</a>
<div class="text-white text-base mt-4">
Immerse users and customers in engaging digital worlds with AI-powered interactive
experiences.
Expand Down Expand Up @@ -950,7 +950,9 @@ <h1 class="text-6xl lg:text-9xl font-black mb-8 hero-content" style="line-height
</p>

<div class="text-center mt-16 mb-20">
<a href="https://discord.gg/38jktRtuY7">
<a
href="https://docs.google.com/forms/d/1_ocaHYRLnJ-3jY7eNolT_uwRNzV_fGom07y0321jae0/edit"
>
<button class="card2 text-4xl px-8 py-4">Sign Up</button>
</a>
</div>
Expand Down Expand Up @@ -1025,9 +1027,12 @@ <h1 class="text-6xl lg:text-9xl font-black mb-8 hero-content" style="line-height
class="w-[200px] sm:w-[250px] h-[200px] sm:h-[250px]"
alt="brand_signup_form"
/>
<h1 class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4">
<a
href="https://docs.google.com/forms/d/1_ocaHYRLnJ-3jY7eNolT_uwRNzV_fGom07y0321jae0/edit"
class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4"
>
Go to Brand Sign Up Form
</h1>
</a>
<div class="sm:w-[250px]"></div>
</div>
</div>
Expand All @@ -1045,14 +1050,14 @@ <h1 class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4">
</p>

<div class="text-center mt-16 mb-16">
<a href="https://discord.gg/38jktRtuY7">
<a href="https://myriadflow.com/contact">
<button class="card2 text-4xl px-8 py-4">Contact us</button>
</a>
</div>
</div>
</section>

<section class="" style="background-color: #f2f2f3">
<section class="relative z-10" style="background-color: #f2f2f3">
<div class="mx-auto" style="padding: 8px 14vw">
<h1
class="pt-14 m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2"
Expand All @@ -1065,52 +1070,42 @@ <h1 class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4">
</h1>
<img src="./resources/readyimages/line2.png" class="mb-10" />

<div class="lg:flex gap-20">
<div class="lg:flex gap-20 relative">
<div class="lg:w-1/2">
<div class="lg:w-1/3">
<div class="mx-auto">
<img
src="./resources/readyimages/features1.png"
src="./resources/readyimages/features1.svg"
class="w-full mx-auto mb-4"
alt=""
/>

<div class="text-3xl text-black font-semibold mb-4">
Supercharge Your Phygital NFTs with AI-Powered Brand Ambassadors
Supercharge Your Brand with AI Agents and NFTs
</div>
<div class="text-lg text-black mb-10">
With MyriadFlow you can go beyond the ordinary and impress your audience with
Next-Level NFTs. We are building interactive AI-powered brand ambassadors in VR
environments that your audience can interact with. Stay tuned – AI integration for
all NFTs is coming soon!
cutting-edge Web3 and AI innovations. Enhance customer loyalty, create
unforgettable experiences, and unlock unique opportunities that elevate your brand
in the digital age. Lead the way in innovation and set your brand apart!
</div>
<div class="mt-16 mb-16">
<a
href="https://docs.google.com/forms/d/1_ocaHYRLnJ-3jY7eNolT_uwRNzV_fGom07y0321jae0/edit"
>
<button class="cursor-pointer card3 text-xl px-4 py-2">Sign up</button>
</a>
</div>
<!-- <div class="uppercase font-bold mb-10" style="color: #545454;">Ai integration coming soon</div> -->
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="lg:w-1/3">
<div class="mx-auto">
<div class="slideshow-container3 w-full mx-auto mb-4">
<div class="mySlides3 mx-auto" style="display: block">
<img
src="./resources/readyimages/features3.jpg"
class="w-full mx-auto"
alt=""
/>
</div>

<div class="mySlides3 mx-auto">
<div class="mx-auto" style="display: block">
<img
src="./resources/readyimages/features2.jpg"
class="w-full mx-auto"
alt=""
/>
</div>

<div class="mySlides3 mx-auto">
<img
src="./resources/readyimages/features2.jpg"
src="./resources/readyimages/features3.svg"
class="w-full mx-auto"
alt=""
/>
Expand All @@ -1119,13 +1114,18 @@ <h1 class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4">

<!-- <img src="./resources/readyimages/features2.jpg" class="w-full mx-auto mb-4" alt="" /> -->
<div class="text-3xl text-black font-semibold mb-4">
Craft Your NFT Vision: Customizable Storefronts for Creators & Brands
Craft Your Vision: Customized Solutions
</div>
<div class="text-lg text-black mb-10">
MyriadFlow empowers creators and businesses to seamlessly navigate the NFT
landscape, and to create and manage customizable storefronts without any coding
knowledge. Get your NFT solution live in seconds with an easy to use storefront
that represents Your Brand!
With MyriadFlow you can create tailored NFT solutions that match your brand’s
unique needs. We provide fully customizable options to help you launch digital
assets, create immersive experiences, and engage your audience, all designed to
fit your specific business model. We make it easy to bring your vision to life!
</div>
<div class="mt-16 mb-16">
<a href="https://myriadflow.com/contact">
<button class="cursor-pointer card3 text-xl px-4 py-2">Contact us</button>
</a>
</div>
</div>
</div>
Expand All @@ -1134,23 +1134,55 @@ <h1 class="text-white text-center text-2xl sm:text-4xl font-semibold pb-4">
</div>
</section>

<section
id="futureready"
class=""
style="background-image: url('./resources/futureready_bg.svg'); background-repeat: no-repeat"
>
<div class="mx-auto" style="padding: 8px 14vw">
<div class="sm:flex justify-center items-center">
<img
class="mr-16"
src="./resources/MyriadFlowtokensmall.svg"
width="250"
height="250"
alt="coin"
/>
<div
class="w-full text-white text-4xl rounded-2xl px-6 py-8"
style="
background: linear-gradient(to bottom, #c243fe, #47aaef);
text-align: center;
line-height: 50px;
"
>
Ready for the Future? Let's go!
</div>
<img src="./resources/rocket.svg" width="300" height="300" alt="coin" />
</div>
</div>
</section>

<main>
<div class="flex justify-center">
<div class="flex justify-center mx-5 text-center">
<h1
class="m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2 flex gap-4"
class="text-2xl sm:text-4xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2 flex justify-center items-center gap-2 sm:gap-4"
id="possibilities"
style="margin-top: 100px"
style="margin-top: 150px; margin-bottom: 150px"
>
<span style="color: #4b4b4b"><img src="./resources/readyimages/line.png" /></span>
<span style="color: #4b4b4b"
><img src="./resources/readyimages/line.png" height="50px"
/></span>
<span style="color: #4b4b4b"> Stay Tuned for More Details in This Space</span>
</h1>
</div>

<!--
<div class="carousel-container2 w-full" style="padding-top: 80px; padding-bottom: 150px">
<div class="carousel2" id="carousel2">
<!-- JavaScript will insert carousel items here -->
JavaScript will insert carousel items here
</div>
</div>
</div> -->

<footer class="footer">
<section class="container">
Expand Down
9 changes: 9 additions & 0 deletions resources/MyriadFlowtokensmall.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions resources/futureready_bg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions resources/mobile_futureready_bg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions resources/readyimages/features1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions resources/readyimages/features3.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions resources/rocket.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 74 additions & 2 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1352,11 +1352,31 @@ Ensure the default browser behavior of the `hidden` attribute.
.mt-10 {
margin-top: 4rem;
}
.-z-10 {
z-index: -10;
}
.z-10 {
z-index: 10;
}

.cursor-pointer {
cursor: pointer;
}
.py-12 {
padding-top: 3rem /* 48px */;
padding-bottom: 3rem /* 48px */;
}
.px-6 {
padding-left: 1.5rem /* 24px */;
padding-right: 1.5rem /* 24px */;
}
.mr-16 {
margin-right: 4rem /* 80px */;
}
.card2 {
position: relative;
border: 10px solid transparent;
background: #f2f2f2;
background: #fff;
background-clip: padding-box;
border-radius: 20px;
}
Expand All @@ -1372,6 +1392,38 @@ Ensure the default browser behavior of the `hidden` attribute.
z-index: -1;
border-radius: 12px;
}
.card3 {
position: relative;
border: 10px solid transparent;
background: #fff;
background-clip: padding-box;
border-radius: 20px;
}

.card3::after {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
background: linear-gradient(-50deg, #00ddeb, #5b42f3, #af40ff);
z-index: -1;
border-radius: 15px;
}

.card3::before {
content: "";
position: absolute;
bottom: -15px;
left: 10%;
right: 10%;
height: 15px;
background: linear-gradient(-50deg, #00ddeb, #5b42f3, #af40ff);
z-index: -2;
border-radius: 10px;
filter: blur(10px);
}

.border {
border-width: 1px;
Expand Down Expand Up @@ -1645,7 +1697,9 @@ Ensure the default browser behavior of the `hidden` attribute.
font-size: 1.875rem;
line-height: 2.25rem;
}

.gap-2 {
gap: 0.5rem /* 8px */;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
Expand Down Expand Up @@ -1715,6 +1769,11 @@ Ensure the default browser behavior of the `hidden` attribute.
.w-\[200px\] {
width: 200px;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem /* 8px */ * var(--tw-space-x-reverse));
margin-left: calc(0.5rem /* 8px */ * calc(1 - var(--tw-space-x-reverse)));
}
.h-\[200px\] {
height: 200px;
}
Expand Down Expand Up @@ -2119,6 +2178,13 @@ Ensure the default browser behavior of the `hidden` attribute.
column-gap: 4rem;
}
}
@media (max-width: 768px) {
#futureready {
background-image: url("./resources/mobile_futureready_bg.svg") !important;
background-repeat: no-repeat;
background-size: cover;
}
}

@media (max-width: 648px) {
.text-6xl {
Expand All @@ -2129,6 +2195,9 @@ Ensure the default browser behavior of the `hidden` attribute.
font-size: 1.01rem;
line-height: 2rem;
}
#futureready_bg {
background-image: url("./resources/mobile_futureready_bg.svg");
}
}

@media (min-width: 1536px) {
Expand Down Expand Up @@ -2192,4 +2261,7 @@ Ensure the default browser behavior of the `hidden` attribute.
font-size: 2.25rem /* 36px */;
line-height: 2.5rem /* 40px */;
}
.sm\:gap-4 {
gap: 1rem /* 16px */;
}
}

0 comments on commit 9a65d6d

Please sign in to comment.