Skip to content

Commit a31ddac

Browse files
Merge pull request #153 from acara-app/feat/improve-food-page
Feat/improve food page
2 parents 2928595 + 9820548 commit a31ddac

File tree

9 files changed

+432
-424
lines changed

9 files changed

+432
-424
lines changed

resources/views/ai-health-coach.blade.php

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,11 @@ class="w-full sm:w-auto rounded-full bg-[#FF6B4A] px-8 py-3.5 text-center text-b
180180
<a href="https://github.com/acara-app/plate"
181181
target="_blank"
182182
rel="noopener noreferrer"
183-
class="text-sm font-semibold leading-6 text-slate-900 hover:text-slate-700 transition-colors">
184-
View Source Code <span aria-hidden="true">→</span>
183+
class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-white px-6 py-3.5 text-base font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 transition-all duration-200 hover:bg-slate-50 hover:text-slate-900 hover:ring-slate-300 hover:-translate-y-0.5">
184+
<svg class="h-5 w-5 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
185+
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
186+
</svg>
187+
Star on GitHub
185188
</a>
186189
</div>
187190
</div>
@@ -357,18 +360,20 @@ class="w-full h-auto max-w-xl mx-auto"
357360
We're building an open science health stack because we got tired of wellness data being locked in proprietary apps. Your health data should be yours—verifiable, portable, and transparent.
358361
</p>
359362
<div class="mt-8 flex justify-center">
360-
<a href="{{ route('register') }}" class="text-base font-semibold text-rose-600 hover:text-rose-500 border-b-2 border-rose-100 hover:border-rose-500 transition-colors pb-1">
361-
See what it can do
363+
<a href="{{ route('register') }}" class="group inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-base font-semibold text-rose-600 shadow-sm ring-1 ring-slate-200 transition-all duration-200 hover:bg-slate-50 hover:ring-slate-300 hover:-translate-y-0.5">
364+
See what it can do
362365
</a>
363366
</div>
364367
</div>
365368
</section>
366369

367370
</div>
368-
<x-cta-block
369-
title="Get to Know Altani Better"
370-
description="Meet your AI health coach — ready to help with sleep, stress, nutrition, and daily wellness support."
371-
button-text="Meet Altani"
372-
/>
371+
<section class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
372+
<x-cta-block
373+
title="Get to Know Altani Better"
374+
description="Meet your AI health coach — ready to help with sleep, stress, nutrition, and daily wellness support."
375+
button-text="Meet Altani"
376+
/>
377+
</section>
373378
<x-footer />
374379
</x-default-layout>

resources/views/ai-nutritionist.blade.php

Lines changed: 313 additions & 308 deletions
Large diffs are not rendered by default.

resources/views/ai-personal-trainer.blade.php

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
<img src="https://pub-plate-assets.acara.app/images/runner-woman-4.svg" alt="Graphic of a woman running for fitness" aria-hidden="true" class="absolute bottom-0 right-4 w-24 sm:w-32 md:w-44 translate-y-6 opacity-70 select-none pointer-events-none">
168168

