diff --git a/public/index.html b/public/index.html index 5060842..553e9c4 100644 --- a/public/index.html +++ b/public/index.html @@ -35,600 +35,15 @@ body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellips /* ============================================================ SPLASH SCREEN ============================================================ */ -#splash{position:fixed;inset:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:9999}#splash.fade-out{animation:fadeOut .6s ease-out forwards}@keyframes fadeOut{to{opacity:0;pointer-events:none}}.splash-content{text-align:center}.splash-logo{width:120px;height:120px;margin:0 auto 2rem;position:relative}.splash-logo svg{width:100%;height:100%;filter:drop-shadow(0 0 24px var(--dragon-glow))}.splash-text{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;letter-spacing:.02em}.splash-subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:400} - -/* ============================================================ - NAVIGATION - ============================================================ */ -nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height, 70px);background:linear-gradient(180deg,rgba(6,8,14,.95) 0%,rgba(6,8,14,0) 100%);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;display:flex;align-items:center;padding:0 2rem} - -nav{-webkit-backdrop-filter:blur(12px)} - -.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1400px;margin:0 auto} - -.nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;font-weight:600;font-size:1.1rem;transition:opacity .2s} - -.nav-logo:hover{opacity:.7} - -.nav-logo svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} - -.nav-links{display:flex;align-items:center;gap:2rem} - -.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .2s} - -.nav-links a:hover{color:var(--accent-bright)} - -.nav-button{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s;text-decoration:none;display:inline-block} - -.nav-button:hover{background:var(--accent-bright);transform:translateY(-2px);box-shadow:0 8px 16px rgba(43,92,255,.2)} - -.mobile-menu-btn{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer} - -@media (max-width:768px){.nav-links{display:none}.mobile-menu-btn{display:block}#mobile-menu{position:absolute;top:70px;left:0;right:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 2rem;display:none;flex-direction:column;gap:1rem}#mobile-menu.show{display:flex}#mobile-menu a{color:var(--text-secondary);text-decoration:none;padding:.5rem 0;transition:color .2s}#mobile-menu a:hover{color:var(--accent-bright)}} - -/* ============================================================ - HERO SECTION - ============================================================ */ -.hero{margin-top:70px;padding:8rem 2rem;min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden} - -.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(43,92,255,.1) 0%,transparent 70%);pointer-events:none} - -.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto} - -.hero-title{font-size:clamp(2.5rem, 8vw, 4rem);font-weight:800;line-height:1.2;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} - -.hero-subtitle{font-size:1.3rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.6} - -.hero-cta{display:inline-flex;gap:1rem;flex-wrap:wrap;justify-content:center} - -.btn{padding:1rem 2rem;border-radius:10px;font-weight:600;border:none;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;font-size:1rem} - -.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-bright) 100%);color:#fff;box-shadow:0 8px 16px rgba(43,92,255,.3)} - -.btn-primary:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(43,92,255,.4)} - -.btn-secondary{background:transparent;border:2px solid var(--border-bright);color:var(--text-primary)} - -.btn-secondary:hover{border-color:var(--accent-bright);color:var(--accent-bright);background:rgba(43,92,255,.05)} - -@media (max-width:768px){.hero{padding:4rem 1.5rem;min-height:auto}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}} - -/* ============================================================ - FEATURES SECTION - ============================================================ */ -.features{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} - -.features-container{max-width:1400px;margin:0 auto} - -.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;text-align:center} - -.section-subtitle{font-size:1.1rem;color:var(--text-secondary);text-align:center;margin-bottom:4rem;max-width:600px;margin-left:auto;margin-right:auto} - -.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem} - -.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;transition:all .3s} - -.feature-card:hover{background:var(--bg-card-hover);border-color:var(--border-bright);transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,.2)} - -.feature-icon{width:48px;height:48px;background:var(--accent-glow);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--accent);font-size:1.5rem} - -.feature-title{font-size:1.3rem;font-weight:700;margin-bottom:.5rem} - -.feature-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.6} - -@media (max-width:768px){.features{padding:4rem 1.5rem}.section-title{font-size:1.8rem}.features-grid{grid-template-columns:1fr}} - -/* ============================================================ - STATS SECTION - ============================================================ */ -.stats{padding:4rem 2rem;background:var(--bg-primary);display:flex;justify-content:center;align-items:center} - -.stats-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:3rem;text-align:center;width:100%} - -.stat-item h3{font-size:clamp(2rem, 5vw, 3rem);font-weight:800;color:var(--accent);margin-bottom:.5rem} - -.stat-item p{color:var(--text-secondary);font-size:1rem} - -@media (max-width:768px){.stats{padding:3rem 1.5rem}.stats-container{grid-template-columns:1fr;gap:2rem}.stat-item h3{font-size:2rem}} - -/* ============================================================ - GALLERY SECTION - ============================================================ */ -.gallery{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border)} - -.gallery-container{max-width:1400px;margin:0 auto} - -.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:2rem} - -.gallery-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;position:relative} - -.gallery-item:hover{border-color:var(--border-bright);transform:scale(1.05)} - -.gallery-item-content{width:100%;height:100%;background:linear-gradient(135deg, var(--accent-glow) 0%, var(--dragon-glow) 100%);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text-primary);font-size:1.1rem} - -@media (max-width:768px){.gallery{padding:4rem 1.5rem}.gallery-grid{grid-template-columns:1fr 1fr}} - -/* ============================================================ - TESTIMONIALS SECTION - ============================================================ */ -.testimonials{padding:6rem 2rem;background:var(--bg-primary);border-top:1px solid var(--border)} - -.testimonials-container{max-width:1000px;margin:0 auto} - -.testimonials-grid{display:grid;gap:2rem} - -.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;position:relative} - -.testimonial-card::before{content:'"';position:absolute;top:-10px;left:20px;font-size:4rem;color:var(--accent);opacity:.3;font-weight:800} - -.testimonial-text{color:var(--text-secondary);font-style:italic;margin-bottom:1.5rem;line-height:1.8;position:relative;z-index:1} - -.testimonial-author{font-weight:600;color:var(--text-primary);margin-bottom:.25rem} - -.testimonial-role{font-size:.9rem;color:var(--text-secondary)} - -@media (max-width:768px){.testimonials{padding:4rem 1.5rem}} - -/* ============================================================ - PRICING SECTION - ============================================================ */ -.pricing{padding:6rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} - -.pricing-container{max-width:1400px;margin:0 auto} - -.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;margin-top:3rem} - -.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2.5rem;transition:all .3s;display:flex;flex-direction:column} - -.pricing-card.featured{border:2px solid var(--accent);transform:scale(1.05)} - -.pricing-card:hover{border-color:var(--border-bright);background:var(--bg-card-hover)} - -.pricing-name{font-size:1.5rem;font-weight:700;margin-bottom:1rem} - -.pricing-price{font-size:3rem;font-weight:800;color:var(--accent);margin-bottom:.5rem} - -.pricing-period{color:var(--text-secondary);margin-bottom:2rem} - -.pricing-features{list-style:none;margin-bottom:2rem;flex:1} - -.pricing-features li{padding:.5rem 0;color:var(--text-secondary);border-bottom:1px solid var(--border);font-size:.95rem} - -.pricing-features li::before{content:'✓';color:var(--success);font-weight:800;margin-right:.5rem} - -.pricing-button{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s} - -.pricing-button:hover{background:var(--accent-bright);transform:translateY(-2px)} - -.pricing-card.featured .pricing-button{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-bright) 100%);box-shadow:0 8px 16px rgba(43,92,255,.3)} - -@media (max-width:768px){.pricing{padding:4rem 1.5rem}.pricing-grid{grid-template-columns:1fr}.pricing-card.featured{transform:scale(1)}} - -/* ============================================================ - CTA SECTION - ============================================================ */ -.cta{padding:4rem 2rem;background:linear-gradient(135deg,rgba(43,92,255,.1) 0%,rgba(224,92,26,.05) 100%);border-top:1px solid var(--border);text-align:center} - -.cta-container{max-width:600px;margin:0 auto} - -.cta-title{font-size:2rem;font-weight:800;margin-bottom:1rem} - -.cta-text{color:var(--text-secondary);margin-bottom:2rem;line-height:1.6} - -@media (max-width:768px){.cta{padding:3rem 1.5rem}.cta-title{font-size:1.5rem}} - -/* ============================================================ - FOOTER - ============================================================ */ -footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:3rem 2rem;margin-top:2rem} - -footer-container{max-width:1400px;margin:0 auto} - -.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:3rem;margin-bottom:3rem} - -.footer-section h3{font-size:1.1rem;font-weight:700;margin-bottom:1rem} - -.footer-section ul{list-style:none} - -.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color .2s;display:block;padding:.5rem 0} - -.footer-section a:hover{color:var(--accent-bright)} - -.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;text-align:center;color:var(--text-secondary);font-size:.9rem} - -@media (max-width:768px){footer{padding:2rem 1.5rem}.footer-content{gap:2rem}} - -/* ============================================================ - UTILITY CLASSES - ============================================================ */ -.container{max-width:1400px;margin:0 auto;padding:0 2rem} - -.flex{display:flex} - -.flex-center{display:flex;align-items:center;justify-content:center} - -.grid{display:grid} - -.text-center{text-align:center} - -.mt{margin-top:1rem} - -.mb{margin-bottom:1rem} - -.my{margin-top:1rem;margin-bottom:1rem} - -.py{padding-top:1rem;padding-bottom:1rem} - -.gap{gap:1rem} - -/* ============================================================ - ANIMATIONS - ============================================================ */ -@keyframes fadeIn{from{opacity:0}to{opacity:1}} - -@keyframes slideInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}} - -@keyframes slideInDown{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}} - -.fade-in{animation:fadeIn .6s ease-out} - -.slide-in-up{animation:slideInUp .6s ease-out} - -.slide-in-down{animation:slideInDown .6s ease-out} - -/* ============================================================ - SCROLLBAR STYLING - ============================================================ */ -::-webkit-scrollbar{width:10px} - -::-webkit-scrollbar-track{background:var(--bg-primary)} - -::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:5px} - -::-webkit-scrollbar-thumb:hover{background:var(--accent)} - - - -
- -
Dragon Wind
-
Wild Dragon
-
- - - -
- -
-
-

