Home
The home page is the main page of the website should convey what the website is about. In the case of Epic Fantasy Forge, the home page also functions as a landing page to promote the app.
The Epic Fantasy Forge home/landing page includes the following:
- Hero section with CTA
- Grid of example fantasy worlds visualized with AI
- App promotion with app store badges and phone mockup
- Source code and development guide promotion with source code panel
Tests
E2E Test
Before implementing the home page we will create an E2E test in Qase. Add a new test case to the "Web Exclusive" suite named "Home":
Integration Tests
There is nothing for us to test at the integration level as the home page has no logic or any kind of code.
Unit Tests
There is nothing for us to test at the unit level since the home page has no logic or any kind of code.
Production Code
HTML
The full source code of the Epic Fantasy Forge home page can be found in the file home.html.heex. The Epic Fantasy Forge home page consists of 4 sections that are explained in more detail below.
Hero Section
First, we need to generate a promotional image for our app. For more information about how to generate such images with AI see the Images page of this guide. The model "Flux Dev" and the below prompt were used to generate Epic Fantasy Forge's promotional image:
Fantasy landscape
Once you have generated a satisfactory image, create a new directory named home inside the existing directory priv/static/images. Place the promotional image inside the new home directory and name it fantasy_world.jpg.
Now add the below HTML to the home.html.heex file located at lib/epic_fantasy_forge_web/controllers/page_html:
<div class="bg-gray-900">
<div class="relative isolate pt-12">
<div class="py-6 sm:py-8">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h1 class="
text-5xl
font-semibold
tracking-tight
text-balance
text-white
sm:text-7xl">
Craft your own fantasy world
</h1>
<p class="
mt-8
text-lg
font-medium
text-pretty
text-gray-400
sm:text-xl/8">
From mythical kingdoms to galactic empires
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="/app"
class="
rounded-md
bg-indigo-500
px-3.5
py-2.5
text-sm
font-semibold
text-white
shadow-xs
hover:bg-indigo-400
focus-visible:outline-2
focus-visible:outline-offset-2
focus-visible:outline-indigo-400"
>
Get started
</a>
</div>
</div>
<img
src={~p"/images/home/fantasy_world.jpg"}
alt="Fantasy world"
class="mt-16 rounded-2xl"
/>
</div>
</div>
</div>
</div>
Your hero section on your home page should now look like this:
Image Grid
We will now add an image grid to our home page to display how AI is used to visualize different types of worlds. Using the Images page of this guide as a reference, generate images for your image grid. Place the generated images in the home directory located in the priv/static/images directory.
Then add the below code immediately after the <img> element in home.html.heex:
<div class="pt-20 mx-auto max-w-2xl text-center">
<h2 class="
text-4xl
font-semibold
tracking-tight
text-pretty
text-white
sm:text-5xl">
Bring your world to life with stunning AI graphics
</h2>
<p class="mt-6 text-lg/8 text-gray-300">
No matter what world you create, AI can visualize it for you
</p>
</div>
<ul
role="list"
class="
text-center
mx-auto
mt-20
grid
max-w-2xl
grid-cols-1
gap-x-8
gap-y-14
sm:grid-cols-2
lg:mx-0
lg:max-w-none
lg:grid-cols-3
xl:grid-cols-4"
>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/historic_landscape.jpg"}
alt="Historic"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Historic
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/fantasy_landscape.jpg"}
alt="Fantasy"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Fantasy
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/science_fiction_city.jpg"}
alt="Science Fiction"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Science Fiction
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/space.jpg"}
alt="Space"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Space
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/steampunk.jpg"}
alt="Steampunk"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Steampunk
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/dieselpunk.jpg"}
alt="Dieselpunk"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Dieselpunk
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/atompunk.jpg"}
alt="Atompunk"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Atompunk
</h3>
</li>
<li>
<img
class="w-full rounded-2xl object-cover"
src={~p"/images/home/cyberpunk.jpg"}
alt="Cyberpunk"
/>
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
Cyberpunk
</h3>
</li>
</ul>
Naturally adjust the image file names in the above HTML code to match your generated image names. With the above code in place, your home page should now have an image grid after the hero section we added earlier and it should look something like this:
Phone Mockup
Following the image grid, we will now add a screenshot of our app inside a phone mockup to our home page. Alongside the phone mockup will go some promotional text and app store badges.
Start by creating a screenshot of your app running in an emulator. For Epic Fantasy Forge, the screenshot was taken using a Pixel 9 emulator running Android API 35. Run your app in the emulator and take a screenshot by clicking on the screenshot icon on the sidepanel beside the emulator:
The screenshot should be saved to your desktop.
For details on how to run your Tauri app on an Android emulator, see the Run Project section on the App Framework page of this guide.
Place the screenshot inside the home directory located in the priv/static/images directory and name it app_screenshot.png.
Now we will add the app store badges. Create a new directory named badges inside the priv/static/images directory. Download the necessary app store badges and place them inside the new badges directory.
Warning
When using app store badges, take care to follow the rules regarding placement, size and other rules regarding the use of these badges.
Now add the below code at the end of the home.html.heex file:
<div class="overflow-hidden bg-gray-900 py-10 sm:py-20">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="
mx-auto
grid
max-w-2xl
grid-cols-1
gap-x-8
gap-y-16
sm:gap-y-20
lg:mx-0
lg:max-w-none
lg:grid-cols-2">
<div class="lg:pt-4 lg:pr-8">
<div class="lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-400">
Monthly updates
</h2>
<p class="
mt-2
text-4xl
font-semibold
tracking-tight
text-pretty
text-white
sm:text-5xl">
Multi-platform App
</p>
<p class="mt-6 text-lg/8 text-gray-300">
Build worlds on your preferred platform
</p>
<dl class="
mt-10
max-w-xl
space-y-8
text-base/7
text-gray-300
lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-1 size-5 fill-[#6366f1]"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z">
</path>
</svg>
Web:
</dt>
<dd class="inline">Chrome, Safari, Edge, Firefox & Opera</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-1 size-5 fill-[#6366f1]"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z">
</path>
</svg>
Desktop:
</dt>
<dd class="inline">Windows, macOS & Linux</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-1 size-5 fill-[#6366f1]"
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z">
</path>
</svg>
Mobile:
</dt>
<dd class="inline">Android & iOS</dd>
</div>
<!-- Hidden until app is available in app stores -->
<div class="
hidden
mx-auto
mt-10
grid
max-w-lg
items-center
gap-x-8
gap-y-10
sm:max-w-xl
sm:gap-x-10
lg:mx-0
lg:max-w-none
grid-cols-1
sm:grid-cols-2">
<img
class="col-span-1 xl:h-16 object-contain"
src="https://get.microsoft.com/images/en-us%20dark.svg"
alt="Download from the Microsoft Store"
/>
<img
class="col-span-1 h-12 xl:h-16 object-contain"
src={~p"/images/badges/app-store-mac-badge.svg"}
alt="Download on the Mac App Store"
/>
<img
class="col-span-1 h-12 xl:h-16 object-contain"
src="https://flathub.org/api/badge?locale=en"
alt="Get it on Flathub"
/>
<img
class="col-span-1 h-12 xl:h-16 object-contain"
src={~p"/images/badges/snap-store-badge.svg"}
alt="Get it from the Snap Store"
/>
<img
class="col-span-1 h-12 xl:h-16 object-contain"
src={~p"/images/badges/google-play-badge.png"}
alt="Get it on Google Play"
/>
<img
class="col-span-1 h-12 xl:h-16 object-contain"
src={~p"/images/badges/app-store-badge.svg"}
alt="Download on the App Store"
/>
</div>
</dl>
</div>
</div>
<div class="mt-4 sm:mt-6 lg:mt-0 lg:shrink-0 lg:grow">
<svg
viewBox="0 0 366 729"
role="img"
class="mx-auto w-91.5 max-w-full drop-shadow-xl"
>
<title>Mobile App Screenshot</title>
<defs>
<clipPath id="2ade4387-9c63-4fc4-b754-10e687a0d332">
<rect width="316" height="684" rx="36" />
</clipPath>
</defs>
<path
fill="#4B5563"
d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
/>
<path
fill="#343E4E"
d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
/>
<foreignObject
width="316"
height="684"
transform="translate(24 24)"
clip-path="url(#2ade4387-9c63-4fc4-b754-10e687a0d332)"
>
<img src={~p"/images/home/app-screenshot.png"} alt="" />
</foreignObject>
</svg>
</div>
</div>
</div>
</div>
Tip
In the above HTML code the div containing the app store badges has the hidden class. As our app is not in the app stores yet we want to hide those badges. We can later remove the hidden class once our app is in the app stores. The screenshot below was taken with the hidden class removed to showcase how it would look like with the app store badges present.
With the above code in place, your home page should now have a phone mockup following the image grid we added earlier and it should look something like this:
Source Code Panel
After the phone mockup, we will now add a screenshot of our source code to our home page. Alongside the screenshot will go some promotional text about how the app is open source and that the process of how the app was developed is documented in a development guide.
Start by creating a screenshot of some source code file in your project. In the case of Epic Fantasy Forge, a screenshot of main.tf was used. You can take the screenshot inside the Visual Studio Code IDE or your preferred editor/IDE.
Once you have the screenshot, place it inside the home directory located in the priv/static/images directory and name it code.png.
Then add the below code at the end of the home.html.heex file:
<div class="overflow-hidden bg-gray-900 py-10 sm:py-10">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="
mx-auto
grid
max-w-2xl
grid-cols-1
gap-x-8
gap-y-16
sm:gap-y-20
lg:mx-0
lg:max-w-none
lg:grid-cols-2">
<div class="lg:pt-4 lg:pr-8">
<div class="lg:max-w-lg">
<img
class="h-8 object-contain"
src="https://img.shields.io/badge/License-GPLv3-blue.svg"
alt="Source Code Screenshot"
/>
<p class="
mt-2
text-4xl
font-semibold
tracking-tight
text-pretty
text-white
sm:text-5xl">
Open Source
</p>
<dl class="
mt-10
max-w-xl
space-y-8
text-base/7
text-gray-300
lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Full transparency of how the app works
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Source code available on
<a
href="https://gitlab.com/brusecke/epic-fantasy-forge"
target="_blank"
rel="noopener noreferrer"
class="
inline-flex
items-center
gap-1
font-semibold
text-indigo-400
hover:text-white
transition-colors"
>
GitLab
</a>
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Developed using the latest technologies
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Infrastructure as Code
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Tests written before code
</dt>
</div>
</dl>
<h2 class="mt-16 text-base/7 font-semibold text-indigo-400">
Full Stack
</h2>
<p class="
mt-2
text-4xl
font-semibold
tracking-tight
text-pretty
text-white
sm:text-5xl">
Development Guide
</p>
<p class="mt-6 text-lg/8 text-gray-300">
The development of Epic Fantasy Forge is documented in a
<a
href="https://development.epicfantasyforge.com/"
target="_blank"
rel="noopener noreferrer"
class="
inline-flex
items-center
gap-1
font-semibold
text-indigo-400
hover:text-white
transition-colors"
>
Full Stack Development Guide
</a>
</p>
<dl class="
mt-10
max-w-xl
space-y-8
text-base/7
text-gray-300
lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Learn
<a
href="https://development.epicfantasyforge.com/devops/ci-cd/infrastructure-as-code/"
target="_blank"
rel="noopener noreferrer"
class="
inline-flex
items-center
gap-1
font-semibold
text-indigo-400
hover:text-white
transition-colors"
>
Terraform
</a>
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Learn
<a
href="https://development.epicfantasyforge.com/tech-stack/web-framework/"
target="_blank"
rel="noopener noreferrer"
class="
inline-flex
items-center
gap-1
font-semibold
text-indigo-400
hover:text-white
transition-colors"
>
Phoenix Framework
</a>
</dt>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg
class="absolute top-1 left-0 size-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Learn
<a
href="https://development.epicfantasyforge.com/tech-stack/app-framework/"
target="_blank"
rel="noopener noreferrer"
class="
inline-flex
items-center
gap-1
font-semibold
text-indigo-400
hover:text-white
transition-colors"
>
Tauri
</a>
</dt>
</div>
</dl>
</div>
</div>
<div class="sm:px-6 lg:px-0">
<div class="
relative
isolate
overflow-hidden
bg-indigo-500
px-6
pt-8
sm:mx-auto
sm:max-w-2xl
sm:rounded-3xl
sm:pt-16
sm:pr-0
sm:pl-16
lg:mx-0
lg:max-w-none">
<div
class="
absolute
-inset-y-px
-left-3
-z-10
w-full
origin-bottom-left
skew-x-[-30deg]
bg-indigo-100
opacity-20
ring-1
ring-white
ring-inset"
aria-hidden="true"
>
</div>
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<div class="
w-screen
overflow-hidden
rounded-tl-xl
bg-gray-900
ring-1
ring-white/10">
<div class="flex bg-gray-800/40 ring-1 ring-white/5">
<div class="-mb-px flex text-sm/6 font-medium text-gray-400">
<div class="
border-r
border-b
border-r-white/10
border-b-white/20
bg-white/5
px-4
py-2
text-white">
main.tf
</div>
<div class="border-r border-gray-600/10 px-4 py-2">
variables.tf
</div>
</div>
</div>
<div class="px-2 pt-2 pb-2">
<img src={~p"/images/home/code.png"} alt="Source Code Screenshot" />
</div>
</div>
</div>
<div
class="
pointer-events-none
absolute
inset-0
ring-1
ring-black/10
ring-inset
sm:rounded-3xl"
aria-hidden="true"
>
</div>
</div>
</div>
</div>
</div>
</div>
With the above code in place, your home page should now have a source code screenshot following the phone mockup we added earlier and it should look something like this:
Naturally adjust the license badge to reflect your app's license. Epic Fantasy Forge is licensed under GPLv3.