Improve the SetupWizard platform details page

Author: rsmithlal

app/views/better_together/wizard_step_definitions/host_setup/platform_details.html.erb

@@ -1,10 +1,34 @@
-<!-- app/views/better_together/setup_wizard_step_definitions/host_setup/platform_details.html.erb -->
+<!-- Hero Section -->
+<div class="container-fluid p-0">
+  <div class="hero-section" style="background: url(<%= asset_path('better_together/unsplash-community-1.jpeg') %>) no-repeat center center; background-size: cover; height: 50vh;">
+    <div class="overlay" style="background: rgba(0, 0, 0, 0.15); height: 100%; width: 100%;">
+      <div class="container h-100 d-flex align-items-center justify-content-center">
+        <div class="text-center text-white">
+          <h1 class="display-4 fw-bold">Welcome to the Community Engine!</h1>
+          <p class="lead">Let’s build something meaningful together.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
+<!-- Form Section -->
 <div class="container my-5">
   <div class="row justify-content-center">
     <div class="col-md-6">
-      <h1 class="text-center mb-4">Setup Your Better Together Community Platform</h1>
-      <p class="text-center mb-4">Fill out the platform details below to set up your platform.</p>
+      <!-- Progress Indicator -->
+      <div class="mb-4">
+        <div class="progress">
+          <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+            Step 1 of 2
+          </div>
+        </div>
+      </div>
+
+      <p class="text-center mb-4">
+        You’re about to create a space where your community can connect, collaborate, and thrive.
+        Let’s begin by setting up the essential details of your platform — this is the foundation for everything to come.
+      </p>
 
       <% if @form.errors.any? %>
         <div class="alert alert-danger">
@@ -20,31 +44,54 @@
       <%= form_for @form, url: setup_wizard_step_create_host_platform_path, method: :post, class: 'needs-validation', novalidate: true do |f| %>
         <div class="mb-3">
           <%= f.label :name, class: 'form-label' %>
-          <%= f.text_field :name, autofocus: true, class: "form-control#{' is-invalid' if @form.errors[:name].any?}", required: true %>
+          <%= f.text_field :name, autofocus: true, placeholder: 'Enter your platform name', class: "form-control#{' is-invalid' if @form.errors[:name].any?}", required: true %>
+          <small class="form-text text-muted">
+            This will be the name displayed on your platform.
+          </small>
         </div>
 
         <div class="mb-3">
           <%= f.label :description, class: 'form-label' %>
-          <%= f.text_area :description, class: "form-control#{' is-invalid' if @form.errors[:description].any?}", rows: 3, required: true %>
+          <%= f.text_area :description, placeholder: 'Provide a brief description of your platform', class: "form-control#{' is-invalid' if @form.errors[:description].any?}", rows: 3, required: true %>
+          <small class="form-text text-muted">
+            A short description helps users understand your platform's purpose.
+          </small>
         </div>
 
         <div class="mb-3">
           <%= f.label :url, class: 'form-label' %>
-          <%= f.text_field :url, class: "form-control#{' is-invalid' if @form.errors[:url].any?}", required: true %>
+          <%= f.text_field :url, placeholder: 'https://yourplatform.com', class: "form-control#{' is-invalid' if @form.errors[:url].any?}", required: true %>
+          <small class="form-text text-muted">
+            This will be the web address of your platform.
+          </small>
         </div>
 
         <div class="mb-3">
           <%= f.label :privacy, class: 'form-label' %>
           <%= f.select :privacy, BetterTogether::Platform.privacies.keys.map { |privacy| [privacy.humanize, privacy] }, {}, { class: 'form-select', required: true } %>
+          <small class="form-text text-muted">
+            Choose the privacy setting that best fits your platform.
+          </small>
         </div>
 
         <div class="mb-3">
           <%= f.label :time_zone, class: 'form-label' %>
           <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.all, {}, { class: 'form-select', id: 'time_zone_select', required: true } %>
+          <small class="form-text text-muted">
+            Set your platform's time zone for accurate scheduling.
+          </small>
         </div>
 
-        <%= f.submit 'Next Step', class: 'btn btn-primary' %>
+        <div class="mb-3">
+          <%= f.submit 'Next Step', class: 'btn btn-primary w-100' %>
+        </div>
       <% end %>
+
+      <!-- <div class="mt-4 text-center">
+        <small class="text-muted">
+          Need help? Check our <a href="/help/setup-guide" target="_blank">Setup Guide</a> for more details.
+        </small>
+      </div> -->
     </div>
   </div>
 </div>