Spaces:

Baonq
/

canvas-elegance-gallery

Running

App Files Files Community

Baonq commited on Nov 5, 2025

Commit

eaa52d7

verified ·

1 Parent(s): b5f7278

quá xấu

Browse files

Files changed (2) hide show

index.html +51 -30
style.css +22 -4

index.html CHANGED Viewed

@@ -14,33 +14,40 @@
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-12">
         <!-- Hero Section -->
         <section class="mb-20">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0">
-                    <h1 class="text-4xl md:text-5xl font-serif font-bold text-gray-800 mb-6">Discover Timeless Artistry</h1>
-                    <p class="text-lg text-gray-600 mb-8">Curated collection of premium paintings from emerging and established artists worldwide.</p>
-                    <a href="#featured" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-md transition duration-300 inline-block">Explore Gallery</a>
                 </div>
                 <div class="md:w-1/2">
-                    <img src="http://static.photos/art/1200x630/1" alt="Featured Artwork" class="rounded-lg shadow-xl w-full">
                 </div>
             </div>
         </section>
         <!-- Featured Paintings -->
         <section id="featured" class="mb-20">
-            <div class="flex justify-between items-center mb-10">
-                <h2 class="text-3xl font-serif font-bold text-gray-800">Featured Paintings</h2>
-                <a href="gallery.html" class="text-gray-600 hover:text-gray-800 flex items-center">
-                    View All <i data-feather="chevron-right" class="ml-1"></i>
                 </a>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <art-card
                     image="http://static.photos/art/640x360/1"
                     title="Serene Landscape"
                     artist="Claude Monet"
@@ -63,30 +70,44 @@
                 </art-card>
             </div>
         </section>
         <!-- Artist Spotlight -->
-        <section class="mb-20 bg-white p-10 rounded-lg shadow-sm">
-            <h2 class="text-3xl font-serif font-bold text-gray-800 mb-10 text-center">Artist Spotlight</h2>
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
-                    <img src="http://static.photos/people/400x400/1" alt="Featured Artist" class="rounded-full w-48 h-48 object-cover border-4 border-gray-200">
-                </div>
-                <div class="md:w-2/3 md:pl-10">
-                    <h3 class="text-2xl font-serif font-bold text-gray-800 mb-2">Vincent van Gogh</h3>
-                    <p class="text-gray-500 mb-4">Post-Impressionist | Netherlands</p>
-                    <p class="text-gray-600 mb-6">Known for his bold colors and dramatic, impulsive and expressive brushwork that contributed to the foundations of modern art. His work had a far-reaching influence on 20th-century art.</p>
-                    <a href="artist.html?id=1" class="border border-gray-800 text-gray-800 hover:bg-gray-800 hover:text-white px-6 py-2 rounded-md transition duration-300 inline-block">View Portfolio</a>
                 </div>
             </div>
         </section>
         <!-- Call to Action -->
-        <section class="bg-gray-800 text-white p-12 rounded-lg text-center">
-            <h2 class="text-3xl font-serif font-bold mb-6">Ready to Find Your Masterpiece?</h2>
-            <p class="text-gray-300 mb-8 max-w-2xl mx-auto">Our art consultants are available to help you find the perfect piece for your collection or space.</p>
-            <a href="contact.html" class="bg-white hover:bg-gray-100 text-gray-800 px-8 py-3 rounded-md transition duration-300 inline-block">Schedule Consultation</a>
         </section>
-    </main>
     <custom-footer></custom-footer>

 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-12">
         <!-- Hero Section -->
         <section class="mb-20">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h1 class="text-4xl md:text-6xl font-serif font-bold text-gray-900 mb-6 leading-tight">Masterpieces That Speak to Your Soul</h1>
+                    <p class="text-xl text-gray-700 mb-8">Exquisite collection of museum-quality artworks from the world's most talented contemporary artists.</p>
+                    <div class="flex space-x-4">
+                        <a href="#featured" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-4 rounded-lg transition duration-300 inline-block font-medium shadow-lg hover:shadow-xl">Explore Gallery</a>
+                        <a href="artists.html" class="border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white px-8 py-4 rounded-lg transition duration-300 inline-block font-medium">Meet Artists</a>
+                    </div>
                 </div>
                 <div class="md:w-1/2">
+                    <div class="relative">
+                        <img src="http://static.photos/art/1200x630/1" alt="Featured Artwork" class="rounded-xl shadow-2xl w-full transform rotate-1">
+                        <div class="absolute -inset-4 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl -z-10"></div>
+                    </div>
                 </div>
             </div>
         </section>
         <!-- Featured Paintings -->
         <section id="featured" class="mb-20">
