styling (#161)

* trigger build * pricing
adnjoo · Nov 4, 2024 · 49c3d10 · 49c3d10
1 parent 832f2c5
commit 49c3d10
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 17 deletions.
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -1,5 +1,5 @@
 <div class="!max-w-lg my-container animate-in">
-  <h2 class="text-4xl font-extrabold text-black mb-6">Log in</h2>
+  <h2 class="text-4xl font-extrabold text-black mb-6">Login</h2>
 
   <br>
   <%= render "devise/shared/links" %>

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -1,4 +1,4 @@
-<footer class="bg-black text-white p-5">
+<footer class="p-4">
   <div class="max-w-6xl mx-auto w-full">
     <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4">
       <div class="flex flex-col items-start gap-2">

diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -1,4 +1,4 @@
-<nav class="bg-gray-800 text-gray-100 p-4 shadow-md" data-controller="toggle">
+<nav class="p-4 shadow-md" data-controller="toggle">
   <div class="max-w-6xl flex justify-between w-full mx-auto items-center">
     <%= link_to root_path, class: "flex items-center" do %>
       <%= image_tag "brand/logo_black_no_bg.png", alt: "Logo", class: "h-8 w-auto" %>
@@ -20,8 +20,8 @@
     </ul>
   </div>
   <!-- Dropdown menu -->
-  <div data-toggle-target="toggle" class="hidden">
-    <%= link_to "Settings", edit_user_registration_path, class: "block px-4 py-2 text-gray-700 hover:bg-gray-100" %>
-    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: "block px-4 py-2 text-gray-700 hover:bg-gray-100" %>
+  <div data-toggle-target="toggle" class="mt-2 hidden max-w-6xl flex flex-col w-full mx-auto">
+    <%= link_to "Settings", edit_user_registration_path, class: "block px-4 py-2 text-gray-700 hover:underline" %>
+    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: "block px-4 py-2 text-gray-700 hover:underline" %>
   </div>
 </nav>
diff --git a/app/views/static/pricing.html.erb b/app/views/static/pricing.html.erb
@@ -1,15 +1,66 @@
-<div class="my-container pt-12">
-  <div class="px-4">
-    <% if current_user && current_user.subscribed? %>
-      You're in! Subscribed to the monthly plan.
-    <% else %>
-      Oops, looks like you're not subscribed yet.
-    <% end %>
+<div class="flex flex-row max-w-6xl w-full my-container">
+  <!-- Basic Plan -->
+  <div class="flex flex-col rounded-lg border border-gray-200 border-black m-4 w-full">
+    <div class="grid gap-4 p-6">
+      <h3 class="text-xl font-semibold">Basic</h3>
+      <p class="text-sm text-gray-500">For individuals who need unlimited task creation</p>
+      <p>
+        <span class="text-4xl font-semibold">Free</span>
+      </p>
+      <div class="grid gap-2 text-sm text-gray-600">
+        <p class="flex items-center gap-2 my-1">
+          ✓ Unlimited task creation
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✗ No shared task management
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✗ No penalty tasks
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✗ Basic analytics only
+          <span class="ml-2 text-xs font-semibold text-blue-800 rounded-full px-2 border rounded-md">Coming Soon</span>
+        </p>
+      </div>
+    </div>
+
+    <a href="/users/sign_in" style="width:170px" class="p-4 m-4 border rounded-md shadow-lg transition-transform transform active:translate-y-1 hover:-translate-y-1">
+      Get Started
+    </a>
   </div>
-  <div class="m-4 bg-white border-4 border-black shadow-none">
+
+  <!-- Pro Plan -->
+  <div class="flex flex-col rounded-lg border border-gray-200 border-black m-4 w-full">
+    <div class="grid gap-4 p-6">
+      <h3 class="text-xl font-semibold">Pro</h3>
+      <p class="text-sm text-gray-500">For power users and advanced features</p>
+      <p>
+        <span class="text-4xl font-semibold">
+          US<%= "$#{SUBSCRIPTION_PRICE_MONTHLY}" %>
+        </span>
+        <span class="">/month</span>
+      </p>
+      <div class="grid gap-2 text-sm text-gray-600">
+        <p class="flex items-center gap-2 my-1">
+          ✓ Penalty tasks for accountability
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✓ Shared task management
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✓ Advanced analytics & insight 
+          <span class="ml-2 text-xs font-semibold text-blue-800 rounded-full px-2 border rounded-md">Coming Soon</span>
+        </p>
+        <p class="flex items-center gap-2 my-1">
+          ✓ AI task prioritization 
+          <span class="ml-2 text-xs font-semibold text-blue-800 rounded-full px-2 border rounded-md">Coming Soon</span>
+        </p>
+      </div>
+    </div>
+
     <%= form_tag purchase_checkouts_path, method: :post, data: { turbo: false } do %>
       <input type="hidden" name="price_id" value="<%= Rails.application.credentials.dig(:stripe, :pricing, :monthly) %>" />
-      <%= submit_tag "Get Pro for $#{SUBSCRIPTION_PRICE_MONTHLY}/mo", data: { disable_with: "Hang tight..." }, class: "px-4 py-6 bg-yellow-400 border-4 border-black text-center text-xl font-extrabold uppercase text-black w-full" %>
+      <%= submit_tag "Get Pro for $#{SUBSCRIPTION_PRICE_MONTHLY}/mo", data: { disable_with: "Hang tight..." }, class: "cursor-pointer p-4 m-4 border rounded-md shadow-lg transition-transform transform active:translate-y-1 hover:-translate-y-1" %>
     <% end %>
   </div>
 </div>
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
@@ -12,5 +12,5 @@
 TWITTER_LINK = "https://x.com/dueltasks"
 
 # Subscription Prices
-SUBSCRIPTION_PRICE_MONTHLY = 1
-SUBSCRIPTION_PRICE_ANNUAL = 50
+SUBSCRIPTION_PRICE_MONTHLY = 3
+SUBSCRIPTION_PRICE_ANNUAL = 24