mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
b5462ee7bb
## What kind of change does this PR introduce?
Feature. Promotes Supabase Select 2026 across www and the Dashboard.
## What is the current behavior?
There is no active Select promotion on www or in the Dashboard.
## What is the new behavior?
- Adds a dismissible Select 2026 banner above the www navigation.
- Adds a low-priority Banner Stack card across hosted Studio project
pages.
- Shares a lightweight pixel lockup and CSS-only motion across both
surfaces, with light, dark, and reduced-motion treatments.
- Opens the application page in a new tab and automatically expires both
placements after October 2 in San Francisco.
## To test
- Open `/database` on the www preview. Confirm the banner is legible in
light and dark mode, the complete message remains visible at a phone
width, and the CTA opens `select.supabase.com` in a new tab.
- Dismiss the www banner, then refresh the page. Confirm it stays
dismissed.
- Open any `/project/{ref}` route in the Dashboard preview. Confirm the
Select card appears in the bottom-right Banner Stack behind
higher-priority notices.
- Dismiss the Dashboard card, navigate to another project page, and
confirm it stays dismissed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a time-limited Select 2026 promotional banner across the website
and Studio.
* Added responsive themed artwork, animated visuals, campaign messaging,
and an external “Apply to attend” CTA.
* Banner dismissal preferences are saved and respected across visits.
* Promotion automatically disappears after the campaign ends.
* **Accessibility**
* Improved announcement dismissal controls with semantic buttons and
accessible labels.
* Added reduced-motion support for promotional artwork.
* **Bug Fixes**
* Improved product-card loading effects to prevent hydration
inconsistencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { X } from 'lucide-react'
|
|
import { Button, Card, CardContent, cn } from 'ui'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
interface BannerCardProps {
|
|
onDismiss?: () => void
|
|
children: React.ReactNode
|
|
className?: string
|
|
background?: React.ReactNode
|
|
}
|
|
|
|
export const BannerCard = ({ onDismiss, children, className, background }: BannerCardProps) => {
|
|
return (
|
|
<Card className={cn('relative overflow-hidden shadow-lg rounded-2xl', className)}>
|
|
{background ?? (
|
|
<div className="absolute -inset-16 z-0 opacity-100 pointer-events-none">
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
|
|
alt="Background pattern"
|
|
className="w-full h-full object-cover object-right hidden dark:block"
|
|
/>
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
|
|
alt="Background pattern"
|
|
className="w-full h-full object-cover object-right dark:hidden"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
|
|
</div>
|
|
)}
|
|
|
|
<CardContent className="relative z-10 p-6">
|
|
{onDismiss && (
|
|
<div className="absolute top-4 right-4 z-20">
|
|
<Button
|
|
variant="text"
|
|
size="tiny"
|
|
type="button"
|
|
icon={<X size={16} strokeWidth={1.5} />}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
onDismiss()
|
|
}}
|
|
className="opacity-75 hover:opacity-100 px-1"
|
|
aria-label="Close banner"
|
|
/>
|
|
</div>
|
|
)}
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|