169169
<div class="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
170-
<div class="relative z-10 mx-auto max-w-3xl">
170+
<div class="relative z-10 mx-auto max-w-3xl text-center">
171171
<div class="mb-6 flex justify-center">
172172
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-sm font-medium text-emerald-800">
173173
<svg class="h-4 w-4 text-emerald-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -183,12 +183,15 @@
183183
<p class="mt-6 text-lg leading-8 text-slate-600 max-w-2xl mx-auto speakable-intro">
184184
You don't need a gym membership or fancy equipment to get stronger. You need a plan that respects your time and meets you where you are.
185185
</p>
186-
<div class="mt-10 flex items-center justify-center gap-x-6">
187-
<a href="{{ route('register') }}" class="rounded-full bg-[#FF6B4A] px-8 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-[#E85A3A] transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B4A]">
186+
<div class="mt-10 flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-4 max-w-sm sm:max-w-none mx-auto">
187+
<a href="{{ route('register') }}" class="w-full sm:w-auto rounded-full bg-[#FF6B4A] px-8 py-3.5 text-center text-base font-semibold text-white shadow-lg shadow-[#FF6B4A]/20 hover:bg-[#E85A3A] hover:shadow-[#FF6B4A]/30 hover:-translate-y-0.5 transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B4A]">
188188
Start Your Workout
189189
</a>
190-
<a href="https://github.com/acara-app/plate" target="_blank" class="text-sm font-semibold leading-6 text-slate-900">
191-
View Source Code <span aria-hidden="true">→</span>
190+
<a href="https://github.com/acara-app/plate" target="_blank" rel="noopener noreferrer" class="w-full sm:w-auto group flex items-center justify-center gap-2 rounded-full bg-white px-6 py-3.5 text-base font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 transition-all duration-200 hover:bg-slate-50 hover:text-slate-900 hover:ring-slate-300 hover:-translate-y-0.5">
191+
<svg class="h-5 w-5 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
192+
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
193+
</svg>
194+
Star on GitHub
192195
</a>
193196
</div>
194197
</div>
@@ -355,18 +358,20 @@
355358
This is one tool in an open science health stack. We're building it because we got tired of fitness data being locked away in proprietary apps. Your progress belongs to you.
356359
</p>
357360
<div class="mt-8 flex justify-center">
358-
<a href="{{ route('register') }}" class="text-base font-semibold text-rose-600 hover:text-rose-500 border-b-2 border-rose-100 hover:border-rose-500 transition-colors pb-1">
359-
Get your first workout
361+
<a href="{{ route('register') }}" class="group inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-base font-semibold text-rose-600 shadow-sm ring-1 ring-slate-200 transition-all duration-200 hover:bg-slate-50 hover:ring-slate-300 hover:-translate-y-0.5">
362+
Get your first workout
360363
</a>
361364
</div>
362365
</div>
363366
</section>
364367

365368
</div>
366-
<x-cta-block
367-
title="Pair Your Fitness with Nutrition AI"
368-
description="Let Altani help you optimize your nutrition to fuel your workouts and recovery."
369-
button-text="Meet Altani"
370-
/>
369+
<section class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
370+
<x-cta-block
371+
title="Pair Your Fitness with Nutrition AI"
372+
description="Let Altani help you optimize your nutrition to fuel your workouts and recovery."
373+
button-text="Meet Altani"
374+
/>
375+
</section>
371376
<x-footer />
372377
</x-default-layout>

resources/views/components/cta-block.blade.php

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,43 @@
22
'title' => '',
33
'description' => '',
44
'buttonText' => '',
5-
'buttonUrl' => 'meet-altani',
5+
'buttonUrl' => route('meet-altani'),
66
'avatarSrc' => 'https://pub-plate-assets.acara.app/images/altani_with_hand_on_chin_considering_expression_thought-1024.webp',
77
])
88

