Editing User:Globe/Main page redesign

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

<div style="background: linear-gradient(135deg, #3650b8 0%, #0050b4 100%); border-radius: 16px; padding: 2rem 2rem; color: white; text-align: center; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(54, 80, 184, 0.2); 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.1) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 1.5px, transparent 1.5px), radial-gradient(circle at 40% 40%, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 100px 100px, 150px 150px, 75px 75px;"></div>

<div style="font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">'''Welcome to WikiOasis!'''</div>

<div style="font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.95; font-weight: 300;">Your wiki hosting partner, home to <span style="font-weight: 700; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">'''{{formatnum:{{NUMBEROFWIKIS}}}}'''</span> active communities for over '''{{formatnum:{{NUMBEROFUSERS}}}}''' users.</div>

<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">

[[Special:CreateAccount|<span style="display: inline-block; padding: 0.9rem 2rem; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.5rem;" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Create an account</span>]]

[[Special:RequestWiki|<span style="display: inline-block; padding: 0.9rem 2rem; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.5rem;" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Request a wiki</span>]]

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem;">

<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">

<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">

<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon userGroup-ltr.svg|20px|link=]]</span></div>

<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Why WikiOasis?</h3>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Free, forever.</strong> Host a wiki at no cost with access to all features. We'll never charge you to host a wiki on WikiOasis.</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>No adverts, we mean it.</strong> Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki, to make it yours.</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Fully customizable.</strong> Your wiki is yours, and you can customise it as much as you want. Let your creativity run wild!</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span><strong>Unmatched support.</strong> Have a problem with your wiki or just need advice? Our knowledgeable staff team will help you every step of the way!</div>

<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">

<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">

<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs_UI_icon_academic.svg|20px|link=]]</span></div>

<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Quick Links</h3>

<div style="font-weight: bold; margin-bottom: 0.5rem; color: #2d3748;">Requests</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Community portal|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Community portal</span>]] – Ask your fellow community members for help and discuss topics of global interest</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Steward requests|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Steward requests</span>]] – Solicit help from Stewards for tasks only they can do</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Special:RequestWiki|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a wiki</span>]] – Start your own wiki community</div>

<div style="margin-bottom: 1rem; padding-left: 1.5rem; position: relative; color: #4a5568; line-height: 1.6;"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.1rem;">✓</span>[[Special:GlobalRenameRequest|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a username change</span>]] – Request that your username be changed.</div>

<div style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-top: 4px solid #3675b8;">

<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; gap: 0.5rem;">

<div style="width: 40px; height: 40px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon help-ltr.svg|20px|link=]]</span></div>

<h3 style="font-size: 1.5rem; font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2;">Contact Us</h3>

<div style="list-style: none; display: flex; flex-direction: column; gap: 1rem;">

<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Email:</strong> [mailto:[email protected] <span style="color: #3675b8; text-decoration: none; font-weight: 500;">[email protected]</span>]</div>

<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Discord:</strong> [https://discord.gg/Hc249nXbak <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Join our Discord</span>]</div>

<div style="padding: 1rem; background: #f7fafc; border-radius: 8px; transition: background 0.2s ease;" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Phorge:</strong> [https://phorge.wikioasis.org/ <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Phorge</span>]</div>