Categories

Thursday, August 18, 2022
therichposts@gmail.com
Angular 13Angular 14Angular TemplatesHtmlTailwind Css

Angular HTML Tailwind CSS Free Template Code Snippet

Angular HTML Tailwind CSS Free Template Code Snippet

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular HTML Tailwind CSS Free Template Code Snippet

Guys please watch below video before starting code implementation:

Working Video
Angular HTML Tailwind CSS Free Template Code Snippet
Angular HTML Tailwind CSS Free Template Code Snippet

Angular13 came and Angular 14 is coming soon and if you are new then you must check below two links:

  1. Angular13 Basic Tutorials
  2. TailwindCSS

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 13 setup and for this we need to run below commands but if you already have angular 13 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

ng g c header

ng g c footer

ng g c home 

2. Now guy’s we need to add below code inside our project/scr/styles.css file:

/* You can add global styles to this file, and also import other style files */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";/*!tailwindcss v2.2.17 | MIT License | https://tailwindcss.com*//*!modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize*/*,::before,::after{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,liberation mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::before,::after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-blur: var(--tw-empty,/*!*/ /*!*/);--tw-brightness: var(--tw-empty,/*!*/ /*!*/);--tw-contrast: var(--tw-empty,/*!*/ /*!*/);--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);--tw-invert: var(--tw-empty,/*!*/ /*!*/);--tw-saturate: var(--tw-empty,/*!*/ /*!*/);--tw-sepia: var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.aa{width:100%;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}@media(min-width:540px){.aa{max-width:540px}}@media(min-width:720px){.aa{max-width:720px}}@media(min-width:960px){.aa{max-width:960px}}@media(min-width:1140px){.aa{max-width:1140px}}@media(min-width:1320px){.aa{max-width:1320px}}.a1B{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.a2e{position:fixed}.a3{position:absolute}.ad{position:relative}.a4{top:0}.a5{left:0}.ak{right:1rem}.al\/2{top:50%}.aC{top:100%}.a1X{bottom:0}.a_{right:0}.a2a{top:3.5rem}.a2b{bottom:6rem}.a2f{bottom:2rem}.a2g{right:2rem}.a2h{left:auto}.a34{top:1.5rem}.a35{right:1.5rem}.a3W{top:1.25rem}.a3X{bottom:1.25rem}.a12\[-4px\]{top:-4px}.a6{z-index:40}.a1H{z-index:10}.a1Y\[-1\]{z-index:-1}.a1Y\[999\]{z-index:999}.a45{margin:0}.ab\[-16px\]{margin-left:-16px;margin-right:-16px}.au\[6px\]{margin-top:6px;margin-bottom:6px}.aO{margin-left:2rem;margin-right:2rem}.a1L{margin-left:auto;margin-right:auto}.a3e{margin-left:.25rem;margin-right:.25rem}.a3F{margin-left:.5rem;margin-right:.5rem}.a3N{margin-left:.75rem;margin-right:.75rem}.ab\[-12px\]{margin-left:-12px;margin-right:-12px}.a1N{margin-bottom:2.25rem}.a1Q{margin-bottom:1rem}.a1V{margin-bottom:2.5rem}.a21{margin-bottom:4rem}.a23{margin-bottom:2rem}.a25{margin-right:1.5rem}.a11\[6px\]{margin-top:6px}.a2s{margin-bottom:3rem}.a2v{margin-bottom:1.25rem}.a2A{margin-right:.75rem}.a2E{margin-bottom:1.5rem}.a2F{margin-bottom:2.75rem}.a2G{margin-right:1rem}.a2K{margin-bottom:.25rem}.a2N{margin-right:2.5rem}.a2O{margin-right:1.25rem}.a2X{margin-bottom:.5rem}.a30{margin-bottom:.75rem}.a32{margin-left:.75rem}.a3j{margin-top:3rem}.a3s\[6px\]{margin-bottom:6px}.a3s\[100px\]{margin-bottom:100px}.a3s\[70px\]{margin-bottom:70px}.a3I{margin-bottom:5rem}.a3U{margin-right:.25rem}.a41{margin-left:1rem}.a43{margin-bottom:1.75rem}.a4a{margin-top:.25rem}.ah{display:block}.a22{display:inline-block}.a8{display:flex}.aM{display:inline-flex}.aj{display:none}.at\[2px\]{height:2px}.a1t{height:2.25rem}.a1E{height:1.25rem}.a2d{height:2.5rem}.a2l{height:.75rem}.aV{height:.5rem}.at\[30px\]{height:30px}.at\[40px\]{height:40px}.a2Q{height:100%}.at\[50px\]{height:50px}.at\[75px\]{height:75px}.at\[70px\]{height:70px}.a3Z{height:1.75rem}.a40{height:1rem}.at\[18px\]{height:18px}.at\[1px\]{height:1px}.a7{width:100%}.af{width:15rem}.as\[30px\]{width:30px}.as\[250px\]{width:250px}.a1s{width:2.25rem}.a1D{width:1.25rem}.a2c{width:2.5rem}.a28{width:.75rem}.aU{width:.5rem}.as\[70px\]{width:70px}.a1u{width:3.5rem}.a2r{width:1.75rem}.a20{width:1rem}.a3h\[36px\]{min-width:36px}.ag{max-width:100%}.aB\[250px\]{max-width:250px}.aB\[530px\]{max-width:530px}.aB\[360px\]{max-width:360px}.aB\[570px\]{max-width:570px}.aB\[470px\]{max-width:470px}.aB\[40px\]{max-width:40px}.aB\[50px\]{max-width:50px}.aB\[85px\]{max-width:85px}.aB\[770px\]{max-width:770px}.aB\[655px\]{max-width:655px}.aB\[18px\]{max-width:18px}.aB\[500px\]{max-width:500px}.aB\[70px\]{max-width:70px}.aB\[60px\]{max-width:60px}.am\[-50\%\]{--tw-translate-y: -50%;transform:var(--tw-transform)}.aZ{--tw-rotate: 45deg;transform:var(--tw-transform)}.a4e{--tw-rotate: 180deg;transform:var(--tw-transform)}.a1r{cursor:pointer}.a3i{cursor:not-allowed}.a48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.a3C{resize:none}.a2W{list-style-position:inside}.a2V{list-style-type:disc}.a1K{flex-wrap:wrap}.a9{align-items:center}.a1d{justify-content:flex-end}.a1x{justify-content:center}.ac{justify-content:space-between}.a2p{overflow:hidden}.ar{border-radius:.5rem}.a13{border-radius:.375rem}.a1c{border-radius:.25rem}.a1w{border-radius:9999px}.a3l{border-width:1px}.a2m{border-top-width:1px}.a2n{border-left-width:1px}.a2y{border-top-width:2px}.aX{border-right-width:2px}.a2B{border-bottom-width:1px}.a3b{border-right-width:1px}.a2o{--tw-border-opacity: 1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.a2z{--tw-border-opacity: 1;border-color:rgba(149,156,177,var(--tw-border-opacity))}.a3m{border-color:transparent}.a3p{--tw-border-opacity: 1;border-color:rgba(74,108,247,var(--tw-border-opacity))}.a2C\[\.15\]{--tw-border-opacity: .15}.a2M{--tw-border-opacity: 0.1}.a3v{--tw-border-opacity: 0.25}.a49{--tw-border-opacity: 0.2}.a2{background-color:transparent}.av{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.aw{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.a1k{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.a3f{--tw-bg-opacity: 1;background-color:rgba(149,156,177,var(--tw-bg-opacity))}.a1{--tw-bg-opacity: 1;background-color:rgba(9,14,52,var(--tw-bg-opacity))}.a3w\[\#1D2144\]{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a1Z{--tw-bg-opacity: 0.05}.a29{--tw-bg-opacity: 0.1}.a3g\[15\%\]{--tw-bg-opacity: 15%}.a3g\[3\%\]{--tw-bg-opacity: 3%}.a3J{--tw-bg-opacity: 0.75}.a26{fill:currentColor}.a1C{stroke:currentColor}.a2R{-o-object-fit:cover;object-fit:cover}.a2S{-o-object-position:center;object-position:center}.a14{padding:1rem}.a2Y{padding:2rem}.a36{padding:1.5rem}.a3t{padding:2.75rem}.a44{padding:.75rem}.a47{padding:3rem}.ae{padding-left:1rem;padding-right:1rem}.ai{padding-top:2rem;padding-bottom:2rem}.ap{padding-left:.75rem;padding-right:.75rem}.aq\[6px\]{padding-top:6px;padding-bottom:6px}.ax{padding-top:1.25rem;padding-bottom:1.25rem}.aK{padding-top:.5rem;padding-bottom:.5rem}.aq\[10px\]{padding-top:10px;padding-bottom:10px}.a1i{padding-top:.75rem;padding-bottom:.75rem}.a1j{padding-left:1.75rem;padding-right:1.75rem}.a1l{padding-left:2rem;padding-right:2rem}.a37{padding-left:1.25rem;padding-right:1.25rem}.a3q{padding-top:1rem;padding-bottom:1rem}.aL{padding-top:1.5rem;padding-bottom:1.5rem}.az{padding-left:1.5rem;padding-right:1.5rem}.a1m{padding-left:2.25rem;padding-right:2.25rem}.aq\[120px\]{padding-top:120px;padding-bottom:120px}.aq\[15px\]{padding-top:15px;padding-bottom:15px}.a42{padding-top:2.5rem;padding-bottom:2.5rem}.a1e{padding-right:4rem}.a1I\[180px\]{padding-top:180px}.a1J\[120px\]{padding-bottom:120px}.a1I\[100px\]{padding-top:100px}.a1I\[150px\]{padding-top:150px}.a2x{padding-right:.25rem}.a1I\[120px\]{padding-top:120px}.a1J\[100px\]{padding-bottom:100px}.a2L{padding-bottom:1rem}.a38{padding-bottom:1.5rem}.a39{padding-right:1.25rem}.a3d{padding-top:2rem}.a3u{padding-bottom:2.75rem}.a3A{padding-bottom:5rem}.a1J\[110px\]{padding-bottom:110px}.a1J\[50px\]{padding-bottom:50px}.a3H\[10px\]{padding-right:10px}.a3K{padding-top:4rem}.a3V{padding-bottom:2rem}.a1M{text-align:center}.aH{font-size:1rem;line-height:1.5rem}.a1b{font-size:.875rem;line-height:1.25rem}.a1O{font-size:1.875rem;line-height:2.25rem}.a27{font-size:1.25rem;line-height:1.75rem}.a2u{font-size:1.5rem;line-height:2rem}.a1T{font-size:1.125rem;line-height:1.75rem}.a3c{font-size:.75rem;line-height:1rem}.a1g{font-weight:700}.a1R{font-weight:500}.a2P{font-weight:600}.a2_{font-style:italic}.a1U{line-height:1.625}.a2D{line-height:1.25}.a3r{line-height:1.375}.a1h{--tw-text-opacity: 1;color:rgba(29,33,68,var(--tw-text-opacity))}.aI{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a1A{--tw-text-opacity: 1;color:rgba(9,14,52,var(--tw-text-opacity))}.a1S{--tw-text-opacity: 1;color:rgba(149,156,177,var(--tw-text-opacity))}.a24\[\#CED3F6\]{--tw-text-opacity: 1;color:rgba(206,211,246,var(--tw-text-opacity))}.a1W{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.a3T{--tw-text-opacity: 1;color:rgba(251,176,64,var(--tw-text-opacity))}.a2T{text-decoration:underline}.a3x::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.a3x:-ms-input-placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.a3x::placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.aJ{opacity:.7}.a15{opacity:0}.aA{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a1n{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a2k{--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a33{--tw-shadow: 0px 2px 3px rgba(7, 7, 77, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a3Y{--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a3o{outline:2px solid transparent;outline-offset:2px}.ao{--tw-ring-opacity: 1;--tw-ring-color: rgba(74, 108, 247, var(--tw-ring-opacity))}.a3Q{--tw-grayscale: grayscale(100%);filter:var(--tw-filter)}.a1p{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.a1a{transition-duration:300ms}.a2j{transition-timing-function:cubic-bezier(.4,0,.2,1)}body{font-family:inter,sans-serif}input[type=checkbox]:checked~label span svg{display:inline-flex}.sticky{position:fixed;z-index:9999;--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));--tw-bg-opacity: 0.8;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.a0 .sticky{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity));--tw-bg-opacity: 0.2}.sticky{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.1)}.sticky .header-logo{padding-top:1.25rem;padding-bottom:1.25rem}@media(min-width:960px){.sticky .header-logo{padding-top:.5rem;padding-bottom:.5rem}}.sticky .menu-scroll.active{opacity:.7}.navbarTogglerActive>span:nth-child(1){top:7px;--tw-rotate: 45deg;transform:var(--tw-transform);transform:var(--tw-transform)}.navbarTogglerActive>span:nth-child(2){opacity:0}.navbarTogglerActive>span:nth-child(3){top:-8px;--tw-rotate: 135deg;transform:var(--tw-transform)}input#togglePlan:checked~.dot{--tw-translate-x: 100%;transform:var(--tw-transform)}input#checkboxLabel:checked~.box span{opacity:1}.after\:a3::after{content:"";position:absolute}.after\:a10::after{content:"";right:.25rem}.after\:al\/2::after{content:"";top:50%}.after\:a11\[-2px\]::after{content:"";margin-top:-2px}.after\:aV::after{content:"";height:.5rem}.after\:aU::after{content:"";width:.5rem}.after\:am\[-50\%\]::after{content:"";--tw-translate-y: -50%;transform:var(--tw-transform)}.after\:aZ::after{content:"";--tw-rotate: 45deg;transform:var(--tw-transform)}.after\:aW::after{content:"";border-bottom-width:2px}.after\:aX::after{content:"";border-right-width:2px}.after\:aY::after{content:"";border-color:currentColor}.hover\:aw:hover{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.hover\:a1k:hover{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.hover\:a1o:hover{--tw-bg-opacity: 0.9}.hover\:a2i:hover{--tw-bg-opacity: 0.8}.hover\:a31:hover{--tw-bg-opacity: 1}.hover\:a3G:hover{--tw-bg-opacity: 0.2}.hover\:a1W:hover{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.hover\:aI:hover{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.hover\:a2T:hover{text-decoration:underline}.hover\:aJ:hover{opacity:.7}.hover\:a17:hover{opacity:1}.hover\:a1n:hover{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:a3R:hover{--tw-grayscale: grayscale(0);filter:var(--tw-filter)}.focus\:a3p:focus{--tw-border-opacity: 1;border-color:rgba(74,108,247,var(--tw-border-opacity))}.focus\:a3y:focus{--tw-border-opacity: 1}.focus\:an:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:aE:focus-visible{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.aG:hover .group-hover\:aJ{opacity:.7}.aG:hover .group-hover\:a17{opacity:1}.a0 .dark\:ah{display:block}.a0 .dark\:aj{display:none}.a0 .dark\:a2o{--tw-border-opacity: 1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.a0 .dark\:a2M{--tw-border-opacity: 0.1}.a0 .dark\:a3v{--tw-border-opacity: 0.25}.a0 .dark\:a1{--tw-bg-opacity: 1;background-color:rgba(9,14,52,var(--tw-bg-opacity))}.a0 .dark\:aw{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.a0 .dark\:av{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a0 .dark\:a3w\[\#242B51\]{--tw-bg-opacity: 1;background-color:rgba(36,43,81,var(--tw-bg-opacity))}.a0 .dark\:a1k{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.a0 .dark\:a3w\[\#1D2144\]{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a0 .dark\:a1Z{--tw-bg-opacity: 0.05}.a0 .dark\:a29{--tw-bg-opacity: 0.1}.a0 .dark\:aI{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a0 .dark\:a1S{--tw-text-opacity: 1;color:rgba(149,156,177,var(--tw-text-opacity))}.a0 .dark\:a3E{opacity:.9}.a0 .dark\:a3S{opacity:.6}.a0 .dark\:a1n{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a0 .dark\:hover\:a3G:hover{--tw-bg-opacity: 0.2}.a0 .dark\:hover\:a1W:hover{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.a0 .dark\:hover\:aI:hover{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a0 .dark\:hover\:a17:hover{opacity:1}@media(min-width:540px){.sm\:a3O{margin-left:1rem;margin-right:1rem}.sm\:a32{margin-left:.75rem}.sm\:ah{display:block}.sm\:a8{display:flex}.sm\:a1_\/2{width:50%}.sm\:a1d{justify-content:flex-end}.sm\:a2Y{padding:2rem}.sm\:a3t{padding:2.75rem}.sm\:a3B\[55px\]{padding:55px}.sm\:a3B\[60px\]{padding:60px}.sm\:a3L{padding-left:2.5rem;padding-right:2.5rem}.sm\:a2H{text-align:right}.sm\:a1P{font-size:2.25rem;line-height:2.5rem}.sm\:a1T{font-size:1.125rem;line-height:1.75rem}.sm\:a1O{font-size:1.875rem;line-height:2.25rem}.sm\:a2u{font-size:1.5rem;line-height:2rem}.sm\:a1U{line-height:1.625}.sm\:a2D{line-height:1.25}}@media(min-width:720px){.md\:a2t{margin-bottom:0}.md\:ah{display:block}.md\:a1v{height:3.5rem}.md\:a1G{height:1.5rem}.md\:a1u{width:3.5rem}.md\:a1F{width:1.5rem}.md\:a1_\/2{width:50%}.md\:a2q\/12{width:66.666667%}.md\:a20\/12{width:33.333333%}.md\:aU\/3{width:66.666667%}.md\:a1d{justify-content:flex-end}.md\:a2Z{padding:2.25rem}.md\:a1m{padding-left:2.25rem;padding-right:2.25rem}.md\:ai{padding-top:2rem;padding-bottom:2rem}.md\:az{padding-left:1.5rem;padding-right:1.5rem}.md\:aq\[40px\]{padding-top:40px;padding-bottom:40px}.md\:a3M\[50px\]{padding-left:50px;padding-right:50px}.md\:a1I\[150px\]{padding-top:150px}.md\:a1J\[120px\]{padding-bottom:120px}.md\:a24\[45px\]{font-size:45px}.md\:a3D{font-size:3rem;line-height:1}.md\:a27{font-size:1.25rem;line-height:1.75rem}.md\:a1T{font-size:1.125rem;line-height:1.75rem}.md\:a2D{line-height:1.25}.md\:a1U{line-height:1.625}}@media(min-width:960px){.lg\:a16{visibility:hidden}.lg\:aD{position:static}.lg\:a3{position:absolute}.lg\:a12\[110\%\]{top:110%}.lg\:aP{margin-right:0}.lg\:aQ{margin-left:2rem}.lg\:a2t{margin-bottom:0}.lg\:a2J{margin-left:0}.lg\:a3k{margin-top:0}.lg\:a30{margin-bottom:.75rem}.lg\:a2v{margin-bottom:1.25rem}.lg\:ah{display:block}.lg\:a8{display:flex}.lg\:aM{display:inline-flex}.lg\:aj{display:none}.lg\:a7{width:100%}.lg\:a20\/12{width:33.333333%}.lg\:aU\/12{width:16.666667%}.lg\:a2r\/12{width:58.333333%}.lg\:a1D\/12{width:41.666667%}.lg\:a1_\/2{width:50%}.lg\:a2q\/12{width:66.666667%}.lg\:a1_\/3{width:33.333333%}.lg\:ag{max-width:100%}.lg\:aB\[130px\]{max-width:130px}.lg\:a2{background-color:transparent}.lg\:a2Y{padding:2rem}.lg\:a3t{padding:2.75rem}.lg\:ay{padding-top:0;padding-bottom:0}.lg\:ae{padding-left:1rem;padding-right:1rem}.lg\:aL{padding-top:1.5rem;padding-bottom:1.5rem}.lg\:aN{padding-left:0;padding-right:0}.lg\:az{padding-left:1.5rem;padding-right:1.5rem}.lg\:a1l{padding-left:2rem;padding-right:2rem}.lg\:a37{padding-left:1.25rem;padding-right:1.25rem}.lg\:aS{padding-left:0}.lg\:aT{padding-right:1rem}.lg\:a1f{padding-right:0}.lg\:a2I{text-align:left}.lg\:a2H{text-align:right}.lg\:a1P{font-size:2.25rem;line-height:2.5rem}.lg\:a27{font-size:1.25rem;line-height:1.75rem}.lg\:aH{font-size:1rem;line-height:1.5rem}.lg\:a2u{font-size:1.5rem;line-height:2rem}.lg\:a2D{line-height:1.25}.lg\:a1U{line-height:1.625}.lg\:a15{opacity:0}.lg\:aE{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lg\:aA{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lg\:after\:a_::after{content:"";right:0}.aG:hover .lg\:group-hover\:a18{visibility:visible}.aG:hover .lg\:group-hover\:aC{top:100%}.a0 .lg\:dark\:a2{background-color:transparent}}@media(min-width:1140px){.xl\:a3P{margin-left:1.5rem;margin-right:1.5rem}.xl\:aR{margin-left:3rem}.xl\:a2A{margin-right:.75rem}.xl\:a2t{margin-bottom:0}.xl\:a8{display:flex}.xl\:a1D\/12{width:41.666667%}.xl\:aU\/12{width:16.666667%}.xl\:a28\/12{width:25%}.xl\:a1_\/2{width:50%}.xl\:a1_\/3{width:33.333333%}.xl\:aB\[150px\]{max-width:150px}.xl\:a2Z{padding:2.25rem}.xl\:a3t{padding:2.75rem}.xl\:a3B\[55px\]{padding:55px}.xl\:a3B\[50px\]{padding:50px}.xl\:az{padding-left:1.5rem;padding-right:1.5rem}.xl\:a1m{padding-left:2.25rem;padding-right:2.25rem}.xl\:ai{padding-top:2rem;padding-bottom:2rem}.xl\:a37{padding-left:1.25rem;padding-right:1.25rem}.xl\:a1l{padding-left:2rem;padding-right:2rem}.xl\:a3a{padding-right:.75rem}.xl\:a1I\[180px\]{padding-top:180px}.xl\:a1J\[160px\]{padding-bottom:160px}.xl\:a24\[45px\]{font-size:45px}.xl\:a2u{font-size:1.5rem;line-height:2rem}.xl\:a1T{font-size:1.125rem;line-height:1.75rem}.xl\:a1O{font-size:1.875rem;line-height:2.25rem}.xl\:a2D{line-height:1.25}.xl\:a1U{line-height:1.625}}@media(min-width:1320px){.\32xl\:aO{margin-left:2rem;margin-right:2rem}.\32xl\:a2O{margin-right:1.25rem}.\32xl\:aB\[160px\]{max-width:160px}.\32xl\:a2Y{padding:2rem}.\32xl\:aq\[60px\]{padding-top:60px;padding-bottom:60px}.\32xl\:a3M\[70px\]{padding-left:70px;padding-right:70px}.\32xl\:a39{padding-right:1.25rem}.\32xl\:a1I\[210px\]{padding-top:210px}.\32xl\:a1J\[200px\]{padding-bottom:200px}}

