Add demo site

README.md

@@ -2,6 +2,6 @@
 
 Site Falcon IO was a business ideas that I decided to make open source. It comprises a Web Component widget developed using raw HTML, JS and CSS. This repository is still in testing and not yet publicised.
 
-The widget is a simple web component that can be embedded into any website and allows users to provide feedback by interacting with it. The feedback can also include screenshots of the website. This has proven to be the most challenging component of the project due to cross-origin content. The W3C spec that most browsers implement prohibits the downloading of content originating outside the origin of the current site-hosting server. Thus, any images on a website that are served from a different origin will taint any HTML canvases that are painted with their content. The work-around is to either use a proxy-server or the `getDisplayMedia` JS API. The latter requires asking for user permission each invocation which is sub-optimal. In summary, this project is still ongoing.
+The widget is a simple web component that can be embedded into any website and allows users to provide feedback by interacting with it. The feedback can also include screenshots of the website. This has proven to be the most challenging component of the project due to cross-origin content. The W3C spec that most browsers implement prohibits the downloading of content originating outside the origin of the current site-hosting server. Thus, **any images on a website that are served from a different origin will taint any HTML canvases that are painted with their content**. The work-around is to either use a proxy-server or the `getDisplayMedia` JS API. The latter requires asking for user permission each invocation which is sub-optimal. In summary, this project is still ongoing.
 
 In its completed form, this widget will save web developers considerable time and hassle when it comes to ascertaining beta/alpha testing feedback from users because such users can provide feedback directly on the site, thus preventing bogged down email chain discussions.

demo/assets/img/about/about-left-shape.svg