Unleash the Power of Dragon Wind

-

Experience lightning-fast performance with our cutting-edge platform. Built for speed, designed for excellence.

-
- - -
-
-
- -
-
-

Why Dragon Wind?

-

Discover the features that make us the choice of thousands of professionals worldwide

-
-
-
⚡
-

Lightning Fast

-

Experience unprecedented speed with our optimized infrastructure and cutting-edge technology.

-
-
-
🔒
-

Secure & Safe

-

Bank-grade security with enterprise-level encryption and compliance certifications.

-
-
-
📈
-

Scalable

-

Grow your business without limits. Our platform scales with your needs.

-
-
-
🎯
-

Precise Control

-

Fine-grained controls and customization options for advanced users.

-
-
-
🌍
-

Global Reach

-

Deploy globally with our distributed network of data centers worldwide.

-
-
-
💎
-

Premium Support

-

24/7 dedicated support from our expert team, always ready to help.

-
-
-
-
- -
-
-
-

10M+

-

Active Users

-
-
-

99.99%

-

Uptime SLA

-
-
-

50+

-

Countries

-
-
-

24/7

-

Support

-
-
-
- - - -
-
-

What Users Say

-
-
-
Dragon Wind has completely transformed how we manage our operations. The performance is incredible!
-
Sarah Johnson
-
CEO, TechCorp
-
-
-
Best investment we've made. The ROI was immediate and the team support is outstanding.
-
Michael Chen
-
Founder, DataSystems
-
-
-
Simple, elegant, powerful. This is what enterprise software should be.
-
Elena Rodriguez
-
Operations Director, GlobalTech
-
-
-
-
- -
-
-

