chore: wip

Author: glennmichael123

resources/components/Bench/BenchHeader.vue

@@ -19,10 +19,10 @@
               Find Judges
             </router-link>
             <router-link 
-              to="/review/new" 
+              to="/review" 
               class="text-sm/6 font-semibold text-gray-900 border-b-2 transition-colors duration-200"
               :class="[
-                route.path === '/review/new' 
+                route.path === '/review' 
                   ? 'border-gray-500 text-gray-600' 
                   : 'border-transparent hover:border-gray-500'
               ]"

resources/components/Bench/CallToAction.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="bg-off-white py-16 pb-32">
+    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+      <div class="text-center">
+        <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Ready to get started?</h3>
+        <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">
+          Join our community of legal professionals and get access to comprehensive judge reviews, ratings, and insights to help you make informed decisions.
+        </p>
+        <div class="mt-10 flex items-center justify-center gap-x-6">
+          <a href="/register" class="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
+            Get Started
+          </a>
+          <a href="/about" class="text-sm font-semibold leading-6 text-gray-900">
+            Learn more <span aria-hidden="true">→</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

resources/components/Bench/HeroSection.vue

@@ -15,7 +15,7 @@
                 <router-link to="/judges"
                   class="rounded-sm bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Find
                   a Judge</router-link>
-                <router-link to="/review/new" class="text-sm/6 font-semibold text-gray-700">Write a Review <span
+                <router-link to="/review" class="text-sm/6 font-semibold text-gray-700">Write a Review <span
                     aria-hidden="true">→</span></router-link>
               </div>
             </div>

resources/components/Bench/Judge/ProfileHeader.vue

