feat: core structure of home page with intro and history sections

This commit is contained in:
jezzahehn 2025-05-11 22:07:10 -04:00
parent 3aea00e798
commit 0d98f11e21
7 changed files with 77 additions and 65 deletions

View file

@ -1,31 +1,34 @@
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// import SideBar from './components/organisms/SideBar.vue'
import './assets/style.scss'
import 'bulma/css/bulma.css'
</script>
<template>
<!-- <SideBar /> -->
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo" alt="Vue logo" />
</a>
<div class="min-h-screen flex flex-col" style="gap: 4rem;"><!-- Main application wrapper -->
<!-- <SideBar /> -->
<h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
<PaddingWrapper v-for="(sectionName, index) in sectionList" :key="index">
<component :is="sectionName" />
</PaddingWrapper>
</div>
<HelloWorld msg="Vite + Vue = bråtula!" />
</template>
<style scoped>
.logo {
height: 10em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
<script lang="ts">
// import SideBar from './components/organisms/SideBar.vue'
import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
import IntroSection from './components/organisms/IntroSection.vue'
import HistorySection from './components/organisms/HistorySection.vue'
import './assets/style.scss'
import 'bulma/css/bulma.css'
export default {
name: 'app',
components: {
PaddingWrapper,
IntroSection,
HistorySection
},
data() {
return {
sectionList: ['IntroSection', 'HistorySection']
}
}
}
.logo:hover {
filter: drop-shadow(0 0 2em #000000aa);
}
</style>
</script>