9-
<section class="bg-orange-50 py-12 sm:py-16">
10-
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
11-
<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-orange-100 sm:p-10">
12-
<div class="items-center gap-8 lg:flex">
13-
<div class="mb-6 shrink-0 lg:mb-0">
14-
<img
15-
src="{{ $avatarSrc }}"
16-
alt="Altani, your personal AI health coach"
17-
class="mx-auto h-24 w-24 rounded-full object-cover shadow-lg ring-4 ring-orange-50 sm:h-32 sm:w-32"
18-
>
19-
</div>
20-
<div class="flex-1 text-center lg:text-left">
21-
<h3 class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl">
22-
{{ $title }}
23-
</h3>
24-
<p class="mt-2 text-sm text-slate-600 sm:text-base">
25-
{{ $description }}
26-
</p>
27-
<div class="mt-6">
28-
<a
29-
href="{{ route($buttonUrl) }}"
30-
class="inline-flex items-center justify-center rounded-full bg-[#FF6B4A] px-6 py-2.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#E85A3A] hover:shadow-lg hover:-translate-y-0.5"
31-
>
32-
{{ $buttonText }}
33-
<svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
34-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
35-
</svg>
36-
</a>
37-
</div>
38-
</div>
9+
<div class="relative max-w-6xl mx-auto overflow-hidden rounded-3xl bg-linear-to-br from-[#FFF5EE] via-[#FFFBF5] to-[#FFEFE5] p-8 shadow-sm ring-1 ring-[#FF6B4A]/10 sm:p-10">
10+
<div class="pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full bg-[#FF6B4A]/6 blur-3xl" aria-hidden="true"></div>
11+
<div class="pointer-events-none absolute -left-10 -bottom-10 h-32 w-32 rounded-full bg-[#FFBFA9]/10 blur-2xl" aria-hidden="true"></div>
12+
13+
<div class="relative z-10 flex flex-col items-center gap-6 sm:flex-row sm:items-center sm:gap-8">
14+
<div class="shrink-0">
15+
<div class="rounded-full bg-linear-to-br from-[#FF6B4A]/20 to-[#FFBFA9]/30 p-1">
16+
<img
17+
src="{{ $avatarSrc }}"
18+
alt="Altani, your personal AI health coach"
19+
class="h-24 w-24 rounded-full object-cover ring-2 ring-white sm:h-28 sm:w-28"
20+
>
21+
</div>
22+
</div>
23+
24+
<div class="flex-1 text-center sm:text-left">
25+
<h3 class="text-xl font-bold tracking-tight text-slate-800 sm:text-2xl">
26+
{{ $title }}
27+
</h3>
28+
<p class="mt-2 text-sm leading-relaxed text-slate-500 sm:text-base">
29+
{{ $description }}
30+
</p>
31+
<div class="mt-6">
32+
<a
33+
href="{{ $buttonUrl }}"
34+
class="group inline-flex items-center justify-center gap-2 rounded-full bg-[#FF6B4A] px-7 py-3 text-sm font-semibold text-white shadow-md shadow-[#FF6B4A]/20 transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#E85A3A] hover:shadow-lg hover:shadow-[#FF6B4A]/25"
35+
>
36+
{{ $buttonText }}
37+
<svg class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
38+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
39+
</svg>
40+
</a>
3941
</div>
4042
</div>
4143
</div>
42-
</section>
44+
</div>

resources/views/diabetes-log-book.blade.php

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,11 @@ class="inline-flex items-center px-6 py-3 bg-primary text-primary-foreground rou
185185
</table>
186186
</div>
187187
</div>
188-
<x-cta-block
189-
title="Meet Your AI Health Coach"
190-
description="Altani can help you track meals, predict glucose responses, and provide personalized nutrition guidance."
191-
button-text="Learn More"
192-
/>
188+
<section class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
189+
<x-cta-block
190+
title="Meet Your AI Health Coach"
191+
description="Altani can help you track meals, predict glucose responses, and provide personalized nutrition guidance."
192+
button-text="Learn More"
193+
/>
194+
</section>
193195
</x-default-layout>

resources/views/food/show.blade.php

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -130,17 +130,21 @@
130130
</script>
131131
@endsection
132132

