adjustment title and remove HelloWorld component

docs/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import pkg from '../../package.json';
-import HelloWorld from './components/HelloWorld.vue'
+import Title from './components/Title.vue'
 import VueTechsLogos from 'vue-techs-logos'
 import DarkModeVue from 'darkmode-vue'
 
@@ -12,7 +12,7 @@ const appVersion: string = pkg.version;
     <DarkModeVue class="darkmode-button" :hiddenLabel="true"/>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
     <div class="wrapper">
-      <HelloWorld :msg="`vue-techs-logos@${appVersion}`" />
+      <Title :title="`vue-techs-logos@${appVersion}`" />
       <div class="code-content">
         <div>
           <h1>Install</h1>

docs/src/components/Title.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="title">
+    <h1 class="green">{{ title }}</h1>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-size: 2rem;
+  top: -10px;
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  h1 {
+    font-weight: 500;
+    font-size: 2.8rem;
+    text-align: left;
+  }
+}
+</style>

docs/src/components/__tests__/Title.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import Title from '../Title.vue'
+
+describe('Title', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Title, { props: { title: 'VueTechsLogos' } })
+    expect(wrapper.text()).toContain('VueTechsLogos')
+  })
+})