omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 15:38:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor newsletter subscription form layout for better responsiveness

Browse Source
This commit is contained in:
JohannesOmsDev
2025-05-27 16:43:21 +02:00
parent b908926912
commit ae6e2b020c
1 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/Footer.tsx
View File

@ -157,40 +157,39 @@ const Footer = () => {
</p>
<form className="flex flex-col sm:flex-row gap-2">
{/* Input needs dark background styles */}
<div className="relative">
<div className="relative max-w-md mx-auto w-full">
<input
type="email"
placeholder="Enter your email"
aria-label="Email for newsletter"
className="
w-full
pr-24
px-4 py-2
rounded-lg
bg-[var(--dark-input)]
border border-[var(--dark-border)]
text-[var(--dark-foreground)]
placeholder:text-[var(--dark-muted-foreground)]
focus:outline-none focus:ring-2 focus:ring-ring
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
"
w-full
pr-24
px-4 py-2
rounded-lg
bg-[var(--dark-input)]
border border-[var(--dark-border)]
text-[var(--dark-foreground)]
placeholder:text-[var(--dark-muted-foreground)]
focus:outline-none focus:ring-2 focus:ring-ring
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
"
/>
<button
type="submit"
className="
absolute top-0 right-0
h-full
px-4
rounded-r-lg
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
text-primary-foreground
font-semibold
hover:bg-opacity-90
transition-colors
focus:outline-none focus:ring-2 focus:ring-ring
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
"
absolute top-0 right-0
h-full
px-4
rounded-r-lg
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
text-primary-foreground
font-semibold
hover:bg-opacity-90
transition-colors
focus:outline-none focus:ring-2 focus:ring-ring
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
"
>
Subscribe
</button>