better comparisson cards

thefintz · Oct 10, 2024 · 4e5cbc2 · 4e5cbc2
1 parent 76e05bc
commit 4e5cbc2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/components/ComparisonCard.vue b/components/ComparisonCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow-lg overflow-hidden" :class="{ 'ring-8 ring-yellow-500': highlighted }">
-    <div class="aspect-[2/3]">
-      <NuxtImg :src="imageSrc" :alt="title" class="w-content object-cover" />
+  <div class="bg-black rounded-lg shadow-lg overflow-hidden flex flex-col w-64 sm:w-72 md:w-full mx-auto" :class="{ 'ring-8 ring-yellow-500': highlighted }">
+    <div class="relative aspect-[2/3]">
+      <NuxtImg :src="imageSrc" :alt="title" class="w-full h-full object-cover" />
     </div>
-    <div class="p-4 bg-black">
+    <div class="py-2 px-3 bg-black text-white">
       <h3 class="text-xl font-bold mb-4">{{ title }}</h3>
       <ul>
         <li v-for="(value, key) in features" :key="key" class="flex items-center mb-2">

diff --git a/pages/index.vue b/pages/index.vue
@@ -65,14 +65,14 @@
     </section>
 
     <!-- Section 4: AI-Created Images Gallery -->
-    <section class="container mx-auto py-16">
-  <h2 class="text-3xl font-bold text-center mb-8">AI-Created Images</h2>
-  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-    <div v-for="image in aiImages" :key="image.alt" class="aspect-[2/3]">
-      <NuxtImg :src="image.itemImageSrc" :alt="image.alt" class="w-full h-full object-cover rounded-lg" />
+  <section class="container mx-auto py-16">
+    <h2 class="text-3xl font-bold text-center mb-8">AI-Created Images</h2>
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 gap-4">
+      <div v-for="image in aiImages" :key="image.alt" class="aspect-[2/3]">
+        <NuxtImg :src="image.itemImageSrc" :alt="image.alt" class="w-full h-full object-cover rounded-lg" />
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 
     <!-- Section 5: Login Button -->
     <section class="w-full py-32 bg-gradient-to-r from-blue-600 to-purple-700 text-white text-center">
@@ -92,7 +92,7 @@
 
     <!-- Section 7: Comparison with Competitors -->
     <section class="w-full py-16 bg-gradient-to-r from-blue-600 to-purple-700">
-      <div class="container mx-auto">
+      <div class="container mx-auto sm:w-full md:w-full  lg:w-4/5 xl:w-3/5 2xl:w-2/5">
         <h2 class="text-3xl font-bold text-center text-white mb-8">How does TakePics.AI compare to other AI image services?</h2>
         <div class="flex flex-col md:flex-row justify-center items-stretch gap-6">
           <ComparisonCard
@@ -101,7 +101,7 @@
             :features="{
               realPersonModel: false,
               lowResemblance: false,
-              mediumPhotorealism: true,
+              mediumRealism: true,
               mediumResolution: true,
               clearAndSharp: false
             }"
@@ -171,7 +171,7 @@
     <footer class="w-full bg-gray-800 text-white py-8">
       <div class="container mx-auto flex flex-wrap justify-between">
         <div class="w-full md:w-1/3 px-8 mb-6 md:mb-0">
-          <h4 class="text-lg font-bold mb-4">About Us</h4>
+          <h4 class="text-lg font-bold mb-4">TakePics.AI</h4>
           <p>Create awesome AI-generated photos for you and your friends.</p>
         </div>
         <div class="w-full md:w-1/3 px-8 mb-6 md:mb-0">
@@ -190,7 +190,7 @@
         </div>
       </div>
       <div class="mt-8 text-center">
-        <p>&copy; 2023 AI Photo Generation. All rights reserved.</p>
+        <p>&copy; 2024 AI Photo Generation. All rights reserved.</p>
       </div>
     </footer>
   </div>