New component with partner logos

2025-12-30 04:16:41 -04:00
parent f136d0db3d
commit ebcf2dcaac
14 changed files with 363 additions and 18 deletions
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -603,8 +603,10 @@
                                React.createElement(UniqueFeatureSlider, { key: 'unique-features-slider' }),
        
                                React.createElement(DownloadApps, { key: 'download-apps' }),
-        
-                                React.createElement(ComparisonTable, { key: 'comparison-table' }),    
+
+                                React.createElement(BecomePartner, { key: 'become-partner' }),
+
+                                React.createElement(ComparisonTable, { key: 'comparison-table' }),
                                
                                React.createElement(Roadmap, { key: 'roadmap' }),
                            ])
--- a/src/components/ui/BecomePartner.jsx
+++ b/src/components/ui/BecomePartner.jsx
@@ -0,0 +1,86 @@
+const BecomePartner = () => {
+    const partners = [
+        { id: 'aegis', name: 'Aegis', logo: 'logo/aegis.png', isColor: true, url: 'https://aegis-investment.com/' },
+        { id: 'furi', name: 'Furi Labs', logo: 'logo/furi.png', isColor: true, url: 'https://furilabs.com/' }
+    ];
+
+    const formUrl = 'https://docs.google.com/forms/d/e/1FAIpQLSc9ijV9PCoyXkus6vEx1OWwvwAsLq8fKS6-H5BmX-c-bvia6w/viewform?usp=dialog';
+
+    return React.createElement('div', { className: "mt-20 px-6" }, [
+        // Header "Trusted by our partners"
+        React.createElement('div', { key: 'header', className: "text-center max-w-3xl mx-auto mb-8" }, [
+            React.createElement('h3', { key: 'title', className: "text-3xl font-bold text-primary mb-3" }, 'Trusted by our partners')
+        ]),
+
+        // First divider line with fade
+        React.createElement('div', {
+            key: 'divider-1',
+            className: "h-px w-full max-w-3xl mx-auto mb-8 bg-gradient-to-r from-transparent via-zinc-700 to-transparent"
+        }),
+
+        // Partner Logos
+        React.createElement('div', { 
+            key: 'partners-row', 
+            className: "flex justify-center items-center flex-wrap gap-12 mb-8" 
+        },
+            partners.map(partner => 
+                React.createElement('a', {
+                    key: partner.id,
+                    href: partner.url,
+                    target: '_blank',
+                    rel: 'noopener noreferrer',
+                    className: "flex items-center justify-center cursor-pointer hover:opacity-100 transition-opacity duration-300"
+                }, [
+                    React.createElement('img', {
+                        key: 'logo',
+                        src: partner.logo,
+                        alt: partner.name,
+                        className: "h-12 sm:h-16 opacity-80 hover:opacity-100 transition-opacity duration-300",
+                        style: partner.isColor ? {
+                            filter: 'grayscale(100%) brightness(1.2) contrast(1.1)',
+                            WebkitFilter: 'grayscale(100%) brightness(1.2) contrast(1.1)'
+                        } : {}
+                    })
+                ])
+            )
+        ),
+
+        // Second divider line with fade
+        React.createElement('div', {
+            key: 'divider-2',
+            className: "h-px w-full max-w-3xl mx-auto mb-8 bg-gradient-to-r from-transparent via-zinc-700 to-transparent"
+        }),
+
+        // Section with subtitle and text
+        React.createElement('div', { key: 'cta-section', className: "text-center max-w-3xl mx-auto" }, [
+            React.createElement('h4', {
+                key: 'subtitle',
+                className: "text-base font-semibold text-primary mb-4"
+            }, 'Technology & Community Partners'),
+            
+            React.createElement('p', {
+                key: 'description',
+                className: "text-secondary text-sm mb-6"
+            }, 'Interested in partnering with us?'),
+
+            // CTA Button with 3D glass effect
+            React.createElement('div', {
+                key: 'button-wrapper',
+                className: "button-container flex justify-center"
+            }, [
+                React.createElement('a', {
+                    key: 'button-link',
+                    href: formUrl,
+                    target: '_blank',
+                    rel: 'noopener noreferrer',
+                    className: "button"
+                }, [
+                    React.createElement('span', { key: 'text' }, 'Become a Partner')
+                ])
+            ])
+        ])
+    ]);
+};
+
+window.BecomePartner = BecomePartner;
+
--- a/src/scripts/app-boot.js
+++ b/src/scripts/app-boot.js
@@ -6,6 +6,7 @@ import { NotificationIntegration } from '../notifications/NotificationIntegratio
 // Import UI components (side-effect: they attach themselves to window.*)
 import '../components/ui/Header.jsx';
 import '../components/ui/DownloadApps.jsx';
+import '../components/ui/BecomePartner.jsx';
 import '../components/ui/UniqueFeatureSlider.jsx';
 import '../components/ui/SecurityFeatures.jsx';
 import '../components/ui/Testimonials.jsx';
