Oliver/presenton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add background gradient components to multiple pages for enhanced visual appeal

Browse source
This commit is contained in:
shiva raj badu 2026-02-27 20:21:39 +05:45
parent d8a4a565d3
commit 508f0de9b0
No known key found for this signature in database
5 changed files with 39 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
View file

@ -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>
);
};

7
servers/nextjs/app/(presentation-generator)/(dashboard)/settings/SettingSideBar.tsx
View file

@ -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' />

10
servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
View file

@ -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">

8
servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx
View file

@ -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}

10
servers/nextjs/app/(presentation-generator)/upload/components/UploadPage.tsx
View file

@ -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}