Editing User:TheOriginalOne/MainPage

__NOTOC__
{{#seo:
|title=WikiOasis - Free wiki hosting
|title_mode=append
|keywords=wiki,hosting,free,wikihosting,free wikihosting
|description=WikiOasis is a free wiki hosting partner for your community.
|image_alt=Wiki Logo
}}

<div style="max-width: 1300px; margin: 0 auto; padding: 0 5vw 40px 5vw; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;">

<!-- Hero Section -->
<div style="background: linear-gradient(135deg, #3650b8 0%, #0050b4 100%); border-radius: min(20px, 5vw); padding: min(3rem, 8vw); color: white; text-align: center; margin-bottom: min(3rem, 6vw); box-shadow: 0 15px 40px rgba(54, 80, 184, 0.25); position: relative; overflow: hidden;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 1.5px, transparent 1.5px), radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 120px 120px, 160px 160px, 80px 80px; animation: breathe-pulse 4s ease-in-out infinite alternate;"></div>
<div style="position: relative; z-index: 1;">
<div style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 900; margin-bottom: 1rem; text-shadow: 0 4px 8px rgba(0,0,0,0.15); line-height: 1.1;">'''Welcome to WikiOasis!'''</div>
<div style="font-size: clamp(1.1rem, 3.5vw, 1.4rem); margin-bottom: 2.5rem; opacity: 0.95; font-weight: 300; padding: 0 min(1rem, 3vw); line-height: 1.5;">The hub for <span style="font-weight: 700; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">'''{{NUMBEROFWIKIS}}'''</span> active communities, connecting over '''{{NUMBEROFUSERS}}''' users worldwide.</div>

<!-- Hero Buttons Fixed Properly -->
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: min(1.5rem, 5vw); margin-top: 1.5rem;">
[[Special:CreateAccount|<span style="display: inline-block; padding: min(1rem, 3vw) min(2.5rem, 5vw); background: rgba(255, 255, 255, 0.2); color: white; text-decoration: none; border-radius: 50px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; width: min(300px, 100%); max-width: 280px; text-align: center; font-size: clamp(1rem, 4vw, 1.1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.35)'; this.style.transform='translateY(-3px)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.25)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Create an account</span>]]
[[Special:RequestWiki|<span style="display: inline-block; padding: min(1rem, 3vw) min(2.5rem, 5vw); background: rgba(255, 255, 255, 0.2); color: white; text-decoration: none; border-radius: 50px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; width: min(300px, 100%); max-width: 280px; text-align: center; font-size: clamp(1rem, 4vw, 1.1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.35)'; this.style.transform='translateY(-3px)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.25)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Request a wiki</span>]]
[[Fundraiser|<span style="display: inline-block; padding: min(1rem, 3vw) min(2.5rem, 5vw); background: rgba(255, 255, 255, 0.2); color: white; text-decoration: none; border-radius: 50px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; width: min(300px, 100%); max-width: 280px; text-align: center; font-size: clamp(1rem, 4vw, 1.1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.35)'; this.style.transform='translateY(-3px)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.25)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Support our mission</span>]]
</div>
</div>
</div>

<!-- Features Grid -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: min(2rem, 4vw); margin-bottom: min(3rem, 6vw);">

<!-- Feature Card -->
<div style="background: white; border-radius: min(16px, 4vw); padding: min(2rem, 5vw); box-shadow: 0 6px 25px rgba(0,0,0,0.1); border-top: 4px solid #3675b8; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 35px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 6px 25px rgba(0,0,0,0.1)'">
<div style="text-align: center; margin-bottom: min(1.5rem, 4vw);">
[[File:OOjs_UI_icon_userGroup-ltr.svg|50px|link=|alt=Community Icon]]
<h3 style="font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 700; color: #2d3748;">Why WikiOasis?</h3>
</div>
<ul style="list-style: none; padding-left: 0; color: #4a5568; line-height: 1.8; font-size: clamp(0.95rem, 3.5vw, 1rem);">
<li>✅ <strong>Free, forever.</strong> Host a wiki at no cost with access to all features.</li>
<li>✅ <strong>No advertisements.</strong> We respect your community and never show ads.</li>
<li>✅ <strong>Fully customizable.</strong> Make your wiki look and feel exactly how you want.</li>
<li>✅ <strong>Unmatched support.</strong> Our team helps you every step of the way.</li>
</ul>
</div>

<!-- Quick Links Card -->
<div style="background: white; border-radius: min(16px, 4vw); padding: min(2rem, 5vw); box-shadow: 0 6px 25px rgba(0,0,0,0.1); border-top: 4px solid #2196F3; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 35px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 6px 25px rgba(0,0,0,0.1)'">
<div style="text-align: center; margin-bottom: min(1.5rem, 4vw);">
[[File:OOjs_UI_icon_academic.svg|50px|link=|alt=Quick Links Icon]]
<h3 style="font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 700; color: #2d3748;">Quick Links</h3>
</div>
<ul style="list-style: none; padding-left: 0; color: #4a5568; line-height: 1.8; font-size: clamp(0.95rem, 3.5vw, 1rem);">
<li>✅ [[Community portal|Community portal]] – Connect with the community.</li>
<li>✅ [[Steward requests|Steward requests]] – Get assistance from our stewards.</li>
<li>✅ [[Special:RequestWiki|Request a wiki]] – Launch your own wiki.</li>
<li>✅ [[Special:GlobalRenameRequest|Request a username change]] – Update your username easily.</li>
</ul>
</div>

<!-- Contact Card -->
<div style="background: white; border-radius: min(16px, 4vw); padding: min(2rem, 5vw); box-shadow: 0 6px 25px rgba(0,0,0,0.1); border-top: 4px solid #48BB78; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 35px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 6px 25px rgba(0,0,0,0.1)'">
<div style="text-align: center; margin-bottom: min(1.5rem, 4vw);">
[[File:OOjs_UI_icon_help-ltr.svg|50px|link=|alt=Contact Icon]]
<h3 style="font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 700; color: #2d3748;">Contact Us</h3>
</div>
<ul style="list-style: none; padding-left: 0; color: #4a5568; line-height: 1.8; font-size: clamp(0.95rem, 3.5vw, 1rem);">
<li>📧 <strong>Email:</strong> [mailto:stewards@wikioasis.org stewards@wikioasis.org]</li>
<li>💬 <strong>Discord:</strong> [https://discord.gg/Hc249nXbak Join our Discord]</li>
<li>🌐 <strong>Phorge:</strong> [https://phorge.wikioasis.org/ Phorge platform]</li>
</ul>
</div>

</div>