Update landing page with minimalistic Apple-style design and San Francisco fonts

Author: ayushshrivastv

index.html

@@ -19,8 +19,8 @@
             --apple-button-hover: #0077ed;
             --apple-feature-card: rgba(255, 255, 255, 0.8);
             --apple-card-shadow: rgba(0, 0, 0, 0.04);
-            --heading-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
-            --body-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+            --heading-font: -apple-system-headline, ui-sans-serif, system-ui, sans-serif, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial;
+            --body-font: -apple-system-body, ui-sans-serif, system-ui, sans-serif, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial;
             --theme-switch-bg: #f5f5f7;
             --theme-switch-border: #d2d2d7;
         }
@@ -56,6 +56,8 @@
             letter-spacing: -0.022em;
             transition: background-color 0.5s ease, color 0.5s ease;
             -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
         }
 
         .container {
@@ -164,10 +166,11 @@
 
         .hero {
             text-align: center;
-            padding: 120px 0 80px;
+            padding: 180px 0 120px;
             background-color: var(--apple-bg);
             transition: background-color 0.5s ease;
             overflow: hidden;
+            position: relative;
         }
 
         h1 {
@@ -176,17 +179,17 @@
             line-height: 1.07143;
             font-weight: 600;
             letter-spacing: -0.005em;
-            margin-bottom: 8px;
+            margin-bottom: 16px;
             color: var(--apple-text);
             transition: color 0.5s ease;
         }
 
         .hero p {
-            font-size: 23px;
+            font-size: 27px;
             line-height: 1.381;
             font-weight: 400;
             letter-spacing: 0.004em;
-            max-width: 600px;
+            max-width: 760px;
             margin: 0 auto 40px;
             color: var(--apple-secondary-text);
             transition: color 0.5s ease;
@@ -196,7 +199,7 @@
             display: inline-block;
             background-color: var(--apple-button-bg);
             color: white;
-            padding: 12px 22px;
+            padding: 12px 28px;
             border-radius: 980px;
             text-decoration: none;
             font-size: 17px;
@@ -211,6 +214,7 @@
 
         .btn:hover {
             background-color: var(--apple-button-hover);
+            transform: scale(1.02);
         }
 
         .btn-secondary {
@@ -224,14 +228,15 @@
         }
 
         .highlights {
-            padding: 100px 0;
+            padding: 140px 0;
             background-color: var(--apple-bg);
             transition: background-color 0.5s ease;
+            position: relative;
         }
 
         .section-title {
             text-align: center;
-            margin-bottom: 80px;
+            margin-bottom: 100px;
             font-family: var(--heading-font);
             font-size: 48px;
             line-height: 1.08349;
@@ -243,14 +248,14 @@
 
         .highlights-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 40px;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 60px;
         }
 
         .highlight {
             text-align: center;
-            padding: 40px 20px;
-            border-radius: 20px;
+            padding: 50px 30px;
+            border-radius: 30px;
             background-color: var(--apple-secondary-bg);
             transition: transform 0.5s ease, background-color 0.5s ease;
             overflow: hidden;
@@ -263,7 +268,7 @@
         }
 
         .highlight:hover {
-            transform: scale(1.02);
+            transform: translateY(-10px);
         }
 
         .highlight h3 {
@@ -272,7 +277,7 @@
             line-height: 1.14286;
             font-weight: 600;
             letter-spacing: 0.007em;
-            margin: 20px 0 10px;
+            margin: 20px 0 16px;
             color: var(--apple-text);
             transition: color 0.5s ease;
         }
@@ -288,13 +293,14 @@
 
         .highlight-icon {
             font-size: 56px;
-            margin-bottom: 20px;
+            margin-bottom: 24px;
         }
 
         .features {
-            padding: 100px 0;
+            padding: 140px 0;
             background-color: var(--apple-secondary-bg);
             transition: background-color 0.5s ease;
+            position: relative;
         }
 
         [data-theme="dark"] .features {
@@ -303,13 +309,13 @@
 
         .features-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 40px;
         }
 
         .feature {
             background-color: var(--apple-bg);
-            border-radius: 20px;
+            border-radius: 24px;
             overflow: hidden;
             box-shadow: 0 4px 30px var(--apple-card-shadow);
             transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
@@ -320,12 +326,12 @@
         }
 
         .feature:hover {
-            transform: translateY(-6px);
-            box-shadow: 0 12px 40px var(--apple-card-shadow);
+            transform: translateY(-10px);
+            box-shadow: 0 20px 50px var(--apple-card-shadow);
         }
 
         .feature-content {
-            padding: 30px;
+            padding: 40px 30px;
             text-align: center;
         }
 
@@ -335,7 +341,7 @@
             line-height: 1.16667;
             font-weight: 600;
             letter-spacing: 0.009em;
-            margin-bottom: 10px;
+            margin-bottom: 16px;
             color: var(--apple-text);
             transition: color 0.5s ease;
         }
@@ -350,13 +356,13 @@
         }
 
         .feature-icon {
-            font-size: 40px;
-            margin-bottom: 20px;
+            font-size: 48px;
+            margin-bottom: 24px;
         }
 
         footer {
             background-color: var(--apple-bg);
-            padding: 20px 0;
+            padding: 60px 0 30px;
             text-align: center;
             color: var(--apple-secondary-text);
             font-size: 12px;
@@ -378,17 +384,18 @@
         }
 
         .footer-links {
-            margin-bottom: 10px;
+            margin-bottom: 30px;
         }
 
         .footer-links a {
             margin: 0 15px;
+            font-size: 14px;
         }
 
         .footer-logo {
             display: block;
-            margin: 0 auto 20px;
-            height: 40px;
+            margin: 0 auto 30px;
+            height: 50px;
         }
 
         .copyright {
@@ -402,16 +409,25 @@
             margin: 0 auto;
         }
 
