You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.7 KiB
68 lines
1.7 KiB
<script setup lang="ts"> |
|
/** |
|
* HeroSection - Main hero/landing section of the homepage |
|
* |
|
* AI CODING TOOL INSTRUCTIONS: |
|
* Content is loaded from /src/content/site-data.js |
|
* |
|
* When user says: |
|
* - "change the title" -> edit hero.title.value in site-data.js |
|
* - "change the subtitle" or "tagline" -> edit hero.tagline.value in site-data.js |
|
* - "change the description" -> edit hero.description.value in site-data.js |
|
* - "change hero colors" -> modify the styles below or variables.css |
|
*/ |
|
import { hero } from "@/content/site-data"; |
|
import logo from "@/assets/logo.jpg"; |
|
</script> |
|
|
|
<template> |
|
<section class="hero-section"> |
|
<div class="hero-container"> |
|
<img :src="logo" alt="Logo" class="hero-logo" /> |
|
<h1 class="hero-title">{{ hero.title.value }}</h1> |
|
<p class="hero-tagline">{{ hero.tagline.value }}</p> |
|
<p class="hero-description">{{ hero.description.value }}</p> |
|
</div> |
|
</section> |
|
</template> |
|
|
|
<style scoped> |
|
.hero-section { |
|
padding: var(--space-2xl) var(--space-lg); |
|
text-align: center; |
|
background-color: var(--color-background); |
|
} |
|
|
|
.hero-container { |
|
max-width: var(--content-width); |
|
margin: 0 auto; |
|
} |
|
|
|
.hero-logo { |
|
display: block; |
|
max-width: 150px; |
|
height: auto; |
|
margin: 0 auto var(--space-md); |
|
} |
|
|
|
.hero-title { |
|
font-size: clamp(2.5rem, 8vw, 4rem); |
|
color: var(--color-primary-dark); |
|
margin-bottom: var(--space-md); |
|
letter-spacing: -0.02em; |
|
} |
|
|
|
.hero-tagline { |
|
font-size: var(--font-size-xl); |
|
color: var(--color-secondary-dark); |
|
font-weight: 500; |
|
margin-bottom: var(--space-lg); |
|
} |
|
|
|
.hero-description { |
|
font-size: var(--font-size-lg); |
|
color: var(--color-secondary-dark); |
|
max-width: 600px; |
|
margin: 0 auto; |
|
} |
|
</style>
|
|
|