--- a/src/scripts/bootstrap-modules.js
+++ b/src/scripts/bootstrap-modules.js
@@ -29,6 +29,7 @@
    const componentModules = await Promise.all([
      import(`../components/ui/Header.jsx?v=${timestamp}`),
      import(`../components/ui/DownloadApps.jsx?v=${timestamp}`),
+      import(`../components/ui/BecomePartner.jsx?v=${timestamp}`),
      import(`../components/ui/ComparisonTable.jsx?v=${timestamp}`),
      import(`../components/ui/UniqueFeatureSlider.jsx?v=${timestamp}`),
      import(`../components/ui/SecurityFeatures.jsx?v=${timestamp}`),
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -523,6 +523,50 @@ button i {
    50% { opacity: 0.7; }
 }

+@keyframes shimmer {
+    0% { transform: translateX(-100%) skewX(-15deg); }
+    100% { transform: translateX(200%) skewX(-15deg); }
+}
+
+/* Modern animated button */
+.btn-partner-modern {
+    position: relative;
+    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
+    background-size: 200% 200%;
+    background-position: 0% 0;
+    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+}
+
+.btn-partner-modern::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+    transition: left 0.5s;
+}
+
+.btn-partner-modern:hover {
+    background-position: 100% 0;
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5), 0 0 30px rgba(249, 115, 22, 0.3);
+}
+
+.btn-partner-modern:hover::before {
+    left: 100%;
+    animation: shimmer 1.5s ease-in-out;
+}
+
+.btn-partner-modern:active {
+    transform: translateY(0) scale(0.98);
+    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
+}
+
+
 /* Custom scrollbar */
 .custom-scrollbar {
    scrollbar-width: thin;
@@ -558,4 +602,134 @@ button i {
 /* Ensure icons visible in dark backgrounds */
 .text-secondary i {
    opacity: 0.8;
+}
+
+/* Container to enable 3D perspective */
+.button-container {
+    perspective: 1000px;
+}
+
+/* Base button styles with capsule shape and glass effect */
+.button {
+    width: 200px;
+    height: 60px;
+    border-radius: 30px; /* Creates the capsule shape */
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15),
+        rgba(255, 255, 255, 0.05)
+    ); /* Transparent glass gradient */
+    box-shadow:
+        inset 0 1px 2px rgba(255, 255, 255, 0.4),
+        /* Top highlight */ inset 0 -1px 2px rgba(0, 0, 0, 0.2),
+        /* Bottom shadow */ 0 4px 8px rgba(0, 0, 0, 0.2),
+        /* Drop shadow */ 0 0 20px rgba(255, 255, 255, 0.1); /* Subtle glow */
+    transform: rotateX(15deg) translateZ(0); /* Initial 3D tilt */
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Springy transition */
+    position: relative;
+    cursor: pointer;
+    animation: pulse 2s infinite ease-in-out; /* Pulsing glow animation */
+    overflow: hidden;
+    text-decoration: none;
+    display: block;
+}
+
+/* Moving shine effect for glass-like reflection */
+.button::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -50px;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(
+        to right,
+        transparent,
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.1),
+        transparent
+    ); /* Shine gradient */
+    transform: skewX(-25deg); /* Tilted shine */
+    animation: shine 3s infinite linear; /* Continuous shine movement */
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Ground shadow to enhance 3D effect */
+.button::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 10%;
+    width: 80%;
+    height: 10px;
+    background: radial-gradient(
+        ellipse at center,
+        rgba(0, 0, 0, 0.3) 0%,
+        transparent 70%
+    ); /* Soft shadow */
+    z-index: -1;
+}
+
+/* Text inside the button */
+.button span {
+    position: relative;
+    z-index: 2;
+    color: white;
+    font-size: 18px;
+    font-family: Arial, sans-serif;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Depth for text */
+    display: block;
+    line-height: 60px; /* Center vertically */
+    text-align: center;
+}
+
+/* Hover state: Straighten, lift, and enhance glow */
+.button:hover {
+    transform: rotateX(0deg) translateZ(15px) scale(1.05); /* Lift and scale */
+    box-shadow:
+        inset 0 1px 2px rgba(255, 255, 255, 0.4),
+        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
+        0 8px 16px rgba(0, 0, 0, 0.3),
+        /* Stronger shadow */ 0 0 40px rgba(255, 255, 255, 0.25); /* Brighter glow */
+}
+
+/* Active state: Depress and dim glow */
+.button:active {
+    transform: rotateX(0deg) translateZ(-5px) scale(0.95); /* Push down */
+    box-shadow:
+        inset 0 1px 2px rgba(255, 255, 255, 0.4),
+        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
+        0 2px 4px rgba(0, 0, 0, 0.2),
+        /* Reduced shadow */ 0 0 10px rgba(255, 255, 255, 0.1); /* Dimmed glow */
+}
+
+/* Pulsing animation for idle state */
+@keyframes pulse {
+    0%,
+    100% {
+        box-shadow:
+            inset 0 1px 2px rgba(255, 255, 255, 0.4),
+            inset 0 -1px 2px rgba(0, 0, 0, 0.2),
+            0 4px 8px rgba(0, 0, 0, 0.2),
+            0 0 20px rgba(255, 255, 255, 0.1);
+    }
+    50% {
+        box-shadow:
+            inset 0 1px 2px rgba(255, 255, 255, 0.4),
+            inset 0 -1px 2px rgba(0, 0, 0, 0.2),
+            0 4px 8px rgba(0, 0, 0, 0.2),
+            0 0 30px rgba(255, 255, 255, 0.2); /* Peak glow */
+    }
+}
+
+/* Shine animation for dynamic glass effect */
+@keyframes shine {
+    0% {
+        left: -50px; /* Start off-screen */
+    }
+    100% {
+        left: 250px; /* Move past button width (200px + buffer) */
+    }
 }