133-
<x-mini-app-layout>
134-
<div class="mx-auto my-16 max-w-4xl px-6 lg:px-8">
135-
<a
136-
href="{{ url()->previous() === request()->url() ? route('food.index') : url()->previous() }}"
137-
class="mb-3 flex items-center dark:text-slate-400 text-slate-600 hover:underline"
138-
wire:navigate
139-
>
140-
<x-icons.chevron-left class="size-4" />
141-
<span>Back</span>
133+
<x-default-layout>
134+
<header class="sticky top-0 z-50 w-full py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-100 dark:border-slate-800">
135+
<a href="/" class="flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-white">
136+
<span class="text-2xl" role="img" aria-label="strawberry">🍓</span>
137+
<span>Acara Plate</span>
142138
</a>
139+
<div class="flex items-center gap-4">
140+
<a href="{{ route('login') }}" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white">Log in</a>
141+
<a href="{{ route('register') }}" class="rounded-full bg-slate-900 dark:bg-white px-5 py-2 text-sm font-semibold text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 transition-all">
142+
Get Started
143+
</a>
144+
</div>
145+
</header>
143146

147+
<div class="mx-auto my-16 max-w-4xl px-6 lg:px-8">
144148
<nav aria-label="Breadcrumb" class="mb-8">
145149
<ol class="flex items-center space-x-2 text-sm text-slate-500 dark:text-slate-400">
146150
{{-- Home Icon - Always visible --}}
@@ -384,6 +388,16 @@ class="w-full h-auto"
384388
</div>
385389
@endif
386390

391+
392+
<div class="my-10">
393+
<x-cta-block
394+
title="Have questions about {{ $displayName }}?"
395+
description="Wondering how {{ $displayName }} fits into your meal plan? Or what to pair it with for stable glucose? Our AI nutritionist has answers."
396+
button-text="Ask about {{ $displayName }}"
397+
button-url="{{ route('meet-altani') }}"
398+
/>
399+
</div>
400+
387401
{{-- Related Foods Section --}}
388402
@if(isset($relatedFoods) && $relatedFoods->count() > 0)
389403
<div class="mb-10">
@@ -417,40 +431,9 @@ class="inline-flex items-center px-8 py-4 bg-primary text-primary-foreground rou
417431
</a>
418432
</div>
419433

420-
{{-- Nutrition Advisor CTA --}}
421-
<div class="bg-linear-to-r from-rose-50 to-pink-50 dark:from-rose-950/30 dark:to-pink-950/30 rounded-2xl p-8 mb-10 border border-rose-200 dark:border-rose-800/50">
422-
<div class="flex flex-col md:flex-row items-start md:items-center gap-6">
423-
<div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-linear-to-br from-rose-500 to-pink-500 text-white shadow-lg">
424-
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
425-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
426-
</svg>
427-
</div>
428-
<div class="flex-1">
429-
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
430-
Have questions about {{ $displayName }}?
431-
</h2>
432-
<p class="text-slate-600 dark:text-slate-300 mb-4">
433-
Wondering how {{ $displayName }} fits into your meal plan? Or what to pair it with for stable glucose? Our AI nutritionist has answers.
434-
</p>
435-
<div class="flex flex-wrap gap-2">
436-
<a href="{{ route('ai-nutritionist') }}?question=How does {{ urlencode($displayName) }} fit into my meal plan?"
437-
class="inline-flex items-center gap-2 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-md transition-all hover:bg-rose-700">
438-
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
439-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
440-
</svg>
441-
Ask about {{ $displayName }}
442-
</a>
443-
<a href="{{ route('ai-nutritionist') }}"
444-
class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 border border-rose-200 dark:border-rose-800 px-4 py-2 text-sm font-semibold text-rose-700 dark:text-rose-300 transition-all hover:bg-rose-50 dark:hover:bg-rose-900/30">
445-
Ask anything else
446-
</a>
447-
</div>
448-
</div>
449-
</div>
450-
</div>
451434

452435
{{-- Additional Resources --}}
453-
<div class="border-t border-slate-200 dark:border-slate-700 pt-10">
436+
<div class="pt-10">
454437
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-6">
455438
More Diabetes Tools
456439
</h2>
@@ -488,4 +471,4 @@ class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-slate-800 bord
488471
</div>
489472
</article>
490473
</div>
491-
</x-mini-app-layout>
474+
</x-default-layout>

0 commit comments

Comments
 (0)