refactor: IdeaPage (freeCodeCamp-2025-Summer-Hackathon#145)

Co-authored-by: Krzysztof G. <[email protected]>

Author: Vallayah

frontend/src/pages/Ideas/IdeaPage.jsx

@@ -69,12 +69,14 @@ export const IdeaPage = () => {
   return loading ? (
     <Spinny />
   ) : error ? (
-    <>{error}</>
+    <div className='section-card flex flex-col items-center justify-center min-h-[60vh]'>
+      <p className='text-error'>{error}</p>
+    </div>
   ) : (
-    <section>
-      <h1 className='header'>{idea?.name}</h1>
-      <p>{idea?.description}</p>
-      <div className='stats stats-vertical lg:stats-horizontal shadow'>
+    <section className='section-card'>
+      <h1 className='section-heading'>{idea?.name}</h1>
+      <p className='text-lg text-gray-700 mb-4'>{idea?.description}</p>
+      <div className='stats stats-vertical lg:stats-horizontal shadow my-4'>
         <div className='stat'>
           <div className='stat-title'>Upvotes</div>
           <div className='stat-value'>{idea?.upvotes}</div>
@@ -86,7 +88,7 @@ export const IdeaPage = () => {
         </div>
       </div>
       {isLogged && (
-        <>
+        <div className='flex gap-4 mt-4 justify-center'>
           <UpvoteButton {...{ ideaId, onSuccess: onUpvoteSuccess, onError }} />
           <DownvoteButton
             {...{
@@ -95,7 +97,7 @@ export const IdeaPage = () => {
               onError,
             }}
           />
-        </>
+        </div>
       )}
     </section>
   );