+        .hero-image-container {
+            position: relative;
+            margin: 60px auto 0;
+            max-width: 600px;
+        }
+
         .hero-image {
             max-width: 100%;
             height: auto;
-            margin: 40px auto 0;
-            transition: transform 0.5s ease;
             display: block;
+            margin: 0 auto;
+            transition: transform 0.8s ease;
+            animation: float 6s ease-in-out infinite;
         }
 
-        .hero-image:hover {
-            transform: scale(1.02);
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
         }
 
         @media only screen and (max-width: 768px) {
@@ -447,61 +463,81 @@
             }
 
             .hero {
-                padding: 60px 0 40px;
+                padding: 100px 0 80px;
             }
 
             .hero p {
-                font-size: 19px;
+                font-size: 22px;
             }
 
             .btn {
                 display: block;
-                margin: 10px auto;
+                margin: 16px auto;
                 max-width: 250px;
             }
 
             .section-title {
                 font-size: 32px;
-                margin-bottom: 40px;
+                margin-bottom: 60px;
             }
 
             .highlights, .features {
-                padding: 60px 0;
+                padding: 80px 0;
+            }
+            
+            .highlights-grid, .features-grid {
+                grid-template-columns: 1fr;
             }
         }
 
-        /* Mirroring Apple's animation style */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
+        /* Subtle animations */
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(30px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
-        .hero h1, .hero p, .btn, .hero-image, .highlight, .feature {
-            animation: fadeIn 0.8s ease-out forwards;
+        .hero h1 {
+            animation: fadeUp 0.8s ease-out forwards;
         }
 
         .hero p {
+            animation: fadeUp 0.8s ease-out forwards;
             animation-delay: 0.2s;
+            opacity: 0;
         }
 
         .btn {
+            animation: fadeUp 0.8s ease-out forwards;
             animation-delay: 0.4s;
+            opacity: 0;
         }
 
-        .hero-image {
+        .hero-image-container {
+            animation: fadeUp 0.8s ease-out forwards;
             animation-delay: 0.6s;
+            opacity: 0;
         }
 
-        .highlight:nth-child(1), .feature:nth-child(1) {
-            animation-delay: 0.2s;
+        .highlight, .feature {
+            opacity: 0;
         }
 
-        .highlight:nth-child(2), .feature:nth-child(2) {
-            animation-delay: 0.4s;
+        /* Intersection Observer styles */
+        .fade-in {
+            opacity: 1;
+            transform: translateY(0);
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
         }
-
-        .highlight:nth-child(3), .feature:nth-child(3) {
-            animation-delay: 0.6s;
+        
+        /* Add system font stack with SF Pro dynamic scaling */
+        @supports (font: -apple-system-body) {
+            body {
+                font: -apple-system-body;
+            }
+            
+            h1, h2, h3, .section-title {
+                font: -apple-system-headline;
+            }
         }
     </style>
 </head>
@@ -537,7 +573,9 @@ <h1>OpenAPI Integration with DocC</h1>
             <p>Transform OpenAPI specifications into beautiful, interactive documentation.</p>
             <a href="docs/index.html" class="btn">View Documentation</a>
             <a href="https://github.com/ayushshrivastv/OpenAPI-integration-with-DocC" class="btn btn-secondary">View on GitHub</a>
-            <img src="docs/favicon.svg" alt="OpenAPI DocC graphic representation" class="hero-image" width="240">
+            <div class="hero-image-container">
+                <img src="docs/favicon.svg" alt="OpenAPI DocC graphic representation" class="hero-image" width="240">
+            </div>
         </div>
     </section>
 
@@ -595,7 +633,7 @@ <h3>Auto-updating</h3>
 
     <footer>
         <div class="container">
-            <img class="footer-logo" src="docs/favicon.svg" alt="OpenAPI DocC Logo" width="40">
+            <img class="footer-logo" src="docs/favicon.svg" alt="OpenAPI DocC Logo" width="50">
             <div class="footer-links">
                 <a href="https://github.com/ayushshrivastv/OpenAPI-integration-with-DocC">GitHub</a>
                 <a href="docs/index.html">Documentation</a>
@@ -670,6 +708,22 @@ <h3>Auto-updating</h3>
                     }
                 });
             }
+            
+            // Intersection Observer for animations
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('fade-in');
+                    }
+                });
+            }, {
+                threshold: 0.2
+            });
+            
+            // Observe all highlights and features
+            document.querySelectorAll('.highlight, .feature').forEach(el => {
+                observer.observe(el);
+            });
         });
     </script>
 </body>