Spaces:

bekxt
/

sonic-perfection-studio

Running

App Files Files Community

bekxt commited on Nov 7, 2025

Commit

de16d92

verified ·

1 Parent(s): bbaedee

redesign website home page to look and feel thumbnail like collage

Browse files

Files changed (2) hide show

index.html +36 -26
style.css +87 -14

index.html CHANGED Viewed

@@ -13,35 +13,45 @@
 </head>
 <body>
     <custom-navbar></custom-navbar>
-    <main>
-        <!-- Hero Section -->
-        <section class="hero-section">
-            <div class="container">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-                    <div class="fade-in">
-                        <h1>You Do Music, We Do Mastering</h1>
-<p class="text-gray mb-8">Industry-leading mastering services with premium analog processing and digital precision.</p>
-                        <div class="flex gap-4">
-                            <a href="#pricing" class="btn btn-primary">Get Started</a>
-                            <a href="single-track-mastering.html" class="btn btn-outline">Learn More</a>
-                        </div>
-                    </div>
-                    <div class="fade-in">
-                        <img srcogy/1200x630/42" alt="Studio Equipment" class="rounded-xl shadow-xl">
-                    </div>
                 </div>
             </div>
-        </section>
-<!-- Services Section with Parallax -->
-        <section id="services" class="parallax-container relative py-32 bg-gray-800 overflow-hidden">
-            <div class="parallax-layer parallax-layer-back" data-depth="0.05">
-                <div class="absolute inset-0 bg-[url('https://static.photos/minimal/1200x630/1')] bg-cover bg-center opacity-10"></div>
             </div>
-<div class="container mx-auto px-6">
-                <h2 class="text-4xl font-bold text-center mb-16">Our Mastering Services</h2>
-                <div class="grid md:grid-cols-3 gap-10">
-                    <!-- Service 1 -->
                     <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition-all border-l-4 border-indigo-500">
                         <div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6">
                             <i data-feather="music" class="w-8 h-8 text-indigo-300"></i>

 </head>
 <body>
     <custom-navbar></custom-navbar>
+    <main class="collage-container">
+        <!-- Collage Hero -->
+        <section class="collage-hero">
+            <div class="collage-item large" style="background-image: url('https://static.photos/music/640x360/1')">
+                <div class="collage-content">
+                    <h1>You Do Music, We Do Mastering</h1>
+                    <p>Industry-leading mastering services</p>
                 </div>
             </div>
+            <div class="collage-item" style="background-image: url('https://static.photos/studio/320x240/2')">
+                <div class="collage-content">
+                    <h3>Analog Warmth</h3>
+                    <a href="#services">Explore</a>
+                </div>
             </div>
+            <div class="collage-item" style="background-image: url('https://static.photos/technology/320x240/3')">
+                <div class="collage-content">
+                    <h3>Digital Precision</h3>
+                    <a href="#services">Learn</a>
+                </div>
+            </div>
+            <div class="collage-item wide" style="background-image: url('https://static.photos/people/640x240/4')">
+                <div class="collage-content">
+                    <h3>Trusted by Artists Worldwide</h3>
+                    <a href="#testimonials">Stories</a>
+                </div>
+            </div>
+            <div class="collage-item tall" style="background-image: url('https://static.photos/audio/240x360/5')">
+                <div class="collage-content">
+                    <h3>Hear the Difference</h3>
+                    <a href="#audio">Listen</a>
+                </div>
+            </div>
+        </section>
+<!-- Services Collage -->
+        <section id="services" class="collage-services">
+            <h2 class="collage-section-title">Our Mastering Services</h2>
+            <div class="collage-grid">
+<!-- Service 1 -->
                     <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition-all border-l-4 border-indigo-500">
                         <div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6">
                             <i data-feather="music" class="w-8 h-8 text-indigo-300"></i>

style.css CHANGED Viewed

@@ -8,25 +8,94 @@
   --gray: #6B7280;
   --light-gray: #E5E7EB;
 }
 /* Base Styles */
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.6;
-  color: var(--dark);
-  background: var(--light);
 }
 /* Typography */
 h1, h2, h3, h4 {
   font-weight: 700;
   line-height: 1.2;
 }
-h1 { font-size: 3.5rem; }
-h2 { font-size: 2.5rem; }
-h3 { font-size: 1.75rem; }
 /* Layout */
 .container {
   width: 100%;
@@ -38,18 +107,23 @@ h3 { font-size: 1.75rem; }
 .section {
   padding: 6rem 0;
 }
 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.5rem;
-  border-radius: 8px;
   font-weight: 600;
   transition: all 0.2s ease;
 }
 .btn-primary {
   background: var(--primary);
   color: white;
@@ -69,16 +143,15 @@ h3 { font-size: 1.75rem; }
   background: var(--primary);
   color: white;
 }
 /* Cards */
 .card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .card:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

   --gray: #6B7280;
   --light-gray: #E5E7EB;
 }
+/* Collage Styles */
+.collage-container {
+    padding: 0;
+    margin: 0;
+    background: #121212;
+}
+.collage-hero {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 150px);
+    gap: 8px;
+    padding: 8px;
+}
+.collage-item {
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+.collage-item:hover {
+    transform: scale(1.02);
+    z-index: 1;
+}
+.collage-item.large {
+    grid-column: span 2;
+    grid-row: span 2;
+}
+.collage-item.wide {
+    grid-column: span 2;
+}
+.collage-item.tall {
+    grid-row: span 2;
+}
+.collage-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+    color: white;
+}
+.collage-section-title {
+    text-align: center;
+    font-size: 2.5rem;
+    color: white;
+    margin: 2rem 0;
+}
+.collage-services {
+    padding: 2rem;
+    background: #121212;
+}
+.collage-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
+    padding: 16px;
+}
 /* Base Styles */
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.6;
+  color: white;
+  background: #121212;
 }
 /* Typography */
 h1, h2, h3, h4 {
   font-weight: 700;
   line-height: 1.2;
+  color: white;
 }
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.5rem; }
 /* Layout */
 .container {
   width: 100%;
 .section {
   padding: 6rem 0;
 }
 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.5rem;
+  border-radius: 4px;
   font-weight: 600;
   transition: all 0.2s ease;
+  background: #333;
+  color: white;
+  border: none;
 }
+.btn:hover {
+  background: #444;
+}
 .btn-primary {
   background: var(--primary);
   color: white;
   background: var(--primary);
   color: white;
 }
 /* Cards */
 .card {
+  background: #1e1e1e;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid #333;
 }
 .card:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);