3. Now guy’s we need to add below code inside our project/src/app/header/header.component.html file:

<header class="
        header
        a2
        a3
        a4
        a5
        a6
        a7
        a8
        a9
      ">
<div class="aa">
<div class="
            a8 ab[-16px] a9 ac ad
          ">
<div class="ae af ag">
<a href="#" class="a7 ah ai header-logo">
<img src="assets/images/logo-2.svg" alt="logo" class="a7 dark:aj" />
<img src="assets/images/logo.svg" alt="logo" class="a7 aj dark:ah" />
</a>
</div>
<div class="a8 ae ac a9 a7">
<div>
<button id="navbarToggler" aria-label="Mobile Menu" class="
                  ah
                  a3
                  ak
                  al/2
                  am[-50%]
                  lg:aj
                  focus:an
                  ao ap aq[6px] ar
                ">
<span class="
                    ad
                    as[30px]
                    at[2px]
                    au[6px]
                    ah
                    av
                    dark:aw
                  "></span>
<span class="
                    ad
                    as[30px]
                    at[2px]
                    au[6px]
                    ah
                    av
                    dark:aw
                  "></span>
<span class="
                    ad
                    as[30px]
                    at[2px]
                    au[6px]
                    ah
                    av
                    dark:aw
                  "></span>
