feat: polish app loading screen and home section emphasis

Refine the global loading experience to feel smoother and less flashy while keeping brand accents. Simplify the home continue-reading highlight by styling the section header instead of using a heavy card wrapper.

src/components/home/HomeContent.tsx

@@ -31,13 +31,12 @@ export function HomeContent({ data }: HomeContentProps) {
   return (
     <div className="space-y-10 pb-2">
       {data.ongoingBooks && data.ongoingBooks.length > 0 && (
-        <div className="rounded-2xl border border-primary/20 bg-[linear-gradient(145deg,hsl(var(--primary)/0.12),hsl(var(--background)/0.1)_45%)] p-4 sm:p-5">
-          <MediaRow
-            titleKey="home.sections.continue_reading"
-            items={optimizeBookData(data.ongoingBooks)}
-            iconName="BookOpen"
-          />
-        </div>
+        <MediaRow
+          titleKey="home.sections.continue_reading"
+          items={optimizeBookData(data.ongoingBooks)}
+          iconName="BookOpen"
+          featuredHeader
+        />
       )}
 
       {data.ongoing && data.ongoing.length > 0 && (

src/components/home/MediaRow.tsx

@@ -41,6 +41,7 @@ interface MediaRowProps {
   titleKey: string;
   items: (OptimizedSeries | OptimizedBook)[];
   iconName?: string;
+  featuredHeader?: boolean;
 }
 
 const iconMap = {
@@ -51,7 +52,7 @@ const iconMap = {
   History,
 };
 
-export function MediaRow({ titleKey, items, iconName }: MediaRowProps) {
+export function MediaRow({ titleKey, items, iconName, featuredHeader = false }: MediaRowProps) {
   const router = useRouter();
   const { t } = useTranslate();
   const icon = iconName ? iconMap[iconName as keyof typeof iconMap] : undefined;
@@ -68,7 +69,13 @@ export function MediaRow({ titleKey, items, iconName }: MediaRowProps) {
       title={t(titleKey)}
       icon={icon}
       className="space-y-5"
-      headerClassName="border-b border-border/50 pb-2"
+      headerClassName={cn("border-b border-border/50 pb-2", featuredHeader && "border-primary/25")}
+      titleClassName={
+        featuredHeader
+          ? "bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-transparent"
+          : undefined
+      }
+      iconClassName={featuredHeader ? "text-primary" : undefined}
     >
       <ScrollContainer
         showArrows={true}

src/components/ui/section.tsx

@@ -8,11 +8,24 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   description?: string;
   actions?: React.ReactNode;
   headerClassName?: string;
+  titleClassName?: string;
+  iconClassName?: string;
 }
 
 const Section = React.forwardRef<HTMLElement, SectionProps>(
   (
-    { title, icon: Icon, description, actions, children, className, headerClassName, ...props },
+    {
+      title,
+      icon: Icon,
+      description,
+      actions,
+      children,
+      className,
+      headerClassName,
+      titleClassName,
+      iconClassName,
+      ...props
+    },
     ref
   ) => {
     return (
@@ -21,9 +34,9 @@ const Section = React.forwardRef<HTMLElement, SectionProps>(
           <div className={cn("flex items-center justify-between", headerClassName)}>
             {title && (
               <div className="flex items-center gap-2">
-                {Icon && <Icon className="h-5 w-5 text-muted-foreground" />}
+                {Icon && <Icon className={cn("h-5 w-5 text-muted-foreground", iconClassName)} />}
                 <div>
-                  <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+                  <h2 className={cn("text-2xl font-bold tracking-tight", titleClassName)}>{title}</h2>
                   {description && (
                     <p className="text-sm text-muted-foreground mt-1">{description}</p>
                   )}