+            <div class="flex justify-between items-center mb-12">
+                <div>
+                    <span class="text-indigo-600 font-medium mb-2 block">CURATED SELECTION</span>
+                    <h2 class="text-4xl font-serif font-bold text-gray-900">Featured Masterpieces</h2>
+                </div>
+                <a href="gallery.html" class="text-gray-700 hover:text-indigo-600 flex items-center font-medium group">
+                    View Collection <i data-feather="chevron-right" class="ml-2 transition-transform group-hover:translate-x-1"></i>
                 </a>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+<art-card
                     image="http://static.photos/art/640x360/1"
                     title="Serene Landscape"
                     artist="Claude Monet"
                 </art-card>
             </div>
         </section>
         <!-- Artist Spotlight -->
+        <section class="mb-20 bg-gradient-to-r from-indigo-50 to-purple-50 p-12 rounded-2xl">
+            <div class="max-w-6xl mx-auto">
+                <h2 class="text-4xl font-serif font-bold text-gray-900 mb-12 text-center">Artist Spotlight</h2>
+                <div class="flex flex-col md:flex-row items-center bg-white p-8 rounded-xl shadow-lg">
+                    <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
+                        <div class="relative">
+                            <img src="http://static.photos/people/400x400/1" alt="Featured Artist" class="rounded-full w-56 h-56 object-cover border-4 border-white shadow-xl">
+                            <div class="absolute -inset-2 bg-gradient-to-r from-indigo-200 to-purple-200 rounded-full -z-10"></div>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3 md:pl-12">
+                        <span class="text-indigo-600 font-medium mb-2 block">FEATURED ARTIST</span>
+                        <h3 class="text-3xl font-serif font-bold text-gray-900 mb-3">Vincent van Gogh</h3>
+                        <p class="text-gray-700 font-medium mb-4">Post-Impressionist | Netherlands</p>
+                        <p class="text-gray-600 mb-8 text-lg leading-relaxed">Renowned for his vibrant colors and expressive brushwork that revolutionized modern art. Van Gogh's emotionally charged works continue to inspire generations of artists and collectors worldwide.</p>
+                        <div class="flex space-x-4">
+                            <a href="artist.html?id=1" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-3 rounded-lg transition duration-300 inline-block font-medium shadow-md">View Portfolio</a>
+                            <a href="exhibitions.html" class="border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white px-8 py-3 rounded-lg transition duration-300 inline-block font-medium">Current Exhibitions</a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
         <!-- Call to Action -->
+        <section class="bg-gradient-to-r from-indigo-900 to-purple-900 text-white p-16 rounded-2xl text-center relative overflow-hidden">
+            <div class="absolute -right-20 -top-20 w-64 h-64 bg-indigo-800 rounded-full opacity-20"></div>
+            <div class="absolute -left-20 -bottom-20 w-64 h-64 bg-purple-800 rounded-full opacity-20"></div>
+            <div class="relative z-10 max-w-3xl mx-auto">
+                <h2 class="text-4xl font-serif font-bold mb-6">Discover Your Perfect Masterpiece</h2>
+                <p class="text-indigo-200 text-xl mb-10 max-w-2xl mx-auto leading-relaxed">Our expert art consultants provide personalized guidance to help you find artwork that resonates with your taste and complements your space.</p>
+                <div class="flex justify-center space-x-6">
+                    <a href="contact.html" class="bg-white hover:bg-gray-100 text-indigo-900 px-10 py-4 rounded-lg transition duration-300 inline-block font-medium shadow-lg hover:shadow-xl text-lg">Schedule Consultation</a>
+                    <a href="tel:+12125551234" class="border-2 border-white text-white hover:bg-white hover:text-indigo-900 px-10 py-4 rounded-lg transition duration-300 inline-block font-medium text-lg">Call Now</a>
+                </div>
+            </div>
         </section>
+</main>
     <custom-footer></custom-footer>

style.css CHANGED Viewed

@@ -11,16 +11,34 @@ body {
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Playfair Display', serif;
 }
 .art-card-hover {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .art-card-hover:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;

 h1, h2, h3, h4, h5, h6 {
     font-family: 'Playfair Display', serif;
 }
 .art-card-hover {
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    border-radius: 12px;
+    overflow: hidden;
 }
 .art-card-hover:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
+}
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #4f46e5, #7c3aed);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
 }
+/* Custom button animations */
+.btn-hover-grow {
+    transition: all 0.3s ease;
+}
+.btn-hover-grow:hover {
+    transform: scale(1.05);
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;