diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 0fe496d3e..eb14aa95d 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ import { ClockMempoolComponent as ClockMempoolComponent } from './components/clo import { AddressComponent } from './components/address/address.component'; import { MasterPageComponent } from './components/master-page/master-page.component'; import { AboutComponent } from './components/about/about.component'; +import { AcceleratorLandingComponent } from './components/accelerator-landing/accelerator-landing.component'; import { StatusViewComponent } from './components/status-view/status-view.component'; import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component'; @@ -271,6 +272,10 @@ let routes: Routes = [ path: 'about', component: AboutComponent, }, + { + path: 'accelerator', + component: AcceleratorLandingComponent, + }, { path: 'blocks', component: BlocksList, diff --git a/frontend/src/app/components/accelerator-landing/accelerator-landing.component.html b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.html new file mode 100644 index 000000000..d11d8e49b --- /dev/null +++ b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.html @@ -0,0 +1,63 @@ +
+

Transaction stuck in the mempool?
Get it confirmed quickly with Mempool Accelerator™

+ +

Get your transaction confirmed quicker through mempool.space's network of mining partners—fairly, reliably, and transparently.

+ +
+ +
+

In partnership with

+ +
+ +
+
+ +

Easy

+

Simply tell us which transaction you need accelerated, and we'll take care of the rest. No technical knowledge needed.

+
+
+ +

Fair

+

No opaque pricing—your acceleration fee is based on the fair market rate for getting a transaction included in the next block.

+
+
+ +

Transparent

+

Verify the fee estimates and block templates we use to accelerate your transaction by running The Mempool Open Source Project™ yourself.

+
+
+ +

Reliable

+

Mempool's best-in-class fee estimation—combined with its mining pool relationships—means you can expect your transaction to be confirmed fast.

+
+
+ +
+
+
What makes Mempool Accelerator™ different from other accelerators?
 +
+ +
+
+
+
How can I trust Mempool Accelerator™?
 +
+ +
+
+
+
My transaction has been stuck for days. How quickly can Mempool Accelerator™ get it confirmed?
 +
+ +
+
+
+
All of this sounds great, but is there someone I can reach out to for help first?
 +
+ +
+
+ + +
diff --git a/frontend/src/app/components/accelerator-landing/accelerator-landing.component.scss b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.scss new file mode 100644 index 000000000..7e986055a --- /dev/null +++ b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.scss @@ -0,0 +1,111 @@ +#hero { + text-align: center; + margin: 60px auto; + width: 100%; + max-width: 2000px; +} + +#hero p { + color: rgba(255, 255, 255, 0.568627451); +} + +#hero img { + height: auto; + width: 50%; + max-width: 675px; +} + +h2 { + margin: 30px auto; + font-size: 2.35rem; +} + +.panel { + padding: 50px 80px 40px 80px; +} + +.panel-lead { + text-transform: uppercase; + letter-spacing: 2px; + font-size: 14px; +} + +.partner.panel { + background-color: #1d1f31; //#1d1f31 + text-align: center; +} + +.partner.panel svg { + width: 150px; + height: auto; +} + +.explainer.panel { + text-align: center; + width: 100%; + max-width: 2000px; + margin: 0 auto; + margin-top: 50px; +} + +.explainer.panel .point { + text-align: center; + width: 460px; + height: 400px; + padding: 30px; + display: inline-block; +} + +.explainer.panel .point .point-lead { + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 26px; + font-size: 22px; +} + +.explainer.panel .point svg { + height: auto; + width: 125px; + background: #1d1f31; + border-radius: 50%; + padding: 20px; + filter: sepia(100%); +} + +.panel.faq { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding-top: 0; +} + +.endpoint-container { + margin-bottom: 5px; +} + +.endpoint-container .section-header { + display: block; + background-color: #2d3348; + color: #1bd8f4; + padding: 1rem 1.3rem; + font-weight: 700; + border-radius: .25rem; + font-size: 18px; + font-weight: 700; + cursor: pointer; +} + +.endpoint-container .section-header:hover { + text-decoration: none; +} + + + +@media (max-width: 992px) { + + #hero img { + width: 80%; + } + +} diff --git a/frontend/src/app/components/accelerator-landing/accelerator-landing.component.ts b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.ts new file mode 100644 index 000000000..d46f041f5 --- /dev/null +++ b/frontend/src/app/components/accelerator-landing/accelerator-landing.component.ts @@ -0,0 +1,72 @@ +import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; +import { WebsocketService } from '../../services/websocket.service'; +import { SeoService } from '../../services/seo.service'; +import { StateService } from '../../services/state.service'; +import { Observable } from 'rxjs'; +import { ApiService } from '../../services/api.service'; +import { IBackendInfo } from '../../interfaces/websocket.interface'; +import { Router, ActivatedRoute } from '@angular/router'; +import { map, tap } from 'rxjs/operators'; +import { ITranslators } from '../../interfaces/node-api.interface'; +import { DOCUMENT } from '@angular/common'; + +@Component({ + selector: 'app-accelerator-landing', + templateUrl: './accelerator-landing.component.html', + styleUrls: ['./accelerator-landing.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AcceleratorLandingComponent implements OnInit { + + constructor( + public stateService: StateService, + private router: Router, + private route: ActivatedRoute, + ) { } + + ngOnInit() { + + } + + anchorLinkClick( event: any ) { + let targetId = ""; + if( event.target.nodeName === "A" ) { + targetId = event.target.hash.substring(1); + } else { + let element = event.target; + while( element.nodeName !== "A" ) { + element = element.parentElement; + } + targetId = element.hash.substring(1); + } + if( this.route.snapshot.fragment === targetId && document.getElementById( targetId )) { + document.getElementById( targetId ).scrollIntoView(); + } + this.openEndpointContainer( targetId ); + } + + openEndpointContainer( targetId ) { + let tabHeaderHeight = 0; + if (document.getElementById( targetId + "-tab-header" )) { + tabHeaderHeight = document.getElementById( targetId + "-tab-header" ).scrollHeight; + } + if( targetId ) { + const endpointContainerEl = document.querySelector( "#" + targetId ); + const endpointContentEl = document.querySelector( "#" + targetId + " .endpoint-content" ); + const endPointContentElHeight = endpointContentEl.clientHeight; + + if( endpointContentEl.classList.contains( "open" ) ) { + endpointContainerEl.style.height = "auto"; + endpointContentEl.style.top = "-10000px"; + endpointContentEl.style.opacity = "0"; + endpointContentEl.classList.remove( "open" ); + } else { + endpointContainerEl.style.height = endPointContentElHeight + tabHeaderHeight + 28 + "px"; + endpointContentEl.style.top = tabHeaderHeight + 28 + "px"; + endpointContentEl.style.opacity = "1"; + endpointContentEl.classList.add( "open" ); + } + } + } + +} diff --git a/frontend/src/resources/accelerator-hero-transparent.png b/frontend/src/resources/accelerator-hero-transparent.png new file mode 100644 index 000000000..66d39dafe Binary files /dev/null and b/frontend/src/resources/accelerator-hero-transparent.png differ