From 508f0de9b06849b9e5bdffa4e1279153f3954b4e Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Fri, 27 Feb 2026 20:21:39 +0545
Subject: [PATCH] feat: Add background gradient components to multiple pages
 for enhanced visual appeal

---
 .../(dashboard)/dashboard/components/DashboardPage.tsx | 10 +++++++++-
 .../(dashboard)/settings/SettingSideBar.tsx            |  7 ++++---
 .../(dashboard)/templates/components/TemplatePanel.tsx | 10 +++++++++-
 .../outline/components/OutlinePage.tsx                 |  8 ++++++++
 .../upload/components/UploadPage.tsx                   | 10 +++++++++-
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
index 1e5de6ec..c24caa9a 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
@@ -46,7 +46,7 @@ const DashboardPage: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen  w-full px-6 pb-10">
+    <div className="min-h-screen  w-full px-6 pb-10 relative">
       <div className="sticky top-0 right-0 z-50 py-[28px]   backdrop-blur mb-4 ">
         <div className="flex xl:flex-row flex-col gap-6 xl:gap-0 items-center justify-between">
           <h3 className=" text-[28px] tracking-[-0.84px] font-unbounded font-normal text-[#101828] flex items-center gap-2">
@@ -96,6 +96,14 @@ const DashboardPage: React.FC = () => {
         error={error}
         onPresentationDeleted={removePresentation}
       />
+      <div
+        className='fixed z-0 bottom-[-16.5rem] left-0 w-full h-full'
+        style={{
+          height: "341px",
+          borderRadius: '1440px',
+          background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
+        }}
+      />
     </div>
   );
 };
diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/SettingSideBar.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/SettingSideBar.tsx
index b2eb2d75..882c2181 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/SettingSideBar.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/SettingSideBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 const SettingSideBar = ({ mode, setMode, selectedProvider, setSelectedProvider }: { mode: 'nanobanana' | 'presenton', setMode: (mode: 'nanobanana' | 'presenton') => void, selectedProvider: 'text-provider' | 'image-provider', setSelectedProvider: (provider: 'text-provider' | 'image-provider') => void }) => {
+    console.log(mode, selectedProvider)
     return (
         <div className='w-full max-w-[230px] h-screen px-4 pt-[22px] bg-[#F9FAFB]'>
             <p className='text-xs text-black  font-medium border-b mt-[3.15rem]  border-[#E1E1E5] pb-3.5'>FILTER BY:</p>
@@ -26,14 +27,14 @@ const SettingSideBar = ({ mode, setMode, selectedProvider, setSelectedProvider }
                 </div>
                 <p className='text-[#3A3A3A] text-xs font-medium pb-2.5'>Select Provider</p>
                 {mode === 'presenton' && <div className='space-y-2.5'>
-                    <button className={`bg-white w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border border-[#E1E1E5] ${selectedProvider === 'text-provider' ? 'bg-[#F4F3FF] border-[#D9D6FE]' : ''}`} onClick={() => setSelectedProvider('text-provider')}>
+                    <button className={` w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border  ${selectedProvider === 'text-provider' ? 'bg-[#F4F3FF] border-[#D9D6FE]' : 'bg-white border-[#E1E1E5]'}`} onClick={() => setSelectedProvider('text-provider')}>
                         <div className='relative w-6 h-6 rounded-full overflow-hidden border border-[#EDEEEF]'>
 
                             <img src='/providers/openai.png' className=' object-cover w-full h-full overflow-hidden' alt='google' />
                         </div>
                         <p className='text-[#191919] text-xs  font-medium' >Text Provider</p>
                     </button>
-                    <button className={`bg-white w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border border-[#E1E1E5] ${selectedProvider === 'image-provider' ? 'bg-[#F4F3FF] border-[#D9D6FE]' : ''}`} onClick={() => setSelectedProvider('image-provider')}>
+                    <button className={` w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border  ${selectedProvider === 'image-provider' ? 'bg-[#F4F3FF] border-[#D9D6FE]' : 'bg-white border-[#E1E1E5]'}`} onClick={() => setSelectedProvider('image-provider')}>
                         <div className='relative w-6 h-6 rounded-full overflow-hidden border border-[#EDEEEF]'>
                             <img src='/providers/image-provider.png' className=' object-cover w-full h-full overflow-hidden' alt='google' />
                         </div>
@@ -42,7 +43,7 @@ const SettingSideBar = ({ mode, setMode, selectedProvider, setSelectedProvider }
                 </div>}
                 {
                     mode === 'nanobanana' && <div>
-                        <button className={`bg-white w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border border-[#E1E1E5] ${selectedProvider === 'text-provider' ? 'bg-[#F4F3FF] border-[#D9D6FE]' : ''}`}>
+                        <button className={` w-full rounded-[6px] p-3 py-4 flex items-center gap-1.5 border  bg-[#F4F3FF] border-[#D9D6FE]`}>
                             <div className='relative w-6 h-6 rounded-full overflow-hidden border border-[#EDEEEF]'>
 
                                 <img src='/providers/openai.png' className=' object-cover w-full h-full overflow-hidden' alt='google' />
diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
index 92e26ac3..5f92a433 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
@@ -191,7 +191,15 @@ const LayoutPreview = () => {
     );
 
     return (
-        <div className="min-h-screen ">
+        <div className="min-h-screen  relative">
+            <div
+                className='fixed z-0 bottom-[-16.5rem] left-0 w-full h-full'
+                style={{
+                    height: "341px",
+                    borderRadius: '1440px',
+                    background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
+                }}
+            />
             <div className="sticky top-0 right-0 z-50 py-[28px] px-6   backdrop-blur ">
                 <div className="flex xl:flex-row flex-col gap-6 xl:gap-0 items-center justify-between">
                     <h3 className=" text-[28px] tracking-[-0.84px] font-unbounded font-normal text-[#101828] flex items-center gap-2">
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
index aa82ad1f..631d2b05 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
@@ -41,6 +41,14 @@ const OutlinePage: React.FC = () => {
 
   return (
     <div className="h-[calc(100vh-72px)]">
+      <div
+        className='fixed z-0 bottom-[-16.5rem] left-0 w-full h-full'
+        style={{
+          height: "341px",
+          borderRadius: '1440px',
+          background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
+        }}
+      />
       <OverlayLoader
         show={loadingState.isLoading}
         text={loadingState.message}
diff --git a/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx b/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
index e97e810d..c90087a6 100644
--- a/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
@@ -196,7 +196,15 @@ const UploadPage = () => {
   };
 
   return (
-    <Wrapper className=" pb-10 lg:max-w-[70%] xl:max-w-[65%] ">
+    <Wrapper className=" pb-10 lg:max-w-[70%] xl:max-w-[65%] relative ">
+      <div
+        className='fixed z-0 bottom-[-16.5rem] left-0 w-full h-full'
+        style={{
+          height: "341px",
+          borderRadius: '1440px',
+          background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
+        }}
+      />
       <OverlayLoader
         show={loadingState.isLoading}
         text={loadingState.message}