mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 17:18:09 +00:00
Merge pull request #27 from OwethuManagedServices/25-05-2025/New-Changes
refactor newsletter subscription form layout for better responsiveness
This commit is contained in:
@ -157,40 +157,39 @@ const Footer = () => {
|
|||||||
</p>
|
</p>
|
||||||
<form className="flex flex-col sm:flex-row gap-2">
|
<form className="flex flex-col sm:flex-row gap-2">
|
||||||
{/* Input needs dark background styles */}
|
{/* Input needs dark background styles */}
|
||||||
<div className="relative">
|
<div className="relative max-w-md mx-auto w-full">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
aria-label="Email for newsletter"
|
aria-label="Email for newsletter"
|
||||||
className="
|
className="
|
||||||
w-full
|
w-full
|
||||||
pr-24
|
pr-24
|
||||||
|
px-4 py-2
|
||||||
px-4 py-2
|
rounded-lg
|
||||||
rounded-lg
|
bg-[var(--dark-input)]
|
||||||
bg-[var(--dark-input)]
|
border border-[var(--dark-border)]
|
||||||
border border-[var(--dark-border)]
|
text-[var(--dark-foreground)]
|
||||||
text-[var(--dark-foreground)]
|
placeholder:text-[var(--dark-muted-foreground)]
|
||||||
placeholder:text-[var(--dark-muted-foreground)]
|
focus:outline-none focus:ring-2 focus:ring-ring
|
||||||
focus:outline-none focus:ring-2 focus:ring-ring
|
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
||||||
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
"
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="
|
className="
|
||||||
absolute top-0 right-0
|
absolute top-0 right-0
|
||||||
h-full
|
h-full
|
||||||
px-4
|
px-4
|
||||||
rounded-r-lg
|
rounded-r-lg
|
||||||
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
|
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
|
||||||
text-primary-foreground
|
text-primary-foreground
|
||||||
font-semibold
|
font-semibold
|
||||||
hover:bg-opacity-90
|
hover:bg-opacity-90
|
||||||
transition-colors
|
transition-colors
|
||||||
focus:outline-none focus:ring-2 focus:ring-ring
|
focus:outline-none focus:ring-2 focus:ring-ring
|
||||||
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
Subscribe
|
Subscribe
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user