Pricing Plans

-

Choose the perfect plan for your business

-
-
-

Starter

-
$29
-
per month
-
    -
  • Up to 100 users
    • -
  • 5GB storage
    • -
  • Basic analytics
    • -
  • Email support
    • -
  • API access
    • -
- -
-
-

Professional

-
$99
-
per month
-
    -
  • Up to 500 users
    • -
  • 100GB storage
    • -
  • Advanced analytics
    • -
  • Priority support
    • -
  • Full API access
    • -
  • Custom integrations
    • -
- -
-
-

Enterprise

-
Custom
-
contact us
-
    -
  • Unlimited users
    • -
  • Unlimited storage
    • -
  • Custom analytics
    • -
  • 24/7 phone support
    • -
  • Dedicated account manager
    • -
  • SLA guarantee
    • -
- -
-
-
-
- -
-
-

Ready to Get Started?

-

Join thousands of satisfied users and transform your business with Dragon Wind today.

- -
-
- - - - - - \ No newline at end of file +#splash{ + position:fixed;inset:0;z-index:9999;background:#03040a; + display:flex;flex-direction:column;align-items:center;justify-content:center; + overflow:hidden; +} +#splash.fade-out{ + animation:splashFadeOut .7s cubic-bezier(.4,0,1,1) forwards; +} +@keyframes splashFadeOut{ + 0%{opacity:1;transform:scale(1)} + 100%{opacity:0;transform:scale(1.05);pointer-events:none} +} \ No newline at end of file