feat: 首页

src/pages/home/components/ProjectCta.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+	<section class="project-cta">
+		<div class="project-cta-inner">
+			<h2 class="project-cta-title">Talk To Us About Your Next Project</h2>
+			<RouterLink class="project-cta-link" to="/contact">
+				Contact Us
+			</RouterLink>
+		</div>
+	</section>
+</template>
+
+<style scoped lang="less">
+	.project-cta {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 435px;
+		padding: 72px 20px;
+		background: #473935;
+	}
+
+	.project-cta-inner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 38px;
+		text-align: center;
+	}
+
+	.project-cta-title {
+		margin: 0;
+		color: #ffffff;
+		font-family: Poppins, sans-serif;
+		font-size: clamp(22px, 2vw, 27px);
+		font-weight: 700;
+		line-height: 1.35;
+		letter-spacing: 2px;
+		text-transform: capitalize;
+	}
+
+	.project-cta-link {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 158px;
+		min-height: 48px;
+		padding: 0 28px;
+		border-radius: 999px;
+		color: #ffffff;
+		background: #ad2228;
+		font-family: Poppins, sans-serif;
+		font-size: 10px;
+		font-weight: 700;
+		line-height: 1;
+		letter-spacing: 2px;
+		text-decoration: none;
+		text-transform: uppercase;
+		transition:
+			background-color 0.2s ease,
+			transform 0.2s ease;
+	}
+
+	.project-cta-link:hover,
+	.project-cta-link:focus-visible {
+		background: #93191f;
+		transform: translateY(-1px);
+	}
+
+	.project-cta-link:focus-visible {
+		outline: 2px solid #ffffff;
+		outline-offset: 4px;
+	}
+
+	@media (max-width: 640px) {
+		.project-cta {
+			min-height: 340px;
+		}
+	}
+</style>