mirror of
https://github.com/lumina-rocks/lumina.git
synced 2026-04-17 10:56:48 +02:00
Feature: Geyser Fund Box (#102)
* feat: Add GeyserFundAlertOverlay component for donation initiative * feat: Add GeyserFundDonation component and update Home page layout * feat: Add environment variable support for Geyser Fund feature visibility --------- Co-authored-by: highperfocused <highperfocused@pm.me>
This commit is contained in:
mroxso
5
.env.example
Normal file
5
.env.example
Normal file
@@ -0,0 +1,5 @@
|
||||
NEXT_PUBLIC_SHOW_GEYSER_FUND=false
|
||||
|
||||
NEXT_PUBLIC_ENABLE_UMAMI=false
|
||||
NEXT_PUBLIC_UMAMI_URL=https://your-umami-url.com
|
||||
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-umami-website-id
|
||||
20
app/page.tsx
20
app/page.tsx
@@ -1,25 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Search } from "@/components/Search";
|
||||
import { TrendingAccounts } from "@/components/TrendingAccounts";
|
||||
import { TrendingImages } from "@/components/TrendingImages";
|
||||
import { TrendingImagesNew } from "@/components/TrendingImagesNew";
|
||||
import { GeyserFundDonation } from "@/components/GeyserFundDonation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
|
||||
export default function Home() {
|
||||
useEffect(() => {
|
||||
document.title = `LUMINA`;
|
||||
}, []);
|
||||
|
||||
|
||||
// Check for environment variable - Next.js exposes public env vars with NEXT_PUBLIC_ prefix
|
||||
const showGeyserFund = process.env.NEXT_PUBLIC_SHOW_GEYSER_FUND === 'true';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center py-6 px-6">
|
||||
{showGeyserFund && (
|
||||
<div className="flex flex-col items-center px-6">
|
||||
<GeyserFundDonation />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center py-4 px-6">
|
||||
<Search />
|
||||
</div>
|
||||
{/* <TrendingAccounts /> */}
|
||||
{/* <TrendingImages /> */}
|
||||
<TrendingImagesNew />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
90
components/GeyserFundAlertOverlay.tsx
Normal file
90
components/GeyserFundAlertOverlay.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { X, ArrowRight } from 'lucide-react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function GeyserFundAlertOverlay() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
// Check if the feature is enabled via environment variable
|
||||
const showGeyserFund = process.env.NEXT_PUBLIC_SHOW_GEYSER_FUND === 'true';
|
||||
|
||||
// Show the alert after a short delay for better UX, but only if enabled
|
||||
useEffect(() => {
|
||||
if (!showGeyserFund) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [showGeyserFund]);
|
||||
|
||||
// Store dismissal in localStorage to avoid showing again in the same session
|
||||
const handleDismiss = () => {
|
||||
setIsVisible(false);
|
||||
localStorage.setItem("geyserAlertDismissed", "true");
|
||||
};
|
||||
|
||||
// Check if user has already dismissed
|
||||
useEffect(() => {
|
||||
const isDismissed = localStorage.getItem("geyserAlertDismissed") === "true";
|
||||
if (isDismissed) {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Don't render anything if the feature is disabled or not visible
|
||||
if (!showGeyserFund || !isVisible) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 left-4 md:left-auto md:w-96 z-50 animate-fade-in mb-14">
|
||||
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="relative p-5">
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="absolute top-2 right-2 text-white/80 hover:text-white transition-colors"
|
||||
aria-label="Dismiss alert"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="bg-white/10 px-3 py-1 rounded-full w-fit text-xs font-medium text-white">
|
||||
Limited Time Offer
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-white">Support the Geyser Fund</h3>
|
||||
|
||||
<p className="text-white/90 text-sm">
|
||||
Join our community initiative to preserve natural geysers. Every donation helps protect these natural wonders for future generations.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-between items-center pt-2">
|
||||
<Button
|
||||
onClick={() => window.open("/donate", "_blank")}
|
||||
className="bg-white text-purple-700 hover:bg-white/90 transition-colors group"
|
||||
>
|
||||
Donate Now
|
||||
<ArrowRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="text-white/70 text-sm hover:text-white transition-colors"
|
||||
>
|
||||
Maybe later
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar animation to create urgency */}
|
||||
<div className="h-1 bg-white/20">
|
||||
<div className="h-full bg-white w-full animate-shrink origin-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
components/GeyserFundDonation.tsx
Normal file
48
components/GeyserFundDonation.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function GeyserFundDonation() {
|
||||
return (
|
||||
<div className="w-full bg-gradient-to-r from-purple-700/80 to-violet-800/80 rounded-lg p-4 my-4 shadow-md">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full p-2 flex items-center justify-center">
|
||||
{/* <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-purple-800"
|
||||
>
|
||||
<path d="M5.7 15a7 7 0 1 1 13.6 0" />
|
||||
<path d="M5.7 15h13.6" />
|
||||
<path d="M5.7 15l-2.5 5" />
|
||||
<path d="M19.3 15l2.5 5" />
|
||||
<path d="M9.2 20H12m0 0h2.8" />
|
||||
<path d="M12 20v-5" />
|
||||
</svg> */}
|
||||
<svg width='34' height='36' viewBox='0 0 349 365' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
||||
<path d='M346.396 125.679C346.193 124.459 345.986 123.24 345.755 122.028C345.017 118.123 345.017 118.123 345.017 118.123C343.98 113.895 339.304 110.436 334.628 110.435L221.265 110.425C216.587 110.424 211.581 114.065 210.14 118.514L186.054 192.873C185.343 195.069 184.408 197.774 185.441 199.236C186.502 200.735 189.57 200.963 191.939 200.963H238.093C238.093 200.963 240.249 200.945 240.536 202.442C240.843 204.031 239.19 205.743 239.19 205.743L157.833 291.25C154.987 294.242 150.017 299.46 146.792 302.845L125.923 324.742C125.923 324.742 125.497 325.221 124.999 325.68C124.712 325.946 124.436 326.178 124.173 326.383C121.278 328.632 119.909 327.374 121.11 323.26L131.729 286.87C133.04 282.381 135.182 275.033 136.493 270.544L142.575 249.702C143.595 246.206 144.753 242.242 145.481 239.743C145.688 239.033 146.17 236.844 145.442 235.737C144.751 234.686 143.587 234.487 142.28 234.487C140.864 234.487 139.196 234.487 137.442 234.487H93.4839C88.8059 234.487 87.2359 232.119 89.9939 229.225C92.7519 226.331 97.6479 221.193 100.875 217.807L135.051 181.949C138.278 178.563 143.246 173.345 146.094 170.352C148.942 167.359 153.91 162.139 157.133 158.75L162.904 152.684C166.129 149.295 171.404 143.75 174.627 140.362L186.471 127.916C189.694 124.527 194.758 119.205 197.721 116.089C200.686 112.974 203.889 109.608 204.838 108.609C205.787 107.611 209.201 104.022 212.426 100.633L278.317 31.3812C281.542 27.9922 280.911 23.2282 276.919 20.7932C276.919 20.7932 267.599 15.1122 258.755 11.4192C235.769 1.81919 210.816 -1.59681 185.61 0.678194C178.503 1.32019 171.393 2.41119 164.321 3.94219C145.237 8.07619 126.546 15.3542 108.954 25.4422C97.9699 31.7382 87.4599 39.1132 77.5829 47.4572C54.3189 67.1072 34.7959 91.9432 20.9249 120.702C14.0339 134.988 8.95193 149.42 5.51493 163.704C-1.69007 193.646 -1.63107 223.046 4.49993 249.499C8.57593 267.102 15.3589 283.516 24.5589 298.092C25.1199 298.982 25.6939 299.867 26.2739 300.743C31.2249 308.225 36.8479 315.217 43.0999 321.638C52.6369 331.432 63.6919 339.937 76.2069 346.811C82.4469 350.24 88.8519 353.149 95.3729 355.575C99.0779 356.951 102.824 358.176 106.605 359.24C113.087 361.068 119.679 362.438 126.337 363.378C184.333 371.547 251.78 346.032 298.382 290.078C307.3 279.37 315.068 268.043 321.671 256.283C330.341 240.845 336.993 224.657 341.544 208.154C345.339 194.392 347.665 180.431 348.483 166.541C349.298 152.728 348.617 139.014 346.396 125.679Z' fill='white' />
|
||||
</svg>
|
||||
{/* <img src="geyser_logo.svg" alt="Geyser Fund Logo" className="w-8 h-8" /> */}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-white">Support the Development</h3>
|
||||
<p className="text-purple-100 text-sm">by donating to our Geyser Fund</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="https://geyser.fund/project/lumina" target="_blank" rel="noopener noreferrer">
|
||||
<Button className="bg-white text-purple-800 hover:bg-purple-100">
|
||||
Donate Now
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
public/geyser_logo.svg
Normal file
1
public/geyser_logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width='349' height='365' viewBox='0 0 349 365' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M346.396 125.679C346.193 124.459 345.986 123.24 345.755 122.028C345.017 118.123 345.017 118.123 345.017 118.123C343.98 113.895 339.304 110.436 334.628 110.435L221.265 110.425C216.587 110.424 211.581 114.065 210.14 118.514L186.054 192.873C185.343 195.069 184.408 197.774 185.441 199.236C186.502 200.735 189.57 200.963 191.939 200.963H238.093C238.093 200.963 240.249 200.945 240.536 202.442C240.843 204.031 239.19 205.743 239.19 205.743L157.833 291.25C154.987 294.242 150.017 299.46 146.792 302.845L125.923 324.742C125.923 324.742 125.497 325.221 124.999 325.68C124.712 325.946 124.436 326.178 124.173 326.383C121.278 328.632 119.909 327.374 121.11 323.26L131.729 286.87C133.04 282.381 135.182 275.033 136.493 270.544L142.575 249.702C143.595 246.206 144.753 242.242 145.481 239.743C145.688 239.033 146.17 236.844 145.442 235.737C144.751 234.686 143.587 234.487 142.28 234.487C140.864 234.487 139.196 234.487 137.442 234.487H93.4839C88.8059 234.487 87.2359 232.119 89.9939 229.225C92.7519 226.331 97.6479 221.193 100.875 217.807L135.051 181.949C138.278 178.563 143.246 173.345 146.094 170.352C148.942 167.359 153.91 162.139 157.133 158.75L162.904 152.684C166.129 149.295 171.404 143.75 174.627 140.362L186.471 127.916C189.694 124.527 194.758 119.205 197.721 116.089C200.686 112.974 203.889 109.608 204.838 108.609C205.787 107.611 209.201 104.022 212.426 100.633L278.317 31.3812C281.542 27.9922 280.911 23.2282 276.919 20.7932C276.919 20.7932 267.599 15.1122 258.755 11.4192C235.769 1.81919 210.816 -1.59681 185.61 0.678194C178.503 1.32019 171.393 2.41119 164.321 3.94219C145.237 8.07619 126.546 15.3542 108.954 25.4422C97.9699 31.7382 87.4599 39.1132 77.5829 47.4572C54.3189 67.1072 34.7959 91.9432 20.9249 120.702C14.0339 134.988 8.95193 149.42 5.51493 163.704C-1.69007 193.646 -1.63107 223.046 4.49993 249.499C8.57593 267.102 15.3589 283.516 24.5589 298.092C25.1199 298.982 25.6939 299.867 26.2739 300.743C31.2249 308.225 36.8479 315.217 43.0999 321.638C52.6369 331.432 63.6919 339.937 76.2069 346.811C82.4469 350.24 88.8519 353.149 95.3729 355.575C99.0779 356.951 102.824 358.176 106.605 359.24C113.087 361.068 119.679 362.438 126.337 363.378C184.333 371.547 251.78 346.032 298.382 290.078C307.3 279.37 315.068 268.043 321.671 256.283C330.341 240.845 336.993 224.657 341.544 208.154C345.339 194.392 347.665 180.431 348.483 166.541C349.298 152.728 348.617 139.014 346.396 125.679Z' fill='#FFFFFF'/></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user