Skip to content

Commit 45eada7

Browse files
glennmichael123glennmichael123
committed
chore: wip
1 parent 3fc81e3 commit 45eada7

File tree

10 files changed

+167
-84
lines changed

10 files changed

+167
-84
lines changed

‎resources/components/Bench/BenchHeader.vue‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,19 @@
1818
>
1919
Find Judges
2020
</router-link>
21+
22+
<router-link
23+
to="/courts"
24+
class="text-sm/6 font-semibold text-gray-900 border-b-2 transition-colors duration-200"
25+
:class="[
26+
route.path === '/courts'
27+
? 'border-gray-500 text-gray-600'
28+
: 'border-transparent hover:border-gray-500'
29+
]"
30+
>
31+
Find Court Houses
32+
</router-link>
33+
2134
<router-link
2235
to="/review"
2336
class="text-sm/6 font-semibold text-gray-900 border-b-2 transition-colors duration-200"
@@ -30,15 +43,26 @@
3043
Write Review
3144
</router-link>
3245
<router-link
33-
to="/feed"
46+
to="/reviews"
3447
class="text-sm/6 font-semibold text-gray-900 border-b-2 transition-colors duration-200"
3548
:class="[
36-
route.path === '/feed'
49+
route.path === '/reviews'
3750
? 'border-gray-500 text-gray-600'
3851
: 'border-transparent hover:border-gray-500'
3952
]"
4053
>
41-
Feed
54+
Reviews
55+
</router-link>
56+
<router-link
57+
to="/blog"
58+
class="text-sm/6 font-semibold text-gray-900 border-b-2 transition-colors duration-200"
59+
:class="[
60+
route.path === '/blog'
61+
? 'border-gray-500 text-gray-600'
62+
: 'border-transparent hover:border-gray-500'
63+
]"
64+
>
65+
Blog
4266
</router-link>
4367
</div>
4468
</div>
@@ -148,6 +172,8 @@ const props = withDefaults(defineProps<Props>(), {
148172
comingSoon: false
149173
})
150174
175+
const comingSoon = props.comingSoon
176+
151177
// This would typically come from your auth store
152178
const isAuthenticated = ref(false)
153179
const isProfileMenuOpen = ref(false)

‎resources/components/Bench/HeroSection.vue‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,19 @@
77
<div class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
88
<h1 class="text-pretty text-5xl font-semibold tracking-tight text-gray-800 sm:text-7xl">Transparency in
99
the Judiciary Starts Here</h1>
10-
<p class="mt-8 text-pretty text-lg font-medium text-gray-600 sm:max-w-md sm:text-xl/8 lg:max-w-none">The
11-
first-ever platform dedicated to judicial transparency. Read and share experiences with judges across
12-
the country. Like Glassdoor for the judiciary, we're empowering citizens to make informed decisions
13-
about their legal representatives.</p>
10+
11+
<blockquote class="mt-8 border-l-4 border-gray-300 pl-4 italic ml-4">
12+
<p class="text-gray-700 leading-8">
13+
"Publicity is justly commended as a remedy for social and industrial diseases. Sunlight is said to be
14+
the best of disinfectants; electric light the most efficient policeman."
15+
</p>
16+
<footer class="mt-2 text-sm text-gray-500">
17+
— Justice Louis D. Brandeis, "What Publicity Can Do," 1913
18+
</footer>
19+
</blockquote>
20+
21+
<p class="mt-8 text-pretty text-lg font-medium text-gray-600 sm:max-w-md sm:text-xl/8 lg:max-w-none">
22+
Like Glassdoor but for the judiciary. Written by clerks, so you can get a glimpse into the inner workings of the court system.</p>
1423
<div class="mt-10 flex items-center gap-x-6">
1524
<router-link to="/judges"
1625
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
@@ -23,7 +32,7 @@
2332
<div class="w-full max-w-2xl">
2433
<div class="relative">
2534
<img src="/images/bench/hero-image.webp" alt="Bench Hero"
26-
class="w-full rounded-lg object-cover shadow-sm">
35+
class="w-full rounded-lg object-cover">
2736
</div>
2837
</div>
2938
</div>

