Custom Code page 2

{% layout none %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rewards Program</title>
<link rel="stylesheet" href="{{ 'styles.css' | asset_url }}">
</head>
<body>
<div class="container">
{% if customer %}
<h1>Welcome back, {{ customer.first_name }}!</h1>
<p>You are already a member of our Rewards Program.</p>
<p>Refer a friend to earn more rewards!</p>
{% else %}
<h1>Welcome to Our Rewards Program</h1>
<div class="signup-form">
<h2>Sign Up</h2>
<form action="#" method="POST">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Sign Up</button>
</form>
</div>
<div class="referral-form">
<h2>Refer a Friend</h2>
<form action="#" method="POST">
<label for="friend_email">Friend's Email:</label>
<input type="email" id="friend_email" name="friend_email" required>

<label for="product_link">Product Link:</label>
<input type="text" id="product_link" name="product_link" required>

<button type="submit">Send Invitation</button>
</form>
</div>
{% endif %}
</div>
</body>
</html>