</button>
<nav id="navbarCollapse" class="
                  a3 ax
                  lg:ay lg:ae
                  xl:az
                  aw
                  dark:av
                  lg:dark:a2 lg:a2
                  aA ar aB[250px] a7
                  lg:ag lg:a7
                  ak aC aj
                  lg:ah lg:aD lg:aE
                ">
<ul class="aF lg:a8">
<li class="ad aG">
<a href="#home" class="
                        menu-scroll
                        aH
                        text-dark
                        dark:aI
                        group-hover:aJ
                        aK
                        lg:aL lg:aM lg:aN
                        a8 aO
                        lg:aP
                      ">
Home
</a>
</li>
<li class="ad aG">
<a href="#about" class="
                        menu-scroll
                        aH
                        text-dark
                        dark:aI
                        group-hover:aJ
                        aK
                        lg:aL lg:aM lg:aN
                        a8 aO
                        lg:aP lg:aQ
                        xl:aR
                      ">
About
</a>
</li>
<li class="ad aG">
<a href="#pricing" class="
                        menu-scroll
                        aH
                        text-dark
                        dark:aI
                        group-hover:aJ
                        aK
                        lg:aL lg:aM lg:aN
                        a8 aO
                        lg:aP lg:aQ
                        xl:aR
                      ">
Pricing
</a>
</li>
<li class="ad aG">
<a href="#contact" class="
                        menu-scroll
                        aH
                        text-dark
                        dark:aI
                        group-hover:aJ
                        aK
                        lg:aL lg:aM lg:aN
                        a8 aO
                        lg:aP lg:aQ
                        xl:aR
                      ">
Support
</a>
</li>

</ul>
</nav>
</div>
</div>
</div>
</div>
</header>

4. Now guy’s we need to add below code inside our project/src/app/footer/footer.component.html file:

<footer class="
        ad a1H a1k a1Z a1I[100px]
        wow
        fadeInUp
      " data-wow-delay=".1s">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a20/12 xl:a1D/12 ae">
<div class="a21 aB[360px]">
<a href="#" class="a22 a23">
<img src="assets/images/logo-2.svg" alt="logo" class="a7 dark:aj" />
<img src="assets/images/logo.svg" alt="logo" class="a7 aj dark:ah" />
</a>
<p class="
                  a1S
                  aH
                  a1R
                  a46
                  a1N
                ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
lobortis.
</p>
<div class="a8 a9">
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="9" height="18" viewBox="0 0 9 18" class="a26">
<path d="M8.13643 7H6.78036H6.29605V6.43548V4.68548V4.12097H6.78036H7.79741C8.06378 4.12097 8.28172 3.89516 8.28172 3.55645V0.564516C8.28172 0.254032 8.088 0 7.79741 0H6.02968C4.11665 0 2.78479 1.58064 2.78479 3.92339V6.37903V6.94355H2.30048H0.65382C0.314802 6.94355 0 7.25403 0 7.70564V9.7379C0 10.1331 0.266371 10.5 0.65382 10.5H2.25205H2.73636V11.0645V16.7379C2.73636 17.1331 3.00273 17.5 3.39018 17.5H5.66644C5.81174 17.5 5.93281 17.4153 6.02968 17.3024C6.12654 17.1895 6.19919 16.9919 6.19919 16.8226V11.0927V10.5282H6.70771H7.79741C8.11222 10.5282 8.35437 10.3024 8.4028 9.96371V9.93548V9.90726L8.74182 7.95968C8.76604 7.7621 8.74182 7.53629 8.59653 7.31048C8.54809 7.16935 8.33016 7.02823 8.13643 7Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="19" height="14" viewBox="0 0 19 14" class="a26">
<path d="M16.3024 2.26027L17.375 1.0274C17.6855 0.693493 17.7702 0.436644 17.7984 0.308219C16.9516 0.770548 16.1613 0.924658 15.6532 0.924658H15.4556L15.3427 0.821918C14.6653 0.282534 13.8185 0 12.9153 0C10.9395 0 9.3871 1.48973 9.3871 3.21062C9.3871 3.31336 9.3871 3.46747 9.41532 3.57021L9.5 4.0839L8.90726 4.05822C5.29435 3.95548 2.33065 1.13014 1.85081 0.642123C1.06048 1.92637 1.5121 3.15925 1.99194 3.92979L2.95161 5.36815L1.42742 4.5976C1.45565 5.67637 1.90726 6.52397 2.78226 7.14041L3.54435 7.65411L2.78226 7.93665C3.2621 9.24658 4.33468 9.78596 5.125 9.99144L6.16935 10.2483L5.18145 10.8647C3.60081 11.8921 1.625 11.8151 0.75 11.738C2.52823 12.8682 4.64516 13.125 6.1129 13.125C7.21371 13.125 8.03226 13.0223 8.22984 12.9452C16.1331 11.25 16.5 4.82877 16.5 3.54452V3.36473L16.6694 3.26199C17.629 2.44007 18.0242 2.00342 18.25 1.74658C18.1653 1.77226 18.0524 1.82363 17.9395 1.84932L16.3024 2.26027Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="18" height="14" viewBox="0 0 18 14" class="a26">
<path d="M17.5058 2.07119C17.3068 1.2488 16.7099 0.609173 15.9423 0.395963C14.5778 7.26191e-08 9.0627 0 9.0627 0C9.0627 0 3.54766 7.26191e-08 2.18311 0.395963C1.41555 0.609173 0.818561 1.2488 0.619565 2.07119C0.25 3.56366 0.25 6.60953 0.25 6.60953C0.25 6.60953 0.25 9.68585 0.619565 11.1479C0.818561 11.9703 1.41555 12.6099 2.18311 12.8231C3.54766 13.2191 9.0627 13.2191 9.0627 13.2191C9.0627 13.2191 14.5778 13.2191 15.9423 12.8231C16.7099 12.6099 17.3068 11.9703 17.5058 11.1479C17.8754 9.68585 17.8754 6.60953 17.8754 6.60953C17.8754 6.60953 17.8754 3.56366 17.5058 2.07119ZM7.30016 9.44218V3.77687L11.8771 6.60953L7.30016 9.44218Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="17" height="16" viewBox="0 0 17 16" class="a26">
<path d="M15.2196 0H1.99991C1.37516 0 0.875366 0.497491 0.875366 1.11936V14.3029C0.875366 14.8999 1.37516 15.4222 1.99991 15.4222H15.1696C15.7943 15.4222 16.2941 14.9247 16.2941 14.3029V1.09448C16.3441 0.497491 15.8443 0 15.2196 0ZM5.44852 13.1089H3.17444V5.7709H5.44852V13.1089ZM4.29899 4.75104C3.54929 4.75104 2.97452 4.15405 2.97452 3.43269C2.97452 2.71133 3.57428 2.11434 4.29899 2.11434C5.02369 2.11434 5.62345 2.71133 5.62345 3.43269C5.62345 4.15405 5.07367 4.75104 4.29899 4.75104ZM14.07 13.1089H11.796V9.55183C11.796 8.7061 11.771 7.58674 10.5964 7.58674C9.39693 7.58674 9.222 8.53198 9.222 9.47721V13.1089H6.94792V5.7709H9.17202V6.79076H9.19701C9.52188 6.19377 10.2466 5.59678 11.3711 5.59678C13.6952 5.59678 14.12 7.08925 14.12 9.12897V13.1089H14.07Z" />
</svg>
</a>
</div>
</div>
</div>
<div class="
              a7
              sm:a1_/2
              md:a1_/2
              lg:aU/12
              xl:aU/12
              ae
            ">
