Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steelford - Request a Quote</title>
    <style>
        :root {
            --steelford-blue: #0B2545;
            --text-white: #FFFFFF;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            overflow: hidden;
        }

        .split-container {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: row;
        }

        .split-side {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Background Image Options - Swap URLs out as needed */
        .homeowner-side {
            background-image: linear-gradient(rgba(11, 37, 69, 0.4), rgba(11, 37, 69, 0.4)), url('your-homeowner-bg.jpg');
            background-color: #134074;
        }

        .contractor-side {
            background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('your-contractor-bg.jpg');
            background-color: #1A1A1A;
        }

        .content-box {
            position: relative;
            z-index: 10;
            padding: 20px;
            max-width: 400px;
        }

        .routing-btn {
            display: inline-block;
            background-color: var(--steelford-blue);
            color: var(--text-white);
            text-decoration: none;
            padding: 20px 40px;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 2px solid var(--text-white);
            border-radius: 4px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            width: 80%;
        }

        .contractor-side .routing-btn {
            background-color: #000000;
        }

        .routing-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.4);
            background-color: var(--text-white);
            color: #000000;
        }

        /* Mobile Viewport Optimization */
        @media (max-width: 768px) {
            .split-container {
                flex-direction: column;
            }
            .split-side {
                height: 50vh;
            }
            .routing-btn {
                padding: 15px 30px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>

<div class="split-container">
    <div class="split-side homeowner-side">
        <div class="content-box">
            <a href="https://steelford.com/homeowner-quote" class="routing-btn">I am a homeowner</a>
        </div>
    </div>

    <div class="split-side contractor-side">
        <div class="content-box">
            <a href="https://steelford.com/contractor-quote" class="routing-btn">I am a contractor</a>
        </div>
    </div>
</div>

</body>
</html>

STEELFORD

Steelford is an online roofing materials company focused on homeowners who want durable, long-lasting roofing options without confusion.

Regenerate this homepage to clearly position Steelford as a place where homeowners can browse and request pricing for roofing materials — not roofing services or installations.

The homepage should feel modern, clean, and product-forward, similar in structure to leading online roofing material suppliers, but more visually refined and easier to understand.

Do NOT position Steelford as a local roofing contractor.
Do NOT mention cities, states, or service areas.
Do NOT talk about installation, craftsmanship, or roofing services.

Homepage structure:

Hero Section

Headline focused on buying roofing materials

Subheadline emphasizing simplicity, durability, and homeowner clarity

Primary call to action: “View Roofing Options”

Secondary call to action: “Get a Quote”

Product Categories Section
Include clear sections for:

Metal Roofing

Stone-Coated Steel Roofing

Roofing Accessories

Each category should have a short, homeowner-friendly description and an “Explore” button.

Why Steelford Section
Focus on:

Clear product choices

Homeowner-friendly explanations

Nationwide availability

Support when questions come up

Avoid technical jargon and sales hype.

How It Works Section
Use a simple three-step flow:

Browse roofing materials

Request pricing or ask a question

Finalize details and delivery

Support / Confidence Section
Reassure homeowners that help is available if they are unsure which roofing option is right.

Design Direction

Modern and premium

Clean layout with generous spacing

Simple language for homeowners

Product-first presentation

The final homepage should clearly communicate that Steelford sells roofing materials online and makes the process simple and approachable for homeowners.