create new pages

SharedUI/Shared/Components/HeroComponent.razor

@@ -4,8 +4,8 @@
         <div class="col-lg-6 mx-auto">
             <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
             <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-                <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
+                <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold"><a href="/services">What we do</a></button>
-                <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
+                <button type="button" class="btn btn-outline-light btn-lg px-4"><a href="/portfolio">viwe works</a></button>
             </div>
         </div>
     </div>

SharedUI/Shared/Components/Layout/NavbarComponent.razor

@@ -1,19 +1,25 @@
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark poppins">
     <div class="container-fluid">
-        <a class="navbar-brand" href="#">Fixed navbar</a>
+        <a class="navbar-brand" href="/home">MangoWeb</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarCollapse">
             <ul class="navbar-nav me-auto mb-2 mb-md-0">
+                <NavLink>   
+                    <a class="nav-link active" aria-current="page" href="/home">Home</a>
+                </NavLink>
+               <NavLink>
+                    <a class="nav-link" href="/portfolio">Portfolio</a>
+                </NavLink>
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                    <a class="nav-link" href="/services" tabindex="-1" aria-disabled="true">Services</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link" href="/contact" tabindex="-1" aria-disabled="true">Contact</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                    <a class="nav-link" href="/otherpages" tabindex="-1" aria-disabled="true">Other pages</a>
                 </li>
             </ul>
             <form class="d-flex">

SharedUI/Shared/Components/Layout/SliderComponent.razor

@@ -0,0 +1,30 @@
+<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+    <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+    </div>
+    <div class="carousel-inner">
+        <div class="carousel-item active">
+            <img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+            <img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+            <img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
+        </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>
+
+@code {
+
+}

SharedUI/Shared/Components/Pages/Home.razor

@@ -0,0 +1,28 @@
+@page "/home"
+@using SharedUI.Shared.Components.Layout
+
+
+<HeroComponent />
+ 
+<section>
+    <div class="container col-xxl-8 px-4 py-5">
+        <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+            <div class="col-10 col-sm-8 col-lg-6">
+                <img src="https://images.unsplash.com/photo-1520531158340-44015069e78e?q=80&w=1944&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+            </div>
+            <div class="col-lg-6">
+                <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+                <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+                <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+                    <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
+                    <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<CardComponent/>
+@code {
+
+}

SharedUI/Shared/Components/Pages/OtherPages.razor

@@ -0,0 +1,11 @@
+@page "/otherpages"
+@using SharedUI.Shared.Components.Layout
+
+<HeroComponent />
+
+
+<CardComponent/>
+
+@code {
+
+}

SharedUI/Shared/Components/Pages/Portfolio.razor

@@ -0,0 +1,197 @@
+@page "/portfolio"
+
+
+
+
+
+
+		<section class="py-5">
+
+		<div class="container pt-4 pb-4">
+			<div class="row">
+				<div class="col-md-4 align-self-center">
+					<div class="lc-block text-secondary">
+						<div editable="rich">
+							<p>magna ultricies </p>
+						</div>
+					</div>
+					<div class="lc-block border-bottom">
+						<div editable="rich">
+
+							<h1>Aliquam tincidunt mauris eu risus</h1>
+
+
+						</div>
+					</div><!-- /lc-block -->
+				</div><!-- /col -->
+				<div class="col-md-4">
+					<div class="lc-block mb-2">
+						<img class="img-fluid" src="https://images.unsplash.com/photo-1516640000-9951e17c051d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Photo by Cristina Gottardi" loading="lazy">
+					</div><!-- /lc-block -->
+					<div class="lc-block">
+						<div editable="rich">
+							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.&nbsp;</p>
+						</div>
+					</div><!-- /lc-block -->
+				</div><!-- /col -->
+				<div class="col-md-4">
+					<div class="lc-block">
+						<div editable="rich">
+							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
+						</div>
+					</div><!-- /lc-block -->
+					<div class="lc-block mb-2">
+						<img class="img-fluid" src="https://images.unsplash.com/photo-1473445030992-b2356ec3621a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Photo by Cristina Gottardi" loading="lazy">
+					</div><!-- /lc-block -->
+				</div><!-- /col -->
+			</div>
+		</div>
+		</section>
+
+		
+		<section class="py-5">
+			<div class="container">
+				<div class="row">
+					<div class="col-12">
+						<div class="p-md-5 mb-2 lc-block text-center">
+							<div class="lc-block mb-4">
+								<div editable="rich">
+									<p class="fw-bold display-5">Our Projects</p>
+								</div>
+							</div>
+							<div class="lc-block mb-5">
+								<div editable="rich">
+									<p class="fw-light rfs-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Nunc et metus id ligula malesuada placerat sit amet quis enim.<br></p>
+								</div>
+							</div>
+
+						</div>
+					</div><!-- /col -->
+				</div>
+			</div>
+			<div class="container">
+				<div class="row row-cols-2 row-cols-lg-4">
+					<div class="col text-center">
+						<div class="lc-block mb-4">
+							<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
+						</div><!-- /lc-block -->
+						<div class="lc-block">
+							<div editable="rich">
+
+								<h3>Project Name 1</h3>
+								<p class="text-muted">Project Description</p>
+
+							</div>
+						</div>
+						<!-- /lc-block -->
+					</div>
+					<div class="col text-center">
+						<div class="lc-block mb-4">
+							<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
+						</div><!-- /lc-block -->
+						<div class="lc-block">
+							<div editable="rich">
+
+								<h3>Project Name 2</h3>
+								<p class="text-muted">Project Description</p>
+
+							</div>
+						</div>
+						<!-- /lc-block -->
+					</div>
+					<div class="col text-center">
+						<div class="lc-block mb-4">
+							<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
+						</div><!-- /lc-block -->
+						<div class="lc-block">
+							<div editable="rich">
+
+								<h3>Project Name 3</h3>
+								<p class="text-muted">Project Description</p>
+
+							</div>
+						</div>
+						<!-- /lc-block -->
+					</div>
+					<div class="col text-center">
+						<div class="lc-block mb-4">
+							<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
+						</div><!-- /lc-block -->
+						<div class="lc-block">
+							<div editable="rich">
+
+								<h3>Project Name 4</h3>
+								<p class="text-muted">Project Description</p>
+
+							</div>
+						</div>
+						<!-- /lc-block -->
+					</div>
+				</div>
+			</div>
+		</section>
+		<section>
+			<div class="container py-5">
+				<div class="row">
+					<div class="col-md-12">
+						<div class="p-md-5 mb-2 lc-block text-center">
+							<div class="lc-block">
+								<div editable="rich">
+									<p class="fw-bold display-5">FAQ</p>
+								</div>
+							</div>
+
+
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-md-6">
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Excepteur sint occaecat cupidatat non? </p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Duis aute irure dolor in?</p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Consequuntur magni dolores eos qui?</p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6">
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Duis aute irure dolor in?</p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Consequuntur magni dolores eos qui?</p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+						<div class="lc-block mb-5">
+							<div editable="rich">
+								<p class="h4">Excepteur sint occaecat cupidatat non? </p>
+								<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+		
+
+
+@code {
+
+}