<div class="a21">
<h2 class="
                  a1g a1A
                  dark:aI
                  a27 a1V
                ">
Useful Links
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Blog
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Pricing
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
About
</a>
</li>
</ul>
</div>
</div>
<div class="
              a7
              sm:a1_/2
              md:a1_/2
              lg:aU/12
              xl:aU/12
              ae
            ">
<div class="a21">
<h2 class="
                  a1g a1A
                  dark:aI
                  a27 a1V
                ">
Terms
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
TOS
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Privacy Policy
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Refund Policy
</a>
</li>
</ul>
</div>
</div>
<div class="a7 md:a1_/2 lg:a20/12 xl:a28/12 ae">
<div class="a21">
<h2 class="
                  a1g a1A
                  dark:aI
                  a27 a1V
                ">
Support & Help
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Open Support Ticket
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
Terms of Use
</a>
</li>
<li>
<a href="javascript:void(0)" class="
                      aH
                      a1R
                      a22
                      a1S
                      a1Q
                      hover:a1W
                    ">
About
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ai a1k a29">
<div class="aa">
<p class="
              a1S
              dark:aI
              aH a1M
            ">
&copy; Crafted by Therichpost for You!
</p>
</div>
</div>
<div class="a3 a_ a2a a1Y[-1]">
<svg width="55" height="99" viewBox="0 0 55 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#959CB1" />
<mask id="mask0_94:899" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="99" height="99">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#4A6CF7" />
</mask>
<g mask="url(#mask0_94:899)">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="url(#paint0_radial_94:899)" />
<g opacity="0.8" filter="url(#filter0_f_94:899)">
<circle cx="53.8676" cy="26.2061" r="20.3824" fill="white" />
</g>
</g>
<defs>
<filter id="filter0_f_94:899" x="12.4852" y="-15.1763" width="82.7646" height="82.7646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10.5" result="effect1_foregroundBlur_94:899" />
</filter>
<radialGradient id="paint0_radial_94:899" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(49.5 49.5) rotate(90) scale(53.1397)">
<stop stop-opacity="0.47" />
<stop offset="1" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
</div>
<div class="a3 a5 a2b a1Y[-1]">
<svg width="79" height="94" viewBox="0 0 79 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="-41" y="26.9426" width="66.6675" height="66.6675" transform="rotate(-22.9007 -41 26.9426)" fill="url(#paint0_linear_94:889)" />
<rect x="-41" y="26.9426" width="66.6675" height="66.6675" transform="rotate(-22.9007 -41 26.9426)" stroke="url(#paint1_linear_94:889)" stroke-width="0.7" />
<path opacity="0.3" d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L77.1885 68.2073L50.5215 7.42229Z" fill="url(#paint2_linear_94:889)" />
<path d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L76.7963 68.2073L50.5215 7.42229Z" stroke="url(#paint3_linear_94:889)" stroke-width="0.7" />
<path opacity="0.3" d="M17.9721 93.3057L-14.9695 88.2076L46.2077 62.325L77.1885 68.2074L17.9721 93.3057Z" fill="url(#paint4_linear_94:889)" />
<path d="M17.972 93.3057L-14.1852 88.2076L46.2077 62.325L77.1884 68.2074L17.972 93.3057Z" stroke="url(#paint5_linear_94:889)" stroke-width="0.7" />
<defs>
<linearGradient id="paint0_linear_94:889" x1="-41" y1="21.8445" x2="36.9671" y2="59.8878" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_94:889" x1="25.6675" y1="95.9631" x2="-42.9608" y2="20.668" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
<linearGradient id="paint2_linear_94:889" x1="20.325" y1="-3.98039" x2="90.6248" y2="25.1062" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_94:889" x1="18.3642" y1="-1.59742" x2="113.9" y2="80.6826" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
<linearGradient id="paint4_linear_94:889" x1="61.1098" y1="62.3249" x2="-8.82468" y2="58.2156" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_94:889" x1="65.4236" y1="65.0701" x2="24.0178" y2="41.6598" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
</defs>
</svg>
</div>
</footer>

5. Now guy’s we need to add below code inside our project/src/app/home/home.component.html file:


<section id="home" class="
ad a1H a1I[120px] a1J[110px]
md:a1I[150px] md:a1J[120px]
xl:a1I[180px] xl:a1J[160px]
2xl:a1I[210px] 2xl:a1J[200px]
">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="a1L aB[570px] a1M wow fadeInUp" data-wow-delay=".2s">
<h1 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a3D
          a2D
          sm:a2D
          md:a2D
          a2v
        ">
Startup Focused Angular + Tailwind CSS Template
</h1>
<p class="
          a1R a1T
          md:a27
          a1U
          md:a1U
          a1S
          dark:aI dark:a3E
          a2s
        ">
A Complete Tailwind CSS Web Template Crafted for - Startup,
SaaS, Business, Software and Agencies. Comes with high-quality
design and everything you need!
</p>
<div class="a8 a9 a1x">
<a href="#features" class="
            aH
            a2P
            aI
            a1k
            a3q
            a1l
            hover:a2i
            a3F
            a13
            a1p
            a1a
            a2j
          ">
Get Started
</a>
<a href="#about" class="
            aH
            a2P
            a1A
            a1
            a29
            dark:aI dark:aw dark:a29
            a3q a1l
            hover:a3G
            dark:hover:a3G
            a3F
            a13
            a1p
            a1a
            a2j
          ">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>

<div class="a3 a4 a_ a1Y[-1]">
<svg width="450" height="556" viewBox="0 0 450 556" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="277" cy="63" r="225" fill="url(#paint0_linear_25:217)" />
<circle cx="17.9997" cy="182" r="18" fill="url(#paint1_radial_25:217)" />
<circle cx="76.9997" cy="288" r="34" fill="url(#paint2_radial_25:217)" />
<circle cx="325.486" cy="302.87" r="180" transform="rotate(-37.6852 325.486 302.87)" fill="url(#paint3_linear_25:217)" />
<circle opacity="0.8" cx="184.521" cy="315.521" r="132.862" transform="rotate(114.874 184.521 315.521)" stroke="url(#paint4_linear_25:217)" />
<circle opacity="0.8" cx="356" cy="290" r="179.5" transform="rotate(-30 356 290)" stroke="url(#paint5_linear_25:217)" />
<circle opacity="0.8" cx="191.659" cy="302.659" r="133.362" transform="rotate(133.319 191.659 302.659)" fill="url(#paint6_linear_25:217)" />
<defs>
<linearGradient id="paint0_linear_25:217" x1="-54.5003" y1="-178" x2="222" y2="288" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial_25:217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.9997 182) rotate(90) scale(18)">
<stop offset="0.145833" stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.08" />
</radialGradient>
<radialGradient id="paint2_radial_25:217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.9997 288) rotate(90) scale(34)">
<stop offset="0.145833" stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.08" />
</radialGradient>
<linearGradient id="paint3_linear_25:217" x1="226.775" y1="-66.1548" x2="292.157" y2="351.421" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_25:217" x1="184.521" y1="182.159" x2="184.521" y2="448.882" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_25:217" x1="356" y1="110" x2="356" y2="470" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_25:217" x1="118.524" y1="29.2497" x2="166.965" y2="338.63" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="a3 a1X a5 a1Y[-1]">
<svg width="364" height="201" viewBox="0 0 364 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.88928 72.3303C33.6599 66.4798 101.397 64.9086 150.178 105.427C211.155 156.076 229.59 162.093 264.333 166.607C299.076 171.12 337.718 183.657 362.889 212.24" stroke="url(#paint0_linear_25:218)" />
<path d="M-22.1107 72.3303C5.65989 66.4798 73.3965 64.9086 122.178 105.427C183.155 156.076 201.59 162.093 236.333 166.607C271.076 171.12 309.718 183.657 334.889 212.24" stroke="url(#paint1_linear_25:218)" />
<path d="M-53.1107 72.3303C-25.3401 66.4798 42.3965 64.9086 91.1783 105.427C152.155 156.076 170.59 162.093 205.333 166.607C240.076 171.12 278.718 183.657 303.889 212.24" stroke="url(#paint2_linear_25:218)" />
<path d="M-98.1618 65.0889C-68.1416 60.0601 4.73364 60.4882 56.0734 102.431C120.248 154.86 139.905 161.419 177.137 166.956C214.37 172.493 255.575 186.165 281.856 215.481" stroke="url(#paint3_linear_25:218)" />
<circle opacity="0.8" cx="214.505" cy="60.5054" r="49.7205" transform="rotate(-13.421 214.505 60.5054)" stroke="url(#paint4_linear_25:218)" />
<circle cx="220" cy="63" r="43" fill="url(#paint5_radial_25:218)" />
<defs>
<linearGradient id="paint0_linear_25:218" x1="184.389" y1="69.2405" x2="184.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint1_linear_25:218" x1="156.389" y1="69.2405" x2="156.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint2_linear_25:218" x1="125.389" y1="69.2405" x2="125.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint3_linear_25:218" x1="93.8507" y1="67.2674" x2="89.9278" y2="210.214" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint4_linear_25:218" x1="214.505" y1="10.2849" x2="212.684" y2="99.5816" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint5_radial_25:218" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(220 63) rotate(90) scale(43)">
<stop offset="0.145833" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="0.08" />
</radialGradient>
</defs>
</svg>
</div>

</section>


<section id="features" class="a1k a3g[3%] a1I[120px] a1J[50px]">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[570px] a1M a3s[100px]
        wow
        fadeInUp
      " data-wow-delay=".1s">
<h2 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a24[45px]
          a1Q
        ">
Main Features
</h2>
<p class="
          a1S aH
          md:a1T
          a1U
          md:a1U
        ">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".15s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="41" viewBox="0 0 40 41" class="a26">
<path opacity="0.5" d="M37.7778 40.2223H24C22.8954 40.2223 22 39.3268 22 38.2223V20.0001C22 18.8955 22.8954 18.0001 24 18.0001H37.7778C38.8823 18.0001 39.7778 18.8955 39.7778 20.0001V38.2223C39.7778 39.3268 38.8823 40.2223 37.7778 40.2223Z" />
<path d="M23.2222 0C22.6699 0 22.2222 0.447715 22.2222 1V12.3333C22.2222 12.8856 22.6699 13.3333 23.2222 13.3333H39C39.5523 13.3333 40 12.8856 40 12.3333V0.999999C40 0.447714 39.5523 0 39 0H23.2222ZM0 39C0 39.5523 0.447715 40 1 40H16.7778C17.3301 40 17.7778 39.5523 17.7778 39V27.6667C17.7778 27.1144 17.3301 26.6667 16.7778 26.6667H1C0.447716 26.6667 0 27.1144 0 27.6667V39ZM0 21.2222C0 21.7745 0.447715 22.2222 1 22.2222H16.7778C17.3301 22.2222 17.7778 21.7745 17.7778 21.2222V0.999999C17.7778 0.447714 17.3301 0 16.7778 0H1C0.447716 0 0 0.447715 0 1V21.2222Z" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
Crafted for Startups
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".2s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M20.5914 34.2584C20.2394 34.5172 19.7603 34.5175 19.408 34.2593L4.19163 23.1079C3.8395 22.8498 3.36065 22.85 3.00873 23.1084L1.09802 24.5111C0.553731 24.9107 0.553731 25.7237 1.09802 26.1233L19.4082 39.5655C19.7604 39.824 20.2396 39.824 20.5918 39.5655L38.9029 26.1226C39.4469 25.7232 39.4473 24.9107 38.9036 24.5109L36.9701 23.0889C36.6177 22.8298 36.1378 22.8297 35.7854 23.0888L20.5914 34.2584Z" />
<path d="M19.408 28.931C19.7603 29.1896 20.2396 29.1894 20.5918 28.9306L36.3556 17.3466L38.8979 15.4883C39.4437 15.0894 39.4446 14.275 38.8996 13.8749L20.5918 0.43445C20.2396 0.175911 19.7604 0.175913 19.4082 0.434452L1.09706 13.8774C0.553051 14.2767 0.552712 15.0892 1.09638 15.4891L3.62222 17.3466L19.408 28.931Z" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
High-quality Design
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".25s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M20 30C22.75 30 25 32.25 25 35C25 37.75 22.75 40 20 40C17.25 40 15 37.75 15 35C15 32.25 17.25 30 20 30ZM35 30C37.75 30 40 32.25 40 35C40 37.75 37.75 40 35 40C32.25 40 30 37.75 30 35C30 32.25 32.25 30 35 30ZM35 15C37.75 15 40 17.25 40 20C40 22.75 37.75 25 35 25C32.25 25 30 22.75 30 20C30 17.25 32.25 15 35 15Z" />
<path d="M20 15C22.75 15 25 17.25 25 20C25 22.75 22.75 25 20 25C17.25 25 15 22.75 15 20C15 17.25 17.25 15 20 15ZM20 0C22.75 0 25 2.25 25 5C25 7.75 22.75 10 20 10C17.25 10 15 7.75 15 5C15 2.25 17.25 0 20 0ZM5 30C7.75 30 10 32.25 10 35C10 37.75 7.75 40 5 40C2.25 40 0 37.75 0 35C0 32.25 2.25 30 5 30ZM5 15C7.75 15 10 17.25 10 20C10 22.75 7.75 25 5 25C2.25 25 0 22.75 0 20C0 17.25 2.25 15 5 15ZM5 0C7.75 0 10 2.25 10 5C10 7.75 7.75 10 5 10C2.25 10 0 7.75 0 5C0 2.25 2.25 0 5 0ZM35 0C37.75 0 40 2.25 40 5C40 7.75 37.75 10 35 10C32.25 10 30 7.75 30 5C30 2.25 32.25 0 35 0Z" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
All Essential Components
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".1s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="42" viewBox="0 0 40 42" class="a26">
<path opacity="0.5" d="M31.8943 25.3303C34.1233 25.3303 36.1497 26.1409 37.5682 27.762L39.1464 26.1839C39.4614 25.8689 39.9999 26.092 39.9999 26.5374V32.936C39.9999 33.2121 39.7761 33.436 39.4999 33.436H33.1014C32.6559 33.436 32.4328 32.8974 32.7478 32.5825L35.5418 29.7885C34.5286 28.9779 33.3128 28.37 31.8943 28.37C29.0573 28.37 26.8282 30.599 26.8282 33.436C26.8282 36.273 29.0573 38.5021 31.8943 38.5021C33.3549 38.5021 34.6511 37.844 35.6345 36.8244C35.8406 36.6107 36.1187 36.4756 36.4155 36.4756H38.6535C39.0072 36.4756 39.2477 36.833 39.0881 37.1487C37.7427 39.8107 35.0781 41.5417 31.8943 41.5417C27.4361 41.5417 23.7886 37.8941 23.7886 33.436C23.7886 28.9779 27.4361 25.3303 31.8943 25.3303Z" />
<path d="M18.7226 33.436C18.7226 31.3572 19.2513 29.4548 19.9799 27.7285C20.0541 27.5529 19.9264 27.3567 19.7358 27.3567C15.8856 27.3567 12.6433 24.1144 12.6433 20.2642C12.6433 16.414 15.8856 13.1717 19.7358 13.1717C23.586 13.1717 26.8283 16.414 26.8283 20.2642C26.8283 20.5105 27.3897 21.0054 27.6246 20.9313C28.9274 20.5206 30.2827 20.2642 31.8943 20.2642C32.775 20.2642 33.6557 20.4173 34.5364 20.5905C34.7422 20.6309 34.9339 20.4739 34.9339 20.2642C34.9339 19.8699 34.9339 19.3904 34.8787 18.9362C34.827 18.5117 34.9599 18.0636 35.3001 17.8045L38.9868 14.9955C39.3921 14.5902 39.3921 14.1849 39.1894 13.7797L35.1857 6.77316C35.153 6.71599 35.1272 6.65499 35.1021 6.59411C34.9143 6.13895 34.5848 6.08618 34.1135 6.08007C33.9863 6.07841 33.86 6.10354 33.7419 6.15079L29.3957 7.88927C29.0613 8.02302 28.6829 7.96367 28.3887 7.75599C27.6155 7.21023 26.7521 6.75466 25.8752 6.31262C25.5838 6.16573 25.3813 5.88702 25.3335 5.56423L24.6729 1.10574C24.6265 0.792572 24.6613 0.389935 24.3993 0.212245C24.2235 0.0930361 23.9828 0 23.7886 0H15.6829C15.3021 0 14.7424 0.35783 14.6762 0.73726C14.6678 0.785579 14.6661 0.834927 14.6589 0.883445L13.9492 5.67408C13.894 6.04692 13.6313 6.35205 13.2873 6.50604C12.4439 6.88359 11.673 7.42345 10.8193 7.89265C10.5647 8.03264 10.26 8.04143 9.99178 7.92966L5.73545 6.15619C5.61358 6.10541 5.48273 6.07832 5.35072 6.08016C4.8506 6.08715 4.49147 6.1485 4.13234 6.68719L0.0794975 13.7797C-0.123145 14.1849 0.0794976 14.5902 0.484782 14.9955L4.34631 17.9376C4.59456 18.1268 4.74261 18.4216 4.7079 18.7317C4.65068 19.243 4.53762 19.8101 4.53762 20.2642C4.53762 20.6648 4.53762 21.1534 4.59561 21.614C4.64767 22.0276 4.52563 22.4644 4.20164 22.7267L0.484782 25.7355C0.0794976 26.1408 0.0794978 26.5461 0.28214 26.9514L4.33498 34.0439C4.5154 34.4047 4.85644 34.4443 5.35811 34.4486C5.48532 34.4497 5.61152 34.4249 5.72964 34.3776L10.0758 32.6392C10.4102 32.5054 10.7887 32.5648 11.0829 32.7724C11.8561 33.3182 12.7195 33.7738 13.5964 34.2158C13.8878 34.3627 14.0903 34.6414 14.1381 34.9642L14.8616 39.8476C14.8688 39.8961 14.871 39.9453 14.8768 39.994C14.9222 40.3734 15.3145 40.7311 15.8856 40.7311H19.13C19.9191 40.7311 20.4065 39.8523 20.0627 39.1421C19.1998 37.3593 18.7226 35.4573 18.7226 33.436Z" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
Speed Optimized
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".15s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M39 12C39.5523 12 40 12.4477 40 13V39C40 39.5523 39.5523 40 39 40H13C12.4477 40 12 39.5523 12 39V33C12 32.4477 12.4477 32 13 32H31C31.5523 32 32 31.5523 32 31V13C32 12.4477 32.4477 12 33 12H39Z" />
<rect width="28" height="28" rx="1" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
Fully Customizable
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".2s">
<div class="
          as[70px]
          at[70px]
          a8
          a9
          a1x
          a13
          a1k
          a29
          a1V
          a1W
        ">
<svg width="40" height="45" viewBox="0 0 40 45" class="a26">
<path opacity="0.5" d="M31.579 37.8948C28.6737 37.8948 26.3158 35.5369 26.3158 32.6317C26.3158 31.9159 26.4527 31.2306 26.7135 30.6015C26.7959 30.4027 26.7605 30.1711 26.6083 30.019L24.9997 28.4103C24.7766 28.1872 24.4043 28.2238 24.2487 28.4983C23.5588 29.7145 23.1579 31.125 23.1579 32.6317C23.1579 37.2843 26.9263 41.0527 31.579 41.0527V43.0035C31.579 43.449 32.1175 43.6721 32.4325 43.3571L35.9622 39.8273C36.1575 39.6321 36.1575 39.3155 35.9622 39.1202L32.4325 35.5905C32.1175 35.2755 31.579 35.4986 31.579 35.9441V37.8948ZM31.579 24.2106V22.2598C31.579 21.8144 31.0404 21.5913 30.7254 21.9063L27.1957 25.436C27.0004 25.6313 27.0004 25.9479 27.1957 26.1431L30.7254 29.6729C31.0404 29.9879 31.579 29.7648 31.579 29.3193V27.3685C34.4842 27.3685 36.8421 29.7264 36.8421 32.6317C36.8421 33.3474 36.7052 34.0328 36.4444 34.6618C36.362 34.8606 36.3974 35.0922 36.5496 35.2444L38.1582 36.853C38.3813 37.0762 38.7536 37.0396 38.9092 36.7651C39.5991 35.5488 40 34.1384 40 32.6317C40 27.9791 36.2316 24.2106 31.579 24.2106Z" />
<path d="M18.9474 32.6316C18.9474 35.4705 19.8099 38.0969 21.2941 40.2796C21.7904 41.0094 21.3054 42.1053 20.4229 42.1053H4.21053C1.87368 42.1053 0 40.2316 0 37.8947V4.21053C0 1.89474 1.87368 0 4.21053 0H6.31579H16.8421H29.4737C31.7895 0 33.6842 1.87368 33.6842 4.21053V17.9544C33.6842 18.5032 33.1804 18.9474 32.6316 18.9474C25.0737 18.9474 18.9474 25.0737 18.9474 32.6316Z" />
</svg>
</div>
<h3 class="
          a1g a1A
          dark:aI
          a27
          sm:a2u
          lg:a27
          xl:a2u
          a2v
        ">
Regular Updates
</h3>
<p class="
          a1S
          aH
          a1U
          a1R
          a3H[10px]
        ">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
</div>
</div>
</section>


<section class="ad a1H aq[120px]">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[570px] a1M a3I
        wow
        fadeInUp
      " data-wow-delay=".1s">
<h2 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a24[45px]
          a1Q
        ">
We are ready to help
</h2>
<p class="
          a1S aH
          md:a1T
          a1U
          md:a1U
        ">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[770px] a13 a2p
        wow
        fadeInUp
      " data-wow-delay=".15s">
<div class="ad a9 a1x">
<img src="assets/images/video.jpg" alt="video image" class="a7 a2Q a2R a2S" />
<div class="
            a3
            a7
            a2Q
            a4
            a_
            a8
            a9
            a1x
          ">
<a href="javascript:void(0)" class="
              glightbox
              as[70px]
              at[70px]
              a1w
              a8
              a9
              a1x
              aw
              a3J
              a1W
              hover:a31
              a1p
            ">
<svg width="16" height="18" viewBox="0 0 16 18" class="a26">
<path d="M15.5 8.13397C16.1667 8.51888 16.1667 9.48112 15.5 9.86602L2 17.6603C1.33333 18.0452 0.499999 17.564 0.499999 16.7942L0.5 1.20577C0.5 0.43597 1.33333 -0.0451549 2 0.339745L15.5 8.13397Z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a1X a5 a_ a1Y[-1]">
<img src="assets/images/shape.svg" alt="shape" class="a7" />
</div>
</section>


<section id="about" class="a1I[120px]">
<div class="aa">
<div class="
    a1J[100px] a2B a2o a2C[.15]
  ">
<div class="a8 a1K a9 ab[-16px]">
<div class="a7 lg:a1_/2 ae">
<div class="a2s lg:a2t aB[570px] wow fadeInUp" data-wow-delay=".15s">
<h2 class="
            a1A
            dark:aI
            a1g a1O
            sm:a1P
            md:a24[45px]
            lg:a1P
            xl:a24[45px]
            a2D
            sm:a2D
            md:a2D
            lg:a2D
            xl:a2D
            a2E
          ">
Crafted for Startup, SaaS and Business Sites.
</h2>
<p class="
            a1R a1S aH
            sm:a1T
            a1U
            sm:a1U
            a2F
          ">
The main ‘thrust’ is to focus on educating attendees on how to
best protect highly vulnerable business applications with
interactive panel discussions and roundtables.
</p>
<div class="a8 a1K ab[-12px]">
<div class="
              a7
              sm:a1_/2
              lg:a7
              xl:a1_/2
              ap
            ">
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Premium quality
</p>
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
No code required
</p>
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Use for lifetime
</p>
</div>
<div class="
              a7
              sm:a1_/2
              lg:a7
              xl:a1_/2
              ap
            ">
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Regular updates
</p>
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Rich documentation
</p>
<p class="
                a8
                a9
                a1S
                a1T
                a1R
                a2v
              ">
<span class="
                  as[30px]
                  at[30px]
                  a8
                  a9
                  a1x
                  a13
                  a1k
                  a29
                  a1W
                  a2G
                ">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Developer friendly
</p>
</div>
</div>
</div>
</div>
<div class="a7 lg:a1_/2 ae">
<div class="a1M lg:a2H wow fadeInUp" data-wow-delay=".2s">
<img src="assets/images/about-image.svg" alt="about-image" class="ag a1L lg:aP" />
</div>
</div>
</div>
</div>
</div>
</section>


<section class="a1I[100px] a1J[120px]">
<div class="aa">
<div class="a8 a1K a9 ab[-16px]">
<div class="a7 lg:a1_/2 ae">
<div class="
        a1M
        lg:a2I
        a2s
        lg:a2t
        wow
        fadeInUp
      " data-wow-delay=".15s">
<img src="assets/images/about-image-2.svg" alt="about image" class="ag a1L lg:a2J" />
</div>
</div>
<div class="a7 lg:a1_/2 ae">
<div class="aB[470px] wow fadeInUp" data-wow-delay=".2s">
<div class="a1N">
<h3 class="
            a1g a1A
            dark:aI
            a27
            sm:a2u
            lg:a27
            xl:a2u
            a1Q
          ">
Bug free code
</h3>
<p class="
            a1S aH
            sm:a1T
            a1U
            sm:a1U
            a1R
          ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="a1N">
<h3 class="
            a1g a1A
            dark:aI
            a27
            sm:a2u
            lg:a27
            xl:a2u
            a1Q
          ">
Premier support
</h3>
<p class="
            a1S aH
            sm:a1T
            a1U
            sm:a1U
            a1R
          ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt.
</p>
</div>
<div class="a2K">
<h3 class="
            a1g a1A
            dark:aI
            a27
            sm:a2u
            lg:a27
            xl:a2u
            a1Q
          ">
Regular updates
</h3>
<p class="
            a1S aH
            sm:a1T
            a1U
            sm:a1U
            a1R
          ">
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt
consectetur adipiscing elit setim.
</p>
</div>
</div>
</div>
</div>
</div>
</section>


<section class="
ad
a1H
a1I[120px]
a3A
a1k
a3g[3%]
">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[570px] a1M a3s[100px]
        wow
        fadeInUp
      " data-wow-delay=".1s">
<h2 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a24[45px]
          a1Q
        ">
What Our Users Says
</h2>
<p class="
          a1S aH
          md:a1T
          a1U
          md:a1U
        ">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        a33 aw
        dark:a3w[#1D2144]
        a13 a2Y
        lg:a37
        xl:a1l
        a1V
        wow
        fadeInUp
      " data-wow-delay=".1s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
          aH a1S
          dark:aI
          a1U a3V a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a23
        ">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
            a1w
            a2p
            aB[50px]
            a7
            at[50px]
            a2G
          ">
<img src="assets/images/author-01.png" alt="image" />
</div>
<div class="a7">
<h5 class="
              a1T
              lg:aH
              xl:a1T
              a1h
              dark:aI
              a2P a2K
            ">
Jassa Chy
</h5>
<p class="a1b a1S">
Founder @Rich
</p>
</div>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        a33 aw
        dark:a3w[#1D2144]
        a13 a2Y
        lg:a37
        xl:a1l
        a1V
        wow
        fadeInUp
      " data-wow-delay=".15s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
          aH a1S
          dark:aI
          a1U a3V a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a23
        ">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
            a1w
            a2p
            aB[50px]
            a7
            at[50px]
            a2G
          ">
<img src="assets/images/author-02.png" alt="image" />
</div>
<div class="a7">
<h5 class="
              a1T
              lg:aH
              xl:a1T
              a1h
              dark:aI
              a2P a2K
            ">
Devid Jassa
</h5>
<p class="a1b a1S">Founder @Jassa</p>
</div>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        a33 aw
        dark:a3w[#1D2144]
        a13 a2Y
        lg:a37
        xl:a1l
        a1V
        wow
        fadeInUp
      " data-wow-delay=".2s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
          aH a1S
          dark:aI
          a1U a3V a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a23
        ">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
            a1w
            a2p
            aB[50px]
            a7
            at[50px]
            a2G
          ">
<img src="assets/images/author-03.png" alt="image" />
</div>
<div class="a7">
<h5 class="
              a1T
              lg:aH
              xl:a1T
              a1h
              dark:aI
              a2P a2K
            ">
Jassa Frenci
</h5>
<p class="a1b a1S">
Founder @Jassa
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a3W a_ a1Y[-1]">
<svg width="238" height="531" viewBox="0 0 238 531" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="422.819" y="-70.8145" width="196" height="541.607" rx="2" transform="rotate(51.2997 422.819 -70.8145)" fill="url(#paint0_linear_83:2)" />
<rect opacity="0.3" x="426.568" y="144.886" width="59.7544" height="541.607" rx="2" transform="rotate(51.2997 426.568 144.886)" fill="url(#paint1_linear_83:2)" />
<defs>
<linearGradient id="paint0_linear_83:2" x1="517.152" y1="-251.373" x2="517.152" y2="459.865" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_83:2" x1="455.327" y1="-35.673" x2="455.327" y2="675.565" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="a3 a5 a3X a1Y[-1]">
<svg width="279" height="106" viewBox="0 0 279 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M-57 12L50.0728 74.8548C55.5501 79.0219 70.8513 85.7589 88.2373 79.3692C109.97 71.3821 116.861 60.9642 156.615 63.7423C178.778 65.291 195.31 69.2985 205.911 62.3533C216.513 55.408 224.994 47.7682 243.016 49.1572C255.835 50.1453 265.278 50.8936 278 45.3373" stroke="url(#paint0_linear_72:302)" />
<path d="M-57 1L50.0728 63.8548C55.5501 68.0219 70.8513 74.7589 88.2373 68.3692C109.97 60.3821 116.861 49.9642 156.615 52.7423C178.778 54.291 195.31 58.2985 205.911 51.3533C216.513 44.408 224.994 36.7682 243.016 38.1572C255.835 39.1453 265.278 39.8936 278 34.3373" stroke="url(#paint1_linear_72:302)" />
<path d="M-57 23L50.0728 85.8548C55.5501 90.0219 70.8513 96.7589 88.2373 90.3692C109.97 82.3821 116.861 71.9642 156.615 74.7423C178.778 76.291 195.31 80.2985 205.911 73.3533C216.513 66.408 224.994 58.7682 243.016 60.1572C255.835 61.1453 265.278 61.8936 278 56.3373" stroke="url(#paint2_linear_72:302)" />
<path d="M-57 35L50.0728 97.8548C55.5501 102.022 70.8513 108.759 88.2373 102.369C109.97 94.3821 116.861 83.9642 156.615 86.7423C178.778 88.291 195.31 92.2985 205.911 85.3533C216.513 78.408 224.994 70.7682 243.016 72.1572C255.835 73.1453 265.278 73.8936 278 68.3373" stroke="url(#paint3_linear_72:302)" />
</g>
<defs>
<linearGradient id="paint0_linear_72:302" x1="256.267" y1="53.6717" x2="-40.8688" y2="8.15715" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint1_linear_72:302" x1="256.267" y1="42.6717" x2="-40.8688" y2="-2.84285" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint2_linear_72:302" x1="256.267" y1="64.6717" x2="-40.8688" y2="19.1572" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint3_linear_72:302" x1="256.267" y1="76.6717" x2="-40.8688" y2="31.1572" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
</defs>
</svg>
</div>
</section>


<section id="pricing" class="ad a1H a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[655px] a1M a3s[100px]
        wow
        fadeInUp
      " data-wow-delay=".1s">
<h2 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a24[45px]
          a1Q
        ">
Simple and Affordable Pricing
</h2>
<p class="
          a1S aH
          md:a1T
          a1U
          md:a1U
          aB[570px] a1L
        ">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="a8 a1x a21 wow fadeInUp" data-wow-delay=".1s">
<span class="
          a1h
          dark:aI
          aH a2P a2G
          monthly
          a1r
        ">
Monthly
</span>
<label for="togglePlan" class="a8 a9 a1r">
<div class="ad">
<input id="togglePlan" type="checkbox" class="a1B" />
<div class="
              a1u
              a1E
              a3w[#1D2144]
              a1w
              a3Y
            "></div>
<div class="
              dot
              a3
              a2r
              a3Z
              a1k
              a1w
              a3_
              a5
              a12[-4px]
              a1p
              a8
              a9
              a1x
            ">
<span class="active a20 a40 a1w aw"></span>
</div>
</div>
</label>
<span class="
          a1h
          dark:aI
          aH a2P a41
          yearly
          a1r
        ">
Yearly
</span>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        ad a1H aw
        dark:a3w[#1D2144]
        a1n a1l a42 a13 a1V
        wow
        fadeInUp
      " data-wow-delay=".1s">
<div class="a8 ac a9">
<h3 class="
            a1g a1A
            dark:aI
            a1O a2X
            price
          ">
$<span class="amount">40</span>
<span class="a1h dark:a1S time">/mo</span
          >
</h3>
<h4 class="aI a1g a27 a2X">
Lite
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
          a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a3V a23
        ">
<a href="javascript:void(0)" class="
            a2P
            aH
            aI
            a1k
            a7
            a8
            a9
            a1x
            a13
            a44
            hover:a1n hover:a2i
            a1p a1a a2j
          ">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        ad a1H aw
        dark:a3w[#1D2144]
        a1n a1l a42 a13 a1V
        wow
        fadeInUp
      " data-wow-delay=".15s">
<div class="a8 ac a9">
<h3 class="
            a1g a1A
            dark:aI
            a1O a2X
            price
          ">
$<span class="amount">399</span>
<span class="a1h dark:a1S time">/mo</span
          >
</h3>
<h4 class="aI a1g a27 a2X">
Basic
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
          a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a3V a23
        ">
<a href="javascript:void(0)" class="
            a2P
            aH
            aI
            a1k
            a7
            a8
            a9
            a1x
            a13
            a44
            hover:a1n hover:a2i
            a1p a1a a2j
          ">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
        ad a1H aw
        dark:a3w[#1D2144]
        a1n a1l a42 a13 a1V
        wow
        fadeInUp
      " data-wow-delay=".2s">
<div class="a8 ac a9">
<h3 class="
            a1g a1A
            dark:aI
            a1O a2X
            price
          ">
$<span class="amount">589</span>
<span class="a1h dark:a1S time">/mo</span
          >
</h3>
<h4 class="aI a1g a27 a2X">
Plus
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
          a2B a2z
          dark:a2o
          a2M
          dark:a2M
          a3V a23
        ">
<a href="javascript:void(0)" class="
            a2P
            aH
            aI
            a1k
            a7
            a8
            a9
            a1x
            a13
            a44
            hover:a1n hover:a2i
            a1p a1a a2j
          ">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
              a1k
              a29
              a1W
              aB[18px]
              a7
              at[18px]
              a2A
              a8
              a9
              a1x
              a1w
            ">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
              aH a1R a1S a45
            ">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a5 a1X a1Y[-1]">
<svg width="239" height="601" viewBox="0 0 239 601" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="-184.451" y="600.973" width="196" height="541.607" rx="2" transform="rotate(-128.7 -184.451 600.973)" fill="url(#paint0_linear_93:235)" />
<rect opacity="0.3" x="-188.201" y="385.272" width="59.7544" height="541.607" rx="2" transform="rotate(-128.7 -188.201 385.272)" fill="url(#paint1_linear_93:235)" />
<defs>
<linearGradient id="paint0_linear_93:235" x1="-90.1184" y1="420.414" x2="-90.1184" y2="1131.65" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_93:235" x1="-159.441" y1="204.714" x2="-159.441" y2="915.952" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</section>


<section id="blog" class="bg-primary a1Z a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
        a1L aB[570px] a1M a3s[100px]
        wow
        fadeInUp
      " data-wow-delay=".1s">
<h2 class="
          a1A
          dark:aI
          a1g a1O
          sm:a1P
          md:a24[45px]
          a1Q
        ">
Our Latest Blogs
</h2>
<p class="
          a1S aH
          md:a1T
          a1U
          md:a1U
        ">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px] a1x">
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
        ad aw
        dark:av
        a33 a13 a2p a1V
        wow
        fadeInUp
      " data-wow-delay=".1s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
            a3
            a34
            a35
            a1k
            a1w
            aM
            a9
            a1x
            aK
            ae
            a2P
            a1b
            aI
          ">
Computer
</span>
<img src="assets/images/blog-01.jpg" alt="image" class="a7" />
</a>
<div class="
          a36
          sm:a2Y
          md:ai md:az
          lg:a2Y
          xl:ai xl:a37
          2xl:a2Y
        ">
<h3>
<a href="javascript:void(0)" class="
              a1g a1A
              dark:aI
              a27
              sm:a2u
              ah a1Q
              hover:a1W
              dark:hover:a1W
            ">
Best UI components for modern websites
</a>
</h3>
<p class="
            aH
            a1S
            a1R
            a38
            a2E
            a2B
            a2z
            a2M
            dark:a2o dark:a2M
          ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
              a8 a9 a39 a2O
              xl:a3a
              2xl:a39
              xl:a2A
              2xl:a2O
              a3b a2z a2M
              dark:a2o dark:a2M
            ">
<div class="
                aB[40px]
                a7
                at[40px]
                a1w
                a2p
                a2G
              ">
<img src="assets/images/author-01.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
                  a1b a1R a1h
                  dark:aI
                  a2K
                ">
By
<a href="javascript:void(0)" class="
                    a1h
                    dark:aI
                    hover:a1W
                    dark:hover:a1W
                  ">
Jssa
</a>
</h4>
<p class="a3c a1S">
Graphic Designer
</p>
</div>
</div>
<div class="a22">
<h4 class="
                a1b a1R a1h
                dark:aI
                a2K
              ">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
        ad aw
        dark:av
        a33 a13 a2p a1V
        wow
        fadeInUp
      " data-wow-delay=".15s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
            a3
            a34
            a35
            a1k
            a1w
            aM
            a9
            a1x
            aK
            ae
            a2P
            a1b
            aI
          ">
Design
</span>
<img src="assets/images/blog-02.jpg" alt="image" class="a7" />
</a>
<div class="
          a36
          sm:a2Y
          md:ai md:az
          lg:a2Y
          xl:ai xl:a37
          2xl:a2Y
        ">
<h3>
<a href="javascript:void(0)" class="
              a1g a1A
              dark:aI
              a27
              sm:a2u
              ah a1Q
              hover:a1W
              dark:hover:a1W
            ">
9 simple ways to improve your design skills
</a>
</h3>
<p class="
            aH
            a1S
            a1R
            a38
            a2E
            a2B
            a2z
            a2M
            dark:a2o dark:a2M
          ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
              a8 a9 a39 a2O
              xl:a3a
              2xl:a39
              xl:a2A
              2xl:a2O
              a3b a2z a2M
              dark:a2o dark:a2M
            ">
<div class="
                aB[40px]
                a7
                at[40px]
                a1w
                a2p
                a2G
              ">
<img src="assets/images/author-02.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
                  a1b a1R a1h
                  dark:aI
                  a2K
                ">
By
<a href="javascript:void(0)" class="
                    a1h
                    dark:aI
                    hover:a1W
                    dark:hover:a1W
                  ">
Jassa
</a>
</h4>
<p class="a3c a1S">
Content Writer
</p>
</div>
</div>
<div class="a22">
<h4 class="
                a1b a1R a1h
                dark:aI
                a2K
              ">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
        ad aw
        dark:av
        a33 a13 a2p a1V
        wow
        fadeInUp
      " data-wow-delay=".2s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
            a3
            a34
            a35
            a1k
            a1w
            aM
            a9
            a1x
            aK
            ae
            a2P
            a1b
            aI
          ">
Computer
</span>
<img src="assets/images/blog-03.jpg" alt="image" class="a7" />
</a>
<div class="
          a36
          sm:a2Y
          md:ai md:az
          lg:a2Y
          xl:ai xl:a37
          2xl:a2Y
        ">
<h3>
<a href="javascript:void(0)" class="
              a1g a1A
              dark:aI
              a27
              sm:a2u
              ah a1Q
              hover:a1W
              dark:hover:a1W
            ">
Tips to quickly improve your coding speed.
</a>
</h3>
<p class="
            aH
            a1S
            a1R
            a38
            a2E
            a2B
            a2z
            a2M
            dark:a2o dark:a2M
          ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
              a8 a9 a39 a2O
              xl:a3a
              2xl:a39
              xl:a2A
              2xl:a2O
              a3b a2z a2M
              dark:a2o dark:a2M
            ">
<div class="
                aB[40px]
                a7
                at[40px]
                a1w
                a2p
                a2G
              ">
<img src="assets/images/author-03.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
                  a1b a1R a1h
                  dark:aI
                  a2K
                ">
By
<a href="javascript:void(0)" class="
                    a1h
                    dark:aI
                    hover:a1W
                    dark:hover:a1W
                  ">
Jassa
</a>
</h4>
<p class="a3c a1S">
Graphic Designer
</p>
</div>
</div>
<div class="a22">
<h4 class="
                a1b a1R a1h
                dark:aI
                a2K
              ">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="contact" class="a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 lg:a2q/12 ae">
<div class="
        a1k a3g[3%]
        dark:av
        a13 a3t a2s
        lg:a2v
        sm:a3B[55px]
        lg:a3t
        xl:a3B[55px]
        wow
        fadeInUp
      " data-wow-delay=".15s
      ">
<h2 class="
          a1g a1A
          dark:aI
          a2u
          sm:a1O
          lg:a2u
          xl:a1O
          a30
        ">
Need Help? Open a Ticket
</h2>
<p class="a1S aH a1R a2s">
Our support team will get back to you ASAP via email.
</p>
<form>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 ae">
<div class="a23">
<label for="name" class="
                  ah a1b a1R a1h
                  dark:aI
                  a30
                ">
Your Name
</label>
<input type="text" placeholder="Enter your name" class="
                  a7 a3l a3m
                  dark:a3w[#242B51]
                  a13 a33
                  dark:a1n
                  a1i
                  az
                  a1S
                  aH
                  a3x
                  a3o
                  focus-visible:aE
                  focus:a3p
                " />
</div>
</div>
<div class="a7 md:a1_/2 ae">
<div class="a23">
<label for="email" class="
                  ah a1b a1R a1h
                  dark:aI
                  a30
                ">
Your Email
</label>
<input type="email" placeholder="Enter your email" class="
                  a7 a3l a3m
                  dark:a3w[#242B51]
                  a13 a33
                  dark:a1n
                  a1i
                  az
                  a1S
                  aH
                  a3x
                  a3o
                  focus-visible:aE
                  focus:a3p
                " />
</div>
</div>
<div class="a7 ae">
<div class="a23">
<label for="message" class="
                  ah a1b a1R a1h
                  dark:aI
                  a30
                ">
Your Message
</label>
<textarea name="message" rows="5" placeholder="Enter your Message" class="
                  a7 a3l a3m
                  dark:a3w[#242B51]
                  a13 a33
                  dark:a1n
                  a1i
                  az
                  a1S
                  aH
                  a3x
                  a3o
                  focus-visible:aE
                  focus:a3p
                  a3C
                "></textarea>
</div>
</div>
<div class="a7 ae">
<a href="javascript:void(0)" class="
                aH
                a1R
                aI
                a1k
                a3q
                a1m
                hover:a2i hover:a1n
                a13
                a1p
                a1a
                a2j
              ">
Submit Ticket
</a>
</div>
</div>
</form>
</div>
</div>
<div class="a7 lg:a20/12 ae">
<div class="
        ad
        a1H
        a13
        a1k
        a3g[3%]
        dark:a29
        a2Y
        sm:a3t
        lg:a2Y
        xl:a3t
        a2v
        wow
        fadeInUp
      " data-wow-delay=".2s
      ">
<h3 class="
          a1A
          dark:aI
          a1g a2u a2D a1Q
        ">
Subscribe to receive future updates
</h3>
<p class="
          a1R
          aH
          a1S
          a1U
          a3u
          a2F
          a2B
          a2z
          a3v
          dark:a2o dark:a3v
        ">
Lorem ipsum dolor sited Sed ullam corper consectur adipiscing
Mae ornare massa quis lectus.
</p>
<form>
<input type="text" name="name" placeholder="Enter your name" class="
            a7
            a3l
            a2z
            a2M
            dark:a2o
            dark:a2M
            dark:a3w[#242B51]
            a13
            a1i
            az
            a1R
            a1S
            aH
            a3x
            a3o
            focus-visible:aE
            focus:a3p focus:a3y
            a1Q
          " />
<input type="email" name="email" placeholder="Enter your email" class="
            a7
            a3l
            a2z
            a2M
            dark:a2o
            dark:a2M
            dark:a3w[#242B51]
            a13
            a1i
            az
            a1R
            a1S
            aH
            a3x
            a3o
            focus-visible:aE
            focus:a3p focus:a3y
            a1Q
          " />
<input type="button" value="Subscribe" class="
            a7
            a3l
            a3p
            a1k
            a13
            a1i
            az
            a1R
            aI
            aH
            a1M
            a3o
            a1r
            focus-visible:aE
            hover:a1n hover:a2i
            a1p a3z a2j a1Q
          " />
<p class="
            aH
            a1S
            a1M
            a1R
            a1U
          ">
No spam guaranteed, So please don’t send any spam mail.
</p>
</form>
<div class="a3 a4 a5 a1Y[-1]">
<svg width="370" height="596" viewBox="0 0 370 596" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_88:141" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="370" height="596">
<rect width="370" height="596" rx="2" fill="#1D2144" />
</mask>
<g mask="url(#mask0_88:141)">
<path opacity="0.15" d="M15.4076 50.9571L54.1541 99.0711L71.4489 35.1605L15.4076 50.9571Z" fill="url(#paint0_linear_88:141)" />
<path opacity="0.15" d="M20.7137 501.422L44.6431 474.241L6 470.624L20.7137 501.422Z" fill="url(#paint1_linear_88:141)" />
<path opacity="0.1" d="M331.676 198.309C344.398 204.636 359.168 194.704 358.107 180.536C357.12 167.363 342.941 159.531 331.265 165.71C318.077 172.69 318.317 191.664 331.676 198.309Z" fill="url(#paint2_linear_88:141)" />
<g opacity="0.3">
<path d="M209 89.9999C216 77.3332 235.7 50.7999 258.5 45.9999C287 39.9999 303 41.9999 314 30.4999C325 18.9999 334 -3.50014 357 -3.50014C380 -3.50014 395 4.99986 408.5 -8.50014C422 -22.0001 418.5 -46.0001 452 -37.5001C478.8 -30.7001 515.167 -45 530 -53" stroke="url(#paint3_linear_88:141)" />
<path d="M251 64.9999C258 52.3332 277.7 25.7999 300.5 20.9999C329 14.9999 345 16.9999 356 5.49986C367 -6.00014 376 -28.5001 399 -28.5001C422 -28.5001 437 -20.0001 450.5 -33.5001C464 -47.0001 460.5 -71.0001 494 -62.5001C520.8 -55.7001 557.167 -70 572 -78" stroke="url(#paint4_linear_88:141)" />
<path d="M212 73.9999C219 61.3332 238.7 34.7999 261.5 29.9999C290 23.9999 306 25.9999 317 14.4999C328 2.99986 337 -19.5001 360 -19.5001C383 -19.5001 398 -11.0001 411.5 -24.5001C425 -38.0001 421.5 -62.0001 455 -53.5001C481.8 -46.7001 518.167 -61 533 -69" stroke="url(#paint5_linear_88:141)" />
<path d="M249 40.9999C256 28.3332 275.7 1.79986 298.5 -3.00014C327 -9.00014 343 -7.00014 354 -18.5001C365 -30.0001 374 -52.5001 397 -52.5001C420 -52.5001 435 -44.0001 448.5 -57.5001C462 -71.0001 458.5 -95.0001 492 -86.5001C518.8 -79.7001 555.167 -94 570 -102" stroke="url(#paint6_linear_88:141)" />
</g>
</g>
<defs>
<linearGradient id="paint0_linear_88:141" x1="13.4497" y1="63.5059" x2="81.144" y2="41.5072" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_88:141" x1="28.1579" y1="501.301" x2="8.69936" y2="464.391" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear_88:141" x1="338" y1="167" x2="349.488" y2="200.004" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_88:141" x1="369.5" y1="-53" x2="369.5" y2="89.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_88:141" x1="411.5" y1="-78" x2="411.5" y2="64.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_88:141" x1="372.5" y1="-69" x2="372.5" y2="73.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_88:141" x1="409.5" y1="-102" x2="409.5" y2="40.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>

6. Now guy’s we need to add below inside project/src/app/app.component.html file:

<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>

7. Now guy’s we need to add below code inside our project/src/index.html file:

...
<body class="dark:a1">
...

Friends in the end must run ng serve command into your terminal to run the angular 13 project (localhost:4200).

Guys click here to check the Angular 13 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.