update homepage

pages/figma.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="rotated-container">
+      <div class="header-container">
+        <v-sheet
+          class="orange-bar"
+          color="orange-lighten-1"
+          position="absolute"
+        ></v-sheet>
+
+        <v-row no-gutters align="center" class="content-row">
+          <v-col cols="auto" class="rotated-text-container">
+            <div class="text-h3 font-weight-bold rotated-text text-orange-darken-1">With Love We Serve</div>
+            <div class="text-body-1 font-weight-medium rotated-text">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</div>
+          </v-col>
+
+          <v-spacer></v-spacer>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">rsusaifulanwar.jatimprov.go.id</div>
+          </v-col>
+
+          <v-col cols="auto" class="d-flex flex-column align-center justify-center">
+            <v-avatar size="40" rounded="0" class="mb-1">
+              <v-img src="https://placehold.co/40x40"></v-img>
+            </v-avatar>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">0341-362101</div>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">rssasaifulanwar</div>
+          </v-col>
+
+          <v-col cols="auto" class="rotated-text-container text-white">
+            <div class="text-h6 font-weight-bold rotated-text">+62 815-5560-6668</div>
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+// No script logic needed for this static layout
+</script>
+
+<style scoped>
+.rotated-container {
+  width: 1133px;
+  height: 744px;
+  position: relative;
+  /* Rotate the entire container 90 degrees clockwise */
+  transform: rotate(90deg) translateX(0);
+  transform-origin: top left;
+  background: white;
+  overflow: hidden;
+}
+
+.header-container {
+  position: absolute;
+  left: 46px;
+  top: 9px;
+  /* Use flexbox for spacing as per the original design */
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.content-row {
+  width: 100%;
+}
+
+.orange-bar {
+  width: 1041px;
+  height: 72px;
+  left: 0;
+  top: -9px;
+  border-top-left-radius: 60px;
+  border-top-right-radius: 60px;
+  z-index: 1; /* Ensure it's behind the text */
+}
+
+.rotated-text-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.rotated-text {
+  /* Rotate the text 90 degrees counter-clockwise to appear upright in the rotated container */
+  transform: rotate(-90deg);
+  transform-origin: top left;
+  white-space: nowrap; /* Prevent text from wrapping */
+}
+
+.rotated-text-container:nth-child(1) .rotated-text:nth-child(1) {
+  height: 32px; /* Adjusted to fit the original size */
+}
+
+.rotated-text-container:nth-child(3) .rotated-text {
+  height: 272px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(5) .rotated-text {
+  height: 123px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(6) .rotated-text {
+  height: 144px; /* Match original height */
+}
+
+.rotated-text-container:nth-child(7) .rotated-text {
+  height: 181px; /* Match original height */
+}
+</style>