gistfile1.txt

We are building an application called Garple.com for selling domain names.
The landing page displays a list of all domain names, including ones that were already purchased.
Clicking on them leads to a payment form where the domain can be purchased with a credit card.
Each domain has a name and tier, as well as buyerEmail, and the columns necessary for buying it.
Don't add any other columns. Tier should be a number between 1 and 4.
There is no need for customers to register.
Prices should be rendered like "$1,800" with no decimals and no "usd".
Make sure to include all links as anchor tags.
The application will be accessible under any of the domains we're selling, and opening that domain will show the domain details page.

After a domain is bought, send an email to the customer saying "Purchase of [domainName] on garple.com". Send it from sales@garple.com and cc sales@garple.com. The text of the email should say this:

    Because we originally registered this domain less than 60 days ago, we can only transfer it to another AWS account (not another registrar). You will still be able to have full ownership and control over it and, if you wish, transfer it to a different registrar after the 60-day window has elapsed.

    So we can start the process with AWS, **please give us the account ID of your AWS account**. Instructions on how to find your account ID are [here](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-identifiers.html). If you don’t yet have an account with AWS, you can open one [here](https://portal.aws.amazon.com/billing/signup).

    We’ll then send you instructions about how to accept the transfer.

# Home /
- A well designed but plain black and white landing page with the following components vertically stacked
    - Header (should all be relatively close together vertically and left-aligned)
        - A badge with a green border, white background and green text that says "🌱 GARPLE"
        - Large headline: Startup names that grow on you
        - Text below: Pick from our portfolio of short, memorable and easy to say domain names that nobody else is using.
    - A grid of benefits
        - Each benefit is structured into two lines
            - First line: A green icon on round light green background, followed by a title
            - Second line: Benefit details
        - Here are the benefits
            - [Speech] Short and easy to say
                Our domains are "pseudowords" - short, easy to say, without any real meaning.
                All domains pass the [radio test](https://www.namecheap.com/blog/domain-name-radio-test/).
            - [Ban] No baggage associated
                Just like "Google" or "Twilio", our domains are totally unique and people don't associate any meaning with them.
            - [ShieldCheck] Fast, secure and easy
                We use Stripe to process payments. Get your new domain up and running in less than 30 minutes.
            - [ChevronsUp] Instant SEO Optimisation
                Take the #1 spot in the Google search results and register an uncontested trademark.
        - A row of vertically centered logos
            - The row should spread the full width of the parent container, justified with space-between
            - The logos should be vertically centered in their grid cells, and scaled to fit their cells, even on small screens
            - The logos should have a grayscale filter
            - On small screens screens spread the logos across two rows with three logos each
            - Here are the paths to the image files
                - logos/google.svg
                - logos/monzo.svg
                - logos/hooli.svg
                - logos/reddit.svg
                - logos/twilio.svg
                - logos/nustom.svg
        - Small, grey text below the logos, aligned right, relatively close to the logos: "* companies who might have gotten their name from here"

- A list of ALL the domains sorted alphabetically
    - Use small text on small screens
    - Rows should have a grey border at the bottom and equal padding on top and bottom
    - The top row should have a border at the top, too
    - Columns
        1) The domain name in bold
            - Taking as much space as possible
            - Green for available domains and grey for sold ones.
            - If the domain is available, add a ✨ emoji after tier 1 domains
        2) The price of the domain
            - Right aligned
            - Only if the domain is still available
        3) A white button with a grey border that says "Buy now" with an arrow to the right
            - On small screens the button just says "Buy"
            - Right aligned
            - Only if the domain is still available
            - If the domain is not available, grey text saying "Sold"
            - Clicking the button links to the domain details page

- The page should be no wider than 768px



# Domain details /d/[domain_name]
- Accessible directly by visiting https://[domain_name]/ in the browser
- A well designed but plain black and white landing page with the following components vertically stacked
    - Top (all left aligned)
        - Headline: Buy DomainName.com for ${amount}
        - Text: "It's the perfect blank canvas for your project."
        - Grid of benefits
            - Each benefit is structured into two lines
                - First line: A black icon (same height as the headline) followed by a title
                - Second line: Benefit details
            - Here are the benefits
                - [Speech] Short and easy to say
                    "DomainName" has no meaning but is easy to say and passes the [radio test](https://www.namecheap.com/blog/domain-name-radio-test/).
                - [Ban] No baggage associated
                    Just like "Google" or "Twilio", "DomainName" is totally unique and people don't associate any meaning with it.
                - [ShieldCheck] Fast, secure and easy
                    We use Stripe to process payments. Get your new domain up and running in less than 30 minutes.
                - [ChevronsUp] Instant SEO Optimisation
                    Take the [#1 spot in the Google search](https://google.com/search?q=DomainName) results and register an uncontested trademark.

    - Bottom
        - Payment form
        - After a successful payment:
            - the customer should see an updated page with a success message
                - Title: “Look at you! You’re now the proud owner of {domain}!”
                - Text: “We’ve sent you transfer instructions by email”
            - make sure that the success message does not get replaced as the domain state gets updated to sold after
        - If the domain has already been sold by another user, instead of a payment form it should say "This domain is no longer available" in red
    - A footer
        - A grey divider line on top
        - Centered grey link to https://garple.com saying "View our other domains at garple.com"
        - A centered emoji 🌱 on the next line

- The page should be no wider than 768px