@@ -0,0 +1 @@
+<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" transform="translate(297.858 1341)"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y2="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)" transform="translate(-297.858 -1341)"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="url(#b)" opacity=".3" transform="matrix(-1 0 0 -1 792.694 1979.601)"/></g></svg>

demo/assets/img/about/about-right-shape.svg

@@ -0,0 +1 @@
+<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m175.536 0c-176.345 0 67.064 208.923-88.593 319.3s-87.752 319.3 88.593 319.3 319.3-142.956 319.3-319.3-142.955-319.3-319.3-319.3z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y1="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m175.536 0c-176.345 0 67.064 208.923-88.593 319.3s-87.752 319.3 88.593 319.3 319.3-142.956 319.3-319.3-142.955-319.3-319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)"><path d="m319.3 638.6c176.345 0-67.066-208.922 88.593-319.3s87.752-319.3-88.593-319.3-319.3 142.956-319.3 319.3 142.956 319.3 319.3 319.3z" fill="url(#b)" opacity=".3"/></g></svg>

demo/assets/img/about/left-dots.svg

@@ -0,0 +1 @@
+<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#00909e"><circle cx="365" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="35" cy="5" r="5"/><circle cx="5" cy="5" r="5"/><circle cx="365" cy="35" r="5"/><circle cx="335" cy="35" r="5"/><circle cx="305" cy="35" r="5"/><circle cx="275" cy="35" r="5"/><circle cx="245" cy="35" r="5"/><circle cx="215" cy="35" r="5"/><circle cx="185" cy="35" r="5"/><circle cx="155" cy="35" r="5"/><circle cx="125" cy="35" r="5"/><circle cx="95" cy="35" r="5"/><circle cx="65" cy="35" r="5"/><circle cx="35" cy="35" r="5"/><circle cx="5" cy="35" r="5"/></g><circle cx="365" cy="65" fill="#5864ff" r="5"/><circle cx="335" cy="65" fill="#5864ff" r="5"/><circle cx="305" cy="65" fill="#5864ff" r="5"/><circle cx="275" cy="65" fill="#5864ff" r="5"/><circle cx="245" cy="65" fill="#5864ff" r="5"/><circle cx="215" cy="65" fill="#5864ff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="155" cy="65" fill="#fff" r="5"/><circle cx="125" cy="65" fill="#fff" r="5"/><circle cx="95" cy="65" fill="#fff" r="5"/><circle cx="65" cy="65" fill="#fff" r="5"/><circle cx="35" cy="65" fill="#fff" r="5"/><circle cx="5" cy="65" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#5864ff" r="5"/><circle cx="335" cy="95" fill="#5864ff" r="5"/><circle cx="305" cy="95" fill="#5864ff" r="5"/><circle cx="275" cy="95" fill="#5864ff" r="5"/><circle cx="245" cy="95" fill="#5864ff" r="5"/><circle cx="215" cy="95" fill="#5864ff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="155" cy="95" fill="#fff" r="5"/><circle cx="125" cy="95" fill="#fff" r="5"/><circle cx="95" cy="95" fill="#fff" r="5"/><circle cx="65" cy="95" fill="#fff" r="5"/><circle cx="35" cy="95" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#5864ff" r="5"/><circle cx="335" cy="125" fill="#5864ff" r="5"/><circle cx="305" cy="125" fill="#5864ff" r="5"/><circle cx="275" cy="125" fill="#5864ff" r="5"/><circle cx="245" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#5864ff" r="5"/><circle cx="185" cy="125" fill="#5864ff" r="5"/><circle cx="155" cy="125" fill="#fff" r="5"/><circle cx="125" cy="125" fill="#fff" r="5"/><circle cx="95" cy="125" fill="#fff" r="5"/><circle cx="65" cy="125" fill="#fff" r="5"/><circle cx="35" cy="125" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#5864ff" r="5"/><circle cx="335" cy="155" fill="#5864ff" r="5"/><circle cx="305" cy="155" fill="#5864ff" r="5"/><circle cx="275" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#5864ff" r="5"/><circle cx="155" cy="155" fill="#5864ff" r="5"/><circle cx="125" cy="155" fill="#fff" r="5"/><circle cx="95" cy="155" fill="#fff" r="5"/><circle cx="65" cy="155" fill="#fff" r="5"/><circle cx="35" cy="155" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#fff" r="5"/></svg>

demo/assets/img/about/right-dots.svg

@@ -0,0 +1 @@
+<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#00909e"><circle cx="5" cy="5" r="5"/><circle cx="35" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="365" cy="5" r="5"/><circle cx="5" cy="35" r="5"/><circle cx="35" cy="35" r="5"/><circle cx="65" cy="35" r="5"/><circle cx="95" cy="35" r="5"/><circle cx="125" cy="35" r="5"/><circle cx="155" cy="35" r="5"/><circle cx="185" cy="35" r="5"/><circle cx="215" cy="35" r="5"/><circle cx="245" cy="35" r="5"/><circle cx="275" cy="35" r="5"/><circle cx="305" cy="35" r="5"/><circle cx="335" cy="35" r="5"/><circle cx="365" cy="35" r="5"/></g><circle cx="5" cy="65" fill="#5864ff" r="5"/><circle cx="35" cy="65" fill="#5864ff" r="5"/><circle cx="65" cy="65" fill="#5864ff" r="5"/><circle cx="95" cy="65" fill="#5864ff" r="5"/><circle cx="125" cy="65" fill="#5864ff" r="5"/><circle cx="155" cy="65" fill="#5864ff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="215" cy="65" fill="#fff" r="5"/><circle cx="245" cy="65" fill="#fff" r="5"/><circle cx="275" cy="65" fill="#fff" r="5"/><circle cx="305" cy="65" fill="#fff" r="5"/><circle cx="335" cy="65" fill="#fff" r="5"/><circle cx="365" cy="65" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#5864ff" r="5"/><circle cx="35" cy="95" fill="#5864ff" r="5"/><circle cx="65" cy="95" fill="#5864ff" r="5"/><circle cx="95" cy="95" fill="#5864ff" r="5"/><circle cx="125" cy="95" fill="#5864ff" r="5"/><circle cx="155" cy="95" fill="#5864ff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="215" cy="95" fill="#fff" r="5"/><circle cx="245" cy="95" fill="#fff" r="5"/><circle cx="275" cy="95" fill="#fff" r="5"/><circle cx="305" cy="95" fill="#fff" r="5"/><circle cx="335" cy="95" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#5864ff" r="5"/><circle cx="35" cy="125" fill="#5864ff" r="5"/><circle cx="65" cy="125" fill="#5864ff" r="5"/><circle cx="95" cy="125" fill="#5864ff" r="5"/><circle cx="125" cy="125" fill="#5864ff" r="5"/><circle cx="155" cy="125" fill="#5864ff" r="5"/><circle cx="185" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#fff" r="5"/><circle cx="245" cy="125" fill="#fff" r="5"/><circle cx="275" cy="125" fill="#fff" r="5"/><circle cx="305" cy="125" fill="#fff" r="5"/><circle cx="335" cy="125" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#5864ff" r="5"/><circle cx="35" cy="155" fill="#5864ff" r="5"/><circle cx="65" cy="155" fill="#5864ff" r="5"/><circle cx="95" cy="155" fill="#5864ff" r="5"/><circle cx="125" cy="155" fill="#5864ff" r="5"/><circle cx="155" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#fff" r="5"/><circle cx="275" cy="155" fill="#fff" r="5"/><circle cx="305" cy="155" fill="#fff" r="5"/><circle cx="335" cy="155" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#fff" r="5"/></svg>

demo/assets/img/favicon.svg

@@ -0,0 +1 @@
+<svg height="44.274" viewBox="0 0 44.274 44.274" width="44.274" xmlns="http://www.w3.org/2000/svg"><path d="m44.274 22.137q0 1.026-.092 2.028-.07.793-.2 1.567a22.153 22.153 0 1 1 .291-3.594z" fill="#fff"/><text fill="#5a65ff" font-family="SegoeUI, Segoe UI" font-size="19" transform="translate(5 28)"><tspan x="0" y="0">Saas</tspan></text></svg>

demo/assets/img/footer/footer-bg.svg

@@ -0,0 +1 @@
+<svg height="517" viewBox="0 0 1692 517" width="1692" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m159 5841h1692v517h-1692z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".404" x2=".411" y1="-.343" y2=".819"><stop offset="0" stop-color="#737dfc"/><stop offset="1" stop-color="#5864ff"/></linearGradient><g clip-path="url(#a)" transform="translate(-159 -5841)"><path d="m-52.41 1302c62.21-79.011 157.84-232.31 251.61-305.49 347.561-270.678 504.052 31.946 1066.283-204.393 356.452-149.838 405.56 239.187 393.783 508.735z" fill="#5864ff" transform="translate(190 5091)"/><path d="m-113.148 1297.79c-41.4-185.711 96.459-247.977 228.027-344.267 255.548-186.624 370.256-9.856 783.643-172.8s264.57 517.071 264.57 517.071z" fill="#fff" opacity=".05" transform="translate(515.633 5267.644)"/><path d="m1181.684 1297.789c41.4-185.71-96.459-247.977-228.027-344.266-255.548-186.623-370.257-9.856-783.643-172.804s-264.57 517.07-264.57 517.07z" fill="url(#b)" transform="translate(633.633 5267.644)"/></g></svg>

demo/assets/img/hero/hero-bg.svg

@@ -0,0 +1 @@
+<svg height="796.067" viewBox="0 0 1781.408 796.067" width="1781.408" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y2="1"><stop offset="0" stop-color="#5864ff"/><stop offset="1" stop-color="#6a74ff"/></linearGradient><path d="m1650.595 755.5c56.3 272.618-131.189 364.024-310.13 505.374-347.561 273.959-503.57 14.469-1065.8 253.673s-359.832-759.047-359.832-759.047z" fill="#5864ff" transform="translate(120.633 -755.5)"/><path d="m-113.148 755.5c-41.4 185.71 96.459 247.977 228.027 344.266 255.548 186.624 370.256 9.856 783.643 172.8s264.57-517.07 264.57-517.07z" fill="url(#a)" transform="translate(286.464 -753.856)"/></svg>

demo/assets/img/hero/hero-shape.svg

@@ -0,0 +1 @@
+<svg height="160" viewBox="0 0 220 160" width="220" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" fill="#fff" r="5"/><circle cx="35" cy="5" fill="#fff" r="5"/><circle cx="65" cy="5" fill="#fff" r="5"/><circle cx="95" cy="5" fill="#40bad5" r="5"/><circle cx="125" cy="5" fill="#40bad5" r="5"/><circle cx="155" cy="5" fill="#40bad5" r="5"/><circle cx="185" cy="5" fill="#40bad5" r="5"/><circle cx="215" cy="5" fill="#40bad5" r="5"/><circle cx="5" cy="35" fill="#fff" r="5"/><circle cx="35" cy="35" fill="#fff" r="5"/><circle cx="65" cy="35" fill="#fff" r="5"/><circle cx="95" cy="35" fill="#40bad5" r="5"/><circle cx="125" cy="35" fill="#40bad5" r="5"/><circle cx="155" cy="35" fill="#40bad5" r="5"/><circle cx="185" cy="35" fill="#40bad5" r="5"/><circle cx="215" cy="35" fill="#40bad5" r="5"/><g fill="#5864ff"><circle cx="5" cy="65" r="5"/><circle cx="35" cy="65" r="5"/><circle cx="65" cy="65" r="5"/><circle cx="95" cy="65" r="5"/><circle cx="125" cy="65" r="5"/><circle cx="155" cy="65" r="5"/><circle cx="185" cy="65" r="5"/><circle cx="215" cy="65" r="5"/><circle cx="5" cy="95" r="5"/><circle cx="35" cy="95" r="5"/><circle cx="65" cy="95" r="5"/><circle cx="95" cy="95" r="5"/><circle cx="125" cy="95" r="5"/><circle cx="155" cy="95" r="5"/><circle cx="185" cy="95" r="5"/><circle cx="215" cy="95" r="5"/><circle cx="5" cy="125" r="5"/><circle cx="35" cy="125" r="5"/><circle cx="65" cy="125" r="5"/><circle cx="95" cy="125" r="5"/><circle cx="125" cy="125" r="5"/><circle cx="155" cy="125" r="5"/><circle cx="185" cy="125" r="5"/><circle cx="215" cy="125" r="5"/><circle cx="5" cy="155" r="5"/><circle cx="35" cy="155" r="5"/><circle cx="65" cy="155" r="5"/><circle cx="95" cy="155" r="5"/><circle cx="125" cy="155" r="5"/><circle cx="155" cy="155" r="5"/><circle cx="185" cy="155" r="5"/><circle cx="215" cy="155" r="5"/></g></svg>

demo/assets/img/subscribe/subscribe-bg.svg

@@ -0,0 +1 @@
+<svg height="256" viewBox="0 0 1170 256" width="1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="objectBoundingBox" x1=".506" x2=".5" y1="1.061"><stop offset="0" stop-color="#6b75fb"/><stop offset="1" stop-color="#5864ff"/></linearGradient><clipPath id="b"><rect height="256" rx="29" transform="translate(0 .493)" width="1170"/></clipPath><rect fill="#5864ff" height="256" rx="29" width="1170"/><g clip-path="url(#b)" transform="translate(0 -.493)"><path d="m0 181.607 9.75 14.277c9.75 14.277 29.25 42.831 48.75 23.825 19.5-19.363 39-85.394 58.5-99.939 19.5-14.009 39 23.468 58.5 38.013 19.5 14.009 39 5.086 58.5 0 19.5-4.729 39-4.729 58.5-14.277 19.5-9.191 39-28.822 58.5-4.729s39 90.123 58.5 123.763c19.5 33.283 39 33.283 58.5 4.729s39-85.662 58.5-114.216 39-28.554 58.5-38.1c19.5-9.191 39-28.822 58.5-4.729s39 90.124 58.5 123.764c19.5 33.283 39 33.283 58.5 4.729s39-85.662 58.5-104.668c19.5-19.363 39 .268 58.5 28.554 19.5 28.822 39 66.3 58.5 95.121 19.5 28.286 39 47.917 58.5 14.277 19.5-33.283 39-118.945 58.5-128.493 19.5-9.191 39 56.84 58.5 57.108 19.5-.268 39-66.3 48.75-99.939l9.75-33.286v-28.554h-1170z" fill="url(#a)" transform="translate(0 -74.675)"/></g></svg>

demo/assets/img/testimonial/testimonial-dots.svg

@@ -0,0 +1 @@
+<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#5864ff"><circle cx="365" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="35" cy="5" r="5"/></g><circle cx="5" cy="5" fill="#fff" r="5"/><circle cx="365" cy="35" fill="#5864ff" r="5"/><circle cx="335" cy="35" fill="#5864ff" r="5"/><circle cx="305" cy="35" fill="#5864ff" r="5"/><circle cx="275" cy="35" fill="#5864ff" r="5"/><circle cx="245" cy="35" fill="#5864ff" r="5"/><circle cx="215" cy="35" fill="#fff" r="5"/><circle cx="185" cy="35" fill="#fff" r="5"/><circle cx="155" cy="35" fill="#fff" r="5"/><circle cx="125" cy="35" fill="#fff" r="5"/><circle cx="95" cy="35" fill="#fff" r="5"/><circle cx="65" cy="35" fill="#fff" r="5"/><circle cx="35" cy="35" fill="#fff" r="5"/><circle cx="5" cy="35" fill="#fff" r="5"/><circle cx="365" cy="65" fill="#5864ff" r="5"/><circle cx="335" cy="65" fill="#5864ff" r="5"/><circle cx="305" cy="65" fill="#5864ff" r="5"/><circle cx="275" cy="65" fill="#5864ff" r="5"/><circle cx="245" cy="65" fill="#5864ff" r="5"/><circle cx="215" cy="65" fill="#fff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="155" cy="65" fill="#fff" r="5"/><circle cx="125" cy="65" fill="#fff" r="5"/><circle cx="95" cy="65" fill="#fff" r="5"/><circle cx="65" cy="65" fill="#fff" r="5"/><circle cx="35" cy="65" fill="#fff" r="5"/><circle cx="5" cy="65" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#5864ff" r="5"/><circle cx="335" cy="95" fill="#5864ff" r="5"/><circle cx="305" cy="95" fill="#5864ff" r="5"/><circle cx="275" cy="95" fill="#5864ff" r="5"/><circle cx="245" cy="95" fill="#5864ff" r="5"/><circle cx="215" cy="95" fill="#fff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="155" cy="95" fill="#fff" r="5"/><circle cx="125" cy="95" fill="#fff" r="5"/><circle cx="95" cy="95" fill="#fff" r="5"/><circle cx="65" cy="95" fill="#fff" r="5"/><circle cx="35" cy="95" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#5864ff" r="5"/><circle cx="335" cy="125" fill="#5864ff" r="5"/><circle cx="305" cy="125" fill="#5864ff" r="5"/><circle cx="275" cy="125" fill="#5864ff" r="5"/><circle cx="245" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#fff" r="5"/><circle cx="185" cy="125" fill="#fff" r="5"/><circle cx="155" cy="125" fill="#fff" r="5"/><circle cx="125" cy="125" fill="#fff" r="5"/><circle cx="95" cy="125" fill="#fff" r="5"/><circle cx="65" cy="125" fill="#fff" r="5"/><circle cx="35" cy="125" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#5864ff" r="5"/><circle cx="335" cy="155" fill="#5864ff" r="5"/><circle cx="305" cy="155" fill="#5864ff" r="5"/><circle cx="275" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#fff" r="5"/><circle cx="155" cy="155" fill="#fff" r="5"/><circle cx="125" cy="155" fill="#fff" r="5"/><circle cx="95" cy="155" fill="#fff" r="5"/><circle cx="65" cy="155" fill="#fff" r="5"/><circle cx="35" cy="155" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#fff" r="5"/></svg>

demo/assets/img/testimonial/testimonial-shape.svg

@@ -0,0 +1 @@
+<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y1="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)"><path d="m175.536 638.6c-176.345 0 67.064-208.922-88.593-319.3s-87.752-319.3 88.593-319.3 319.3 142.956 319.3 319.3-142.955 319.3-319.3 319.3z" fill="url(#b)" opacity=".3"/></g></svg>

demo/assets/js/main.js

@@ -0,0 +1,97 @@
+(function () {
+  //===== Prealoder
+
+  window.onload = function () {
+    window.setTimeout(fadeout, 500);
+  };
+
+  function fadeout() {
+    document.querySelector(".preloader").style.opacity = "0";
+    document.querySelector(".preloader").style.display = "none";
+  }
+
+  /*=====================================
+    Sticky
+    ======================================= */
+  window.onscroll = function () {
+    const header_navbar = document.querySelector(".navbar-area");
+    const sticky = header_navbar.offsetTop;
+    const logo = document.querySelector(".navbar-brand img");
+
+    if (window.pageYOffset > sticky) {
+      header_navbar.classList.add("sticky");
+      logo.src = "assets/img/logo/logo-2.svg";
+    } else {
+      header_navbar.classList.remove("sticky");
+      logo.src = "assets/img/logo/logo.svg";
+    }
+
+    // show or hide the back-top-top button
+    const backToTo = document.querySelector(".scroll-top");
+    if (
+      document.body.scrollTop > 50 ||
+      document.documentElement.scrollTop > 50
+    ) {
+      backToTo.style.display = "flex";
+    } else {
+      backToTo.style.display = "none";
+    }
+  };
+
+  // for menu scroll
+  const pageLink = document.querySelectorAll(".page-scroll");
+
+  pageLink.forEach((elem) => {
+    elem.addEventListener("click", (e) => {
+      e.preventDefault();
+      document.querySelector(elem.getAttribute("href")).scrollIntoView({
+        behavior: "smooth",
+        offsetTop: 1 - 60,
+      });
+    });
+  });
+
+  // section menu active
+  function onScroll(event) {
+    const sections = document.querySelectorAll(".page-scroll");
+    const scrollPos =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop;
+
+    for (let i = 0; i < sections.length; i++) {
+      const currLink = sections[i];
+      const val = currLink.getAttribute("href");
+      const refElement = document.querySelector(val);
+      const scrollTopMinus = scrollPos + 73;
+      if (
+        refElement.offsetTop <= scrollTopMinus &&
+        refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
+      ) {
+        document.querySelector(".page-scroll").classList.remove("active");
+        currLink.classList.add("active");
+      } else {
+        currLink.classList.remove("active");
+      }
+    }
+  }
+
+  window.document.addEventListener("scroll", onScroll);
+
+  //===== close navbar-collapse when a  clicked
+  let navbarToggler = document.querySelector(".navbar-toggler");
+  const navbarCollapse = document.querySelector(".navbar-collapse");
+
+  document.querySelectorAll(".page-scroll").forEach((e) =>
+    e.addEventListener("click", () => {
+      navbarToggler.classList.remove("active");
+      navbarCollapse.classList.remove("show");
+    })
+  );
+  navbarToggler.addEventListener("click", function () {
+    navbarToggler.classList.toggle("active");
+  });
+
+  // WOW active
+  new WOW().init();
+})();