Change CSS classname convention

components/Hero.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="HeroWrapper rounded-b-3xl shadow-xl bg-gradient-to-br from-blue-300 to-blue-700 flex items-center"
+    class="hero rounded-b-3xl shadow-xl bg-gradient-to-br from-blue-300 to-blue-700 flex items-center"
   >
     <div
       class="rounded-3xl bg-white w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 shadow-xl text-center"
@@ -36,7 +36,7 @@ export default {};
 </script>
 
 <style>
-.HeroWrapper {
+.hero {
   height: 460px;
 }
 </style>

components/Logo.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="BrandLogo w-24 md:w-40"
+    class="brand-logo w-24 md:w-40"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 230 230"
@@ -199,7 +199,7 @@
 </template>
 
 <style>
-.BrandLogo {
+.brand-logo {
   animation: 1s appear;
   margin: auto;
 }