@@ -34,7 +34,7 @@ const copyProfileLink = () => {
           >
             {{ showCopiedFeedback ? 'Copied!' : 'Copy Profile Link' }}
           </button>
-          <router-link to="/review/new" class="hidden text-sm/6 font-semibold text-gray-900 sm:block">Write Review</router-link>
+          <router-link to="/review" class="hidden text-sm/6 font-semibold text-gray-900 sm:block">Write Review</router-link>
           <a href="#" class="rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Follow</a>
 
           <div class="relative sm:hidden">
@@ -47,7 +47,7 @@ const copyProfileLink = () => {
 
             <div class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="more-menu-button" tabindex="-1">
               <button type="button" class="block w-full px-3 py-1 text-left text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-0">Share Profile</button>
-              <router-link to="/review/new" class="block px-3 py-1 text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-1">Write Review</router-link>
+              <router-link to="/review" class="block px-3 py-1 text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-1">Write Review</router-link>
             </div>
           </div>
         </div>

resources/components/Bench/MobileMenu.vue

@@ -30,10 +30,10 @@
               Find Judges
             </router-link>
             <router-link
-              to="/review/new"
+              to="/review"
               class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold border-b-2 transition-colors duration-200"
               :class="[
-                $route.path === '/review/new' 
+                $route.path === '/review' 
                   ? 'border-blue-500 text-blue-600' 
                   : 'border-transparent hover:border-blue-500 text-gray-900'
               ]"

resources/components/Bench/PricingSection.vue

@@ -26,7 +26,7 @@
       </div>
 
       <div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 md:max-w-2xl md:grid-cols-2">
-        <div class="rounded-3xl p-8 ring-1 ring-gray-200">
+        <div class="rounded-3xl p-8 ring-1 ring-gray-200 bg-white">
           <h3 id="tier-free" class="text-lg/8 font-semibold text-gray-800">Free</h3>
           <p class="mt-4 text-sm/6 text-gray-600">Are you a clerk? This is for you.</p>
           <p class="mt-6 flex items-baseline gap-x-1">
@@ -58,7 +58,7 @@
             </li>
           </ul>
         </div>
-        <div class="rounded-3xl p-8 ring-2 ring-gray-600">
+        <div class="rounded-3xl p-8 ring-2 ring-gray-600 bg-white">
           <h3 id="tier-hobby" class="text-lg/8 font-semibold text-gray-600">Professional</h3>
           <p class="mt-4 text-sm/6 text-gray-600">For anyone curious about judge reviews.</p>
           <p class="mt-6 flex items-baseline gap-x-1">

resources/components/Bench/ReviewForm.vue

@@ -16,6 +16,7 @@ const knowledge = ref(0)
 const hoverKnowledge = ref(0)
 const demeanor = ref(0)
 const hoverDemeanor = ref(0)
+const isAnonymous = ref(false)
 
 interface Judge {
   id: string;
@@ -84,7 +85,7 @@ function handleCancel() {
 </script>
 
 <template>
-  <div class="space-y-12">
+  <div class="space-y-12 pb-32">
     <ReviewJudgeSearch v-if="!judge" class="mb-48"/>
 
     <!-- Review Form - Only shown when judge is selected -->
@@ -116,8 +117,9 @@ function handleCancel() {
               name="title"
               id="title"
               v-model="reviewTitle"
+              :disabled="!judge"
               placeholder="Brief summary of your experience"
-              class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6"
+              class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6 disabled:opacity-50 disabled:cursor-not-allowed"
             >
           </div>
         </div>
@@ -131,7 +133,8 @@ function handleCancel() {
                   v-for="star in 5" 
                   :key="star"
                   type="button"
-                  class="text-gray-300 hover:text-yellow-400 focus:outline-none"
+                  :disabled="!judge"
+                  class="text-gray-300 hover:text-yellow-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                   :class="{ 'text-yellow-400': star <= (hoverFairness || fairness) }"
                   @click="fairness = star"
                   @mouseenter="hoverFairness = star"
@@ -154,7 +157,8 @@ function handleCancel() {
                   v-for="star in 5" 
                   :key="star"
                   type="button"
-                  class="text-gray-300 hover:text-yellow-400 focus:outline-none"
+                  :disabled="!judge"
+                  class="text-gray-300 hover:text-yellow-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                   :class="{ 'text-yellow-400': star <= (hoverKnowledge || knowledge) }"
                   @click="knowledge = star"
                   @mouseenter="hoverKnowledge = star"
@@ -177,7 +181,8 @@ function handleCancel() {
                   v-for="star in 5" 
                   :key="star"
                   type="button"
-                  class="text-gray-300 hover:text-yellow-400 focus:outline-none"
+                  :disabled="!judge"
+                  class="text-gray-300 hover:text-yellow-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                   :class="{ 'text-yellow-400': star <= (hoverDemeanor || demeanor) }"
                   @click="demeanor = star"
                   @mouseenter="hoverDemeanor = star"
@@ -198,21 +203,38 @@ function handleCancel() {
         <div class="sm:col-span-3">
           <label for="case-number" class="block text-sm/6 font-medium text-gray-700">Case Number (Optional)</label>
           <div class="mt-2">
-            <input type="text" name="case-number" id="case-number" class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6">
+            <input 
+              type="text" 
+              name="case-number" 
+              id="case-number" 
+              :disabled="!judge"
+              class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
           </div>
         </div>
 
         <div class="sm:col-span-3">
           <label for="case-date" class="block text-sm/6 font-medium text-gray-700">Case Date (Optional)</label>
           <div class="mt-2">
-            <input type="date" name="case-date" id="case-date" class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6">
+            <input 
+              type="date" 
+              name="case-date" 
+              id="case-date" 
+              :disabled="!judge"
+              class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
           </div>
         </div>
 
         <div class="col-span-full">
           <label for="role" class="block text-sm/6 font-medium text-gray-700">Your Role in the Case</label>
           <div class="mt-2">
-            <select id="role" name="role" class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6">
+            <select 
+              id="role" 
+              name="role" 
+              :disabled="!judge"
+              class="block w-full rounded-md bg-off-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600 sm:text-sm/6 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
               <option>Attorney</option>
               <option>Party to the Case</option>
               <option>Court Staff</option>
@@ -221,6 +243,56 @@ function handleCancel() {
             </select>
           </div>
         </div>
+
+        <div class="col-span-full">
+          <div class="relative flex items-start">
+            <div class="flex h-6 items-center">
+              <button
+                type="button"
+                :disabled="!judge"
+                @click="isAnonymous = !isAnonymous"
+                :class="[
+                  isAnonymous ? 'bg-gray-600' : 'bg-gray-200',
+                  'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'
+                ]"
+              >
+                <span
+                  :class="[
+                    isAnonymous ? 'translate-x-5' : 'translate-x-0',
+                    'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                  ]"
+                >
+                  <span
+                    :class="[
+                      isAnonymous ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in',
+                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+                    ]"
+                    aria-hidden="true"
+                  >
+                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                  </span>
+                  <span
+                    :class="[
+                      isAnonymous ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out',
+                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+                    ]"
+                    aria-hidden="true"
+                  >
+                    <svg class="h-3 w-3 text-gray-600" fill="currentColor" viewBox="0 0 12 12">
+                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div class="ml-3 text-sm leading-6">
+              <label for="anonymous" class="font-medium text-gray-700">Post anonymously</label>
+              <p class="text-gray-500">Your name will not be displayed with this review</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
@@ -232,7 +304,8 @@ function handleCancel() {
                 v-for="star in 5" 
                 :key="star"
                 type="button"
-                class="text-gray-300 hover:text-yellow-400 focus:outline-none"
+                :disabled="!judge"
+                class="text-gray-300 hover:text-yellow-400 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                 :class="{ 'text-yellow-400': star <= (hoverRating || rating) }"
                 @click="rating = star"
                 @mouseenter="hoverRating = star"
@@ -250,7 +323,10 @@ function handleCancel() {
         <div class="col-span-full">
           <label for="review" class="block text-sm/6 font-medium text-gray-700">Your Review</label>
           <div class="mt-2">
-            <RichTextEditor v-model="reviewContent" />
+            <RichTextEditor 
+              v-model="reviewContent" 
+              :disabled="!judge"
+            />
           </div>
           <p class="mt-3 text-sm/6 text-gray-600">Please be specific about your experience and maintain a professional tone.</p>
         </div>

resources/views/review/new.vue

@@ -82,6 +82,7 @@ const review: BenchReviews = {
     </div>
     <PricingSection />
     <TestimonialsSection />
+    <CallToAction />
   </main>
 
 </template>

resources/views/secret-marketing.vue

@@ -24,7 +24,7 @@ declare module 'vue' {
     BenchHeader: typeof import('./../../../resources/components/Bench/BenchHeader.vue')['default']
     BlurReview: typeof import('./../../../resources/components/Bench/BlurReview.vue')['default']
     CacheForm: typeof import('./../defaults/components/Dashboard/Settings/Forms/CacheForm.vue')['default']
-    CallToAction: typeof import('./../defaults/components/Marketing/CallToAction.vue')['default']
+    CallToAction: typeof import('./../../../resources/components/Bench/CallToAction.vue')['default']
     CardBrands: typeof import('./../defaults/components/Dashboard/Billing/CardBrands.vue')['default']
     CardForm: typeof import('./../defaults/components/Dashboard/Billing/CardForm.vue')['default']
     Cases: typeof import('./../../../resources/components/Bench/Judge/Cases.vue')['default']