Merge pull request #318 from AvarchLLC/ayush-test

Reapply "feat: implement Cookie Consent Banner with animations and us…

Author: AyuShetty

public/ECH-gif.gif

@@ -0,0 +1,37 @@
+const QRCode = require('qrcode');
+const fs = require('fs');
+const path = require('path');
+
+// Your wallet address
+const walletAddress = '0x68B1C495096710Ab5D3aD137F5024221aAf35B7d';
+
+// Use Ethereum URI format for better wallet app recognition
+const ethereumURI = `ethereum:${walletAddress}`;
+
+// Output path
+const outputPath = path.join(__dirname, '..', 'public', 'qr-wallet.png');
+
+// QR code options
+const options = {
+  type: 'png',
+  quality: 0.92,
+  margin: 2,
+  color: {
+    dark: '#000000',
+    light: '#FFFFFF'
+  },
+  width: 256
+};
+
+// Generate QR code
+QRCode.toFile(outputPath, ethereumURI, options, function (err) {
+  if (err) {
+    console.error('Error generating QR code:', err);
+    process.exit(1);
+  }
+  
+  console.log('QR code generated successfully!');
+  console.log('File saved to:', outputPath);
+  console.log('Wallet address:', walletAddress);
+  console.log('Ethereum URI:', ethereumURI);
+});

public/ESP-gif.gif

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+const publicDir = path.join(__dirname, '../public');
+
+const gifFiles = [
+  'EtherWorld-gif.gif',
+  'ESP-gif.gif',
+  'Gitcoin-gif.gif',
+  'ECH-gif.gif'
+];
+
+console.log('🎨 Static Image Generation Guide');
+console.log('='.repeat(50));
+console.log('\nGIF files found in public directory:');
+
+gifFiles.forEach(file => {
+  const filePath = path.join(publicDir, file);
+  if (fs.existsSync(filePath)) {
+    const stats = fs.statSync(filePath);
+    const sizeInMB = (stats.size / (1024 * 1024)).toFixed(2);
+    console.log(`✓ ${file} (${sizeInMB} MB)`);
+    
+    // Suggest the output name
+    const staticName = file.replace('-gif.gif', '-static.png');
+    console.log(`  → Suggested static: ${staticName}`);
+  } else {
+    console.log(`✗ ${file} - NOT FOUND`);
+  }
+});
+
+console.log('\n📝 To generate static images, use one of these methods:');
+console.log('\n1. ImageMagick (recommended):');
+gifFiles.forEach(file => {
+  const output = file.replace('-gif.gif', '-static.png');
+  console.log(`   convert public/${file}[0] public/${output}`);
+});
+
+console.log('\n2. FFmpeg:');
+gifFiles.forEach(file => {
+  const output = file.replace('-gif.gif', '-static.png');
+  console.log(`   ffmpeg -i public/${file} -vframes 1 public/${output}`);
+});
+
+console.log('\n3. Online Tool: https://ezgif.com/split (extract first frame)');
+console.log('\n' + '='.repeat(50));

public/EtherWorld-gif.gif

@@ -112,6 +112,32 @@ html {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+/* Cookie banner fade-up animation */
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Shimmer animation for interactive banner */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s ease-in-out infinite;
+}
+
 /* Improved card hover effects */
 .hover-lift {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

public/Gitcoin-gif.gif

@@ -8,7 +8,7 @@ import dynamic from 'next/dynamic';
 import { Suspense } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { usePathname } from 'next/navigation';
-import CookieConsent from '@/components/CookieConsent';
+import CookieConsentBanner from '@/components/CookieConsentBanner';
 import FloatingContributionIcon from '@/components/FloatingContributionIcon';
 import SessionWrapper from '@/components/SessionWrapper';
 import { SidebarProvider } from '@/components/Sidebar/SideBarContext';
@@ -49,7 +49,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <Providers>
                 <SidebarProvider>
                   <ClientContent>{children}</ClientContent>
-                  <CookieConsent />
+                  <CookieConsentBanner />
                 </SidebarProvider>
               </Providers>
             </motion.div>