diff --git a/about.html b/about.html index cf21abc..8a370c1 100644 --- a/about.html +++ b/about.html @@ -46,6 +46,7 @@ AI tools Solutions Resources + Pricing NewsRoom About Try VFXB Online @@ -147,6 +148,7 @@ + Pricing NewsRoom About diff --git a/index.html b/index.html index 925a0b4..6728094 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,7 @@ AI tools Solutions Resources + Pricing NewsRoom About Try VFXB Online diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..25dfea4 --- /dev/null +++ b/pricing.html @@ -0,0 +1,325 @@ + + + + + + Pricing - VFXB + + + + +
+ +
+ + + +
+
+
Pricing
+ + +
+ + +
+ +
+ Products +
+ Video Editor +
Professional video editing tools
 + Audio Editor +
Advanced audio processing
 + Image Editor +
Photo editing and enhancement
 +
+
+ AI tools + Solutions + Resources + Pricing + NewsRoom + About + Try VFXB Online + Download +
+ + +
+ + +
+ Try VFXB Online + Download +
+ +
+ + +
+

Choose Your Plan

+

Flexible pricing for creators, businesses, and everyone in between.

+
+ + +
+
+
+

Free

+
$0/mo
+
    +
  • Basic AI video editing
    • +
  • Watermarked exports
    • +
  • Community support
    • +
  • Limited templates
    • +
+ Get Started +
+
+

Pro

+
$19/mo
+
    +
  • All Free features
    • +
  • No watermarks
    • +
  • Premium templates
    • +
  • Priority support
    • +
  • AI voice & avatar tools
    • +
+ Start Free Trial +
+
+

Business

+
$49/mo
+
    +
  • All Pro features
    • +
  • Team collaboration
    • +
  • Custom branding
    • +
  • Dedicated account manager
    • +
  • Advanced analytics
    • +
+ Contact Sales +
+
+
+ + + + diff --git a/styles.css b/styles.css index a1c58d9..2488a4a 100644 --- a/styles.css +++ b/styles.css @@ -599,6 +599,29 @@ body { pointer-events: none; } +.body-bg-video-wrapper video { + width: 100vw; + height: 100vh; + object-fit: cover; + min-width: 100%; + min-height: 100%; +} + +.particles { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; + pointer-events: none; +} + +.header, .pricing-section, .pricing-hero, .about-hero, .about-content { + position: relative; + z-index: 2; +} + /* Responsive Design */ @media (max-width: 1024px) { .nav { @@ -1501,3 +1524,99 @@ body { grid-template-columns: repeat(2, 1fr); } } + +/* Pricing Section Styles */ +.pricing-section { + display: flex; + justify-content: center; + align-items: center; + min-height: 70vh; + padding: 60px 0 80px 0; + } + + .pricing-container { + display: flex; + gap: 32px; + justify-content: center; + align-items: stretch; + flex-wrap: wrap; + } + + .pricing-card { + background: rgba(20, 20, 20, 0.85); + border-radius: 18px; + box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18); + padding: 36px 32px 32px 32px; + min-width: 260px; + max-width: 320px; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.2s, box-shadow 0.2s; + } + + .pricing-card.featured { + border: 2px solid #a259ff; + background: rgba(60, 20, 80, 0.95); + transform: scale(1.05); + z-index: 1; + } + + .pricing-title { + font-size: 2rem; + margin-bottom: 12px; + font-weight: bold; + } + + .pricing-price { + font-size: 2.2rem; + margin-bottom: 18px; + font-weight: bold; + } + + .pricing-price span { + font-size: 1rem; + color: #aaa; + } + + .pricing-features { + list-style: none; + padding: 0; + margin: 0 0 24px 0; + text-align: left; + width: 100%; + } + + .pricing-features li { + margin-bottom: 10px; + font-size: 1.05rem; + padding-left: 1em; + position: relative; + } + + .pricing-features li:before { + content: "✔"; + color: #a259ff; + position: absolute; + left: 0; + } + + .pricing-card .btn { + width: 100%; + margin-top: auto; + text-align: center; + } + +.pricing-hero { + padding-top: 120px; /* or match your header height + some space */ + text-align: center; + max-width: 1200px; + margin: 0 auto 40px auto; +} + +@media (max-width: 768px) { + .pricing-hero { + padding-top: 90px; + } +} \ No newline at end of file