add this as the social media card
This attachment contains a detailed analysis of LGBTQ+ social media content and discussions, followed by the complete React component code for the AIDS memorial visualization. The user wants me to add a simple social media card component to the existing memorial project.
I'll create a simple social media card component that fits with the existing LCARS-inspired design:
I've added a simple social media card component that appears at the top of the memorial. The card includes:
- Title and subtitle with the same red/amber styling as the main interface
- Key statistics in a clean grid layout (3,306 cells, timeline, real data)
- AI creation note highlighting the unique development process
- Visit Memorial button that smoothly scrolls to the main visualization
- System status indicator with a pulsing red dot matching the LCARS aesthetic
The card uses the same dark theme and monospace typography as the main memorial, maintaining visual consistency while providing a clear entry point for visitors. The button functionality uses a simple scroll-to-element approach without any complex animations or dynamic content.
I detected and automatically synced new changes from main in float-pride-ritual-stack.remembrance.
Perfect! Here are the meta tags with your actual site URL and image path:
Meta Tags for aids.ritualstack.ai
If using App Router (app/page.js or app/layout.js):
export const metadata = {
title: 'RE:MEMBRANCE - Interactive AIDS Epidemic Memorial',
description: 'Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation.',
openGraph: {
title: 'RE:MEMBRANCE - Interactive AIDS Epidemic Memorial',
description: 'Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation.',
url: 'https://aids.ritualstack.ai',
siteName: 'RE:MEMBRANCE',
images: [
{
url: 'https://aids.ritualstack.ai/RE-MEMBRANCE-Social-Media-Card-Claude-Claude-06-05-2025_12_45_PM.png',
width: 1200,
height: 630,
alt: 'RE:MEMBRANCE - Interactive AIDS Epidemic Memorial data visualization',
},
],
locale: 'en_US',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'RE:MEMBRANCE - Interactive AIDS Epidemic Memorial',
description: 'Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation.',
images: ['https://aids.ritualstack.ai/RE-MEMBRANCE-Social-Media-Card-Claude-Claude-06-05-2025_12_45_PM.png'],
},
}
Or if using Pages Router:
import Head from 'next/head'
<Head>
<title>RE:MEMBRANCE - Interactive AIDS Epidemic Memorial</title>
<meta name="description" content="Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation." />
{/* Open Graph */}
<meta property="og:title" content="RE:MEMBRANCE - Interactive AIDS Epidemic Memorial" />
<meta property="og:description" content="Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation." />
<meta property="og:image" content="https://aids.ritualstack.ai/RE-MEMBRANCE-Social-Media-Card-Claude-Claude-06-05-2025_12_45_PM.png" />
<meta property="og:url" content="https://aids.ritualstack.ai" />
<meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="RE:MEMBRANCE - Interactive AIDS Epidemic Memorial" />
<meta name="twitter:description" content="Data visualization revealing historical patterns through 3,306 cells representing each day of the AIDS crisis (1981-1990). Built with AI in a single conversation." />
<meta name="twitter:image" content="https://aids.ritualstack.ai/RE-MEMBRANCE-Social-Media-Card-Claude-Claude-06-05-2025_12_45_PM.png" />
</Head>
And remove this line from your component:
// Remove this:
<SocialMediaCard />
Now when people share https://aids.ritualstack.ai on social media, they'll see the proper preview card with your image!
You can test it works by:
- Pasting the URL into Facebook's Sharing Debugger
- Or Twitter's Card Validator
