Single project and footer design changes

Author: realstoman

src/components/project/SingleProjectRelatedProjects.vue

@@ -1,8 +1,10 @@
 <template>
 	<!-- Related projects start -->
-	<div class="mt-10 sm:mt-20">
+	<div
+		class="mt-10 pt-10 sm:pt-14 sm:mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
+	>
 		<p
-			class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14"
+			class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left"
 		>
 			Related Projects
 		</p>

src/components/shared/Footer.vue

@@ -1,45 +1,49 @@
 <template>
-	<div
-		class="container mx-auto pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
-	>
-		<!-- Footer social links start -->
-		<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
-			<p
-				class="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
+	<div class="container mx-auto ">
+		<div
+			class="innercontent pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
+		>
+			<!-- Footer social links start -->
+			<div
+				class="flex flex-col justify-center items-center mb-12 sm:mb-28"
 			>
-				Follow me
-			</p>
-			<ul class="flex gap-4 sm:gap-8">
-				<a
-					v-for="social in socials"
-					:key="social.id"
-					:href="social.url"
-					target="__blank"
-					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
+				<p
+					class="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
 				>
-					<i
-						:data-feather="social.icon"
-						class="w-6 sm:w-8 h-6 sm:h-8"
-					></i>
-				</a>
-			</ul>
-		</div>
-		<!-- Footer social links end -->
+					Follow me
+				</p>
+				<ul class="flex gap-4 sm:gap-8">
+					<a
+						v-for="social in socials"
+						:key="social.id"
+						:href="social.url"
+						target="__blank"
+						class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
+					>
+						<i
+							:data-feather="social.icon"
+							class="w-6 sm:w-8 h-6 sm:h-8"
+						></i>
+					</a>
+				</ul>
+			</div>
+			<!-- Footer social links end -->
 
-		<!-- Footer copyright start -->
-		<div class="flex justify-center items-center text-center">
-			<div class="text-lg text-ternary-dark dark:text-ternary-light">
-				&copy; Copyright {{ copyrightDate }}. Vue.js & TailwindCSS
-				Portfolio.
-				<a
-					href="https://stoman.me"
-					target="__blank"
-					class="text-secondary-dark dark:text-secondary-light font-medium uppercase"
-					>Stoman</a
-				>
+			<!-- Footer copyright start -->
+			<div class="flex justify-center items-center text-center">
+				<div class="text-lg text-ternary-dark dark:text-ternary-light">
+					&copy; Copyright {{ copyrightDate }}. Vue.js & TailwindCSS
+					Portfolio.
+					<a
+						href="https://stoman.me"
+						target="__blank"
+						class="text-secondary-dark dark:text-secondary-light font-medium uppercase"
+						>Stoman</a
+					>
+				</div>
 			</div>
+			<!-- Footer copyright end -->
 		</div>
-		<!-- Footer copyright end -->
 	</div>
 </template>
 

src/views/SingleProject.vue

@@ -9,8 +9,6 @@
 		<!-- Project information -->
 		<SingleProjectInfo />
 
-		<hr class="mt-10 sm:mt-20 text-ternary-dark dark:text-ternary-dark" />
-
 		<!-- Project related projects -->
 		<SingleProjectRelatedProjects />
 	</div>