footer
This commit is contained in:
Emre
@@ -8,6 +8,7 @@ import ForYou from './components/ForYou';
|
||||
import CallToAction from './components/CallToAction';
|
||||
import MembershipOptions from './components/MembershipOptions';
|
||||
import Referral from './components/referral';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
const Home = () => (
|
||||
<div className="App">
|
||||
@@ -34,6 +35,8 @@ function App() {
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/membership" element={<MembershipPage />} />
|
||||
</Routes>
|
||||
<div className="mt-8 footer-separator" />
|
||||
<Footer />
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
116
src/components/Footer.jsx
Normal file
116
src/components/Footer.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const Footer = () => {
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
visible: { transition: { staggerChildren: 0.1 } }
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-900 py-20">
|
||||
<motion.div
|
||||
className="max-w-7xl mx-auto px-6"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<div className="flex items-start mb-12">
|
||||
<motion.div variants={fadeInUp} className="w-full sm:w-1/2">
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-white mb-6 leading-tight font-mono">
|
||||
Stay connected. <br /> Spread the culture.
|
||||
</h3>
|
||||
|
||||
<div
|
||||
className="flex space-x-6 mt-8"
|
||||
style={{ position: 'relative', zIndex: 50 }}
|
||||
>
|
||||
<a
|
||||
href="https://t.me/+-qm4EFOqvZFlMTMx"
|
||||
className="social-circle"
|
||||
aria-label="Telegram"
|
||||
title="Join us on Telegram"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer external"
|
||||
style={{ position: 'relative', zIndex: 50, pointerEvents: 'auto' }}
|
||||
>
|
||||
<img
|
||||
src="https://cdn.simpleicons.org/telegram/000000"
|
||||
alt="Telegram"
|
||||
width="22"
|
||||
height="22"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://x.com/myceliums0ciety"
|
||||
className="social-circle"
|
||||
aria-label="X (Twitter)"
|
||||
title="Follow us on X"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer external"
|
||||
style={{ position: 'relative', zIndex: 50, pointerEvents: 'auto' }}
|
||||
>
|
||||
<img
|
||||
src="https://cdn.simpleicons.org/x/000000"
|
||||
alt="X"
|
||||
width="22"
|
||||
height="22"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="w-full sm:w-1/2 flex justify-end gap-12 mt-8 sm:mt-0">
|
||||
<motion.div variants={fadeInUp} className="w-48">
|
||||
<div className="text-left" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="/#manifesto" className="no-underline hover:text-bright-cyan transition-colors duration-200">MISSION</a>
|
||||
</p>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="/#foundations" className="no-underline hover:text-bright-cyan transition-colors duration-200">FOUNDATION</a>
|
||||
</p>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="/#foryou" className="no-underline hover:text-bright-cyan transition-colors duration-200">USERS</a>
|
||||
</p>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="/membership" className="no-underline hover:text-bright-cyan transition-colors duration-200">MEMBERSHIP</a>
|
||||
</p>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="/membership#referral" className="no-underline hover:text-bright-cyan transition-colors duration-200">REFERRAL</a>
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={fadeInUp} className="w-48">
|
||||
<div className="text-left" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="https://docs.mycelium.tf" target="_blank" rel="noopener noreferrer" className="no-underline hover:text-bright-cyan transition-colors duration-200">DOCS</a>
|
||||
</p>
|
||||
<p className="text-white font-mono uppercase tracking-wide text-xxs">
|
||||
<a href="https://platform.mycelium.tf" target="_blank" rel="noopener noreferrer" className="no-underline hover:text-bright-cyan transition-colors duration-200">MEMBER PLATFORM</a>
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="pt-8"
|
||||
variants={fadeInUp}
|
||||
>
|
||||
<p className="text-white font-mono text-sm">
|
||||
Mycelium Society. All Rights Reserved. {new Date().getFullYear()}
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -17,7 +17,7 @@ const ForYou = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section ref={ref} className="section-padding bg-dark-gradient">
|
||||
<section id="foryou" ref={ref} className="section-padding bg-dark-gradient">
|
||||
<motion.div
|
||||
className="w-full"
|
||||
initial="hidden"
|
||||
|
||||
@@ -31,7 +31,7 @@ const Foundations = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
|
||||
<section id="foundations" className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="mb-16 text-center">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
const Manifesto = () => {
|
||||
|
||||
return (
|
||||
<section className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
|
||||
<section id="manifesto" className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="mb-16 text-center">
|
||||
|
||||
@@ -17,7 +17,7 @@ const Referral = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section ref={ref} className="section-padding bg-dark-gradient">
|
||||
<section id="referral" ref={ref} className="section-padding bg-dark-gradient">
|
||||
<motion.div
|
||||
className="w-full"
|
||||
initial="hidden"
|
||||
@@ -49,19 +49,9 @@ const Referral = () => {
|
||||
{/* Referral Details Block */}
|
||||
<motion.div variants={fadeInUp} className="container-width max-w-4xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg border border-gray-700">
|
||||
<div className="space-y-8">
|
||||
<motion.div variants={fadeInUp} className="border-l-2 border-bright-cyan pl-6 py-4">
|
||||
<p className="text-lg text-gray-300 leading-relaxed">
|
||||
<span className="text-teal-400 mr-2">✓</span> Digital Residents receive $20 credited to their resident wallet for each new member they invite who upgrades to paid membership.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div variants={fadeInUp} className="border-l-2 border-bright-cyan pl-6 py-4">
|
||||
<p className="text-lg text-gray-300 leading-relaxed">
|
||||
<span className="text-teal-400 mr-2">✓</span> Rewards are capped at 20 referrals per resident (maximum $400).
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div variants={fadeInUp} className="border-l-2 border-bright-cyan pl-6 py-4">
|
||||
<p className="text-lg text-gray-300 leading-relaxed">
|
||||
<span className="text-teal-400 mr-2">✓</span> Referral credits are applied once new members complete their paid residency registration.
|
||||
<motion.div variants={fadeInUp} className="pl-6 py-4 text-center">
|
||||
<p className="text-lg text-gray-300 leading-relaxed mx-auto max-w-3xl">
|
||||
Digital Residents receive $20 credited to their wallets for each new member they invite who upgrades to paid membership. Rewards are capped at 20 referrals per resident (maximum $400). Referral credits are applied once new members complete their membership upgrade.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -46,6 +46,7 @@ button {
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
.z-10 { z-index: 10; }
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
.ml-auto { margin-left: auto; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.mb-8 { margin-bottom: 2rem; }
|
||||
.mb-12 { margin-bottom: 3rem; }
|
||||
@@ -112,6 +113,9 @@ button {
|
||||
.text-6xl { font-size: 3.75rem; }
|
||||
.text-7xl { font-size: 4.5rem; }
|
||||
|
||||
/* Extra small text sizes */
|
||||
.text-xs { font-size: 0.75rem; }
|
||||
.text-xxs { font-size: 0.65rem; }
|
||||
/* Button styles */
|
||||
.btn-primary {
|
||||
background: transparent;
|
||||
@@ -377,3 +381,86 @@ button {
|
||||
.text-base { font-size: 1rem; }
|
||||
.text-xl { font-size: 1.25rem; }
|
||||
.text-2xl { font-size: 1.5rem; }
|
||||
/* Flex utilities (small missing subset similar to Tailwind) */
|
||||
.flex-1 { flex: 1 1 0%; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
|
||||
/* Text alignment utilities */
|
||||
.text-right { text-align: right; }
|
||||
.text-left { text-align: left; }
|
||||
|
||||
/* ===== Footer layout utilities (added) ===== */
|
||||
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
|
||||
|
||||
.w-1\/2 { width: 50%; }
|
||||
|
||||
.justify-end { justify-content: flex-end; }
|
||||
|
||||
.gap-12 { gap: 3rem; }
|
||||
|
||||
.space-y-2 > * + * { margin-top: 0.5rem; }
|
||||
|
||||
.mt-8 { margin-top: 2rem; }
|
||||
|
||||
.border-t { border-top-width: 1px; }
|
||||
|
||||
/* Border color utilities */
|
||||
.border-white { border-color: #ffffff; }
|
||||
|
||||
/* Border style utility */
|
||||
.border-solid { border-style: solid; }
|
||||
|
||||
/* Tailwind-like color opacity utility used in footer borders */
|
||||
.border-bright-cyan\/20 { border-color: rgba(0, 217, 255, 0.2); }
|
||||
|
||||
/* Simple social icon circles used in footer */
|
||||
.social-circle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 9999px;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
|
||||
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
|
||||
}
|
||||
|
||||
.social-circle:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 2px rgba(0,217,255,0.5) inset, 0 0 10px rgba(0,217,255,0.25);
|
||||
}
|
||||
|
||||
/* ===== Footer responsive helpers ===== */
|
||||
.w-full { width: 100%; }
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:w-1\/2 { width: 50%; }
|
||||
.sm\:mt-0 { margin-top: 0; }
|
||||
}
|
||||
|
||||
/* Missing utility used by footer links */
|
||||
.tracking-wide { letter-spacing: 0.05em; }
|
||||
|
||||
/* Solid royal blue background to match reference footer */
|
||||
.bg-royal-blue { background-color: #0b1fd1; }
|
||||
.bg-bright-cyan { background-color: #00d9ff; }
|
||||
|
||||
/* Footer separator (cyan blue, thinner) */
|
||||
.footer-separator {
|
||||
width: 100%;
|
||||
height: 1px; /* Thinner line */
|
||||
background: #ffffff; /* Bright white */
|
||||
opacity: 0.95; /* Slightly toned */
|
||||
box-shadow: 0 0 8px rgba(0, 217, 255, 0.25); /* subtle cyan glow */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user