API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 26th, 2019
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 72.13 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from "react";
  2. import "../Styles/OurServices.css";
  3. import Logo from "./Logo";
  4. import Arrow from "../media/arrow-bottom.png";
  5. import Socials from "../Components/Socials";
  6. import * as d3 from "d3";
  7. import { Link } from "react-router-dom";
  8. import MobileNav from "./MobileNav";
  9. import Exit from "../media/mobile_exit.png";
  10. import Minus from "../media/minus.svg";
  11. import Plus from "../media/plus.svg";
  12. import anime from 'animejs/lib/anime.es';
  13. import { timingSafeEqual } from "crypto";
  14. import {animationData} from '../properties/Paths'
  15. import { func } from "prop-types";
  16. import { isIP } from "net";
  17.  
  18. export default class extends Component {
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. visibility: window.innerWidth >= 768 ? true : false,
  23. resizing: false,
  24.  
  25. page_preview: true,
  26. page_price: false,
  27. priceList: true,
  28. page_stages: false,
  29. page_release: false,
  30. page_final: false,
  31.  
  32. mob_PriceList: false,
  33. mob_digital_list: true,
  34. mob_branding_list: false,
  35. details: false,
  36. services: null, // list of all available services
  37. selected_service: null, // service selected by a client
  38. priceList_anim: false,
  39.  
  40.  
  41. isFirstOpen: true,
  42.  
  43. isAnimate: false
  44. };
  45. }
  46.  
  47. setPage(name){
  48. if(!this.state.isAnimate){
  49. this.setState({
  50. page_preview: false,
  51. page_price: false,
  52. page_stages: false,
  53. page_release: false,
  54. page_final: false,
  55. }, ()=>{
  56. switch (name){
  57. case 'preview':
  58. this.setState({page_preview : true}, ()=>{
  59. this.changeVideo(animationData.step0);
  60. });
  61. break;
  62. case 'price':
  63. this.setState({page_price : true}, ()=>{
  64. this.changeVideo(animationData.step1);
  65. });
  66. break;
  67. case 'stages':
  68. this.setState({page_stages : true}, ()=>{
  69. this.changeVideo(animationData.step2);
  70. });
  71. break;
  72. case 'release':
  73. this.setState({page_release : true}, ()=>{
  74. this.changeVideo(animationData.step3);
  75. });
  76. break;
  77. case 'final':
  78. this.setState({page_final : true}, ()=>{
  79. this.changeVideo(false);
  80. });
  81. }
  82. });
  83. }
  84. }
  85.  
  86. componentDidMount() {
  87. fetch('/api/service')
  88. .then(res => res.json())
  89. .then(services => this.setState({ services }, () => console.log(this.state.services)));
  90. this.addScroll();
  91. this.preSets();
  92. this.priceHide();
  93. this.hideDevStep();
  94. this.releaseStepHide();
  95. this.lastStepHide();
  96. }
  97.  
  98. preSets(){
  99. let that = this;
  100. d3.select('.d_our_services_price_triangle').style('border-width', '0vw 0vw 0vw 0vw' );
  101. d3.select('.d_our_services_price_list').style('width', '0vw').style('height', '0vw');
  102. d3.select('.d_our_service_price_name').style('opacity', 0);
  103. d3.select('.d_price_button_plus').style('opacity', '1');
  104. d3.select('.d_price_button').style('width', '25vw');
  105. d3.select('.d_price_button_minus').style('opacity', 0);
  106.  
  107. d3.select('.d_first_container').style('left', '-50vw');
  108. d3.select('.d_second_container').style('right', '-50vw');
  109. d3.select('.d_our_services_last_step_left_block').style('left', '-100vw');
  110. d3.select('.d_our_services_last_step_right_block').style('left', '100vw');
  111. d3.select('.d_our_services_last_step_svg_main').style('transform', `scale(0)`);
  112. d3.select('.d_our_services_last_step_header').style('top', '-50vw');
  113. d3.select('.d_our_services_last_step_bottom_nav').style('bottom', '-50vw');
  114. d3.select('.d_our_services_release_step_head').style('top', '-50vw');
  115. d3.selectAll('.d_our_services_dev_step_bottom_nav_cont').style('bottom', '-50vw');
  116. d3.select('.d_our_services_dev_step h1').style('top', '-50vw');
  117. d3.select('.d_our_services_price_cont h1').style('top', '-50vw');
  118. d3.select('.d_our_services_price_cont .d_price_bottom_container').style('bottom', '-50vw');
  119. d3.select('.d_our_services_preview_cont h1').style('top', '-50vw');
  120. d3.select('.d_our_services_bottom_block').style('bottom', '-50vw');
  121.  
  122. this.animationPrice(true);
  123. this.animationStages(true);
  124. this.animationRelease(true);
  125.  
  126. d3.select('.test_path').style('transform', 'scale(0)').style('transform-origin', '27% 27%');
  127. this.animationOpen(animationData.step0, 4);
  128. this.priceListHide();
  129. }
  130.  
  131. addScroll = () => {
  132. if (window.innerWidth <= 768) {
  133. document
  134. .querySelector(".m_our_services")
  135. .addEventListener("scroll", this.scrollEvent);
  136. }
  137. };
  138.  
  139.  
  140. animationOpen(paths, duration){
  141. let that = this;
  142. if(paths){
  143. this.setAnimationPaths(paths, duration);
  144. d3.select('.test_path')
  145. .transition().duration(duration*1000/2).ease(d3.easeLinear)
  146. .style('transform', 'scale(0.8)')
  147. .style('transform-origin', '0% 0%')
  148. .on('end', function(){
  149. that.setState({isAnimate: false});
  150. });
  151. }else{
  152. that.setState({isAnimate: false});
  153. }
  154.  
  155. if(that.state.page_preview){
  156. this.animationPreview(true);
  157. this.priceListHide();
  158. }else if(that.state.page_price){
  159. this.animationPrice(true);
  160. }else if(that.state.page_stages){
  161. this.priceListHide();
  162. this.animationStages(true);
  163. }else if(that.state.page_release){
  164. this.animationRelease(true);
  165. }else if(that.state.page_final){
  166. this.animationFinal(true);
  167. }
  168. }
  169.  
  170. animationFinal(isOpen){
  171. d3.select('.d_our_services_last_step_left_block')
  172. .transition().duration(1500).ease(d3.easeLinear)
  173. .style('left', `${isOpen ? 3 : -100}vw`);
  174. d3.select('.d_our_services_last_step_right_block')
  175. .transition().duration(1500).ease(d3.easeLinear)
  176. .style('left', `${isOpen ? 0 : 100}vw`);
  177. d3.select('.d_our_services_last_step_svg_main')
  178. .transition().duration(1500).ease(d3.easeLinear)
  179. .style('transform', `scale(${isOpen ? 1 : 0})`);
  180. d3.select('.d_our_services_last_step_header')
  181. .transition().duration(1500).ease(d3.easeLinear)
  182. .style('top', `${isOpen ? 0 : -50}vw`);
  183. d3.select('.d_our_services_last_step_bottom_nav')
  184. .transition().duration(1500).ease(d3.easeLinear)
  185. .style('bottom', `${isOpen ? 1 : -50}vw`);
  186. }
  187.  
  188. animationRelease(isOpen){
  189. d3.select('.d_our_services_release_step_head')
  190. .transition().duration(1500).ease(d3.easeLinear)
  191. .style('top', `${isOpen ? 0 : -50}vw`);
  192. d3.select('.d_our_services_release_step .d_our_services_dev_step_bottom_nav_cont')
  193. .transition().duration(1500).ease(d3.easeLinear)
  194. .style('bottom', `${isOpen ? 1 : -50}vw`);
  195. if(!isOpen){
  196. d3.selectAll('.d_our_services_release_step_left_text, .d_our_services_release_step_left_svg, .d_our_services_release_step_bottom_text')
  197. .transition().duration(1500).ease(d3.easeLinear)
  198. .style('left', '-100vw');
  199. d3.select('.d_our_services_release_step_left_window')
  200. .transition().duration(2000).ease(d3.easeLinear)
  201. .style('left', '-100vw');
  202. d3.select('.d_our_services_release_step_right_window')
  203. .transition().duration(2000).ease(d3.easeLinear)
  204. .style('left', '200vw');
  205. d3.select('.d_our_services_release_step_right_text')
  206. .transition().duration(1500).ease(d3.easeLinear)
  207. .style('left', '200vw');
  208. }else{
  209. d3.select('.d_our_services_release_step_left_text')
  210. .style('left', '-29vw');
  211. d3.select('.d_our_services_release_step_left_window')
  212. .style('left', '5vw');
  213. d3.select('.d_our_services_release_step_left_svg')
  214. .style('left', '0vw');
  215. d3.select('.d_our_services_release_step_bottom_text')
  216. .style('left', '-29vw');
  217. d3.select('.d_our_services_release_step_right_window')
  218. .style('left', '72vw');
  219. d3.select('.d_our_services_release_step_right_text')
  220. .style('left', '81vw');
  221. }
  222. }
  223.  
  224. animationStages(isOpen){
  225. d3.select('.d_our_services_dev_step h1')
  226. .transition().duration(1500).ease(d3.easeLinear)
  227. .style('top', `${isOpen ? 0 : -50}vw`);
  228. d3.select('.d_our_services_dev_step .d_our_services_dev_step_bottom_nav_cont')
  229. .transition().duration(1500).ease(d3.easeLinear)
  230. .style('bottom', `${isOpen ? 1 : -50}vw`);
  231. if(!isOpen){
  232. d3.selectAll('.d_our_services_dev_step_left_count_window, .d_our_services_dev_step_right_count_window')
  233. .transition().duration(2000).ease(d3.easeLinear)
  234. .style('left', '-100vw');
  235. d3.selectAll('.d_our_services_dev_step_left_text, .d_our_services_dev_step_bottom_text')
  236. .transition().duration(1500).ease(d3.easeLinear)
  237. .style('left', '-100vw');
  238. d3.select('.d_our_services_dev_step_bottom_count_window')
  239. .transition().duration(2000).ease(d3.easeLinear)
  240. .style('left', '200vw');
  241. d3.selectAll('.d_our_services_dev_step_list, .d_our_services_dev_step_right_text, .d_our_services_dev_step_right_svg')
  242. .transition().duration(1500).ease(d3.easeLinear)
  243. .style('left', '200vw');
  244. }else{
  245. d3.select('.d_our_services_dev_step_left_count_window')
  246. .style('left', '5vw');
  247. d3.select('.d_our_services_dev_step_left_text')
  248. .style('left', '-18vw');
  249. d3.select('.d_our_services_dev_step_bottom_text')
  250. .style('left', '-30vw');
  251. d3.select('.d_our_services_dev_step_right_count_window')
  252. .style('left', '5vw');
  253. d3.select('.d_our_services_dev_step_bottom_count_window')
  254. .style('left', '73vw');
  255. d3.select('.d_our_services_dev_step_right_text')
  256. .style('left', '81vw');
  257. d3.select('.d_our_services_dev_step_right_svg')
  258. .style('left', '72vw');
  259. d3.select('.d_our_services_dev_step_list')
  260. .style('left', '80vw');
  261. }
  262. }
  263.  
  264. animationPrice(isOpen){
  265. if(!this.state.isFirstOpen){
  266. d3.select('.d_our_services_price_cont h1')
  267. .transition().duration(1500).ease(d3.easeLinear)
  268. .style('top', `${isOpen ? 0 : -50}vw`);
  269. d3.select('.d_our_services_price_cont .d_price_bottom_container')
  270. .transition().duration(1500).ease(d3.easeLinear)
  271. .style('bottom', `${isOpen ? 1 : -50}vw`);
  272. }
  273. if(!isOpen){
  274. d3.selectAll('.left_count_window, .bottom_count_window')
  275. .transition().duration(2000).ease(d3.easeLinear)
  276. .style('left', '-100vw');
  277. d3.selectAll('.left_count_text, .bottom_count_text')
  278. .transition().duration(1500).ease(d3.easeLinear)
  279. .style('left', '-100vw');
  280. d3.select('.right_count_window')
  281. .transition().duration(2000).ease(d3.easeLinear)
  282. .style('left', '200vw');
  283. d3.select('.right_count_text')
  284. .transition().duration(1500).ease(d3.easeLinear)
  285. .style('left', '200vw');
  286. }else{
  287. d3.selectAll('.left_count_window, .bottom_count_window')
  288. .style('left', '10vw');
  289. d3.select('.left_count_text')
  290. .style('left', '-20vw');
  291. d3.select('.bottom_count_text')
  292. .style('left', '-25vw');
  293. d3.select('.right_count_text')
  294. .style('left', '116.5vw');
  295. d3.select('.right_count_window')
  296. .style('left', '73vw');
  297. }
  298. }
  299.  
  300. animationPreview(isOpen){
  301. d3.select('.d_our_services_preview_cont h1')
  302. .transition().duration(1500).ease(d3.easeLinear)
  303. .style('top', `${isOpen ? 0 : -50}vw`);
  304. d3.select('.d_our_services_bottom_block')
  305. .transition().duration(1500).ease(d3.easeLinear)
  306. .style('bottom', `${isOpen ? 1 : -50}vw`);
  307. d3.select('.d_first_container')
  308. .transition().duration(1500).ease(d3.easeLinear)
  309. .style('left', `${isOpen ? 0 : -50}vw`);
  310. d3.select('.d_second_container')
  311. .transition().duration(1500).ease(d3.easeLinear)
  312. .style('right', `${isOpen ? 0 : -50}vw`);
  313. }
  314.  
  315. animationClose(paths, duration){
  316. let that = this;
  317. if(that.state.page_preview){
  318. this.animationPrice(false);
  319. }else if(that.state.page_price){
  320. this.animationPreview(false);
  321. this.animationStages(false);
  322. }else if(that.state.page_stages){
  323. this.animationPrice(false);
  324. this.animationRelease(false);
  325. }else if(that.state.page_release){
  326. this.animationStages(false);
  327. this.animationFinal(false);
  328. }else if(that.state.page_final){
  329. this.animationRelease(false);
  330. }
  331.  
  332. d3.select('.test_path')
  333. .transition().duration(1500).ease(d3.easeLinear)
  334. .style('transform', 'scale(0)')
  335. .style('transform-origin', '27% 27%')
  336. .on('end', function(){
  337. if(that.state.page_preview){
  338. that.appendVideo(animationData.videos[0]);
  339. }else if(that.state.page_price){
  340. that.appendVideo(animationData.videos[1]);
  341. }else if(that.state.page_stages){
  342. that.appendVideo(animationData.videos[2]);
  343. }else if(that.state.page_release){
  344. that.appendVideo(animationData.videos[3]);
  345. }
  346.  
  347. that.animationOpen(paths, duration);
  348. })
  349. }
  350.  
  351. appendVideo(video){
  352. let video_node = d3.select('.animation_video').node();
  353. if(!video_node.paused){
  354. video_node.pause();
  355. }
  356. d3.select('.animation_video').node().remove();
  357. d3.select('.d_our_services_main_animation_box')
  358. .append('video')
  359. .classed('animation_video', true)
  360. .attr('width', '1920')
  361. .attr('height', '1080')
  362. .attr('autoplay', 'autoplay')
  363. .attr('muted', 'muted')
  364. .attr('preload', 'auto')
  365. .attr('loop', 'loop')
  366. .append('source')
  367. .classed('anim_source', true)
  368. .attr('src', video)
  369. .attr('type', 'video/mp4');
  370. }
  371.  
  372.  
  373. setAnimationPaths(paths, duration){
  374. d3.select('.test_path').append('animate')
  375. .attr('repeatCount', 'indefinite')
  376. .attr('fill', 'freeze')
  377. .attr('attributeName', 'd')
  378. .attr('dur', `${duration}s`)
  379. .attr('values', paths)
  380. .on('end', function(){
  381. if (d3.select('.test_path').select('animate').node())
  382. d3.select('.test_path').select('animate').node().remove();
  383. })
  384. }
  385.  
  386. changeVideo(step){
  387. this.setState({isAnimate: true}, ()=>{
  388. this.animationClose(step, 4);
  389. if(!this.state.priceList){
  390. this.priceListHide()
  391. }
  392. });
  393. }
  394.  
  395.  
  396. goBack = () => {
  397. this.props.history.goBack();
  398. };
  399.  
  400. changePriceList = () => {
  401. if(!this.state.priceList_anim){
  402. let priceList = this.state.priceList;
  403. this.setState({ priceList: !priceList,
  404. priceList_anim: true});
  405. this.state.priceList ? this.priceListShow() : this.priceListHide();
  406. }
  407. };
  408.  
  409. toPrice = () => {
  410. this.setPage('price');
  411. };
  412.  
  413. priceToPrev = () => {
  414.  
  415. this.setPage('preview');
  416. };
  417.  
  418. toDevStep = () => {
  419. if (this.state.selected_service) {
  420. this.setPage('stages');
  421. } else {
  422. if(this.state.priceList){
  423. d3.select('.d_price_button').classed('d_price_button_light_animation', true);
  424. }
  425. }
  426. };
  427.  
  428. devStepToPrev = () => {
  429. this.setPage('price');
  430. };
  431.  
  432. toLastStep = () => {
  433. this.setPage('final');
  434. };
  435.  
  436. releaseStepToPrev = () => {
  437. this.setPage('stages');
  438. };
  439.  
  440. goToRelease = () => {
  441. this.setPage('release');
  442. };
  443.  
  444. toggleMobilePriceList = () => {
  445. let mobPriceList = this.state.mob_PriceList;
  446. this.setState({ mob_PriceList: !mobPriceList });
  447. !mobPriceList ? this.showMobilePriceList() : this.hideMobilePriceList();
  448. };
  449.  
  450. showDigitalList = () => {
  451. this.setState({
  452. mob_digital_list: true,
  453. mob_branding_list: false
  454. });
  455. };
  456.  
  457. showBrandingList = () => {
  458. this.setState({
  459. mob_digital_list: false,
  460. mob_branding_list: true
  461. });
  462. };
  463.  
  464. toDetails = () => {
  465. this.setState({
  466. mob_PriceList: false,
  467. details: true
  468. });
  469. };
  470.  
  471. addAnimation(elem, animName) {
  472. d3.selectAll(elem).style("animation-name", animName);
  473. }
  474.  
  475. changeDisplay(elem, display) {
  476. if(this.state.isFirstOpen){
  477. this.setState({isFirstOpen: false});
  478. d3.select(elem).style("display", display);
  479. }else{
  480. d3.timeout(function(){
  481. d3.select(elem).style("display", display);
  482. }, 2000);
  483. }
  484. }
  485.  
  486. animatePrice() {
  487. // this.addShadows();
  488. // setTimeout(this.closeShadows, 4000);
  489. }
  490.  
  491.  
  492. showPreview() {
  493. this.changeDisplay(".d_our_services_preview_cont", "block");
  494. }
  495.  
  496. priceHide() {
  497. this.changeDisplay(".d_our_services_price_cont", "none");
  498. }
  499.  
  500. priceShow() {
  501. // this.animatePrice();
  502. this.changeDisplay(".d_our_services_price_cont", "block");
  503. }
  504.  
  505. previewHide() {
  506. this.changeDisplay(".d_our_services_preview_cont", "none");
  507. }
  508.  
  509. priceListShow() {
  510. this.changePriceButtonSize(false);
  511. this.changeTextPriceButton(false);
  512. this.changePlusPriceButton(false, -10);
  513. this.changeBottomPriceTextVisibility(false);
  514. this.showHidePriceList(3, 36, 32, 1, 1000, true);
  515. d3.select('.d_price_button').classed('d_price_button_light_animation', false);
  516. this.setState({priceList: false});
  517. }
  518.  
  519. priceListHide() {
  520. this.changePriceButtonSize(true);
  521. this.changeTextPriceButton(true);
  522. this.changePlusPriceButton(true, 0);
  523. this.changeBottomPriceTextVisibility(true);
  524. this.showHidePriceList(0, 0, 0, 0, 100, false);
  525. this.setState({priceList: true});
  526. }
  527.  
  528. changePriceButtonSize(isShow){
  529. d3.select('.d_price_button')
  530. .transition().duration(500).ease(d3.easeLinear)
  531. .style('width', `${isShow ? 25 : 2.3}vw`)
  532. }
  533.  
  534. changeTextPriceButton(isShow){
  535. d3.select('.d_price_button p')
  536. .transition().duration(300).ease(d3.easeLinear)
  537. .on('start', function(){
  538. d3.select(this)
  539. .style('display', 'block');
  540. })
  541. .style('max-width', `${isShow ? 25 : 0}vw`)
  542. .style('opacity', isShow ? 1 : 0)
  543. .on('end', function(){
  544. if(!isShow){
  545. d3.select(this)
  546. .style('display', 'none');
  547. }
  548. });
  549. }
  550.  
  551. changePlusPriceButton(isShow, left){
  552. d3.select('.d_price_button_plus')
  553. .transition().duration(500).ease(d3.easeLinear)
  554. .on('start', function(){
  555. d3.select(this)
  556. .style('display', 'block');
  557. })
  558. .style('left', `${left}vw`)
  559. .style('opacity', `${isShow ? 1 : 0}`)
  560. .on('end', function(){
  561. if(!isShow){
  562. d3.select(this)
  563. .style('display', 'none');
  564. }
  565. });
  566. if(isShow){
  567. d3.select('.d_price_button_minus')
  568. .transition().duration(200).ease(d3.easeLinear)
  569. .style('opacity', 0);
  570. }
  571. d3.select('.d_price_button')
  572. .transition().duration(500).ease(d3.easeLinear)
  573. .style('width', `${isShow ? 25 : 2.3}vw`)
  574. .on('end', function(){
  575. if(!isShow){
  576. d3.select('.d_price_button_minus')
  577. .transition().duration(500).ease(d3.easeLinear)
  578. .style('opacity', 1)
  579. }
  580. });
  581. }
  582.  
  583. changeBottomPriceTextVisibility(isShow){
  584. d3.select('.d_price_bottom_header')
  585. .transition().duration(300).ease(d3.easeLinear)
  586. .on('start', function(){
  587. d3.select(this)
  588. .style('display', 'block');
  589. })
  590. .style('line-height', `${isShow ? 3 : 0}vw`)
  591. .style('margin-top', `${isShow ? 1 : 0}em`)
  592. .style('margin-top', `${isShow ? 1 : 0}em`)
  593. .style('opacity', isShow ? 1 : 0)
  594. .on('end', function(){
  595. if(!isShow){
  596. d3.select(this)
  597. .style('display', 'none');
  598. }
  599. });
  600. }
  601.  
  602. showHidePriceList(border_width, width, height, opacity, time, display) {
  603.  
  604. let that = this;
  605.  
  606. if(!this.state.priceList_anim){
  607.  
  608. if(display) d3.select('.d_our_services_price_list').style("display", 'flex');
  609.  
  610. d3.select('.d_our_services_price_triangle')
  611. .transition().duration(500).ease(d3.easeLinear)
  612. .style('border-right-width', `${border_width}vw`)
  613. .style('border-left-width', `${border_width}vw`)
  614. .style('border-bottom-width', '0vw')
  615. .style('border-top-width', `${border_width}vw`);
  616.  
  617. d3.timeout(function(){
  618. d3.select('.d_our_services_price_list')
  619. .transition().duration(500).ease(d3.easeLinear)
  620. .style('height', `${height}vw`)
  621. .style('width', `${width}vw`)
  622. .on('end', function(){
  623. d3.selectAll('.d_our_service_price_name')
  624. .transition().duration(500).ease(d3.easeLinear)
  625. .style('opacity', opacity)
  626. .on('end', function(){
  627. if(!display) {d3.select('.d_our_services_price_list').style("display", 'none')};
  628. that.setState({priceList_anim: false});
  629. });
  630. });
  631. }, 100);
  632. }
  633. }
  634.  
  635. showDevStep = () => {
  636. this.changeDisplay(".d_our_services_dev_step", "block");
  637. };
  638.  
  639. hideDevStep = () => {
  640. this.changeDisplay(".d_our_services_dev_step", "none");
  641. };
  642.  
  643. releseStepShow = () => {
  644. // this.animatePrice();
  645. this.changeDisplay(".d_our_services_release_step", "block");
  646. };
  647.  
  648. releaseStepHide = () => {
  649. this.changeDisplay(".d_our_services_release_step", "none");
  650. };
  651.  
  652. lastStepShow = () => {
  653. this.changeDisplay(".d_our_services_last_step", "block");
  654. };
  655.  
  656. lastStepHide = () => {
  657. this.changeDisplay(".d_our_services_last_step", "none");
  658. };
  659.  
  660. showMobilePriceList = () => {
  661. this.changeDisplay(".m_our_services_button span", "none");
  662. this.changeDisplay(".m_our_services_cost_after_head", "none");
  663. d3.select(".m_our_services_button").classed("active", true);
  664. this.changeDisplay(".m_our_services_price_list", "block");
  665. if (this.state.details) {
  666. d3.select(".m_our_services_another_services").classed("disabled", true);
  667. d3.select(".m_our_services_button").classed("disabled", true);
  668. }
  669. };
  670.  
  671. hideMobilePriceList = () => {
  672. if (!this.state.details) {
  673. setTimeout(() => {
  674. this.changeDisplay(".m_our_services_button span", "block");
  675. }, 300);
  676. }
  677. this.changeDisplay(".m_our_services_cost_after_head", "block");
  678. d3.select(".m_our_services_button").classed("active", false);
  679. this.changeDisplay(".m_our_services_price_list", "none");
  680. if (this.state.details) {
  681. setTimeout(() => {
  682. d3.select(".m_our_services_another_services").classed(
  683. "disabled",
  684. false
  685. );
  686. }, 300);
  687. this.changeDisplay(".m_our_services_button span:first-of-type", "none");
  688. d3.select(".m_our_services_button").classed("disabled", false);
  689. }
  690. };
  691.  
  692. showMobileBrandingList = () => {
  693. d3.select(".m_our_services_branding_button").classed("active", true);
  694. this.changeDisplay(".m_our_services_branding_list", "block");
  695. };
  696.  
  697. hideMobileBrandingList = () => {
  698. d3.select(".m_our_services_branding_button").classed("active", false);
  699. this.changeDisplay(".m_our_services_branding_list", "none");
  700. };
  701.  
  702. showMobileDigitalList = () => {
  703. d3.select(".m_our_services_digital_button").classed("active", true);
  704. this.changeDisplay(".m_our_services_digital_list", "block");
  705. };
  706.  
  707. hideMobileDigitalList = () => {
  708. d3.select(".m_our_services_digital_button").classed("active", false);
  709. this.changeDisplay(".m_our_services_digital_list", "none");
  710. };
  711.  
  712. scrollEvent = () => {
  713. let scrollElem = d3.select(".m_our_services");
  714. let scrollTop = scrollElem.node().scrollTop;
  715. let selectElem = parseInt(scrollTop / 550 + 1);
  716. this.changeScrollElem(selectElem);
  717. };
  718.  
  719. changeScrollElem = selectElem => {
  720. let activeElem = d3
  721. .selectAll(".m_our_services_anchors div")
  722. .filter(".active");
  723. activeElem.classed("active", false);
  724. d3.select(`.m_our_services_anchors div:nth-child(${selectElem})`).classed(
  725. "active",
  726. true
  727. );
  728. };
  729.  
  730. scrollTo = (to = 0, duration = 1000) => {
  731. const start = document.querySelector(".m_our_services").scrollTop;
  732. const change = to - start;
  733. const increment = 20;
  734. let currentTime = 0;
  735.  
  736. const animateScroll = () => {
  737. currentTime += increment;
  738.  
  739. const val = this.easeInOutQuad(currentTime, start, change, duration);
  740.  
  741. document.querySelector(".m_our_services").scrollTop = val;
  742.  
  743. if (currentTime < duration) {
  744. setTimeout(animateScroll, increment);
  745. }
  746. };
  747.  
  748. animateScroll();
  749. };
  750.  
  751. easeInOutQuad = (t, b, c, d) => {
  752. t /= d / 2;
  753. if (t < 1) return (c / 2) * t * t + b;
  754. t--;
  755. return (-c / 2) * (t * (t - 2) - 1) + b;
  756. };
  757.  
  758. showDetails = () => {
  759. this.changeDisplay(".m_our_services_details", "block");
  760. this.changeDisplay(".m_our_services_list_services", "none");
  761. this.changeDisplay(".m_our_services_another_services", "inline");
  762. d3.select(".m_our_services_button").style("width", "60vw");
  763. };
  764.  
  765.  
  766. getServiceById = id => {
  767. for(let service of this.state.services) {
  768. if(service._id === id) {
  769. return service;
  770. }
  771. }
  772. return null;
  773. }
  774.  
  775. getServiceByTitle = title => {
  776. for(let service of this.state.services) {
  777. if(service.title === title) {
  778. return service;
  779. }
  780. }
  781. return null;
  782. }
  783.  
  784. getSubServicesOf = headService => {
  785. if (!headService || !headService.child || headService.child === [])
  786. return null;
  787. let result = [];
  788. for (let subServiceId of headService.child) {
  789. let tempSubService = this.getServiceById(subServiceId);
  790. if (
  791. tempSubService &&
  792. tempSubService.executors &&
  793. tempSubService.executors.length > 0
  794. // tempSubService.price
  795. ) {
  796. result.push(tempSubService);
  797. let tmpChildren = this.getSubServicesOf(tempSubService);
  798. if (tmpChildren) {
  799. for (let child of tmpChildren)
  800. if (child && child.executors && child.executors.length > 0)
  801. result.push(child);
  802. }
  803. }
  804. }
  805. return result;
  806. }
  807.  
  808. handleServiceClick = event => {
  809. let serviceTitle = event.target.textContent;
  810. this.setState({
  811. selected_service: this.getServiceByTitle(serviceTitle)
  812. }, () => this.toDevStep());
  813. }
  814.  
  815. handleMobileServiceClick = event => {
  816. let serviceTitle = event.target.textContent;
  817. this.setState({
  818. selected_service: this.getServiceByTitle(serviceTitle)
  819. });
  820. this.toDetails();
  821. }
  822.  
  823. render() {
  824. let that = this;
  825. let {
  826. page_preview,
  827. page_price,
  828. priceList,
  829. page_stages,
  830. page_release,
  831. page_final,
  832. mob_digital_list,
  833. mob_branding_list,
  834. mob_PriceList,
  835. details,
  836. priceList_anim,
  837. isAnimate
  838. } = this.state;
  839.  
  840. if(!isAnimate){
  841. page_preview
  842. ? this.showPreview()
  843. : this.previewHide();
  844. page_price
  845. ? this.priceShow()
  846. : this.priceHide();
  847. page_stages
  848. ? this.showDevStep()
  849. : this.hideDevStep();
  850. page_release
  851. ? this.releseStepShow()
  852. : this.releaseStepHide();
  853. page_final
  854. ? this.lastStepShow()
  855. : this.lastStepHide();
  856. }
  857.  
  858. mob_branding_list
  859. ? this.showMobileBrandingList()
  860. : this.hideMobileBrandingList();
  861. mob_digital_list
  862. ? this.showMobileDigitalList()
  863. : this.hideMobileDigitalList();
  864. mob_PriceList
  865. ? this.showMobilePriceList()
  866. : this.hideMobilePriceList();
  867. if (details) this.showDetails();
  868.  
  869. window.onresize = function() {
  870. let set_visibility = Object.assign(
  871. {},
  872. { visibility: that.state.visibility }
  873. );
  874. that.setState({ visibility: window.innerWidth >= 768 ? true : false });
  875. if (set_visibility.visibility != that.state.visibility) {
  876. that.render();
  877. }
  878. };
  879.  
  880. return (
  881. <div>
  882. {this.state.visibility ? (
  883. <div className="d_our_services">
  884. <Logo />
  885. <div className='d_our_services_main_animation_box'>
  886. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
  887. <defs>
  888. <mask id="mask" x="0" y="0" width="1920" height="1080" >
  889. <rect width="100%" height="100%"/>
  890. <g transform="translate(520 220)">
  891. <path className='test_path' fill="red">
  892. </path>
  893. </g>
  894. </mask>
  895. </defs>
  896. <rect x="0" y="0" width="1920" height="1080"/>
  897. </svg>
  898. <video className='animation_video' width="1920" height="1080" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
  899. <source className="anim_source" src={animationData.videos[0]} type="video/mp4" />
  900. {/* <source className="anim_source" src={Paths.videos[0]} type="video/webm" /> */}
  901. </video>
  902. </div>
  903. <div className="d_our_services_preview_cont">
  904. <h1>Як це працює?</h1>
  905. <div className="our_services_top_container">
  906. <div className="d_first_container">
  907. <div className="our_services_first_text">
  908. <span>Реалізація всіх робіт у</span>
  909. <strong>3</strong>
  910. <span>кроки.</span>
  911. </div>
  912. <div className="our_services_second_text">
  913. <p>
  914. Ми не будемо розповідати Вам
  915. <br /> про якість роботи, суворе дотримання дедлайнів чи{" "}
  916. <br /> виконання всіх вимог замовника.
  917. <br />
  918. У нашому розумінні це зовсім не
  919. <br /> переваги, це – норма (аксіома) <br />
  920. надання послуги.
  921. </p>
  922. </div>
  923. <div className="our_services_third_text">
  924. <p>
  925. Виконання Вашого замовлення <br />
  926. відбувається за чіткою <br />
  927. відпрацьованою схемою, без збоїв <br />
  928. та затримок.
  929. </p>
  930. </div>
  931. </div>
  932. <div className="d_second_container">
  933. <h4>Нашими беззаперечними</h4>
  934. <h5>плюсами є:</h5>
  935. <ul>
  936. <li>
  937. <div />
  938. Прозорість. Ми максимально спрощуємо презентацію роботи,
  939. щоб клієнт міг все зрозуміти і впевнитись у її виконанні.
  940. </li>
  941. <li>
  942. <div />
  943. Широкий спектр супутніх послуг для максимальної зручності
  944. процесу розвитку бізнесу (сайту).
  945. </li>
  946. <li>
  947. <div />
  948. Контроль виконання роботи. Ми звітуємо за результатами
  949. кожного етапу розробки щоб у Вас не виникло жодних
  950. сумнівів.
  951. </li>
  952. <li>
  953. <div />
  954. Підтримка постійного зв’язку із замовником для оптимізації
  955. виробничого процесу.
  956. </li>
  957. </ul>
  958. </div>
  959. </div>
  960. <div className="d_our_services_bottom_block">
  961. <h2>Як ми працюємо та скільки це коштує?</h2>
  962. <button className='d_our_services_change_page_button' onClick={this.toPrice}>Ознайомитись</button>
  963. <p>Відео про нас</p>
  964. <img src={Arrow} />
  965. </div>
  966. </div>
  967. <div className="d_our_services_price_cont">
  968. <h1>Установчий етап</h1>
  969. {/* <div className="d_our_services_price_list">
  970. <div className="d_our_services_price_triangle" />
  971. <div className="d_our_services_price_digital">
  972. <h3>Digital studio</h3>
  973. <div className="d_our_services_price_digital_list">
  974. {
  975. this.state &&
  976. this.state.services &&
  977. this.getSubServicesOf(this.state.services[1])
  978. .map(service => <p onClick={this.handleServiceClick}>{service.title}</p>)
  979. }
  980. </div>
  981. </div>
  982. <div className="d_our_services_price_branding">
  983. <h3>Branding studio</h3>
  984. <div className="d_our_services_price_branding_list">
  985. {
  986. this.state &&
  987. this.state.services &&
  988. this.getSubServicesOf(this.state.services[0])
  989. .map(service => <p onClick={this.handleServiceClick}>{service.title}</p>)
  990. }
  991. </div>
  992. </div>
  993. </div> */}
  994. <div className="left_count_window">
  995. <div className="left_count_window_pseudo_before" />
  996. <div className="left_count_window_pseudo_after" />
  997. <div className="count_parrent">
  998. <span>0</span>
  999. <span>1</span>
  1000. <span>2</span>
  1001. <span>3</span>
  1002. <span>4</span>
  1003. <span>5</span>
  1004. <span>6</span>
  1005. <span>7</span>
  1006. <span>8</span>
  1007. <span>9</span>
  1008. <span>0</span>
  1009. <span>1</span>
  1010. </div>
  1011. </div>
  1012. <div className="right_count_window">
  1013. <div className="left_count_window_pseudo_before" />
  1014. <div className="left_count_window_pseudo_after" />
  1015. <div className="right_count_parrent">
  1016. <span>0</span>
  1017. <span>1</span>
  1018. <span>2</span>
  1019. <span>3</span>
  1020. <span>4</span>
  1021. <span>5</span>
  1022. <span>6</span>
  1023. <span>7</span>
  1024. <span>8</span>
  1025. <span>9</span>
  1026. <span>0</span>
  1027. <span>1</span>
  1028. <span>2</span>
  1029. </div>
  1030. </div>
  1031. <div className="bottom_count_window">
  1032. <div className="left_count_window_pseudo_before" />
  1033. <div className="left_count_window_pseudo_after" />
  1034. <div className="bottom_count_parrent">
  1035. <span>0</span>
  1036. <span>1</span>
  1037. <span>2</span>
  1038. <span>3</span>
  1039. <span>4</span>
  1040. <span>5</span>
  1041. <span>6</span>
  1042. <span>7</span>
  1043. <span>8</span>
  1044. <span>9</span>
  1045. <span>0</span>
  1046. <span>1</span>
  1047. <span>2</span>
  1048. <span>3</span>
  1049. </div>
  1050. </div>
  1051. <div className="left_count_text">
  1052. <strong>Обговорення</strong>
  1053.  
  1054. <span>
  1055. всіх вимог, планів, ідей та пропозицій для максимального
  1056. взаєморозуміння.
  1057. </span>
  1058. </div>
  1059. <div className="right_count_text">
  1060. <strong>Формування прайсу </strong>
  1061. <span>на основі погодження позицій обох сторін.</span>
  1062. </div>
  1063. <div className="bottom_count_text">
  1064. <strong>Підписання договору -</strong>
  1065. <br />
  1066. <span>старт плідної співпраці.</span>
  1067. </div>
  1068. <div className="d_price_bottom_container">
  1069. <div className="d_our_services_price_list">
  1070. <div className="d_our_services_price_digital">
  1071. <h3>Digital studio</h3>
  1072. <div className="d_our_services_price_digital_list">
  1073. {
  1074. this.state &&
  1075. this.state.services &&
  1076. this.getSubServicesOf(this.state.services[1])
  1077. .map(service => <p className='d_our_service_price_name' onClick={this.handleServiceClick}>{service.title}</p>)
  1078. }
  1079. </div>
  1080. </div>
  1081. <div className="d_our_services_price_branding">
  1082. <h3>Branding studio</h3>
  1083. <div className="d_our_services_price_branding_list">
  1084. {
  1085. this.state &&
  1086. this.state.services &&
  1087. this.getSubServicesOf(this.state.services[0])
  1088. .map(service => <p className='d_our_service_price_name' onClick={this.handleServiceClick}>{service.title}</p>)
  1089. }
  1090. </div>
  1091. </div>
  1092. </div>
  1093. <div className="d_our_services_price_triangle" />
  1094. <h3 className="d_price_bottom_header">
  1095. Оберіть послугу, яка вас цікавить.
  1096. </h3>
  1097. <button
  1098. className="d_price_button"
  1099. onClick={this.changePriceList}
  1100. >
  1101. <img className='d_price_button_plus' src={Plus} />
  1102. <p>Перелік послуг</p>
  1103. <img className='d_price_button_minus' src={Minus} />
  1104. </button>
  1105. <div className="d_price_nav_button_container">
  1106. <button
  1107. className="d_our_services_price_to_prev d_our_services_change_page_button"
  1108. onClick={this.priceToPrev}
  1109. >
  1110. {" "}
  1111. {"<<Повернутись"}
  1112. </button>
  1113. <button
  1114. className="d_our_services_price_to_next d_our_services_change_page_button"
  1115. onClick={this.toDevStep}
  1116. >
  1117. {" "}
  1118. {"Наступний крок>>"}{" "}
  1119. </button>
  1120. </div>
  1121. </div>
  1122. </div>
  1123. <div className="d_our_services_dev_step">
  1124. <h1>Этап розробки</h1>
  1125. <div className="d_our_services_dev_step_left_count_window">
  1126. <div className="left_count_window_pseudo_before" />
  1127. <div className="left_count_window_pseudo_after" />
  1128. <span>0</span>
  1129. <span>1</span>
  1130. <span>2</span>
  1131. <span>3</span>
  1132. <span>4</span>
  1133. <span>5</span>
  1134. <span>6</span>
  1135. <span>7</span>
  1136. <span>8</span>
  1137. <span>9</span>
  1138. <span>0</span>
  1139. <span>1</span>
  1140. </div>
  1141. <div className="d_our_services_dev_step_left_text">
  1142. <strong>Узгодження фінального ТЗ</strong>
  1143. <br />
  1144. <span>окреслення Вашого майбутнього проекту.</span>
  1145. </div>
  1146. <div className="d_our_services_dev_step_right_count_window">
  1147. <div className="left_count_window_pseudo_before" />
  1148. <div className="left_count_window_pseudo_after" />
  1149. <span>0</span>
  1150. <span>1</span>
  1151. <span>2</span>
  1152. <span>3</span>
  1153. <span>4</span>
  1154. <span>5</span>
  1155. <span>6</span>
  1156. <span>7</span>
  1157. <span>8</span>
  1158. <span>9</span>
  1159. <span>0</span>
  1160. <span>1</span>
  1161. <span>2</span>
  1162. </div>
  1163. <div className="d_our_services_dev_step_bottom_count_window">
  1164. <div className="left_count_window_pseudo_before" />
  1165. <div className="left_count_window_pseudo_after" />
  1166. <span>0</span>
  1167. <span>1</span>
  1168. <span>2</span>
  1169. <span>3</span>
  1170. <span>4</span>
  1171. <span>5</span>
  1172. <span>6</span>
  1173. <span>7</span>
  1174. <span>8</span>
  1175. <span>9</span>
  1176. <span>0</span>
  1177. <span>1</span>
  1178. <span>2</span>
  1179. <span>3</span>
  1180. </div>
  1181. <div className="d_our_services_dev_step_bottom_text">
  1182. <strong>30% передплати</strong>
  1183. <br />
  1184. <span>куди ж без цього.</span>
  1185. </div>
  1186. <div className="d_our_services_dev_step_right_text">
  1187. <strong>
  1188. Безпосередній <br /> процес розробки
  1189. </strong>
  1190. <br />
  1191. <span>
  1192. який передбачає <br /> реалізацію всіх Ваших побажань...
  1193. </span>
  1194. </div>
  1195. <svg
  1196. className="d_our_services_dev_step_right_svg"
  1197. viewBox="0 0 180 180"
  1198. >
  1199. <circle fill="white" cx="8" cy="2" r="1.3" />
  1200. <line
  1201. x1="8"
  1202. y1="2"
  1203. x2="11.5"
  1204. y2="13"
  1205. stroke="white"
  1206. strokeWidth="0.2"
  1207. />
  1208. <line
  1209. x1="11.5"
  1210. y1="13"
  1211. x2="43"
  1212. y2="13"
  1213. stroke="white"
  1214. strokeWidth="0.2"
  1215. />
  1216. </svg>
  1217. <ul className="d_our_services_dev_step_list">
  1218. <li>
  1219. <div />Допускається внесення правок 3 рази.
  1220. </li>
  1221. <li>
  1222. <div />Повний контроль за процесом розробки через наш
  1223. клієнтський додаток.
  1224. </li>
  1225. </ul>
  1226. <div className="d_our_services_dev_step_bottom_nav_cont">
  1227. <h3>Що відбувається в фіналі?</h3>
  1228. <button className='d_our_services_change_page_button' onClick={this.goToRelease}>Останній крок</button>
  1229. <div className="d_our_services_dev_step_bottom_buttons">
  1230. <button className='d_our_services_change_page_button' onClick={this.devStepToPrev}>
  1231. {"<<Повернутись"}
  1232. </button>
  1233. <button className='d_our_services_change_page_button' onClick={this.goToRelease}>
  1234. {"Наступний крок>>"}
  1235. </button>
  1236. </div>
  1237. </div>
  1238. </div>
  1239. <div className="d_our_services_release_step">
  1240. <h1 className="d_our_services_release_step_head">
  1241. Реліз та обслуговування
  1242. </h1>
  1243. <div className="d_our_services_release_step_left_window">
  1244. <div className="left_count_window_pseudo_before" />
  1245. <div className="left_count_window_pseudo_after" />
  1246. <span>0</span>
  1247. <span>1</span>
  1248. <span>2</span>
  1249. <span>3</span>
  1250. <span>4</span>
  1251. <span>5</span>
  1252. <span>6</span>
  1253. <span>7</span>
  1254. <span>8</span>
  1255. <span>9</span>
  1256. <span>0</span>
  1257. <span>1</span>
  1258. </div>
  1259. <div className="d_our_services_release_step_left_text">
  1260. Ви отримуєте <br />
  1261. готовий продукт
  1262. </div>
  1263. <svg
  1264. className="d_our_services_release_step_left_svg"
  1265. viewBox="0 0 180 180"
  1266. >
  1267. <circle fill="white" cx="13" cy="2" r="1.3" />
  1268. <line
  1269. x1="13"
  1270. y1="2"
  1271. x2="16.5"
  1272. y2="13"
  1273. stroke="white"
  1274. strokeWidth="0.2"
  1275. />
  1276. <line
  1277. x1="16.5"
  1278. y1="13"
  1279. x2="52"
  1280. y2="13"
  1281. stroke="white"
  1282. strokeWidth="0.2"
  1283. />
  1284. </svg>
  1285. <div className="d_our_services_release_step_bottom_text">
  1286. <div />Детальну <i>інструкцію</i> його використання. Та повний{" "}
  1287. <i>контроль</i> за всіма його функціями.
  1288. </div>
  1289. <div className="d_our_services_release_step_right_window">
  1290. <div className="left_count_window_pseudo_before" />
  1291. <div className="left_count_window_pseudo_after" />
  1292. <span>0</span>
  1293. <span>1</span>
  1294. <span>2</span>
  1295. <span>3</span>
  1296. <span>4</span>
  1297. <span>5</span>
  1298. <span>6</span>
  1299. <span>7</span>
  1300. <span>8</span>
  1301. <span>9</span>
  1302. <span>0</span>
  1303. <span>1</span>
  1304. <span>2</span>
  1305. </div>
  1306. <div className="d_our_services_release_step_right_text">
  1307. <strong>Підтримка</strong>
  1308. <p>
  1309. Ми дбаємо про Ваш проект і після його реалізації - через
  1310. сервіс
  1311. </p>
  1312. <i>технічного обслуговування.</i>
  1313. </div>
  1314. <div className="d_our_services_dev_step_bottom_nav_cont">
  1315. <h3>Скільки коштуватиме мій проект?</h3>
  1316. <button className='d_our_services_change_page_button' onClick={this.toLastStep}>Дізнатися вартість!</button>
  1317. <div className="d_our_services_dev_step_bottom_buttons">
  1318. <button className='d_our_services_change_page_button' onClick={this.releaseStepToPrev}>
  1319. {"<<Повернутись"}
  1320. </button>
  1321. <button className='d_our_services_change_page_button' onClick={this.toLastStep}>
  1322. {"Наступний крок>>"}
  1323. </button>
  1324. </div>
  1325. </div>
  1326. </div>
  1327. <div className="d_our_services_last_step">
  1328. <div className="d_our_services_last_step_header">
  1329. <p>Інформація по виконанню</p>
  1330. <p>
  1331. {
  1332. (this.state && this.state.selected_service) ? `"${this.state.selected_service.title}"` : ''
  1333. }
  1334. </p>
  1335. </div>
  1336. <div className="d_our_services_last_step_cont">
  1337. <div className="d_our_services_last_step_left_block">
  1338. <p>Орієнтовна вартість від:</p>
  1339. <h5>
  1340. {
  1341. (
  1342. this.state &&
  1343. this.state.selected_service &&
  1344. this.state.selected_service.price
  1345. ) ? this.state.selected_service.price + '$' : '??? $'
  1346. }
  1347. </h5>
  1348. {/* <p>Приблизний час виконання:</p>
  1349. <p>
  1350. <i>24 </i>дні.
  1351. </p> */}
  1352. </div>
  1353. <div className="d_our_services_last_step_svg_main">
  1354. <svg viewBox="0 0 190 190">
  1355. <circle fill="#FE5D00" cx="90" cy="70" r="24" />
  1356. <circle
  1357. fill="none"
  1358. cx="90"
  1359. cy="70"
  1360. r="50"
  1361. stroke="#3A3A3A"
  1362. strokeWidth="1"
  1363. />
  1364. <g className='d_equinox_services_planet'>
  1365. <circle fill="#FE5D00" cx="62" cy="29" r="6" />
  1366. <circle
  1367. fill="none"
  1368. cx="62"
  1369. cy="29"
  1370. r="13"
  1371. stroke="#3A3A3A"
  1372. strokeWidth="1"
  1373. />
  1374. <circle className='d_equinox_services_satellite' fill="#909090" cx="50" cy="24" r="3" />
  1375. <polygon className='d_equinox_services_button_play' points="65,29 60,26 60,32" fill="#3A3A3A" />
  1376. </g>
  1377. <a href="mailto:info@equinox.company">
  1378. <text
  1379. x="90"
  1380. y="57"
  1381. className="d_our_services_last_step_text_svg"
  1382. fill="white"
  1383. >
  1384. info@equinox.company
  1385. </text>
  1386. </a>
  1387. <a href="tel:+380961999932">
  1388. <text
  1389. x="90"
  1390. y="72"
  1391. className="d_our_services_last_step_text_svg"
  1392. fill="white"
  1393. >
  1394. +380961999932
  1395. </text>
  1396. </a>
  1397. <a href="/contacts">
  1398. <text
  1399. x="90"
  1400. y="87"
  1401. className="d_our_services_last_step_text_svg"
  1402. fill="white"
  1403. >
  1404. Вул. Воздвиженська 36, Київ, 04071
  1405. </text>
  1406. </a>
  1407. </svg>
  1408. </div>
  1409. <div className="d_our_services_last_step_right_block">
  1410. <h5>Над проектом будуть працювати:</h5>
  1411. {/* <div>
  1412. <span>7 </span>
  1413. <p>дизайнерів</p>
  1414. </div>
  1415. <div>
  1416. <span>5 </span>
  1417. <p>програмістів</p>
  1418. </div>
  1419. <div>
  1420. <span>2 </span>
  1421. <p>Приколіста</p>
  1422. </div>
  1423. <div>
  1424. <span>9 </span>
  1425. <p>СЕО - спеціалісти</p>
  1426. </div> */}
  1427. {
  1428. this.state &&
  1429. this.state.selected_service &&
  1430. this.state.selected_service.executors
  1431. .map(executor => {
  1432. return (
  1433. <div>
  1434. <span>{executor.number}</span>
  1435. <p>{executor.position}</p>
  1436. </div>
  1437. );
  1438. })
  1439. }
  1440. </div>
  1441. </div>
  1442. <div className="d_our_services_last_step_bottom_nav">
  1443. <button>
  1444. <Link to="start-project">Розпочати проект</Link>
  1445. </button>
  1446. <p>Якщо вам цікава більш детальна інформація щодо</p>
  1447. <p>
  1448. Вашого проекту та точніший прорахунок його вартості,
  1449. скористайтеся нашою формою
  1450. </p>
  1451. <p>зворотнього зв'язку.</p>
  1452. <button className='d_our_services_change_page_button' onClick={this.goToRelease}>
  1453. {"<< Повернутись"}
  1454. </button>
  1455. </div>
  1456. </div>
  1457.  
  1458. <Socials />
  1459. </div>
  1460. ) : (
  1461. <React.Fragment>
  1462. <MobileNav />
  1463. <div className="m_our_services">
  1464. <div className="m_our_services_before" />
  1465. <div className="m_our_services_after" />
  1466. <div className="m_our_services_work_step">
  1467. <h1 className="m_our_services__header head_text_theme">
  1468. Як це працює?
  1469. </h1>
  1470. <p className="m_our_services_head_text m_our_services_small_grey_text">
  1471. Приблизну вартість та час виконання саме Вашого проекту можна
  1472. дізнатися саме тут!
  1473. </p>
  1474. <strong className="m_our_services_head_strong m_our_services_strong_white_text">
  1475. Реалізація всіх робіт у
  1476. </strong>
  1477. <div className="m_our_services_orange_number">3</div>
  1478. <strong className="m_our_services_head_strong m_our_services_strong_white_text">
  1479. кроки.
  1480. </strong>
  1481. <div className="m_our_services_work_bottom_text m_our_services_medium_white_text">
  1482. Виконання Вашого замовлення
  1483. <br />
  1484. відбувається за чіткою відпрацьованою
  1485. <br />
  1486. схемою, без збоїв та затримок.
  1487. </div>
  1488. <div className="m_our_services_constituent_step">
  1489. <div className="m_our_services_first_count m_our_services_big_number">
  1490. 1
  1491. </div>
  1492. <div className="m_our_services_constituent_text">
  1493. <div className="m_our_services_constituent_head head_text_theme">
  1494. Установчий етап
  1495. </div>
  1496. <p className=" m_our_services_small_grey_text">
  1497. <i className="m_our_services_medium_white_text">
  1498. Обговорення{" "}
  1499. </i>
  1500. всіх вимог, планів, ідей та пропозицій для максимального
  1501. взаєморозуміння
  1502. </p>
  1503. <p className=" m_our_services_small_grey_text">
  1504. <i className="m_our_services_medium_white_text">
  1505. Формування прайсу{" "}
  1506. </i>
  1507. на основі погодження позицій обох сторін.
  1508. </p>
  1509. <p className=" m_our_services_small_grey_text">
  1510. <i className="m_our_services_medium_white_text">
  1511. Підписання договору
  1512. </i>{" "}
  1513. - <br />
  1514. старт плідної співпраці.
  1515. </p>
  1516. </div>
  1517. </div>
  1518. <div className="m_our_services_dev_step">
  1519. <div className="m_our_services_second_count m_our_services_big_number">
  1520. 2
  1521. </div>
  1522. <div className="m_our_services_dev_text">
  1523. <div className="m_our_services_dev_head head_text_theme">
  1524. Этап розробки
  1525. </div>
  1526. <div>
  1527. <i className="m_our_services_medium_white_text">
  1528. Узгодження фінального ТЗ
  1529. </i>
  1530. <p className="m_our_services_small_grey_text m_our_services_none_margin">
  1531. окреслення Вашого майбутнього проекту.
  1532. </p>
  1533. </div>
  1534. <p className="m_our_services_small_grey_text">
  1535. <i className="m_our_services_medium_white_text">
  1536. 30% передплати{" "}
  1537. </i>
  1538. куди ж без цього.
  1539. </p>
  1540. <div className="m_our_services_small_grey_text">
  1541. <i className="m_our_services_medium_white_text">
  1542. Безпосередній процес розробки
  1543. </i>
  1544. <p className="m_our_services_small_grey_text m_our_services_none_margin">
  1545. який передбачає реалізацію всіх Ваших побажань.
  1546. </p>
  1547. </div>
  1548. </div>
  1549. <svg viewBox="0 0 40 10" width="100vw">
  1550. <circle fill="white" cx="32" cy="2" r="0.7" />
  1551. <line
  1552. x1="32"
  1553. y1="2"
  1554. x2="29"
  1555. y2="9"
  1556. stroke="white"
  1557. strokeWidth="0.3"
  1558. />
  1559. <line
  1560. x1="29"
  1561. y1="9"
  1562. x2="6"
  1563. y2="9"
  1564. stroke="white"
  1565. strokeWidth="0.3"
  1566. />
  1567. </svg>
  1568. <ul className="m_our_services_dev_step_list">
  1569. <li className="m_our_services_medium_white_text">
  1570. <div className="m_our_services_orange_circle" />
  1571. Допускається внесення правок 3 рази.
  1572. </li>
  1573. <li className="m_our_services_medium_white_text">
  1574. <div className="m_our_services_orange_circle" />
  1575. Повний контроль за процесом розробки через наш клієнтський
  1576. додаток
  1577. </li>
  1578. </ul>
  1579. </div>
  1580. <div className="m_our_services_release_step">
  1581. <div className="m_our_services_third_count m_our_services_big_number">
  1582. 3
  1583. </div>
  1584. <div className="m_our_services_release_head head_text_theme">
  1585. Реліз та обслуговування
  1586. </div>
  1587. <div className="m_our_services_release_text">
  1588. <strong>Ви отримуєте готовий продукт</strong>
  1589. <div className="m_our_services_small_grey_text">
  1590. <div className="m_our_services_orange_circle" />
  1591. Детальну <i>інструкцію</i> його використання.
  1592. </div>
  1593. <div className="m_our_services_small_grey_text">
  1594. <div className="m_our_services_orange_circle" />
  1595. Та повний <i>контроль</i> за всіма його функціями.
  1596. </div>
  1597. <div className="m_our_services_release_margin_block">
  1598. <strong>Підтримка</strong>
  1599. <div className="m_our_services_small_grey_text">
  1600. <div className="m_our_services_orange_circle" />
  1601. Ми дбаємо про Ваш проект і після його реалізації - через
  1602. сервіс <i>технічного обслуговування.</i>
  1603. </div>
  1604. </div>
  1605. </div>
  1606. </div>
  1607. <div className="m_our_services_cost_step">
  1608. <div className="m_our_services_cost_head head_text_theme">
  1609. Визначимо ціну!?
  1610. </div>
  1611. <div className="m_our_services_details">
  1612. <p className="m_our_services_small_grey_text">
  1613. Інформація по виконанню
  1614. </p>
  1615. <div>
  1616. {
  1617. (this.state && this.state.selected_service) ? `"${this.state.selected_service.title}"` : ''
  1618. }
  1619. </div>
  1620. <div className="m_our_services_details_cost">
  1621. <span>Орієнтовна вартість від:</span>
  1622. <span>
  1623. {
  1624. (
  1625. this.state &&
  1626. this.state.selected_service &&
  1627. this.state.selected_service.price
  1628. ) ? this.state.selected_service.price + '$' : '??? $'
  1629. }
  1630. </span>
  1631. </div>
  1632. {/* <div className="m_our_services_details_time">
  1633. <span>Приблизний час виконання:</span>
  1634. <span>
  1635. <span>24</span>
  1636. <span>дні</span>
  1637. </span>
  1638. </div> */}
  1639. <p>Над проектом будуть працювати:</p>
  1640. <div
  1641. className="m_our_services_details_workers"
  1642. id="m_workers"
  1643. >
  1644. {/* <div className="m_our_services_details_workers_item">
  1645. <div>7</div>
  1646. <div>Дизайнерів</div>
  1647. </div>
  1648. <div className="m_our_services_details_workers_item">
  1649. <div>5</div>
  1650. <div>Програмістів</div>
  1651. </div>
  1652. <div className="m_our_services_details_workers_item">
  1653. <div>2</div>
  1654. <div>Приколіста</div>
  1655. </div>
  1656. <div className="m_our_services_details_workers_item">
  1657. <div>9</div>
  1658. <div>СЕО - спеціалістів</div>
  1659. </div>
  1660. <div className="m_our_services_details_workers_item">
  1661. <div>3</div>
  1662. <div>програмісти</div>
  1663. </div> */}
  1664. {
  1665. this.state &&
  1666. this.state.selected_service &&
  1667. this.state.selected_service.executors
  1668. .map(executor => {
  1669. return (
  1670. <div className="m_our_services_details_workers_item">
  1671. <div>{executor.number}</div>
  1672. <div>{executor.position}</div>
  1673. </div>
  1674. );
  1675. })
  1676. }
  1677. </div>
  1678. </div>
  1679. <div className="m_our_services_price_list">
  1680. <div className="m_our_services_categories">
  1681. <div
  1682. className="m_our_services_digital_button active"
  1683. onClick={this.showDigitalList}
  1684. >
  1685. Digital studio
  1686. </div>
  1687. <div
  1688. className="m_our_services_branding_button"
  1689. onClick={this.showBrandingList}
  1690. >
  1691. Branding studio
  1692. </div>
  1693. </div>
  1694. <div className="m_our_services_digital_list m_our_services_scrollbar_item">
  1695. {/* <div onClick={this.toDetails}>
  1696. <span className="m_our_services_orange_circle" />
  1697. ПослугаПослуга
  1698. </div>
  1699. <div onClick={this.toDetails}>
  1700. <span className="m_our_services_orange_circle" />
  1701. ПослугаПослуга
  1702. </div> */}
  1703. {
  1704. this.state &&
  1705. this.state.services &&
  1706. this.getSubServicesOf(this.state.services[1])
  1707. .map(service => {
  1708. return (<div onClick={this.handleMobileServiceClick}>
  1709. <span className="m_our_services_orange_circle" />
  1710. {service.title}
  1711. </div>);
  1712. })
  1713. }
  1714. </div>
  1715. <div className="m_our_services_branding_list m_our_services_scrollbar_item">
  1716. {
  1717. this.state &&
  1718. this.state.services &&
  1719. this.getSubServicesOf(this.state.services[0])
  1720. .map(service => {
  1721. return (<div onClick={this.handleMobileServiceClick}>
  1722. <span className="m_our_services_orange_circle" />
  1723. {service.title}
  1724. </div>);
  1725. })
  1726. }
  1727. </div>
  1728. <div className="m_our_services_price_triangle" />
  1729. </div>
  1730. <p className="m_our_services_cost_after_head m_our_services_medium_white_text">
  1731. Оберіть послугу, яка вас цікавить
  1732. </p>
  1733. <button
  1734. className="m_our_services_button"
  1735. onClick={this.toggleMobilePriceList}
  1736. >
  1737. <img src={Minus} />
  1738. <img src={Plus} />
  1739. <span className="m_our_services_list_services">
  1740. Перелік послуг
  1741. </span>
  1742. <span className="m_our_services_another_services">
  1743. Обрати іншу послугу
  1744. </span>
  1745. </button>
  1746. <div className="m_our_services_cost_main_text m_our_services_medium_white_text">
  1747. <p>
  1748. Якщо вам цікава більш детальна інформація щодо Вашого
  1749. проекту та точніший прорахунок його вартості,
  1750. скористайтеся нашою формою
  1751. </p>
  1752. </div>
  1753. <button className="m_our_services_button">
  1754. <Link to="start-project">Розпочати проект</Link>
  1755. </button>
  1756. <div className="m_our_services_circle_svg">
  1757. <svg viewBox="0 0 100 135">
  1758. <circle fill="#FE5D00" cx="50" cy="60" r="14" />
  1759. <circle
  1760. fill="none"
  1761. cx="50"
  1762. cy="60"
  1763. r="42"
  1764. stroke="#3A3A3A"
  1765. strokeWidth="0.7"
  1766. />
  1767. <g class='m_equinox_services_planet'>
  1768. <circle fill="#FE5D00" cx="30" cy="23" r="5" />
  1769. <circle
  1770. fill="none"
  1771. cx="30"
  1772. cy="23"
  1773. r="10"
  1774. stroke="#3A3A3A"
  1775. strokeWidth="0.7"
  1776. />
  1777. <circle className='m_equinox_services_satellite' fill="#909090" cx="20" cy="21" r="3" />
  1778. <polygon class='m_equinox_services_button_play' points="29,21 29,25 32,23" fill="#3A3A3A" />
  1779. </g>
  1780. <text
  1781. x="50"
  1782. y="50"
  1783. className="m_our_services_last_step_text_svg"
  1784. fill="white"
  1785. >
  1786. <a href="mailto:>info@equinox.company">
  1787. info@equinox.company
  1788. </a>
  1789. </text>
  1790. <text
  1791. x="50"
  1792. y="60"
  1793. className="m_our_services_last_step_text_svg"
  1794. fill="white"
  1795. >
  1796. <a href="tel:+380961999932">+380961999932</a>
  1797. </text>
  1798. <a href="/contacts">
  1799. <text
  1800. x="50"
  1801. y="70"
  1802. className="m_our_services_last_step_text_svg"
  1803. fill="white"
  1804. >
  1805. Вул. Воздвиженська 36, Київ, 04071
  1806. </text>
  1807. </a>
  1808. <text
  1809. x="50"
  1810. y="95"
  1811. className="m_our_services_last_step_text_svg"
  1812. fill="#FE5D00"
  1813. >
  1814. Відео про нас
  1815. </text>
  1816. </svg>
  1817. </div>
  1818. </div>
  1819. </div>
  1820. </div>
  1821. <div className="m_our_services_after" />
  1822. <div className="m_our_services_anchors m_our_services_small_grey_text">
  1823. <div
  1824. className="active"
  1825. onClick={() => {
  1826. this.scrollTo(400);
  1827. }}
  1828. >
  1829. Установчий етап
  1830. </div>
  1831. <div
  1832. onClick={() => {
  1833. this.scrollTo(800);
  1834. }}
  1835. >
  1836. Розробка
  1837. </div>
  1838. <div
  1839. onClick={() => {
  1840. this.scrollTo(1400);
  1841. }}
  1842. >
  1843. Реліз
  1844. </div>
  1845. <div
  1846. onClick={() => {
  1847. this.scrollTo(1900);
  1848. }}
  1849. >
  1850. Вартість
  1851. </div>
  1852. <Link to="/">
  1853. {" "}
  1854. <img src={Exit} alt="exit" />
  1855. </Link>
  1856. </div>
  1857. </React.Fragment>
  1858. )}
  1859. </div>
  1860. );
  1861. }
  1862. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!