diff --git a/src/assets/images/about-frame.png b/src/assets/images/about-frame.png
new file mode 100644
index 0000000..c55b813
Binary files /dev/null and b/src/assets/images/about-frame.png differ
diff --git a/src/assets/images/about-screen.png b/src/assets/images/about-screen.png
new file mode 100644
index 0000000..5d90c53
Binary files /dev/null and b/src/assets/images/about-screen.png differ
diff --git a/src/assets/images/about_main.png b/src/assets/images/about_main.png
new file mode 100644
index 0000000..1a52093
Binary files /dev/null and b/src/assets/images/about_main.png differ
diff --git a/src/assets/images/abt_01.png b/src/assets/images/abt_01.png
new file mode 100644
index 0000000..423b0de
Binary files /dev/null and b/src/assets/images/abt_01.png differ
diff --git a/src/assets/images/abt_02.png b/src/assets/images/abt_02.png
new file mode 100644
index 0000000..c559ef6
Binary files /dev/null and b/src/assets/images/abt_02.png differ
diff --git a/src/assets/images/abt_03.png b/src/assets/images/abt_03.png
new file mode 100644
index 0000000..35ef43a
Binary files /dev/null and b/src/assets/images/abt_03.png differ
diff --git a/src/assets/images/abt_functional.png b/src/assets/images/abt_functional.png
new file mode 100644
index 0000000..108b8c5
Binary files /dev/null and b/src/assets/images/abt_functional.png differ
diff --git a/src/assets/images/abt_support.png b/src/assets/images/abt_support.png
new file mode 100644
index 0000000..0e7515a
Binary files /dev/null and b/src/assets/images/abt_support.png differ
diff --git a/src/assets/images/anim_line.png b/src/assets/images/anim_line.png
new file mode 100644
index 0000000..ced1536
Binary files /dev/null and b/src/assets/images/anim_line.png differ
diff --git a/src/assets/images/appstore_blue.png b/src/assets/images/appstore_blue.png
new file mode 100644
index 0000000..78766ff
Binary files /dev/null and b/src/assets/images/appstore_blue.png differ
diff --git a/src/assets/images/appstore_white.png b/src/assets/images/appstore_white.png
new file mode 100644
index 0000000..78db0a9
Binary files /dev/null and b/src/assets/images/appstore_white.png differ
diff --git a/src/assets/images/avtar_testimonial.png b/src/assets/images/avtar_testimonial.png
new file mode 100644
index 0000000..b119a71
Binary files /dev/null and b/src/assets/images/avtar_testimonial.png differ
diff --git a/src/assets/images/banner-image.png b/src/assets/images/banner-image.png
new file mode 100644
index 0000000..4d40793
Binary files /dev/null and b/src/assets/images/banner-image.png differ
diff --git a/src/assets/images/banner-shape-one.svg b/src/assets/images/banner-shape-one.svg
new file mode 100644
index 0000000..ec26e5d
--- /dev/null
+++ b/src/assets/images/banner-shape-one.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1879.8 379" enable-background="new 0 0 1879.8 379" xml:space="preserve">
+<polygon fill="#FFFFFF" points="0,252.5 1209.9,359.5 1879.8,60 1879.8,379 0,379 "/>
+<polygon opacity="0.3" fill="#FFFFFF" points="0,192.5 1209.9,363.5 1879.8,0 1879.8,379 0,379 "/>
+</svg>
diff --git a/src/assets/images/banner-shape-one1.png b/src/assets/images/banner-shape-one1.png
new file mode 100644
index 0000000..24b6adb
Binary files /dev/null and b/src/assets/images/banner-shape-one1.png differ
diff --git a/src/assets/images/banner-shape-two.svg b/src/assets/images/banner-shape-two.svg
new file mode 100644
index 0000000..b7681b5
--- /dev/null
+++ b/src/assets/images/banner-shape-two.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1879.8 121.3" enable-background="new 0 0 1879.8 121.3" xml:space="preserve">
+<path fill="#6A49F2" d="M0,64.3c0,0,301-69.6,501-64s385.3,35.4,494.3,53.5s506,102.5,884.4,0v53.5H0V64.3z"/>
+<path fill="#F6F4FE" d="M0,63.3c0,0,301-38.6,501-33s299.4,21.5,438.8,37.4c118.4,13.5,580.3,78,939.9,5.1v48.5H0V63.3z"/>
+</svg>
diff --git a/src/assets/images/banner-shape-video.svg b/src/assets/images/banner-shape-video.svg
new file mode 100644
index 0000000..b7681b5
--- /dev/null
+++ b/src/assets/images/banner-shape-video.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1879.8 121.3" enable-background="new 0 0 1879.8 121.3" xml:space="preserve">
+<path fill="#6A49F2" d="M0,64.3c0,0,301-69.6,501-64s385.3,35.4,494.3,53.5s506,102.5,884.4,0v53.5H0V64.3z"/>
+<path fill="#F6F4FE" d="M0,63.3c0,0,301-38.6,501-33s299.4,21.5,438.8,37.4c118.4,13.5,580.3,78,939.9,5.1v48.5H0V63.3z"/>
+</svg>
diff --git a/src/assets/images/banner-shape.svg b/src/assets/images/banner-shape.svg
new file mode 100644
index 0000000..efb2df7
--- /dev/null
+++ b/src/assets/images/banner-shape.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1586.9 196.5" enable-background="new 0 0 1586.9 196.5" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="802.5264" y1="80.3371" x2="797.3304" y2="184.9941">
+	<stop  offset="6.557240e-002" style="stop-color:#F6F4FE"/>
+	<stop  offset="0.908" style="stop-color:#D0C5FD"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M1340.7,176.8c-0.5-0.3-0.9-1-1.4-1c-2.5-0.1-5,0.1-7.5-0.1c-6.7-0.3-13.5-0.3-20.2-1.1
+	c-6.7-0.8-13.3-1.4-20-2c-6.1-0.6-12.1-2-18.2-2.9c-5.3-0.8-10.7-1.2-16-2.1c-7-1.2-14-2.4-20.9-4c-9.1-2.1-18.1-4.6-27.1-6.9
+	c-3.6-0.9-7.1-2-10.7-3c-12.1-3.2-24.1-6.9-36.2-10.3c-11.8-3.3-23.6-6.4-35.4-9.5c-11.2-3-22.7-4.9-34-7.3
+	c-7.7-1.6-15.4-3.4-23.2-4.9c-4.9-0.9-10-1.8-15-1.9c-1.9-0.1-2.6-2.4-4.7-1.5c-1.6,0.7-3.4,0.2-5.2-0.4c-2.6-0.9-5.4-0.9-8.2-1.2
+	c-3.7-0.4-7.7,0-11.2-1.2c-4-1.4-8.3,0.3-12-1.8c-0.1-0.1-0.3,0-0.5,0c-4.9-0.3-9.8-0.6-14.7-1c-2.9-0.2-5.8-0.7-8.7-1
+	c-2.8-0.2-5.6,0.5-8.2-1c-0.4-0.2-1,0-1.5,0c-14.2-0.5-28.5-1.4-42.7-1.1c-3.4,0.1-6.9-1.2-10.2-0.8c-12.6,1.6-25.2,0.4-37.7,1
+	c-2.5,0.1-4.9,0.1-7.4,0.3c-2.6,0.1-5.2,0.3-7.8,0.7c-7.4,1.1-15,1.3-22.4,2.2c-3.6,0.5-7.4,0.3-11,1.6c-2.6,0.9-5.8,0.6-8.7,1
+	c-6.6,1-13.1,2.1-19.7,3.1c-6.4,1-13,1.3-19.4,2.1c-2.9,0.4-5.7,1-8.5,1.7c-2.9,0.7-5.8,0-8.7,1c-3.1,1.1-6.8,0.8-10.2,1.2
+	c-1.9,0.2-3.8,0.7-5.7,1c-1.9,0.2-3.8,0.2-5.8,0.8c-2.9,0.9-6.1,0.3-9.2,1.1c-3.8,0.9-7.8,0.7-11.7,1.2c-1.9,0.2-3.8,0.6-5.7,1
+	c-1.7,0.3-3.5,0.6-5.2,0.9c-0.7,0.1-1.3,0.1-2,0.1c-5.2,0-10.3,1.1-15.5,1.9c-4.5,0.7-9.1,0.8-13.7,1.1c-5.4,0.3-10.7,0.9-16,1.9
+	c-3.2,0.6-6.5,0.3-9.7,0.9c-4.8,1-9.9,0.3-14.7,1.3c-4.8,1-9.8-0.1-14.5,1.8c-0.3,0.1-0.7,0-1,0c-5.6,0.3-11.2,0.2-16.7,1.1
+	c-5.2,0.9-10.5,0-15.5,1.8c-0.3,0.1-0.7,0-1,0c-6.7,0.3-13.5,0.6-20.2,1c-3.1,0.2-6.2,0.7-9.2,1c-2.9,0.3-6-0.6-8.7,1
+	c-0.3,0.1-0.7,0-1,0c-8.2,0.3-16.5,0.3-24.7,1.1c-6.1,0.6-12.3,0.1-18.2,1.1c-5.6,0.9-11.2,0.2-16.8,0.9c-8.7,1.1-17.5,0.2-26.2,1.1
+	c-17.6,1.7-35.2,0.4-52.7,0.8c-9.7,0.2-19.3,0.2-29,0c-10.9-0.2-21.9-0.2-32.7-1.2c-4.9-0.4-9.9-0.4-14.7-0.9
+	c-7.6-0.8-15.3-1.5-23-2.1c-6.2-0.5-12.3-1.2-18.5-2c-6.1-0.8-12.3-1-18.3-2.7c-3.2-0.9-6.8-0.7-10.2-1.2c-4.8-0.7-9.6-1.4-14.4-2.3
+	c-4.4-0.8-8.8-1.8-13.3-2.7c-6.9-1.4-13.9-2.7-20.8-4.4c-7.4-1.7-14.7-3.7-22-5.6c-12.3-3.3-24.5-6.7-36.3-11.5
+	c-9.9-4-19.9-7.5-29.6-11.9C133,98.7,125.4,94,117.4,90c-7.3-3.7-14-8.1-20.7-12.8c-5.9-4.1-11.9-8-17.1-13.1
+	c-3.1-3-6.4-5.7-9.5-8.6c-7.2-6.8-14-14-19.3-22.9c1.8-1.6,3.3-3.9,6.4-2.1c0.4,0.2,0.9,0.3,1.4,0.3c7.1,0.3,14.1,0.7,21.2,1
+	c6.4,0.3,12.8,0.8,19.2,1.2c4.1,0.3,8.2,0.1,12.2,0.8c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1
+	c4.6,0.8,9.4-0.1,13.7,1c6.2,1.6,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1
+	c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9
+	c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1
+	c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1
+	c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0
+	c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9
+	c5.4,1,10.9,0.2,16.2,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8
+	c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1
+	c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.3-0.1,13.7,1
+	c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9
+	c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1
+	c4.6,0.8,9.3-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1
+	c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.3,0.7,8.6,0.2,12.7,0.9
+	c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1
+	c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1
+	c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8c0.3,0.1,0.7,0,1,0
+	c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.3,0.2,16.7,1.1c4.3,0.7,8.6,0.2,12.7,0.9
+	c5.4,1,10.9,0.2,16.2,1.1c4.3,0.7,8.6,0.2,12.7,0.9c5.4,1,10.9,0.2,16.2,1.1c4.6,0.8,9.4-0.1,13.7,1c6.2,1.5,12.5-0.4,18.5,1.8
+	c0.3,0.1,0.7,0,1,0c7.7,0.3,15.5,0.2,23.2,1.1c5.6,0.7,11.2,0.2,16.7,1.1c4.1,0.7,8.2,0.2,12.2,0.9c5.6,1,11.2,0.4,16.7,1.1
+	c3.3,0.4,6.5,0.9,9.7,0.8c2.5-0.1,4,1,5.2,3.4c-1.2,0.8-2.3,1.7-3.5,2.4c-8.1,5.1-16.4,9.8-25.2,13.6c-8.8,3.8-17.7,6.9-26.8,9.7
+	c-7.7,2.4-15.4,4.5-23.3,6.1c-6.2,1.2-12.4,2.1-18.7,3c-5.3,0.7-10.6,1.4-16,2c-6.7,0.8-13.3,1.3-20,2.1c-6.5,0.8-12.8,0.6-19.3,0.8
+	c-0.5,0-1,0.6-1.4,1C1380,176.8,1360.4,176.8,1340.7,176.8z"/>
+</svg>
diff --git a/src/assets/images/banner-shape1.png b/src/assets/images/banner-shape1.png
new file mode 100644
index 0000000..a16e982
Binary files /dev/null and b/src/assets/images/banner-shape1.png differ
diff --git a/src/assets/images/banner-shape2.png b/src/assets/images/banner-shape2.png
new file mode 100644
index 0000000..3e9ea7a
Binary files /dev/null and b/src/assets/images/banner-shape2.png differ
diff --git a/src/assets/images/banner-shape2two.png b/src/assets/images/banner-shape2two.png
new file mode 100644
index 0000000..f8f4e30
Binary files /dev/null and b/src/assets/images/banner-shape2two.png differ
diff --git a/src/assets/images/banner-shape3.png b/src/assets/images/banner-shape3.png
new file mode 100644
index 0000000..cfdadbe
Binary files /dev/null and b/src/assets/images/banner-shape3.png differ
diff --git a/src/assets/images/banner-shapethree3.png b/src/assets/images/banner-shapethree3.png
new file mode 100644
index 0000000..27565eb
Binary files /dev/null and b/src/assets/images/banner-shapethree3.png differ
diff --git a/src/assets/images/banner-shapev.png b/src/assets/images/banner-shapev.png
new file mode 100644
index 0000000..d904eea
Binary files /dev/null and b/src/assets/images/banner-shapev.png differ
diff --git a/src/assets/images/banner-shapev2.png b/src/assets/images/banner-shapev2.png
new file mode 100644
index 0000000..3f9a2ff
Binary files /dev/null and b/src/assets/images/banner-shapev2.png differ
diff --git a/src/assets/images/banner-shapev3.png b/src/assets/images/banner-shapev3.png
new file mode 100644
index 0000000..15c0152
Binary files /dev/null and b/src/assets/images/banner-shapev3.png differ
diff --git a/src/assets/images/bannerimage1.png b/src/assets/images/bannerimage1.png
new file mode 100644
index 0000000..6a2e045
Binary files /dev/null and b/src/assets/images/bannerimage1.png differ
diff --git a/src/assets/images/bannerimage2.png b/src/assets/images/bannerimage2.png
new file mode 100644
index 0000000..5d8b0a0
Binary files /dev/null and b/src/assets/images/bannerimage2.png differ
diff --git a/src/assets/images/bannerimage3.png b/src/assets/images/bannerimage3.png
new file mode 100644
index 0000000..7161fab
Binary files /dev/null and b/src/assets/images/bannerimage3.png differ
diff --git a/src/assets/images/bannerimage4.png b/src/assets/images/bannerimage4.png
new file mode 100644
index 0000000..1b6d04d
Binary files /dev/null and b/src/assets/images/bannerimage4.png differ
diff --git a/src/assets/images/blod-detail.png b/src/assets/images/blod-detail.png
new file mode 100644
index 0000000..15fc5d0
Binary files /dev/null and b/src/assets/images/blod-detail.png differ
diff --git a/src/assets/images/blog_d01.png b/src/assets/images/blog_d01.png
new file mode 100644
index 0000000..6a1d027
Binary files /dev/null and b/src/assets/images/blog_d01.png differ
diff --git a/src/assets/images/blog_d02.png b/src/assets/images/blog_d02.png
new file mode 100644
index 0000000..617d10b
Binary files /dev/null and b/src/assets/images/blog_d02.png differ
diff --git a/src/assets/images/blog_d03.png b/src/assets/images/blog_d03.png
new file mode 100644
index 0000000..9306fb4
Binary files /dev/null and b/src/assets/images/blog_d03.png differ
diff --git a/src/assets/images/blog_detail_main.png b/src/assets/images/blog_detail_main.png
new file mode 100644
index 0000000..8e7933b
Binary files /dev/null and b/src/assets/images/blog_detail_main.png differ
diff --git a/src/assets/images/blog_sub_01.png b/src/assets/images/blog_sub_01.png
new file mode 100644
index 0000000..d6c8ef4
Binary files /dev/null and b/src/assets/images/blog_sub_01.png differ
diff --git a/src/assets/images/blog_sub_02.png b/src/assets/images/blog_sub_02.png
new file mode 100644
index 0000000..0bb87b0
Binary files /dev/null and b/src/assets/images/blog_sub_02.png differ
diff --git a/src/assets/images/bread_crumb_bg.png b/src/assets/images/bread_crumb_bg.png
new file mode 100644
index 0000000..9a59ecd
Binary files /dev/null and b/src/assets/images/bread_crumb_bg.png differ
diff --git a/src/assets/images/bread_crumb_bg_one.png b/src/assets/images/bread_crumb_bg_one.png
new file mode 100644
index 0000000..fac1405
Binary files /dev/null and b/src/assets/images/bread_crumb_bg_one.png differ
diff --git a/src/assets/images/bread_crumb_bg_two.png b/src/assets/images/bread_crumb_bg_two.png
new file mode 100644
index 0000000..d42df3a
Binary files /dev/null and b/src/assets/images/bread_crumb_bg_two.png differ
diff --git a/src/assets/images/bredcrumb_overlay.png b/src/assets/images/bredcrumb_overlay.png
new file mode 100644
index 0000000..93bb57c
Binary files /dev/null and b/src/assets/images/bredcrumb_overlay.png differ
diff --git a/src/assets/images/call_icon.png b/src/assets/images/call_icon.png
new file mode 100644
index 0000000..3006695
Binary files /dev/null and b/src/assets/images/call_icon.png differ
diff --git a/src/assets/images/communication.png b/src/assets/images/communication.png
new file mode 100644
index 0000000..9140294
Binary files /dev/null and b/src/assets/images/communication.png differ
diff --git a/src/assets/images/contact_message_icon.png b/src/assets/images/contact_message_icon.png
new file mode 100644
index 0000000..06f3d51
Binary files /dev/null and b/src/assets/images/contact_message_icon.png differ
diff --git a/src/assets/images/countries-dark.png b/src/assets/images/countries-dark.png
new file mode 100644
index 0000000..830197b
Binary files /dev/null and b/src/assets/images/countries-dark.png differ
diff --git a/src/assets/images/countries-one.png b/src/assets/images/countries-one.png
new file mode 100644
index 0000000..7bc5127
Binary files /dev/null and b/src/assets/images/countries-one.png differ
diff --git a/src/assets/images/countries.png b/src/assets/images/countries.png
new file mode 100644
index 0000000..54c64bd
Binary files /dev/null and b/src/assets/images/countries.png differ
diff --git a/src/assets/images/create_account.jpg b/src/assets/images/create_account.jpg
new file mode 100644
index 0000000..bab8dd2
Binary files /dev/null and b/src/assets/images/create_account.jpg differ
diff --git a/src/assets/images/device-feature.png b/src/assets/images/device-feature.png
new file mode 100644
index 0000000..96a5106
Binary files /dev/null and b/src/assets/images/device-feature.png differ
diff --git a/src/assets/images/download-dark.png b/src/assets/images/download-dark.png
new file mode 100644
index 0000000..e84ea20
Binary files /dev/null and b/src/assets/images/download-dark.png differ
diff --git a/src/assets/images/download-one.png b/src/assets/images/download-one.png
new file mode 100644
index 0000000..8920d33
Binary files /dev/null and b/src/assets/images/download-one.png differ
diff --git a/src/assets/images/download-screen01.png b/src/assets/images/download-screen01.png
new file mode 100644
index 0000000..8788db9
Binary files /dev/null and b/src/assets/images/download-screen01.png differ
diff --git a/src/assets/images/download-screen02.png b/src/assets/images/download-screen02.png
new file mode 100644
index 0000000..75156ba
Binary files /dev/null and b/src/assets/images/download-screen02.png differ
diff --git a/src/assets/images/download.png b/src/assets/images/download.png
new file mode 100644
index 0000000..1d9cd9d
Binary files /dev/null and b/src/assets/images/download.png differ
diff --git a/src/assets/images/download_app.jpg b/src/assets/images/download_app.jpg
new file mode 100644
index 0000000..0a49777
Binary files /dev/null and b/src/assets/images/download_app.jpg differ
diff --git a/src/assets/images/enjoy_app.jpg b/src/assets/images/enjoy_app.jpg
new file mode 100644
index 0000000..7e4a8c0
Binary files /dev/null and b/src/assets/images/enjoy_app.jpg differ
diff --git a/src/assets/images/enjoy_app.png b/src/assets/images/enjoy_app.png
new file mode 100644
index 0000000..84d04aa
Binary files /dev/null and b/src/assets/images/enjoy_app.png differ
diff --git a/src/assets/images/envato.png b/src/assets/images/envato.png
new file mode 100644
index 0000000..81c23e4
Binary files /dev/null and b/src/assets/images/envato.png differ
diff --git a/src/assets/images/experts_01.png b/src/assets/images/experts_01.png
new file mode 100644
index 0000000..dc53a35
Binary files /dev/null and b/src/assets/images/experts_01.png differ
diff --git a/src/assets/images/experts_02.png b/src/assets/images/experts_02.png
new file mode 100644
index 0000000..ca69fd4
Binary files /dev/null and b/src/assets/images/experts_02.png differ
diff --git a/src/assets/images/experts_03.png b/src/assets/images/experts_03.png
new file mode 100644
index 0000000..c377674
Binary files /dev/null and b/src/assets/images/experts_03.png differ
diff --git a/src/assets/images/experts_04.png b/src/assets/images/experts_04.png
new file mode 100644
index 0000000..7f6717c
Binary files /dev/null and b/src/assets/images/experts_04.png differ
diff --git a/src/assets/images/features1.png b/src/assets/images/features1.png
new file mode 100644
index 0000000..ea9058e
Binary files /dev/null and b/src/assets/images/features1.png differ
diff --git a/src/assets/images/features2.png b/src/assets/images/features2.png
new file mode 100644
index 0000000..111554e
Binary files /dev/null and b/src/assets/images/features2.png differ
diff --git a/src/assets/images/features3.png b/src/assets/images/features3.png
new file mode 100644
index 0000000..daa98a8
Binary files /dev/null and b/src/assets/images/features3.png differ
diff --git a/src/assets/images/features_frame.png b/src/assets/images/features_frame.png
new file mode 100644
index 0000000..108be64
Binary files /dev/null and b/src/assets/images/features_frame.png differ
diff --git a/src/assets/images/featurescreen.png b/src/assets/images/featurescreen.png
new file mode 100644
index 0000000..4ae1003
Binary files /dev/null and b/src/assets/images/featurescreen.png differ
diff --git a/src/assets/images/followers-dark.png b/src/assets/images/followers-dark.png
new file mode 100644
index 0000000..643c8f3
Binary files /dev/null and b/src/assets/images/followers-dark.png differ
diff --git a/src/assets/images/followers-one.png b/src/assets/images/followers-one.png
new file mode 100644
index 0000000..f0a2213
Binary files /dev/null and b/src/assets/images/followers-one.png differ
diff --git a/src/assets/images/followers.png b/src/assets/images/followers.png
new file mode 100644
index 0000000..5158719
Binary files /dev/null and b/src/assets/images/followers.png differ
diff --git a/src/assets/images/footer_bg.png b/src/assets/images/footer_bg.png
new file mode 100644
index 0000000..d42df3a
Binary files /dev/null and b/src/assets/images/footer_bg.png differ
diff --git a/src/assets/images/footer_logo-one.png b/src/assets/images/footer_logo-one.png
new file mode 100644
index 0000000..8f54056
Binary files /dev/null and b/src/assets/images/footer_logo-one.png differ
diff --git a/src/assets/images/footer_logo.png b/src/assets/images/footer_logo.png
new file mode 100644
index 0000000..0578f44
Binary files /dev/null and b/src/assets/images/footer_logo.png differ
diff --git a/src/assets/images/functional.png b/src/assets/images/functional.png
new file mode 100644
index 0000000..e91f916
Binary files /dev/null and b/src/assets/images/functional.png differ
diff --git a/src/assets/images/go_top-one.png b/src/assets/images/go_top-one.png
new file mode 100644
index 0000000..7cfc12f
Binary files /dev/null and b/src/assets/images/go_top-one.png differ
diff --git a/src/assets/images/go_top.png b/src/assets/images/go_top.png
new file mode 100644
index 0000000..3186901
Binary files /dev/null and b/src/assets/images/go_top.png differ
diff --git a/src/assets/images/go_top2.png b/src/assets/images/go_top2.png
new file mode 100644
index 0000000..258951e
Binary files /dev/null and b/src/assets/images/go_top2.png differ
diff --git a/src/assets/images/google.png b/src/assets/images/google.png
new file mode 100644
index 0000000..aec284e
Binary files /dev/null and b/src/assets/images/google.png differ
diff --git a/src/assets/images/googleplay_blue.png b/src/assets/images/googleplay_blue.png
new file mode 100644
index 0000000..37ad9ea
Binary files /dev/null and b/src/assets/images/googleplay_blue.png differ
diff --git a/src/assets/images/googleplay_white.png b/src/assets/images/googleplay_white.png
new file mode 100644
index 0000000..a737edf
Binary files /dev/null and b/src/assets/images/googleplay_white.png differ
diff --git a/src/assets/images/hero-bg.png b/src/assets/images/hero-bg.png
new file mode 100644
index 0000000..bbf65e5
Binary files /dev/null and b/src/assets/images/hero-bg.png differ
diff --git a/src/assets/images/hero-image-1.png b/src/assets/images/hero-image-1.png
new file mode 100644
index 0000000..634d818
Binary files /dev/null and b/src/assets/images/hero-image-1.png differ
diff --git a/src/assets/images/hero-image-2.png b/src/assets/images/hero-image-2.png
new file mode 100644
index 0000000..a2e2d85
Binary files /dev/null and b/src/assets/images/hero-image-2.png differ
diff --git a/src/assets/images/hero-image-3.png b/src/assets/images/hero-image-3.png
new file mode 100644
index 0000000..72dafdb
Binary files /dev/null and b/src/assets/images/hero-image-3.png differ
diff --git a/src/assets/images/hero-image-4.png b/src/assets/images/hero-image-4.png
new file mode 100644
index 0000000..b406c6d
Binary files /dev/null and b/src/assets/images/hero-image-4.png differ
diff --git a/src/assets/images/hero-image-5.png b/src/assets/images/hero-image-5.png
new file mode 100644
index 0000000..c107059
Binary files /dev/null and b/src/assets/images/hero-image-5.png differ
diff --git a/src/assets/images/hero-image-one.png b/src/assets/images/hero-image-one.png
new file mode 100644
index 0000000..7eeccd9
Binary files /dev/null and b/src/assets/images/hero-image-one.png differ
diff --git a/src/assets/images/hero-image.png b/src/assets/images/hero-image.png
new file mode 100644
index 0000000..5663aa5
Binary files /dev/null and b/src/assets/images/hero-image.png differ
diff --git a/src/assets/images/herobg-footer.png b/src/assets/images/herobg-footer.png
new file mode 100644
index 0000000..38837fa
Binary files /dev/null and b/src/assets/images/herobg-footer.png differ
diff --git a/src/assets/images/herobg.png b/src/assets/images/herobg.png
new file mode 100644
index 0000000..38837fa
Binary files /dev/null and b/src/assets/images/herobg.png differ
diff --git a/src/assets/images/icon_bg.png b/src/assets/images/icon_bg.png
new file mode 100644
index 0000000..f968fcc
Binary files /dev/null and b/src/assets/images/icon_bg.png differ
diff --git a/src/assets/images/inner_page_banner_overlay.svg b/src/assets/images/inner_page_banner_overlay.svg
new file mode 100644
index 0000000..b6ec148
--- /dev/null
+++ b/src/assets/images/inner_page_banner_overlay.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1879.8 203" enable-background="new 0 0 1879.8 203" xml:space="preserve">
+<path fill="#F6F4FE" d="M0,0c6.1,7.9,11.9,16,18.3,23.6C34.6,43,53.6,59.4,74.3,73.8c49.4,34.4,104.4,55.8,162.5,69.8
+	c32.8,7.9,66,12.9,99.5,16.4c44,4.6,88.1,4.7,132.2,3.5c26.6-0.7,53.1-3.4,79.6-5.5c26.9-2.2,53.7-4.7,80.5-7.3
+	c25.3-2.4,50.7-5.1,76-7.6c24.7-2.5,49.3-4.8,74-7.4c27.6-2.8,55.3-5.8,82.9-8.6c21.5-2.2,43.1-4.3,64.6-6.2
+	c22.7-2.1,45.4-4.1,68.1-5.8c16.6-1.3,33.2-2.6,49.8-3.1c25.1-0.8,50.3-1.3,75.4-1.1c56.5,0.5,111.6,9.1,165.5,26.7
+	c56.6,18.5,114.4,32.4,173.2,41.9c29.2,4.7,58.7,7.9,88.1,11.4c31.7,3.7,63.5,3.9,95.3,2.7c44.3-1.7,87.9-8.1,129.4-24.7
+	c44.4-17.8,79.7-46,100.6-90.1c2.9-6.2,5.4-12.5,8.1-18.8c0,47.7,0,95.3,0,143c-626.6,0-1253.2,0-1879.8,0C0,135.3,0,67.6,0,0z"/>
+</svg>
diff --git a/src/assets/images/inner_page_ovelay_cross-one.svg b/src/assets/images/inner_page_ovelay_cross-one.svg
new file mode 100644
index 0000000..2987999
--- /dev/null
+++ b/src/assets/images/inner_page_ovelay_cross-one.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1879.8 219" enable-background="new 0 0 1879.8 219" xml:space="preserve">
+<polygon opacity="0.3" fill="#FFFFFF" points="0,102.5 1209.9,209.5 1879.8,0 1879.8,219 0,219 "/>
+<polygon fill="#F6F4FE" points="0,142.5 1209.9,199.5 1879.8,80 1879.8,219 0,219 "/>
+</svg>
diff --git a/src/assets/images/live-chat.png b/src/assets/images/live-chat.png
new file mode 100644
index 0000000..dc96945
Binary files /dev/null and b/src/assets/images/live-chat.png differ
diff --git a/src/assets/images/location_icon.png b/src/assets/images/location_icon.png
new file mode 100644
index 0000000..36a9587
Binary files /dev/null and b/src/assets/images/location_icon.png differ
diff --git a/src/assets/images/mail_icon.png b/src/assets/images/mail_icon.png
new file mode 100644
index 0000000..77d4908
Binary files /dev/null and b/src/assets/images/mail_icon.png differ
diff --git a/src/assets/images/message_icon.png b/src/assets/images/message_icon.png
new file mode 100644
index 0000000..4ffeb3a
Binary files /dev/null and b/src/assets/images/message_icon.png differ
diff --git a/src/assets/images/mobile_frame.png b/src/assets/images/mobile_frame.png
new file mode 100644
index 0000000..f7f5249
Binary files /dev/null and b/src/assets/images/mobile_frame.png differ
diff --git a/src/assets/images/mobile_frame1.png b/src/assets/images/mobile_frame1.png
new file mode 100644
index 0000000..1c5864f
Binary files /dev/null and b/src/assets/images/mobile_frame1.png differ
diff --git a/src/assets/images/mobile_frame_svg.svg b/src/assets/images/mobile_frame_svg.svg
new file mode 100644
index 0000000..e05c0a2
--- /dev/null
+++ b/src/assets/images/mobile_frame_svg.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 383 780" enable-background="new 0 0 383 780" xml:space="preserve">
+<path fill="#1D1D1B" d="M383,191h-1.5V49.9c0-27.5-22.4-49.9-49.9-49.9H51.4C23.9,0,1.5,22.4,1.5,49.9v51.6H0V132h1.5v24.3H0v60.6
+	h1.5v16.9H0v60.6h1.5v435.7c0,27.5,22.4,49.9,49.9,49.9h280.2c27.5,0,49.9-22.4,49.9-49.9V290h1.5V191z M214.5,27.5
+	c0,2.1-1.7,3.8-3.8,3.8h-38.5c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8h38.5C212.8,23.8,214.5,25.4,214.5,27.5z M369.5,730.1
+	c0,20.9-17,37.9-37.9,37.9H51.4c-20.9,0-37.9-17-37.9-37.9V49.9C13.5,29,30.5,12,51.4,12h43.4v13.3c0,10.9,8.8,19.7,19.7,19.7h154
+	c10.9,0,19.7-8.8,19.7-19.7V12h43.4c20.9,0,37.9,17,37.9,37.9V730.1z"/>
+</svg>
diff --git a/src/assets/images/modern01.png b/src/assets/images/modern01.png
new file mode 100644
index 0000000..b57d259
Binary files /dev/null and b/src/assets/images/modern01.png differ
diff --git a/src/assets/images/modern02.png b/src/assets/images/modern02.png
new file mode 100644
index 0000000..97a72c1
Binary files /dev/null and b/src/assets/images/modern02.png differ
diff --git a/src/assets/images/modern03.png b/src/assets/images/modern03.png
new file mode 100644
index 0000000..43b3382
Binary files /dev/null and b/src/assets/images/modern03.png differ
diff --git a/src/assets/images/paypal.png b/src/assets/images/paypal.png
new file mode 100644
index 0000000..24b59cc
Binary files /dev/null and b/src/assets/images/paypal.png differ
diff --git a/src/assets/images/play_black.png b/src/assets/images/play_black.png
new file mode 100644
index 0000000..1cd3c04
Binary files /dev/null and b/src/assets/images/play_black.png differ
diff --git a/src/assets/images/play_icon.png b/src/assets/images/play_icon.png
new file mode 100644
index 0000000..feb549d
Binary files /dev/null and b/src/assets/images/play_icon.png differ
diff --git a/src/assets/images/play_icon1.png b/src/assets/images/play_icon1.png
new file mode 100644
index 0000000..028255e
Binary files /dev/null and b/src/assets/images/play_icon1.png differ
diff --git a/src/assets/images/play_icon22.png b/src/assets/images/play_icon22.png
new file mode 100644
index 0000000..377debf
Binary files /dev/null and b/src/assets/images/play_icon22.png differ
diff --git a/src/assets/images/premium-one.png b/src/assets/images/premium-one.png
new file mode 100644
index 0000000..6bb9f4b
Binary files /dev/null and b/src/assets/images/premium-one.png differ
diff --git a/src/assets/images/premium.png b/src/assets/images/premium.png
new file mode 100644
index 0000000..69e7789
Binary files /dev/null and b/src/assets/images/premium.png differ
diff --git a/src/assets/images/query_bg.png b/src/assets/images/query_bg.png
new file mode 100644
index 0000000..80013e5
Binary files /dev/null and b/src/assets/images/query_bg.png differ
diff --git a/src/assets/images/quote_icon.png b/src/assets/images/quote_icon.png
new file mode 100644
index 0000000..3a20178
Binary files /dev/null and b/src/assets/images/quote_icon.png differ
diff --git a/src/assets/images/review_01.png b/src/assets/images/review_01.png
new file mode 100644
index 0000000..930df67
Binary files /dev/null and b/src/assets/images/review_01.png differ
diff --git a/src/assets/images/review_02.png b/src/assets/images/review_02.png
new file mode 100644
index 0000000..0403ada
Binary files /dev/null and b/src/assets/images/review_02.png differ
diff --git a/src/assets/images/review_03.png b/src/assets/images/review_03.png
new file mode 100644
index 0000000..aaa9fb0
Binary files /dev/null and b/src/assets/images/review_03.png differ
diff --git a/src/assets/images/review_04.png b/src/assets/images/review_04.png
new file mode 100644
index 0000000..0527976
Binary files /dev/null and b/src/assets/images/review_04.png differ
diff --git a/src/assets/images/review_05.png b/src/assets/images/review_05.png
new file mode 100644
index 0000000..83865d7
Binary files /dev/null and b/src/assets/images/review_05.png differ
diff --git a/src/assets/images/review_06.png b/src/assets/images/review_06.png
new file mode 100644
index 0000000..4b6f9da
Binary files /dev/null and b/src/assets/images/review_06.png differ
diff --git a/src/assets/images/review_07.png b/src/assets/images/review_07.png
new file mode 100644
index 0000000..b1e28f9
Binary files /dev/null and b/src/assets/images/review_07.png differ
diff --git a/src/assets/images/review_08.png b/src/assets/images/review_08.png
new file mode 100644
index 0000000..25f8bcf
Binary files /dev/null and b/src/assets/images/review_08.png differ
diff --git a/src/assets/images/review_09.png b/src/assets/images/review_09.png
new file mode 100644
index 0000000..f107f16
Binary files /dev/null and b/src/assets/images/review_09.png differ
diff --git a/src/assets/images/reviews-dark.png b/src/assets/images/reviews-dark.png
new file mode 100644
index 0000000..f009ea1
Binary files /dev/null and b/src/assets/images/reviews-dark.png differ
diff --git a/src/assets/images/reviews-one.png b/src/assets/images/reviews-one.png
new file mode 100644
index 0000000..62459b6
Binary files /dev/null and b/src/assets/images/reviews-one.png differ
diff --git a/src/assets/images/reviews.png b/src/assets/images/reviews.png
new file mode 100644
index 0000000..ac1bc38
Binary files /dev/null and b/src/assets/images/reviews.png differ
diff --git a/src/assets/images/right_icon.png b/src/assets/images/right_icon.png
new file mode 100644
index 0000000..704fee0
Binary files /dev/null and b/src/assets/images/right_icon.png differ
diff --git a/src/assets/images/screen-1.png b/src/assets/images/screen-1.png
new file mode 100644
index 0000000..ad0570a
Binary files /dev/null and b/src/assets/images/screen-1.png differ
diff --git a/src/assets/images/screen-2.png b/src/assets/images/screen-2.png
new file mode 100644
index 0000000..cb5385e
Binary files /dev/null and b/src/assets/images/screen-2.png differ
diff --git a/src/assets/images/screen-3.png b/src/assets/images/screen-3.png
new file mode 100644
index 0000000..683463e
Binary files /dev/null and b/src/assets/images/screen-3.png differ
diff --git a/src/assets/images/screen-4.png b/src/assets/images/screen-4.png
new file mode 100644
index 0000000..e437842
Binary files /dev/null and b/src/assets/images/screen-4.png differ
diff --git a/src/assets/images/screen-5.png b/src/assets/images/screen-5.png
new file mode 100644
index 0000000..eeecd2b
Binary files /dev/null and b/src/assets/images/screen-5.png differ
diff --git a/src/assets/images/screen.png b/src/assets/images/screen.png
new file mode 100644
index 0000000..e9eb2f4
Binary files /dev/null and b/src/assets/images/screen.png differ
diff --git a/src/assets/images/screen1.png b/src/assets/images/screen1.png
new file mode 100644
index 0000000..a24a9fc
Binary files /dev/null and b/src/assets/images/screen1.png differ
diff --git a/src/assets/images/section-bg.png b/src/assets/images/section-bg.png
new file mode 100644
index 0000000..bbf65e5
Binary files /dev/null and b/src/assets/images/section-bg.png differ
diff --git a/src/assets/images/secure.png b/src/assets/images/secure.png
new file mode 100644
index 0000000..e33eec8
Binary files /dev/null and b/src/assets/images/secure.png differ
diff --git a/src/assets/images/secure_data.png b/src/assets/images/secure_data.png
new file mode 100644
index 0000000..f274091
Binary files /dev/null and b/src/assets/images/secure_data.png differ
diff --git a/src/assets/images/shield_icon.png b/src/assets/images/shield_icon.png
new file mode 100644
index 0000000..3310a4e
Binary files /dev/null and b/src/assets/images/shield_icon.png differ
diff --git a/src/assets/images/shopboat.png b/src/assets/images/shopboat.png
new file mode 100644
index 0000000..9e82582
Binary files /dev/null and b/src/assets/images/shopboat.png differ
diff --git a/src/assets/images/slack.png b/src/assets/images/slack.png
new file mode 100644
index 0000000..15ba047
Binary files /dev/null and b/src/assets/images/slack.png differ
diff --git a/src/assets/images/spoty.png b/src/assets/images/spoty.png
new file mode 100644
index 0000000..5026ea3
Binary files /dev/null and b/src/assets/images/spoty.png differ
diff --git a/src/assets/images/standard-one.png b/src/assets/images/standard-one.png
new file mode 100644
index 0000000..9bf8128
Binary files /dev/null and b/src/assets/images/standard-one.png differ
diff --git a/src/assets/images/standard.png b/src/assets/images/standard.png
new file mode 100644
index 0000000..ac294b4
Binary files /dev/null and b/src/assets/images/standard.png differ
diff --git a/src/assets/images/step1.png b/src/assets/images/step1.png
new file mode 100644
index 0000000..b105f70
Binary files /dev/null and b/src/assets/images/step1.png differ
diff --git a/src/assets/images/step2.png b/src/assets/images/step2.png
new file mode 100644
index 0000000..5920f13
Binary files /dev/null and b/src/assets/images/step2.png differ
diff --git a/src/assets/images/step3.png b/src/assets/images/step3.png
new file mode 100644
index 0000000..7039347
Binary files /dev/null and b/src/assets/images/step3.png differ
diff --git a/src/assets/images/story01.png b/src/assets/images/story01.png
new file mode 100644
index 0000000..7f03170
Binary files /dev/null and b/src/assets/images/story01.png differ
diff --git a/src/assets/images/story02.png b/src/assets/images/story02.png
new file mode 100644
index 0000000..c776049
Binary files /dev/null and b/src/assets/images/story02.png differ
diff --git a/src/assets/images/story03.png b/src/assets/images/story03.png
new file mode 100644
index 0000000..7be4826
Binary files /dev/null and b/src/assets/images/story03.png differ
diff --git a/src/assets/images/story04.png b/src/assets/images/story04.png
new file mode 100644
index 0000000..7cce24a
Binary files /dev/null and b/src/assets/images/story04.png differ
diff --git a/src/assets/images/story05.png b/src/assets/images/story05.png
new file mode 100644
index 0000000..51d478a
Binary files /dev/null and b/src/assets/images/story05.png differ
diff --git a/src/assets/images/story06.png b/src/assets/images/story06.png
new file mode 100644
index 0000000..fa42166
Binary files /dev/null and b/src/assets/images/story06.png differ
diff --git a/src/assets/images/story07.png b/src/assets/images/story07.png
new file mode 100644
index 0000000..2ef6c06
Binary files /dev/null and b/src/assets/images/story07.png differ
diff --git a/src/assets/images/story08.png b/src/assets/images/story08.png
new file mode 100644
index 0000000..8d405b4
Binary files /dev/null and b/src/assets/images/story08.png differ
diff --git a/src/assets/images/story09.png b/src/assets/images/story09.png
new file mode 100644
index 0000000..c3a151f
Binary files /dev/null and b/src/assets/images/story09.png differ
diff --git a/src/assets/images/support.png b/src/assets/images/support.png
new file mode 100644
index 0000000..5d924db
Binary files /dev/null and b/src/assets/images/support.png differ
diff --git a/src/assets/images/testimonial_bg.png b/src/assets/images/testimonial_bg.png
new file mode 100644
index 0000000..5f7e437
Binary files /dev/null and b/src/assets/images/testimonial_bg.png differ
diff --git a/src/assets/images/testimonial_user1.png b/src/assets/images/testimonial_user1.png
new file mode 100644
index 0000000..1bde4f0
Binary files /dev/null and b/src/assets/images/testimonial_user1.png differ
diff --git a/src/assets/images/testimonial_user2.png b/src/assets/images/testimonial_user2.png
new file mode 100644
index 0000000..470779b
Binary files /dev/null and b/src/assets/images/testimonial_user2.png differ
diff --git a/src/assets/images/testimonial_user3.png b/src/assets/images/testimonial_user3.png
new file mode 100644
index 0000000..30c2ca8
Binary files /dev/null and b/src/assets/images/testimonial_user3.png differ
diff --git a/src/assets/images/unlimited-one.png b/src/assets/images/unlimited-one.png
new file mode 100644
index 0000000..9dd320f
Binary files /dev/null and b/src/assets/images/unlimited-one.png differ
diff --git a/src/assets/images/unlimited.png b/src/assets/images/unlimited.png
new file mode 100644
index 0000000..52cdf7a
Binary files /dev/null and b/src/assets/images/unlimited.png differ
diff --git a/src/assets/images/used01.png b/src/assets/images/used01.png
new file mode 100644
index 0000000..6b3c62d
Binary files /dev/null and b/src/assets/images/used01.png differ
diff --git a/src/assets/images/used02.png b/src/assets/images/used02.png
new file mode 100644
index 0000000..630a8c6
Binary files /dev/null and b/src/assets/images/used02.png differ
diff --git a/src/assets/images/used03.png b/src/assets/images/used03.png
new file mode 100644
index 0000000..83bac37
Binary files /dev/null and b/src/assets/images/used03.png differ
diff --git a/src/assets/images/used04.png b/src/assets/images/used04.png
new file mode 100644
index 0000000..8f1db79
Binary files /dev/null and b/src/assets/images/used04.png differ
diff --git a/src/assets/images/yt_thumb.png b/src/assets/images/yt_thumb.png
new file mode 100644
index 0000000..62ebd03
Binary files /dev/null and b/src/assets/images/yt_thumb.png differ
diff --git a/src/components/lnd/Lnd.js b/src/components/lnd/Lnd.js
index 4d2e6b3..29b932f 100644
--- a/src/components/lnd/Lnd.js
+++ b/src/components/lnd/Lnd.js
@@ -1,26 +1,359 @@
-import React from 'react'
-import useToggle from '../../Hooks/useToggle';
-import Drawer from '../Mobile/Drawer';
-import HomeOneHeader from '../HomeOne/HomeOneHeader';
-import FooterHomeOne from '../HomeOne/FooterHomeOne';
-import BackToTop from '../BackToTop';
+// import React from 'react'
+// import useToggle from '../../Hooks/useToggle';
+// import Drawer from '../Mobile/Drawer';
+// import HomeOneHeader from '../HomeOne/HomeOneHeader';
+// import FooterHomeOne from '../HomeOne/FooterHomeOne';
+// import BackToTop from '../BackToTop';
+//
+//
+// function Lnd() {
+//     const [drawer, drawerAction] = useToggle(false);
+//
+//     return (
+//         <>
+//             <Drawer drawer={drawer} action={drawerAction.toggle} />
+//             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+//             <HomeOneHeader action={drawerAction.toggle} />
+//             <div className='min-vh-100 d-flex flex-column justify-content-center align-items-center'>
+//                 <p>Dummy Empty Page</p>
+//             </div>
+//             <FooterHomeOne />
+//             <BackToTop />
+//         </>
+//     );
+// }
+//
+// export default Lnd
 
 
-function Lnd() {
-    const [drawer, drawerAction] = useToggle(false);
+import React , {useState, useEffect} from 'react'
+//import { HashLink as Link } from 'react-router-hash-link';
+import Design from './LndParts/Design/Main'
+import Work from './LndParts/Work/Main'
+//import Testimonial from './LndParts/Testimonial/Main'
+import AboutApp from './LndParts/AboutApp/Main'
+// import Trusted from './LndParts/Trusted/Main'
+// import Pricing from './LndParts/Pricing/Main'
+import Faq from './LndParts/Faq/Main'
+// import Interface from './LndParts/Interface/Main'
+import Download from './LndParts/Download/Main'
+import Story from './LndParts/Story/Main'
+
+
+const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
+
+    const [ytShow , setytShow] = useState (false)
+    useEffect(() => {
+        setfooter({f2 : true})
+        setnavbar({n3 : true})
+        setbrdcum({b2 : true})
+        localStorage.setItem("navbar","darkhome")
+
+    }, [])
+
 
     return (
         <>
-            <Drawer drawer={drawer} action={drawerAction.toggle} />
-            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
-            <HomeOneHeader action={drawerAction.toggle} />
-            <div className='min-vh-100 d-flex flex-column justify-content-center align-items-center'>
-                <p>Dummy Empty Page</p>
+
+
+            {/* <div className="home-dark-block">
+        <header style={{position : "fixed"}}>
+            <div className="container">
+                <nav className="navbar navbar-expand-lg">
+                    <Link to="/" className="navbar-brand">
+                        <img src="assets/images/logo.png" alt="image" />
+                    </Link>
+                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                        <div className={`toggle-wrap ${mobile && "active"}`} onClick = {() => setmobile(true)}>
+                            <span className="toggle-bar" onClick = {() => setmobile(false)}></span>
+                        </div>
+                    </button>
+
+                    <div className={`collapse navbar-collapse ${mobile && "show"}`}>
+                        <ul className="navbar-nav ml-auto">
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link" >Home</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                <ul>
+                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/home-dark">Home Dark Hero</Link></li>
+                                    <li><Link to="/home-wave">Home Wave </Link></li>
+                                    <li><Link to="/home-gredient">Home Gredient</Link></li>
+                                    <li><Link to="/home-video">Home Video</Link></li>
+                                    <li><Link to="/home-video2">Home Video 2</Link></li>
+                                </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link smooth to="#features" className="nav-link">Features</Link>
+                            </li>
+                            <li className="nav-item">
+                                <Link smooth to="#how_it_work" className="nav-link">How it works</Link>
+                            </li>
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link">Pages</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                    <ul>
+                                        <li><Link to="/about">About Us</Link></li>
+                                        <li><Link to="/review">Reviews</Link></li>
+                                        <li><Link to="/contact">Contact Us</Link></li>
+                                        <li><Link to="/faq">Faq</Link></li>
+                                        <li><Link to="/sign-in">Sign In</Link></li>
+                                        <li><Link to="/sign-up">Sign Up</Link></li>
+                                        <li><Link to="/blog">Blog List</Link></li>
+                                        <li><Link to="/blog-single">Blog Single</Link></li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/pricing" className="nav-link">Pricing</Link>
+                            </li>
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link">Blog</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                <ul>
+                                    <li><Link to="/blog">Blog List</Link></li>
+                                    <li><Link to="/blog-single">Blog Single</Link></li>
+                                </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/contact" className="nav-link" >Contact</Link>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                            </li>
+                        </ul>
+                    </div>
+                </nav>
             </div>
-            <FooterHomeOne />
-            <BackToTop />
+        </header>
+        </div>  */}
+            <section className="banner_section homedark-banner">
+                <div className="container">
+                    <div className="row">
+                        <span className="banner_shape1"> <img src="assets/images/banner-shape-one1.png" alt="image" /> </span>
+                        <span className="banner_shape2"> <img src="assets/images/banner-shape2two.png" alt="image" /> </span>
+                        <span className="banner_shape3"> <img src="assets/images/banner-shapethree3.png" alt="image" /> </span>
+
+                        <div className="col-lg-8 col-md-12 mx-auto"  data-aos="fade-right" data-aos-duration="1500">
+                            <div className="banner_text">
+                                <h1>Best way to manage your customers easily.</h1>
+                                <p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.
+                                </p>
+                            </div>
+                            <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
+                                <div className="thumbnil">
+                                    <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="play_btn">
+                            <img src="assets/images/play_icon.png" alt="image" />
+                            <div className="waves-block">
+                            <div className="waves wave-1"></div>
+                            <div className="waves wave-2"></div>
+                            <div className="waves wave-3"></div>
+                            </div>
+                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="container-fluid"  data-aos="fade-in" data-aos-duration="1500">
+                    <div className="banner_images">
+                        <div className="row d-flex justify-content-center">
+                            <div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
+                                <div className="banner_screen screen1">
+                                    <img className="moving_position_animatin" src="assets/images/hero-image-5.png" alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
+                                <div className="banner_screen screen2">
+                                    <img className="moving_animation" src="assets/images/hero-image-4.png" alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="col-md-4 col-lg-3 col-sm-4 col-xs-4">
+                                <div className="banner_screen screen3">
+                                    <img className="moving_position_animatin" src="assets/images/hero-image-1.png" alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
+                                <div className="banner_screen screen4">
+                                    <img className="moving_animation" src="assets/images/hero-image-2.png" alt="image" />
+                                </div>
+                            </div>
+                            <div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
+                                <div className="banner_screen screen5">
+                                    <img className="moving_position_animatin" src="assets/images/hero-image-3.png" alt="image" />
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <section className="row_am download_section homedark-download">
+                <div className="container">
+                    <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
+                        <li>
+                            <a href="#" className="app_store">
+                                <img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
+                                <img className="white_img" src="assets/images/appstore_white.png" alt="image" />
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
+                                <img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+            <section className="row_am statistic_section">
+                <div className="container">
+                    <ul className="app_statstic" id="counter" >
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
+                            <li>
+                                <div className="icon">
+                                    <img src="assets/images/download-dark.png" alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
+                                    <p>Download</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
+                            <li>
+                                <div className="icon">
+                                    <img src="assets/images/followers-dark.png" alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
+                                    <p>Followers</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
+                            <li>
+                                <div className="icon">
+                                    <img src="assets/images/reviews-dark.png" alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
+                                    <p>Reviews</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
+                            <li>
+                                <div className="icon">
+                                    <img src="assets/images/countries-dark.png" alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
+                                    <p>Countries</p>
+                                </div>
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+            </section>
+            <section className="row_am features_section homedark-features" id="features">
+                <div className="container">
+                    <div className="features_inner">
+                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                            <h2><span>Features</span> that makes app different!</h2>
+                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy</p>
+                        </div>
+                        <div className="features_block">
+                            <div className="row">
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
+                                        <div className="image">
+                                            <img src="assets/images/features1.png" alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Secure data</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
+                                        <div className="image">
+                                            <img src="assets/images/features2.png" alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Automate everything</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
+                                        <div className="image">
+                                            <img src="assets/images/features3.png" alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Secure data</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+            </section>
+            < AboutApp dark = {true}/>
+            <Design />
+            <Work dark = {true}/>
+            {/*<Testimonial />*/}
+            {/*<Trusted />*/}
+            {/*<Pricing />*/}
+            <Faq/>
+            {/*<Interface/>*/}
+            <Download />
+            <Story />
+            {ytShow &&
+                <>
+                    <div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
+                        <div className="modal-dialog" role="document">
+                            <div className="modal-content">
+                                <button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
+                                    <i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
+                                </button>
+                                <div className="modal-body">
+                                    <div id="video-container" className="video-container">
+                                        <iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
+                                    </div>
+                                </div>
+                                <div className="modal-footer">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="purple_backdrop"></div>
+                </>}
         </>
-    );
+    )
 }
 
 export default Lnd
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/AboutApp/Main.js b/src/components/lnd/LndParts/AboutApp/Main.js
new file mode 100644
index 0000000..3f61b23
--- /dev/null
+++ b/src/components/lnd/LndParts/AboutApp/Main.js
@@ -0,0 +1,103 @@
+import { Link } from 'react-router-dom'
+import React from 'react'
+import frame from '../../../../assets/images/about-frame.png'
+import screen from '../../../../assets/images/about-screen.png'
+import img1 from '../../../../assets/images/download.png'
+import img2 from '../../../../assets/images/followers.png'
+import img3 from '../../../../assets/images/reviews.png'
+import img4 from '../../../../assets/images/countries.png'
+
+const Main = ({video , dark}) => {
+  return (
+    <>
+        <section className="row_am about_app_section">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-6">
+                        <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                        <div className="frame_img">
+                            <img className="moving_position_animatin" src={frame} alt="image"/>
+                        </div>
+                        <div className="screen_img">
+                            <img className="moving_animation" src={screen} alt="image" />
+                        </div>
+                        </div>
+                    </div>                   
+                    <div className="col-lg-6">
+                        <div className="about_text">
+                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                            <h2>Some awesome words <span>about app.</span></h2>
+                            <p>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
+                            industrys standard dummy text ever since the when an unknown printer took a galley of type and. Lorem
+                            ipsum dolor sit amet.
+                            </p>
+                        </div>
+                        {dark ?
+                            <ul className="list">
+                                <li data-aos="fade-up" data-aos-duration="1500">
+                                    <i className="icofont-verification-check"></i> Simply dummy text of the printing and 
+                                </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
+                                <i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the 
+                                </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
+                                    <i className="icofont-verification-check"></i> Industrys standard dummy text 
+                                </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
+                                    <i className="icofont-verification-check"></i> Simply dummy text of the printing and 
+                                </li>
+                                <li data-aos="fade-up" data-aos-duration="1500">
+                                    <i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the 
+                                </li>
+                             </ul>
+                             :
+                            <ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
+                                <li>
+                                <div className="icon">
+                                {video ? <img src="assets/images/download-one.png" alt="image" /> : <img src={img1} alt="image" />} 
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
+                                    <p>Download</p>
+                                </div>
+                                </li>
+                                <li>
+                                <div className="icon">
+                                {video ? <img src="assets/images/followers-one.png" alt="image" /> : <img src={img2} alt="image" /> }
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
+                                    <p>Followers</p>
+                                </div>
+                                </li>
+                                <li>
+                                <div className="icon">
+                                    {video ? <img src="assets/images/reviews-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
+                                    <p>Reviews</p>
+                                </div>
+                                </li>
+                                <li>
+                                <div className="icon">
+                                    {video ? <img src="assets/images/countries-one.png" alt="image" /> : <img src={img4} alt="image" /> }
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
+                                    <p>Countries</p>
+                                </div>
+                                </li>
+                            </ul>}
+                            <Link to="/contact" className="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">START FREE TRIAL</Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section> 
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Design/Main.js b/src/components/lnd/LndParts/Design/Main.js
new file mode 100644
index 0000000..7e680a3
--- /dev/null
+++ b/src/components/lnd/LndParts/Design/Main.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import img1 from '../../../../assets/images/modern01.png'
+import img2 from '../../../../assets/images/secure_data.png'
+import img3 from '../../../../assets/images/modern02.png'
+import img4 from '../../../../assets/images/modern03.png'
+
+
+const Main = ({gredient}) => {
+  return (
+    <>
+        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
+            {gredient &&
+            <div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-6">
+                        <div className="ui_text">
+                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                            <h2>Beautiful design with <span>modern UI</span></h2>
+                            <p>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
+                            industrys standard dummy text ever since the when an unknown printer took a galley of type and.
+                            </p>
+                        </div>
+                        <ul className="design_block">
+                            <li data-aos="fade-up" data-aos-duration="1500">
+                            <h4>Carefully designed</h4>
+                            <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
+                            </li>
+                            <li data-aos="fade-up" data-aos-duration="1500">
+                            <h4>Seamless Sync</h4>
+                            <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
+                            </li>
+                            <li data-aos="fade-up" data-aos-duration="1500">
+                            <h4>Access Drive</h4>
+                            <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
+                                setting.</p>
+                            </li>
+                        </ul>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
+                        <div className="left_img">
+                            <img className="moving_position_animatin" src={img1} alt="image" />
+                        </div>
+                        <div className="right_img">
+                            <img className="moving_position_animatin" src={img2} alt="image" />
+                            <img className="moving_position_animatin" src={img3} alt="image" />
+                            <img className="moving_position_animatin" src={img4} alt="image" />
+                        </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Download/Main.js b/src/components/lnd/LndParts/Download/Main.js
new file mode 100644
index 0000000..bae2dff
--- /dev/null
+++ b/src/components/lnd/LndParts/Download/Main.js
@@ -0,0 +1,82 @@
+import { Link } from 'react-router-dom'
+import React, {useState} from 'react'
+import img from '../../../../assets/images/anim_line.png'
+import blueapp from '../../../../assets/images/appstore_blue.png'
+import blue from '../../../../assets/images/googleplay_blue.png'
+import screen from '../../../../assets/images/download-screen01.png'
+import screen1 from '../../../../assets/images/download-screen02.png'
+
+
+const Main = () => {
+    const [animate, setanimate] = useState()
+   
+
+    const [purple, setpurple] = useState()
+    window.addEventListener('scroll', function() {
+        const element = document.getElementsByClassName('free_text');
+        const position = element[0].getBoundingClientRect();
+        
+        if(position.top < window.innerHeight && position.bottom >= 0) {
+            const elm = document.getElementsByClassName("purple_backdrop");
+            elm[0].style.opacity = "1"; 
+        }else{
+            const elm = document.getElementsByClassName("purple_backdrop");
+            elm[0].style.opacity = "0"; 
+
+        }
+    });
+
+  return (
+    <>
+        <section className="row_am free_app_section review_freeapp" id="getstarted">
+            <div className="container">
+                <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
+                    <div className="anim_line dark_bg">
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                    </div>
+                    <div className="row">
+                        <div className="col-md-6">
+                            <div className="free_text">
+                                <div className="section_title">
+                                    <h2>Let’s download free from apple and play store</h2>
+                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
+                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                </div>
+                                <ul className="app_btn">
+                                <li>
+                                    <Link to="#">
+                                    <img src={blueapp} alt="image" />
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link to="#">
+                                    <img src={blue} alt="image" />
+                                    </Link>
+                                </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="col-md-6">
+                            <div className="free_img">
+                                <img src={screen} alt="image" />
+                                <img className="mobile_mockup" src={screen1} alt="image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div className="purple_backdrop"></div>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Faq/Main.js b/src/components/lnd/LndParts/Faq/Main.js
new file mode 100644
index 0000000..f2c8093
--- /dev/null
+++ b/src/components/lnd/LndParts/Faq/Main.js
@@ -0,0 +1,93 @@
+import React ,{ useState } from 'react'
+
+const Main = ({gredient}) => {
+
+    const[activeFaq, setActiveFaq] = useState({a : true})
+
+  return (
+    <>
+        <section className="row_am faq_section">
+        {gredient && <div className="faq_bg"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2><span>FAQ</span> - Frequently Asked Questions</h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                </div>
+                <div className="faq_panel">
+                    <div className="accordion" id="accordionExample">
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingOne">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
+                                {activeFaq.a ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How can i pay ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingTwo">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
+                                    data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingThree">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
+                                    data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
+                                    ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingFour">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
+                                    data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
+                                    ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Features/Main.js b/src/components/lnd/LndParts/Features/Main.js
new file mode 100644
index 0000000..0e01a2d
--- /dev/null
+++ b/src/components/lnd/LndParts/Features/Main.js
@@ -0,0 +1,125 @@
+import React from 'react'
+import img1 from '../../../assets/images/secure_data.png'
+import img2 from '../../../assets/images/functional.png'
+import img3 from '../../../assets/images/live-chat.png'
+import img4 from '../../../assets/images/support.png'
+import img5 from '../../../assets/images/features_frame.png'
+
+const Main = ({video}) => {
+  return (
+    <>
+        {video ?
+        <section className="row_am features_section video-features" id="features">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="feature_detail">
+                <div className="left_data feature_box">
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/secure.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Secure data</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/abt_functional.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Fully functional</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="right_data feature_box">
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/communication.png" alt="image"/>
+                    </div>
+                    <div className="text">
+                        <h4>Live chat</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/abt_support.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>24-7 Support</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                    <img src="assets/images/features_frame.png" alt="image" />
+                </div>
+                </div>
+            </div>
+        </section>
+        :
+        <section className="row_am features_section" id="features">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="feature_detail">
+                <div className="left_data feature_box">
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img1} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Secure data</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img2} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Fully functional</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="right_data feature_box">
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img3} alt="image"/>
+                    </div>
+                    <div className="text">
+                        <h4>Live chat</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img4} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>24-7 Support</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                    <img src={img5} alt="image" />
+                </div>
+                </div>
+            </div>
+        </section>}
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Interface/Main.js b/src/components/lnd/LndParts/Interface/Main.js
new file mode 100644
index 0000000..3744a64
--- /dev/null
+++ b/src/components/lnd/LndParts/Interface/Main.js
@@ -0,0 +1,81 @@
+import OwlCarousel from 'react-owl-carousel'
+import React from 'react'
+import img1 from '../../../assets/images/screen-1.png'
+import img2 from '../../../assets/images/screen-2.png'
+import img3 from '../../../assets/images/screen-3.png'
+import img4 from '../../../assets/images/screen-4.png'
+import img5 from '../../../assets/images/screen-5.png'
+
+const Main = () => {
+
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="row_am interface_section">
+            <div className="container-fluid">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Beautifull <span>interface</span></h2>
+                    <p>
+                    Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.
+                    </p>
+                </div>
+                <div className="screen_slider" >
+                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img1} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img2} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img3} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img4} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img5} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img3} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Pricing/Main.js b/src/components/lnd/LndParts/Pricing/Main.js
new file mode 100644
index 0000000..fb75738
--- /dev/null
+++ b/src/components/lnd/LndParts/Pricing/Main.js
@@ -0,0 +1,442 @@
+import { Link } from 'react-router-dom'
+import React , { useState} from 'react'
+import img1 from '../../../assets/images/standard.png'
+import img2 from '../../../assets/images/unlimited.png'
+import img3 from '../../../assets/images/premium.png'
+
+const Main = ({gredient , video}) => {
+    
+    const[tog, setTog] = useState()
+
+  return (
+    <>
+        {gredient ?
+            <section className="row_am pricing_section gredient-pricing" id="pricing">
+                <div className="container">
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Best & simple <span>pricing</span></h2>
+                    <p className="gredient-p">Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
+                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
+                        <div className="tog_block">
+                            <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
+                        </div>
+                        <span className="years">Yearly</span>
+                        <span className="offer">50% off</span>
+                    </div>
+
+                    <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/standard-one.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$15</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 5 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>50 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>2 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    <img src="assets/images/unlimited-one.png" alt="image"/>
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$99</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/premium-one.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$55</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>15 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/standard.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$150</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    <img src="assets/images/unlimited.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$999</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>400 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>40 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/premium.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$550</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 20 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>8 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                </div>
+            </section>
+        :
+            <section className="row_am pricing_section" id="pricing">
+                <div className="container">
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Best & simple <span>pricing</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
+                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
+                        <div className="tog_block">
+                            <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
+                        </div>
+                        <span className="years">Yearly</span>
+                        <span className="offer">50% off</span>
+                    </div>
+
+                    <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$15</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 5 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>50 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>2 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$99</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$55</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>15 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$150</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$999</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>400 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>40 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$550</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 20 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>8 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                </div>
+            </section>
+        }
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Story/Main.js b/src/components/lnd/LndParts/Story/Main.js
new file mode 100644
index 0000000..f40c2e4
--- /dev/null
+++ b/src/components/lnd/LndParts/Story/Main.js
@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom'
+import React from 'react'
+import story1 from '../../../../assets/images/story01.png'
+import story2 from '../../../../assets/images/story02.png'
+import story3 from '../../../../assets/images/story03.png'
+
+const Main = () => {
+  return (
+    <>
+        <section className="row_am latest_story" id="blog">
+            <div className="container">
+                <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
+                    <h2>Read latest <span>story</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                </div>
+                <div className="row">
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story1} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Cool features added!</h3>
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
+                                industry lorem Ipsum has.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story2} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Top rated app! Yupp.</h3>
+                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story3} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Creative ideas on app.</h3>
+                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section> 
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Testimonial/Main.js b/src/components/lnd/LndParts/Testimonial/Main.js
new file mode 100644
index 0000000..42809a4
--- /dev/null
+++ b/src/components/lnd/LndParts/Testimonial/Main.js
@@ -0,0 +1,126 @@
+import OwlCarousel from 'react-owl-carousel'
+import { Link } from 'react-router-dom'
+import React from 'react'
+import user1 from '../../../../assets/images/testimonial_user1.png'
+import user2 from '../../../../assets/images/testimonial_user2.png'
+import user3 from '../../../../assets/images/testimonial_user3.png'
+import user4 from '../../../../assets/images/avtar_testimonial.png'
+
+const Main = () => {
+
+    const testimonial_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        dots: true, 
+        responsive:{
+            0:{
+                items:1
+            },
+            600:{
+                items:1
+            },
+            1000:{
+                items:1
+            }
+        }
+    }
+  return (
+    <>
+        <section className="row_am testimonial_section"> 
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>What our <span>customer say</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                </div>
+                <div className="testimonial_block" data-aos="fade-in" data-aos-duration="1500">
+                    <OwlCarousel id="testimonial_slider" {...testimonial_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user1} alt="image" />
+                                </div>
+                                <h3>Shayna John</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user2} alt="image" />
+                                </div>
+                                <h3>Willium Den</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user3} alt="image" />
+                                </div>
+                                <h3>Cyrus Stephen</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                    </OwlCarousel>
+
+                    <div className="total_review">
+                        <div className="rating">
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <p>5.0 / 5.0</p>
+                        </div>
+                        <h3>2578</h3>
+                        <Link to="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
+                    </div>
+
+                    <div className="avtar_faces">
+                        <img src={user4} alt="image" />
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Trusted/Main.js b/src/components/lnd/LndParts/Trusted/Main.js
new file mode 100644
index 0000000..6968f45
--- /dev/null
+++ b/src/components/lnd/LndParts/Trusted/Main.js
@@ -0,0 +1,89 @@
+import OwlCarousel from 'react-owl-carousel'
+import React from 'react'
+import img1 from '../../../assets/images/paypal.png'
+import img2 from '../../../assets/images/spoty.png'
+import img3 from '../../../assets/images/shopboat.png'
+import img4 from '../../../assets/images/slack.png'
+import img5 from '../../../assets/images/envato.png'
+
+const Main = () => {
+    const company_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+
+  return (
+    <>
+        <section className="row_am trusted_section">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2>Trusted by <span>150+</span> companies</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="company_logos" >
+                <OwlCarousel id="company_slider" {...company_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img1} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img2} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img3} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img4} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img5} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img1} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img2} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img3} alt="image" />
+                    </div>
+                    </div>
+                </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/components/lnd/LndParts/Work/Main.js b/src/components/lnd/LndParts/Work/Main.js
new file mode 100644
index 0000000..4016487
--- /dev/null
+++ b/src/components/lnd/LndParts/Work/Main.js
@@ -0,0 +1,167 @@
+import React , {useState} from 'react'
+import { Link } from 'react-router-dom'
+import img from '../../../../assets/images/download_app.jpg'
+import img1 from '../../../../assets/images/create_account.jpg'
+import img2 from '../../../../assets/images/enjoy_app.jpg'
+import line from '../../../../assets/images/anim_line.png'
+import banner from '../../../../assets/images/banner-shape1.png'
+import banner1 from '../../../../assets/images/banner-shape2.png'
+import banner2 from '../../../../assets/images/banner-shape3.png'
+import video from '../../../../assets/images/play_icon.png'
+import ytvideo from '../../../../assets/images/yt_thumb.png'
+
+const Main = ({dark}) => {
+    const [ytShow , setytShow] = useState (false)
+
+  return (
+    <>
+        <section className="row_am how_it_works" id="how_it_work">
+            <div className="container">
+                <div className={`how_it_inner ${dark && "dark"}`}>
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                        <h2><span>How it works</span> - 3 easy steps</h2>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="step_block">
+                        <ul>
+                            <li>
+                                <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
+                                <h4>Download app</h4>
+                                <div className="app_icon">
+                                    <Link to="#"><i className="icofont-brand-android-robot"></i></Link>
+                                    <Link to="#"><i className="icofont-brand-apple"></i></Link>
+                                    <Link to="#"><i className="icofont-brand-windows"></i></Link>
+                                </div>
+                                <p>Download App either for Windows, Mac or Android</p>
+                                </div>
+                                <div className="step_number">
+                                <h3>01</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
+                                <img src={img} alt="image" />
+                                </div>
+                            </li>
+                            <li>
+                                <div className="step_text" data-aos="fade-left" data-aos-duration="1500">
+                                <h4>Create account</h4>
+                                <span>14 days free trial</span>
+                                <p>Sign up free for App account. One account for all devices.</p>
+                                </div>
+                                <div className="step_number"> 
+                                <h3>02</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
+                                <img src={img1} alt="image" />
+                                </div>
+                            </li>
+                            <li>
+                                <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
+                                <h4>It’s done, enjoy the app</h4>
+                                <span>Have any questions check our <Link to="#">FAQs</Link></span>
+                                <p>Get most amazing app experience,Explore and share the app</p>
+                                </div>
+                                <div className="step_number">
+                                <h3>03</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
+                                <img src={img2} alt="image" />
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                {dark ?
+                <div className="yt_video" style={{display: "none"}} data-aos="fade-in" data-aos-duration="1500">
+                    <div className="anim_line dark_bg">
+                        
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                    </div>
+                    <div className="thumbnil">
+                         
+                        <span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
+                        <span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
+                        <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image"/> </span>
+                        <img src="assets/images/yt_thumb.png" alt="image" />
+                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="play_btn">
+                            <img src={video} alt="image" />
+                            <div className="waves-block">
+                            <div className="waves wave-1"></div>
+                            <div className="waves wave-2"></div>
+                            <div className="waves wave-3"></div>
+                            </div>
+                        </span>
+                        Let’s see virtually how it works
+                        <span>Watch video</span>
+                        </Link>
+                    </div>
+                </div> :
+                <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
+                    <div className="anim_line dark_bg">
+                    <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        
+                    </div>
+                    <div className="thumbnil">
+                        <span className="banner_shape1"> <img src={banner} alt="image"/> </span>
+                        <span className="banner_shape2"> <img src={banner1} alt="image"/> </span>
+                        <span className="banner_shape3"> <img src={banner2} alt="image"/> </span>
+                        <img src={ytvideo} alt="image" />
+                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="play_btn">
+                            <img src={video} alt="image" />
+                            <div className="waves-block">
+                            <div className="waves wave-1"></div>
+                            <div className="waves wave-2"></div>
+                            <div className="waves wave-3"></div>
+                            </div>
+                        </span>
+                        Let’s see virtually how it works
+                        <span>Watch video</span>
+                        </Link>
+                    </div>
+                </div>}
+            </div>
+        </section>
+        {ytShow &&
+        <>
+        <div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
+            <div className="modal-dialog" role="document">
+                <div className="modal-content">
+                <button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
+                    <i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
+                </button>
+                    <div className="modal-body">
+                        <div id="video-container" className="video-container">
+                            <iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
+                        </div>        
+                    </div>
+                    <div className="modal-footer">
+                    </div>
+                </div> 
+            </div>
+        </div>
+        <div className="purple_backdrop"></div>
+        </>}
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file