Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2025-12-06 03:26:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

added promo banner for Lumical

Browse Source
This commit is contained in:
Arunavo Ray
2025-12-05 22:11:48 +05:30
parent 99ebe1a400
commit 83cae16319
4 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
www/src/components/Header.tsx
View File

@@ -22,9 +22,12 @@ export function Header() {
]; ];
return ( return (
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${ <header
className={`fixed left-0 right-0 z-50 transition-all duration-300 ${
isScrolled ? 'backdrop-blur-lg bg-background/80 border-b shadow-sm' : 'bg-background/50' isScrolled ? 'backdrop-blur-lg bg-background/80 border-b shadow-sm' : 'bg-background/50'
}`}> }`}
style={{ top: 'var(--promo-banner-height, 0px)' }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
{/* Logo */} {/* Logo */}

51
www/src/components/PromoBanner.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React, { useEffect, useRef } from 'react';
import { Calendar, Sparkles } from 'lucide-react';
export function PromoBanner() {
const bannerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Update CSS custom property for header offset
const updateOffset = () => {
if (bannerRef.current) {
const height = bannerRef.current.offsetHeight;
document.documentElement.style.setProperty('--promo-banner-height', `${height}px`);
}
};
updateOffset();
window.addEventListener('resize', updateOffset);
return () => window.removeEventListener('resize', updateOffset);
}, []);
return (
<div
ref={bannerRef}
className="fixed top-0 left-0 right-0 z-[60] bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-600 text-white"
>
<a
href="https://lumical.app"
target="_blank"
rel="noopener noreferrer"
className="block max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 hover:bg-white/5 transition-colors"
>
<div className="flex items-center justify-center gap-x-3 text-sm">
<span className="flex items-center gap-1.5">
<Sparkles className="w-4 h-4" />
<span className="font-medium">New from RayLabs:</span>
</span>
<span className="inline-flex items-center gap-1.5 font-semibold">
<Calendar className="w-4 h-4" />
Lumical
</span>
<span className="hidden sm:inline text-white/90">
— Scan meeting invites to your calendar with AI
</span>
<span className="ml-1 inline-flex items-center gap-1 rounded-full bg-white/20 px-3 py-0.5 text-xs font-medium">
Try it free
</span>
</div>
</a>
</div>
);
}

2
www/src/pages/index.astro
View File

@@ -10,6 +10,7 @@ import { Installation } from '../components/Installation';
import { CTA } from '../components/CTA'; import { CTA } from '../components/CTA';
import FAQ from '../components/FAQ.astro'; import FAQ from '../components/FAQ.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import { PromoBanner } from '../components/PromoBanner';
const siteUrl = 'https://gitea-mirror.com'; const siteUrl = 'https://gitea-mirror.com';
const title = 'GitHub Backup Tool | Self-Hosted Repository Backup to Gitea'; const title = 'GitHub Backup Tool | Self-Hosted Repository Backup to Gitea';
@@ -119,6 +120,7 @@ const structuredData = {
</head> </head>
<body class="min-h-screen bg-background text-foreground antialiased"> <body class="min-h-screen bg-background text-foreground antialiased">
<PromoBanner client:load />
<Header client:load /> <Header client:load />
<main> <main>

1
www/src/styles/global.css
View File

@@ -49,6 +49,7 @@
:root { :root {
--radius: 0.5rem; --radius: 0.5rem;
--promo-banner-height: 0px;
--background: oklch(0.99 0 0); --background: oklch(0.99 0 0);
--foreground: oklch(0.15 0 0); --foreground: oklch(0.15 0 0);
--card: oklch(0.985 0 0); --card: oklch(0.985 0 0);