phawk · August 6, 2024 19:10
diff --git a/chat-gpt-tailwind-css-markup.html b/chat-gpt-tailwind-css-markup.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pay Here</title>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 </head>
 <body class="font-sans">
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-blue-600">PAY HERE</a>
            <nav class="space-x-6 hidden md:flex">
                <a href="#" class="text-gray-600 hover:text-blue-600">Features</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Pricing</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Blog</a>
                <a href="#" class="text-gray-600 hover:text-blue-600">Merchant login</a>
            </nav>
            <a href="#" class="bg-green-500 text-white px-4 py-2 rounded-md hidden md:block">SIGN UP</a>
        </div>
    </header>

    <section class="bg-white py-12">
    <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center md:space-x-8">
        <!-- Left Content -->
        <div class="md:w-1/2 text-center md:text-left">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Tired of chasing clients for payments?</h1>
            <p class="mt-4 text-gray-600">Create membersites and charge your clients automatically every month.</p>
            <div class="mt-6 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 justify-center md:justify-start">
                <a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md">SIGN UP</a>
                <a href="#" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-md">MERCHANT LOGIN</a>
            </div>
            <div class="mt-8 flex items-center">
                <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4"></div>
                <div class="text-sm text-gray-500">
                    <p>“PayHere saves me a lot of time and my clients love how simple it is”</p>
                    <p class="font-bold text-gray-900">Natalie Abusow</p>
                    <p><a href="mailto:natalieabusow.com" class="text-blue-600">natalieabusow.com</a></p>
                </div>
            </div>
        </div>

        <!-- Right Content (Placeholder for Image) -->
        <div class="md:w-1/2 mt-10 md:mt-0">
            <div class="bg-blue-600 h-64 rounded-lg"></div>
        </div>
    </div>
 </section>

    <section class="py-12 bg-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-gray-900">The best payment platform</h2>
        <p class="mt-4 text-gray-600 max-w-xl mx-auto">Nullam orci lorem, auctor ac quam sit amet, consequat porttitor leo. Pellentesque habitant morbi tristique senectus et netus.</p>
        <div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
            <!-- Feature 1 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <span class="text-blue-600 text-3xl">$</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900">One-off payments</h3>
                <p class="mt-2 text-gray-600 max-w-xs">Easy to manage one-off payments for your clients.</p>
            </div>
            <!-- Feature 2 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <span class="text-blue-600 text-3xl">🔄</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900">Recurring payments</h3>
                <p class="mt-2 text-gray-600 max-w-xs">Set up recurring payments to automate your revenue.</p>
            </div>
            <!-- Feature 3 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <span class="text-blue-600 text-3xl">❤️</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900">Simple payments</h3>
                <p class="mt-2 text-gray-600 max-w-xs">User-friendly platform for hassle-free payments.</p>
            </div>
        </div>
    </div>
 </section>

    <section class="bg-blue-700 py-12">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-white">The features</h2>
        <p class="mt-4 text-white">Increase online sales and improve marketing using our simple, bespoke payments platform</p>
        <div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
            <!-- Feature 1 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
                <h3 class="text-xl font-bold text-white">Optional website</h3>
                <p class="mt-2 text-white max-w-xs">We can provide a custom website to sell your services and products.</p>
            </div>
            <!-- Feature 2 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
                <h3 class="text-xl font-bold text-white">Merchant admin</h3>
                <p class="mt-2 text-white max-w-xs">Manage payments, setup products and memberships, and forecast your future revenue.</p>
            </div>
            <!-- Feature 3 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
                <h3 class="text-xl font-bold text-white">Integration</h3>
                <p class="mt-2 text-white max-w-xs">We can integrate into your existing website and social media platforms.</p>
            </div>
        </div>
    </div>
 </section>

    <section class="py-12 bg-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-2xl font-bold text-gray-900">Pricing</h2>
        <p class="mt-4 text-gray-600">We will help you integrate PayHere with your website and provide you with sales and marketing advice to help grow your online business.</p>
        <div class="mt-4 space-x-4 text-gray-600">
            <span>No contracts</span>
            <span>•</span>
            <span>From £5/month</span>
            <span>•</span>
            <span>Cancel any time</span>
        </div>
        <div class="mt-8 max-w-xl mx-auto bg-white rounded-lg shadow-md p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-4">What is your volume of sale?</h3>
            <div class="flex justify-between items-center text-gray-600 mb-4">
                <span>VOLUME</span>
                <span>PRICE</span>
            </div>
            <div class="flex justify-between items-center text-gray-900 font-bold mb-2">
                <span>£2000 per month</span>
                <span>£15 per month</span>
            </div>
            <div class="mb-6">
                <input type="range" min="0" max="10000" value="2000" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
            </div>
            <div class="text-gray-600 mb-4">
                <span class="font-bold text-gray-900">Estimated monthly cost £15*</span><br>
                <span class="text-xs">* Plus card transaction fee's</span>
            </div>
            <a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md w-full block text-center">SIGN UP</a>
        </div>
    </div>
 </section>

 <footer class="bg-blue-900 text-white py-12">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row md:justify-between items-center">
            <div class="mb-6 md:mb-0">
                <h1 class="text-3xl font-bold mb-2">PAY HERE</h1>
                <p class="text-gray-300">PayHere takes care of your business so you can focus on taking care of your clients</p>
            </div>
            <div class="space-x-6">
                <a href="#" class="text-gray-300 hover:text-white">Features</a>
                <a href="#" class="text-gray-300 hover:text-white">Pricing</a>
                <a href="#" class="text-gray-300 hover:text-white">Blog</a>
                <a href="#" class="text-gray-300 hover:text-white">Merchant login</a>
                <a href="#" class="text-gray-300 hover:text-white">Customer login</a>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-700 pt-6 flex flex-col md:flex-row md:justify-between text-sm text-gray-400">
            <div class="space-x-4">
                <a href="#" class="hover:text-white">Terms of Service</a>
                <a href="#" class="hover:text-white">Privacy Policy</a>
                <a href="#" class="hover:text-white">Security Policy</a>
            </div>
            <div class="mt-4 md:mt-0">&copy; PayHere Payments Ltd</div>
        </div>
    </div>
 </footer>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pay Here</title>
	<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
	</head>
	<body class="font-sans">
	<header class="bg-white shadow-sm">
	<div class="container mx-auto px-4 py-4 flex justify-between items-center">
	<a href="#" class="text-2xl font-bold text-blue-600">PAY HERE</a>
	<nav class="space-x-6 hidden md:flex">
	<a href="#" class="text-gray-600 hover:text-blue-600">Features</a>
	<a href="#" class="text-gray-600 hover:text-blue-600">Pricing</a>
	<a href="#" class="text-gray-600 hover:text-blue-600">Blog</a>
	<a href="#" class="text-gray-600 hover:text-blue-600">Merchant login</a>
	</nav>
	<a href="#" class="bg-green-500 text-white px-4 py-2 rounded-md hidden md:block">SIGN UP</a>
	</div>
	</header>

	<section class="bg-white py-12">
	<div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center md:space-x-8">
	<!-- Left Content -->
	<div class="md:w-1/2 text-center md:text-left">
	<h1 class="text-3xl md:text-4xl font-bold text-gray-900">Tired of chasing clients for payments?</h1>
	<p class="mt-4 text-gray-600">Create membersites and charge your clients automatically every month.</p>
	<div class="mt-6 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 justify-center md:justify-start">
	<a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md">SIGN UP</a>
	<a href="#" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-md">MERCHANT LOGIN</a>
	</div>
	<div class="mt-8 flex items-center">
	<div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4"></div>
	<div class="text-sm text-gray-500">
	<p>“PayHere saves me a lot of time and my clients love how simple it is”</p>
	<p class="font-bold text-gray-900">Natalie Abusow</p>
	<p><a href="mailto:natalieabusow.com" class="text-blue-600">natalieabusow.com</a></p>
	</div>
	</div>
	</div>

	<!-- Right Content (Placeholder for Image) -->
	<div class="md:w-1/2 mt-10 md:mt-0">
	<div class="bg-blue-600 h-64 rounded-lg"></div>
	</div>
	</div>
	</section>

	<section class="py-12 bg-white">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-3xl font-bold text-gray-900">The best payment platform</h2>
	<p class="mt-4 text-gray-600 max-w-xl mx-auto">Nullam orci lorem, auctor ac quam sit amet, consequat porttitor leo. Pellentesque habitant morbi tristique senectus et netus.</p>
	<div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
	<!-- Feature 1 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
	<span class="text-blue-600 text-3xl">$</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900">One-off payments</h3>
	<p class="mt-2 text-gray-600 max-w-xs">Easy to manage one-off payments for your clients.</p>
	</div>
	<!-- Feature 2 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
	<span class="text-blue-600 text-3xl">🔄</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900">Recurring payments</h3>
	<p class="mt-2 text-gray-600 max-w-xs">Set up recurring payments to automate your revenue.</p>
	</div>
	<!-- Feature 3 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
	<span class="text-blue-600 text-3xl">❤️</span>
	</div>
	<h3 class="text-xl font-bold text-gray-900">Simple payments</h3>
	<p class="mt-2 text-gray-600 max-w-xs">User-friendly platform for hassle-free payments.</p>
	</div>
	</div>
	</div>
	</section>

	<section class="bg-blue-700 py-12">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-3xl font-bold text-white">The features</h2>
	<p class="mt-4 text-white">Increase online sales and improve marketing using our simple, bespoke payments platform</p>
	<div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
	<!-- Feature 1 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
	<h3 class="text-xl font-bold text-white">Optional website</h3>
	<p class="mt-2 text-white max-w-xs">We can provide a custom website to sell your services and products.</p>
	</div>
	<!-- Feature 2 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
	<h3 class="text-xl font-bold text-white">Merchant admin</h3>
	<p class="mt-2 text-white max-w-xs">Manage payments, setup products and memberships, and forecast your future revenue.</p>
	</div>
	<!-- Feature 3 -->
	<div class="flex flex-col items-center">
	<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
	<h3 class="text-xl font-bold text-white">Integration</h3>
	<p class="mt-2 text-white max-w-xs">We can integrate into your existing website and social media platforms.</p>
	</div>
	</div>
	</div>
	</section>

	<section class="py-12 bg-white">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-2xl font-bold text-gray-900">Pricing</h2>
	<p class="mt-4 text-gray-600">We will help you integrate PayHere with your website and provide you with sales and marketing advice to help grow your online business.</p>
	<div class="mt-4 space-x-4 text-gray-600">
	<span>No contracts</span>
	<span>•</span>
	<span>From £5/month</span>
	<span>•</span>
	<span>Cancel any time</span>
	</div>
	<div class="mt-8 max-w-xl mx-auto bg-white rounded-lg shadow-md p-6">
	<h3 class="text-xl font-bold text-gray-900 mb-4">What is your volume of sale?</h3>
	<div class="flex justify-between items-center text-gray-600 mb-4">
	<span>VOLUME</span>
	<span>PRICE</span>
	</div>
	<div class="flex justify-between items-center text-gray-900 font-bold mb-2">
	<span>£2000 per month</span>
	<span>£15 per month</span>
	</div>
	<div class="mb-6">
	<input type="range" min="0" max="10000" value="2000" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
	</div>
	<div class="text-gray-600 mb-4">
	<span class="font-bold text-gray-900">Estimated monthly cost £15*</span><br>
	<span class="text-xs">* Plus card transaction fee's</span>
	</div>
	<a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md w-full block text-center">SIGN UP</a>
	</div>
	</div>
	</section>

	<footer class="bg-blue-900 text-white py-12">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row md:justify-between items-center">
	<div class="mb-6 md:mb-0">
	<h1 class="text-3xl font-bold mb-2">PAY HERE</h1>
	<p class="text-gray-300">PayHere takes care of your business so you can focus on taking care of your clients</p>
	</div>
	<div class="space-x-6">
	<a href="#" class="text-gray-300 hover:text-white">Features</a>
	<a href="#" class="text-gray-300 hover:text-white">Pricing</a>
	<a href="#" class="text-gray-300 hover:text-white">Blog</a>
	<a href="#" class="text-gray-300 hover:text-white">Merchant login</a>
	<a href="#" class="text-gray-300 hover:text-white">Customer login</a>
	</div>
	</div>
	<div class="mt-6 border-t border-gray-700 pt-6 flex flex-col md:flex-row md:justify-between text-sm text-gray-400">
	<div class="space-x-4">
	<a href="#" class="hover:text-white">Terms of Service</a>
	<a href="#" class="hover:text-white">Privacy Policy</a>
	<a href="#" class="hover:text-white">Security Policy</a>
	</div>
	<div class="mt-4 md:mt-0">© PayHere Payments Ltd</div>
	</div>
	</div>
	</footer>
	</body>
	</html>