mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 05:13:23 +12:00
style: mobile and tablet layout changes
This commit is contained in:
brettkolodny
parent
3bf94d7037
commit
b934e492e9
1 changed files with 16 additions and 16 deletions
|
|
@ -14,15 +14,15 @@ defmodule AshHqWeb.Pages.Home do
|
|||
def render(assigns) do
|
||||
~F"""
|
||||
<div class="antialiased">
|
||||
<div class="my-2 dark:bg-primary-black dark:bg-dark-grid bg-light-grid flex flex-col items-center pt-24">
|
||||
<div class="text-5xl px-12 font-bold max-w-5xl mx-auto mt-2 text-center">
|
||||
<div class="my-2 dark:bg-primary-black dark:bg-dark-grid bg-light-grid flex flex-col items-center pt-4 md:pt-12 lg:pt-24">
|
||||
<div class="text-3xl md:text-5xl px-4 md:px-12 font-bold max-w-5xl mx-auto mt-2 md:text-center">
|
||||
Build <CalloutText>powerful</CalloutText> and <CalloutText>composable</CalloutText> applications with a <CalloutText>flexible</CalloutText> tool-chain.
|
||||
</div>
|
||||
<div class="text-xl font-light text-gray-700 dark:text-gray-400 max-w-4xl mx-auto mt-4 text-center">
|
||||
<div class="text-xl font-light text-gray-700 dark:text-gray-400 max-w-4xl mx-auto px-4 md:px-0 mt-4 md:text-center">
|
||||
A declarative foundation for ambitious applications. Model your domain, derive the rest.
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row items-center mt-16 mb-10">
|
||||
<div class="flex items-center h-12 px-4 rounded-lg bg-orange-500 dark:text-white dark:hover:text-gray-200 hover:text-white">
|
||||
<div class="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row items-center mt-8 md:mt-16 mb-6 md:mb-10">
|
||||
<div class="flex justify-center items-center w-full md:w-auto h-12 px-4 rounded-lg bg-orange-500 font-semibold dark:text-white dark:hover:text-gray-200 hover:text-white">
|
||||
<a href="/docs/guides/ash/latest/tutorials/get-started.md" target="_blank">Get Started</a>
|
||||
</div>
|
||||
<SearchBar class="w-80 md:w-96" />
|
||||
|
|
@ -85,8 +85,8 @@ defmodule AshHqWeb.Pages.Home do
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" class="flex flex-col items-center content-center space-y-8 w-[28rem] h-[68rem]">
|
||||
<div class="w-96 lg:min-w-fit lg:max-w-min bg-gray-200 rounded-xl p-8 md:p-0 dark:bg-gray-800 drop-shadow-xl lg:relative lg:top-16 lg:-left-[10rem]">
|
||||
<div id="testimonials" class="flex flex-col items-center content-center space-y-8 w-full lg:w-[28rem] max-w-4xl md:h-[74rem] lg:h-[68rem] mb-8 lg:mb-0 px-4 md:px-8 lg:px-0">
|
||||
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-gray-200 rounded-xl p-8 md:p-0 dark:bg-gray-800 drop-shadow-xl md:relative lg:top-16 md:-left-[8rem] lg:-left-[10rem]">
|
||||
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
|
||||
<p class="text-lg font-light text-gray-700 dark:text-gray-100 break-words">
|
||||
"Through its declarative extensibility, Ash delivers more than you'd expect: Powerful APIs with filtering/sorting/pagination/calculations/aggregations, pub/sub, authorization, rich introspection, GraphQL... It's what empowers this solo developer to build an ambitious ERP!"
|
||||
|
|
@ -103,7 +103,7 @@ defmodule AshHqWeb.Pages.Home do
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-96 lg:min-w-fit lg:max-w-min bg-gray-100 rounded-xl p-8 md:p-0 dark:bg-gray-700 bg-white drop-shadow-xl lg:relative lg:-top-16 lg:-right-[10rem]">
|
||||
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-gray-100 rounded-xl p-8 md:p-0 dark:bg-gray-700 bg-white drop-shadow-xl md:relative md:-top-16 md:-right-[10rem]">
|
||||
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
|
||||
<p class="text-lg font-light text-gray-700 dark:text-gray-100 break-words">
|
||||
"What stood out to me was how incredibly easy Ash made it for me to go from a proof of concept, to a working prototype using ETS, to a live app using Postgres."
|
||||
|
|
@ -120,7 +120,7 @@ defmodule AshHqWeb.Pages.Home do
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-96 lg:min-w-fit lg:max-w-min bg-gray-200 rounded-xl p-8 md:p-0 dark:bg-gray-800 bg-white drop-shadow-xl lg:relative lg:-top-32 lg:-left-[11rem]">
|
||||
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-gray-200 rounded-xl p-8 md:p-0 dark:bg-gray-800 bg-white drop-shadow-xl md:relative md:-top-32 md:-left-[11rem]">
|
||||
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
|
||||
<p class="text-lg font-light text-gray-700 dark:text-gray-100 break-words">
|
||||
"Ash is such powerful idea and it gives Alembic such a massive competitive advantage that I’d be really stupid to tell anyone about it."
|
||||
|
|
@ -137,7 +137,7 @@ defmodule AshHqWeb.Pages.Home do
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-96 lg:min-w-fit lg:max-w-min bg-gray-100 rounded-xl p-8 md:p-0 dark:bg-gray-700 drop-shadow-xl lg:relative lg:-top-64 lg:-right-44">
|
||||
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-gray-100 rounded-xl p-8 md:p-0 dark:bg-gray-700 drop-shadow-xl md:relative md:-top-[4rem] md:-top-64 md:-right-44">
|
||||
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
|
||||
<p class="text-lg font-light text-gray-700 dark:text-gray-100 break-words">
|
||||
"Ash Framework enabled us to build a robust platform for delivering financial services using bitcoin. Ash proved itself to our team by handling innovative use cases with ease and it continues to evolve ahead of our growing list of needs."
|
||||
|
|
@ -192,10 +192,10 @@ defmodule AshHqWeb.Pages.Home do
|
|||
</div>
|
||||
|
||||
<div class="pt-6 pb-6 w-full max-w-6xl hidden sm:block">
|
||||
<div class="flex flex-row gap-10">
|
||||
<div class="flex flex-col lg:flex-row gap-10 mx-8 lg:mx-0">
|
||||
<CodeExample
|
||||
id="define-a-resource"
|
||||
class="grow w-min max-w-[1000px]"
|
||||
class="grow w-full lg:w-min max-w-[1000px]"
|
||||
code={post_example()}
|
||||
title="Define a resource"
|
||||
/>
|
||||
|
|
@ -261,15 +261,15 @@ defmodule AshHqWeb.Pages.Home do
|
|||
for={@email_form}
|
||||
change="validate_email_form"
|
||||
submit="submit_email_form"
|
||||
class="flex flex-col md:flex-row space-x-4 space-y-4 items-center"
|
||||
class="flex flex-col md:flex-row md:space-x-4 space-y-4 items-center w-full md:w-auto px-4 md:px-0"
|
||||
>
|
||||
<Field name={:email}>
|
||||
<Field name={:email} class="w-full">
|
||||
<TextInput
|
||||
class="w-80 md:w-96 button border border-gray-400 bg-gray-200 dark:border-gray-700 rounded-lg dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
class="w-full md:w-96 button border border-gray-400 bg-gray-200 dark:border-gray-700 rounded-lg dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
opts={placeholder: "user@email.com"}
|
||||
/>
|
||||
</Field>
|
||||
<Submit class="w-fit flex items-center px-4 rounded-lg bg-orange-500 dark:text-white dark:hover:text-gray-200 hover:text-white h-10">Join</Submit>
|
||||
<Submit class="w-full md:w-fit flex justify-center items-center px-4 rounded-lg bg-orange-500 dark:text-white dark:hover:text-gray-200 text-center hover:text-white h-10">Join</Submit>
|
||||
</Form>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue