style: refine greeting section with peace blessing and new verse intro

This commit is contained in:
2026-02-08 02:22:06 +01:00
parent 4c832549f2
commit 2cc52a3fab
7 changed files with 43 additions and 29 deletions

View File

@@ -26,6 +26,8 @@ import { useParams } from "next/navigation";
import Link from "next/link";
import React from "react";
import { bibleVerses, localizedContent } from "./lib/dailyVerseData";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import Image from "next/image";
const Dashboard: React.FC = () => {
// 1. Get a unique number for the current day
@@ -39,7 +41,6 @@ const Dashboard: React.FC = () => {
const todayVerse = bibleVerses[verseIndex];
const params = useParams();
const lng = params.locale as keyof localizedContent || "en"; // Default to English if no locale is provided
const t = useTranslations("dashboard");
const categories: ModuleCategory[] = [
@@ -184,22 +185,21 @@ const Dashboard: React.FC = () => {
return (
<div className="mx-auto max-w-7xl space-y-8">
{/* Welcome Section */}
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
<div>
<h1 className="text-foreground text-3xl font-bold tracking-tight">
{t("title")}
</h1>
<p className="text-muted-foreground mt-1">{t("greeting", { user: "David", church: "Rastatt" })}</p>
<p className="text-muted-foreground mt-1">{t("verse_intro")}</p>
<p className="text-muted-foreground mt-1">
{todayVerse.content[lng]}"
</p>
<span className="text-sm text-muted-foreground">({todayVerse.reference})</span>
<div data-cmp="ModuleCard" className="group bg-card border border-border rounded-xl p-6 h-full overflow-hidden">
<div className="animate-in items-baseline fade-in slide-in-from-bottom-4 duration-700 flex flex-col sm:flex-row grow pr-6 gap-2">
<span className="text-2xl md:text-3xl text-nowrap font-semibold leading-none">{t("greeting_name", { user: "Alexander" })}</span>
<span className="text-xl font-semibold text-nowrap leading-none"> {t("greeting")}</span>
</div>
<div className="flex space-x-3">
<Badge variant="secondary" className="px-2.5 py-0.5 text-sm">
v2.4.0 Live
</Badge>
<div className="flex-col mt-4">
<p>
<span className="font-semibold">{t("verse_intro")}</span> <br />
<i className="italic text-foreground">"{todayVerse.content[lng]}"</i>
</p>
<div className="flex justify-end mt-3">
<Badge variant="outline" className="rounded-sm self-start">
{todayVerse.reference}
</Badge>
</div>
</div>
</div>