update pretty

alexy-os · Nov 22, 2024 · 10481a1 · 10481a1
1 parent 06ee420
commit 10481a1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "author": "Alexy-OS",
     "repository": "https://github.com/alexy-os/vue-shadcn-starter",
     "license": "MIT",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "private": true,
     "scripts": {
         "dev": "vite",

diff --git a/src/components/sections/hero/variants.ts b/src/components/sections/hero/variants.ts
@@ -12,7 +12,7 @@ export const heroVariants = cva(
       layout: {
         default: '',
         split: 'grid grid-cols-1 md:grid-cols-2 gap-0 items-center',
-        splitBox: 'container mx-auto grid grid-cols-1 md:grid-cols-2 gap-0 items-center',
+        splitBox: 'grid grid-cols-1 md:grid-cols-2 gap-0 items-center',
         centered: 'flex min-h-[inherit] items-center justify-center',
         asymmetric: 'grid grid-cols-1 md:grid-cols-[2fr_3fr] gap-8 items-center'
       },

diff --git a/src/pages/Media.vue b/src/pages/Media.vue
@@ -99,23 +99,25 @@ const placeholderDark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlna
   </Hero>
 
 <!-- Hero 4: with pattern background -->
-<Hero layout="splitBox" height="nav" background="gradient">
+<Hero height="nav" background="gradient" class="flex items-center">
     <div 
-      class="absolute inset-0 bg-cover bg-center opacity-20"
+      class="absolute inset-0 bg-cover bg-center opacity-20 w-full h-full"
       :style="{ backgroundImage: `url(${placeholders.abstract})` }"
     />
-    <HeroContent align="left" class="relative z-10">
-      <HeroTitle>Designed for Modern Teams</HeroTitle>
-      <HeroDescription>
-        Built with the latest technology stack to ensure maximum performance and scalability.
-      </HeroDescription>
-      <HeroActions class="justify-start">
-        <Button>Learn More</Button>
-      </HeroActions>
-    </HeroContent>
-    <HeroMedia aspectRatio="video" class="relative">
-      <div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-primary/5 rounded-lg" />
-      <img :src="placeholders.abstract" class="object-cover rounded-lg" alt="Abstract" />
-    </HeroMedia>
+    <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 items-center py-12 sm:py-16 lg:py-24 px-6 sm:px-8 lg:px-12">
+      <HeroContent align="left" class="relative z-10">
+        <HeroTitle>Designed for Modern Teams</HeroTitle>
+        <HeroDescription>
+          Built with the latest technology stack to ensure maximum performance and scalability.
+        </HeroDescription>
+        <HeroActions class="justify-start">
+          <Button>Learn More</Button>
+        </HeroActions>
+      </HeroContent>
+      <HeroMedia aspectRatio="video" class="relative p-0 sm:p-4 lg:p-8">
+        <div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-primary/5 rounded-lg m-0 sm:m-4 lg:m-8" />
+        <img :src="placeholders.abstract" class="object-cover rounded-lg" alt="Abstract" />
+      </HeroMedia>
+    </div>
 </Hero>
 </template>
diff --git a/src/pages/Split.vue b/src/pages/Split.vue
@@ -102,13 +102,13 @@ const placeholderDark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlna
   </Hero>
 
   <!-- Секция 3: Изображение справа -->
-  <Hero layout="splitBox" height="nav" background="gradient">
+  <Hero height="nav" background="gradient" class="flex items-center">
     <div 
-      class="absolute inset-0 bg-cover bg-center opacity-20"
+      class="absolute inset-0 bg-cover bg-center opacity-20 w-full h-full"
       :style="{ backgroundImage: `url(${placeholders.abstract})` }"
     />
-    <HeroContent align="left" class="relative z-10 container mx-auto" padding="md">
-      <div class="py-12">
+    <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 items-center py-12 sm:py-16 lg:py-24 px-6 sm:px-8 lg:px-12">
+      <HeroContent align="left" class="relative z-10">
         <Badge variant="default">Premium</Badge>
         <HeroTitle class="mt-4">Enterprise Solutions</HeroTitle>
         <HeroDescription>
@@ -127,20 +127,20 @@ const placeholderDark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlna
         <HeroActions class="justify-start">
           <Button size="lg" class="mt-8">Contact Sales</Button>
         </HeroActions>
-      </div>
-    </HeroContent>
-    <HeroMedia class="relative rounded-[2rem] overflow-hidden shadow-2xl mb-12" aspectRatio="auto">
-      <div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-primary/5" />
-      <img
-        :src="placeholderLight"
-        class="object-cover w-full h-full dark:hidden"
-        alt="Enterprise"
-      />
-      <img
-        :src="placeholderDark"
-        class="object-cover w-full h-full hidden dark:block"
-        alt="Enterprise"
-      />
-    </HeroMedia>
+      </HeroContent>
+      <HeroMedia class="relative overflow-hidden p-0 sm:p-4 lg:p-8" aspectRatio="auto">
+        <div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-primary/5 rounded-[2rem] m-0 sm:m-4 lg:m-8" />
+        <img
+          :src="placeholderLight"
+          class="object-cover w-full h-full dark:hidden  rounded-[2rem] shadow-2xl"
+          alt="Enterprise"
+        />
+        <img
+          :src="placeholderDark"
+          class="object-cover w-full h-full hidden dark:block  rounded-[2rem] shadow-2xl"
+          alt="Enterprise"
+        />
+      </HeroMedia>
+    </div>
   </Hero>
 </template>