‎resources/components/Bench/JudgeDirectory.vue‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
const query = searchQuery.value.toLowerCase()
1010
return judges.value.filter(judge =>
1111
judge.name.toLowerCase().includes(query) ||
12-
judge.court.toLowerCase().includes(query) ||
12+
judge.court.name.toLowerCase().includes(query) ||
1313
judge.location.toLowerCase().includes(query)
1414
)
1515
})
@@ -68,16 +68,31 @@
6868

6969
<!-- Judges Grid -->
7070
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
71-
<div v-for="judge in filteredJudges" :key="judge.id"
72-
class="group relative bg-off-gray rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100 hover:border-softBrown">
73-
<div class="p-6">
71+
<router-link
72+
v-for="judge in filteredJudges"
73+
:key="judge.id"
74+
:to="`judges/${judge.id}/profile`"
75+
class="group relative bg-off-gray rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100 hover:border-softBrown"
76+
>
77+
<!-- Background Image Container -->
78+
<div class="absolute inset-0 z-0">
79+
<img
80+
:src="judge.court.image"
81+
:alt="`${judge.court.name} courthouse`"
82+
class="h-full w-full object-cover opacity-10 group-hover:opacity-30 transition-all duration-300"
83+
>
84+
<div class="absolute inset-0 bg-gradient-to-b from-white/70 via-white/40 to-white/80 group-hover:from-white/60 group-hover:via-white/30 group-hover:to-white/70 transition-all duration-300"></div>
85+
</div>
86+
87+
<!-- Content Container -->
88+
<div class="relative z-10 p-6">
7489
<div class="relative">
7590
<div class="mx-auto h-40 w-40 overflow-hidden rounded-full ring-4 ring-gray-50 group-hover:ring-softBrown transition-all duration-300">
7691
<img class="h-full w-full object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300" :src="judge.image" :alt="judge.name">
7792
</div>
7893
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2">
7994
<span class="inline-flex items-center rounded-full bg-warm-gray px-3 py-1 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-700/10">
80-
{{ judge.court }}
95+
{{ judge.court.name }}
8196
</span>
8297
</div>
8398
</div>
@@ -87,40 +102,18 @@
87102
<p class="mt-2 text-sm text-gray-500">{{ judge.location }}</p>
88103

89104
<div class="mt-4 flex items-center justify-center">
90-
<div class="flex items-center">
91-
<svg v-for="star in 5" :key="star"
92-
:class="[star <= judge.rating ? 'text-yellow-400' : 'text-gray-200', 'h-5 w-5 flex-shrink-0']"
93-
viewBox="0 0 20 20" fill="currentColor">
94-
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
95-
</svg>
96-
</div>
97-
<span class="ml-2 text-sm text-gray-500">({{ judge.reviewCount }} reviews)</span>
98-
</div>
99-
</div>
100-
</div>
101-
102-
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-warm-gray to-transparent h-24"></div>
103-
<div class="relative bg-off-gray-darker px-6 py-4">
104-
<div class="flex justify-center space-x-4">
105-
<router-link :to="`judges/${judge.id}/profile`"
106-
class="items-center justify-center gap-x-2 rounded-lg bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-200/50 hover:bg-white hover:ring-softBrown hover:text-deepBrown transition-all duration-200">
107-
<svg class="h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
108-
<path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
109-
<path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
105+
<div class="flex items-center">
106+
<svg v-for="star in 5" :key="star"
107+
:class="[star <= judge.rating ? 'text-yellow-400' : 'text-gray-200', 'h-5 w-5 flex-shrink-0']"
108+
viewBox="0 0 20 20" fill="currentColor">
109+
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
110110
</svg>
111-
</router-link>
112-
113-
<router-link :to="`judges/review/${judge.id}`"
114-
class="items-center justify-center gap-x-2 rounded-lg bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-200/50 hover:bg-white hover:ring-softBrown hover:text-deepBrown transition-all duration-200">
115-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-gray-500">
116-
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
117-
</svg>
118-
119-
120-
</router-link>
111+
</div>
112+
<span class="ml-2 text-sm text-gray-500">({{ judge.reviewCount }} reviews)</span>
121113
</div>
122114
</div>
123115
</div>
116+
</router-link>
124117
</div>
125118

126119
<!-- Pagination -->

0 commit comments

Comments
 (0)