diff --git a/public/index.html b/public/index.html index ccfc258..5060842 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + @@ -30,4 +30,605 @@ } html{font-size:15px} body{font-family:'Outfit',sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden} -body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(26,63,199,.05) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 90%,rgba(224,92,26,.04) 0%,transparent 60%);pointer-events:none;z-index:0} \ No newline at end of file +body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(26,63,199,.05) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 90%,rgba(224,92,26,.04) 0%,transparent 60%);pointer-events:none;z-index:0} + +/* ============================================================ + 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