Merge pull request #197 from Ches-ctrl/2024-06-17-front-end-wizardry

2024 06 17 front end wizardry

app/models/user.rb

@@ -16,4 +16,8 @@ class User < ApplicationRecord
 
   # == Validations ==========================================================
   validates :first_name, :last_name, presence: true
+
+  def full_name
+    "#{first_name} #{last_name}"
+  end
 end

app/views/shared/template/_page_footer.html.erb

@@ -1,29 +1,36 @@
 <% social_links = [
   {
     sr_text: 'Follow us on X',
-    icon_name: 'logos/x'
+    icon_name: 'logos/x',
+    link: 'https://x.com'
   },
   {
     sr_text: 'Follow us on Github',
-    icon_name: 'logos/github'
+    icon_name: 'logos/github',
+    link: 'https://www.github.com/Ches-ctrl/Cheddar'
   },
   {
     sr_text: 'Join our Discord server',
     icon_name: 'logos/discord'
   },
+  # {
+  #   sr_text: 'Follow us on LinkedIn',
+  #   icon_name: 'logos/linkedin',
+  #   link: 'https://www.linkedin.com/company/Cheddarjobs'
+  # }
 ] %>
 <footer class="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
   <div class="flex flex-col items-center justify-between gap-5 border-t border-zinc-900/5 pt-8 sm:flex-row dark:border-white/5">
     <p class="text-xs text-zinc-600 dark:text-zinc-400">
-      &copy; Copyright 2024. All rights reserved.
+      &copy; Cheddar 2024. All rights reserved.
     </p>
     <div class="flex gap-4">
       <% social_links.each do |link| %>
-        <%= link_to  '#', class: 'group' do %>
+        <%= link_to  link[:link], class: 'group' do %>
           <span class="sr-only"><%= link[:sr_text] %></span>
           <%= inline_svg_tag("template/icons/#{link[:icon_name]}.svg") %>
         <% end %>
       <% end %>
     </div>
   </div>
-</footer>
+</footer>

app/views/shared/template/layout/_profile_dropdown.html.erb

@@ -1,13 +1,10 @@
-
 <!-- Profile dropdown -->
 <div class="relative ml-3" data-controller="profile-dropdown" data-profile-dropdown-target="dropdownContainer">
   <div>
     <button type="button" class="relative flex rounded-full bg-white dark:bg-zinc-900 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
       <span class="absolute -inset-1.5"></span>
       <span class="sr-only">Open user menu</span>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-      </svg>      
+      <img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name=<%= current_user.full_name %>&background=0D8ABC&color=fff" alt="">
     </button>
   </div>
   <div class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-zinc-50 dark:bg-zinc-900 py-1 shadow-lg ring-1 ring-zinc-900/7.5 dark:ring-zinc-800 ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" data-profile-dropdown-target="dropdown">
@@ -16,4 +13,4 @@
     <%= link_to "Edit account", edit_user_registration_path, class: "block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-white" %>
     <%= link_to "Sign out", destroy_user_session_path, data: { turbo_method: :delete }, class: "block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-white" %>
   </div>
-</div>
+</div>

app/views/uncategorized_pages/tothemoon.html.erb

@@ -7,10 +7,10 @@
         <div class="py-24 sm:py-32">
             <div class="mx-auto max-w-7xl px-6 lg:px-8">
                 <div class="mx-auto max-w-2xl text-center">
-                    <h1 class="text-4xl font-bold tracking-tight  sm:text-6xl">Deploy to the cloud with confidence</h1>
-                    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
+                    <h1 class="text-4xl font-bold tracking-tight  sm:text-6xl">Apply to any job via a single application</h1>
+                    <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">Cheddar helps graduates find a job via its all-in-one platform so they can pursue fulfilling careers and achieve their potential.</p>
                     <div class="mt-10 flex items-center justify-center gap-x-6">
-                        <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
+                        <%= link_to "Get started", opportunities_path, class: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
                         <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white">Learn more <span aria-hidden="true">→</span>
                         </a>
                     </div>
@@ -52,9 +52,9 @@
     <!-- Feature section -->
     <div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8">
         <div class="mx-auto max-w-2xl lg:text-center">
-            <h2 class="text-base font-semibold leading-7 text-indigo-600">Deploy faster</h2>
-            <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Everything you need to deploy your app</p>
-            <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
+            <h2 class="text-base font-semibold leading-7 text-indigo-600">Get hired</h2>
+            <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">The only site you need to find a job</p>
+            <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">Cheddar aggregates all the best jobs and harmonises them into a single application process so you can apply to jobs as easily as you would purchase something online.</p>
         </div>
         <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
             <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
@@ -135,7 +135,7 @@
             <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Boost your productivity. <br>Start using our app today. </h2>
             <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600 dark:text-gray-400">Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.</p>
             <div class="mt-10 flex items-center justify-center gap-x-6">
-                <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
+                <%= link_to "Get started", opportunities_path, class: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
                 <a href="#" class="text-sm font-semibold leading-6 text-gray-900 dark:text-white">Learn more <span aria-hidden="true">→</span>
                 </a>
             </div>
@@ -144,4 +144,4 @@
             <div class="aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
         </div>
     </div>
-</main>
+</main>