From 54903a91f9866944f1cf8905a5ffbd262902168b Mon Sep 17 00:00:00 2001
From: rishita-pixie <nainwalrishita87@gmail.com>
Date: Wed, 6 Aug 2025 12:04:15 +0530
Subject: [PATCH] Created a landing page for the site

---
 landing.html | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 307 insertions(+)
 create mode 100644 landing.html
diff --git a/landing.html b/landing.html
new file mode 100644
index 0000000..27ad838
--- /dev/null
+++ b/landing.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RESUME-GENERATOR</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #533483);
+            background-size: 400% 400%;
+            animation: gradientShift 12s ease infinite;
+            color: white;
+            cursor: none;
+        }
+
+        @keyframes gradientShift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+
+        .particles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .particle {
+            position: absolute;
+            background: rgba(255, 215, 0, 0.6);
+            border-radius: 50%;
+            animation: float 15s infinite linear;
+        }
+
+        @keyframes float {
+            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
+        }
+
+        .container {
+            text-align: center;
+            z-index: 10;
+            max-width: 900px;
+            padding: 2rem;
+            width: 100%;
+        }
+
+        h1 {
+            font-size: clamp(2.5rem, 8vw, 5rem);
+            font-weight: 800;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #ffd700, #ffed4e, #fff59d);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.2;
+        }
+
+    
+
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+
+        .tagline {
+            font-size: clamp(1rem, 3vw, 1.6rem);
+            color: #b8c6db;
+            margin-bottom: 2.5rem;
+            font-weight: 300;
+            opacity: 0;
+            animation: fadeIn 1s ease 2.5s forwards;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+            line-height: 1.5;
+        }
+
+        @keyframes fadeIn {
+            to { opacity: 1; }
+        }
+
+        .loading-section {
+            opacity: 0;
+            animation: slideUp 1s ease 4s forwards;
+            margin-bottom: 3rem;
+        }
+
+        @keyframes slideUp {
+            from { transform: translateY(30px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
+        .loading-text {
+            font-size: clamp(1rem, 2.5vw, 1.3rem);
+            color: #ffd700;
+            margin-bottom: 2rem;
+            font-weight: 500;
+        }
+
+        .progress-bar {
+            width: 100%;
+            max-width: 400px;
+            height: 8px;
+            background: rgba(255, 215, 0, 0.2);
+            border-radius: 10px;
+            margin: 0 auto;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #ffd700, #ffb300);
+            border-radius: 10px;
+            width: 0%;
+            animation: loadProgress 4s ease-in-out forwards;
+            box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+        }
+
+        @keyframes loadProgress {
+            0% { width: 0%; }
+            25% { width: 30%; }
+            50% { width: 60%; }
+            75% { width: 85%; }
+            100% { width: 100%; }
+        }
+
+        .features {
+            display: flex;
+            justify-content: center;
+            gap: clamp(1rem, 5vw, 4rem);
+            margin-top: 3rem;
+            opacity: 0;
+            animation: fadeIn 1s ease 4.5s forwards;
+            flex-wrap: wrap;
+        }
+
+        .feature {
+            text-align: center;
+            color: #b8c6db;
+            min-width: 120px;
+            transition: transform 0.3s ease;
+        }
+
+        .feature:hover {
+            transform: translateY(-5px);
+        }
+
+        .feature-icon {
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 1rem;
+            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 215, 0, 0.3);
+        }
+
+        .feature:hover .feature-icon {
+            transform: scale(1.1) rotate(5deg);
+            background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.2));
+            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
+        }
+
+        .feature-text {
+            font-size: clamp(0.85rem, 2vw, 1rem);
+            font-weight: 500;
+        }
+
+        .fade-out {
+            animation: fadeOut 1s ease forwards;
+        }
+
+        @keyframes fadeOut {
+            to { opacity: 0; }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+            
+            .features {
+                gap: 2rem;
+            }
+            
+            .loading-section {
+                margin-bottom: 2rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .features {
+                flex-direction: column;
+                gap: 1.5rem;
+                align-items: center;
+            }
+            
+            .feature {
+                max-width: 200px;
+            }
+        }
+
+        /* Smooth scrolling for mobile */
+        @media (max-height: 600px) {
+            body {
+                height: auto;
+                min-height: 100vh;
+                padding: 2rem 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="custom-cursor" id="cursor"></div>
+    <div class="cursor-highlight" id="cursorHighlight"></div>
+    <div class="particles" id="particles"></div>
+    
+    <div class="container">
+        <h1 id="typewriter">
+            <span class="cursor" id="typingCursor"></span>
+        </h1>
+        
+        <p class="tagline"  style="font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic;">
+            Transform your career story into a compelling narrative that gets you hired
+        </p>
+        
+        <div class="loading-section">
+            <div class="loading-text">Preparing your resume builder...</div>
+            <div class="progress-bar">
+                <div class="progress-fill"></div>
+            </div>
+        </div>
+
+       
+        </div>
+    </div>
+
+    <script>
+      
+
+        // Typewriter effect
+        const text = "RESUME-GENERATOR";
+        const heading = document.getElementById("typewriter");
+        const typingCursor = document.getElementById("typingCursor");
+        let index = 0;
+
+        function typeWriter() {
+            if (index < text.length) {
+                heading.insertBefore(document.createTextNode(text.charAt(index)), typingCursor);
+                index++;
+                setTimeout(typeWriter, 150);
+            } else {
+                setTimeout(() => typingCursor.style.display = 'none', 2000);
+            }
+        }
+
+        setTimeout(typeWriter, 500);
+
+        // Particle system
+        function createParticle() {
+            const particle = document.createElement('div');
+            particle.className = 'particle';
+            const size = Math.random() * 3 + 2;
+            particle.style.width = size + 'px';
+            particle.style.height = size + 'px';
+            particle.style.left = Math.random() * 100 + '%';
+            particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
+            document.getElementById('particles').appendChild(particle);
+            setTimeout(() => particle.remove(), 30000);
+        }
+
+        setInterval(createParticle, 500);
+
+        // Auto redirect to resume generator page
+        setTimeout(() => {
+            document.body.classList.add('fade-out');
+            setTimeout(() => {
+                window.location.href = 'index.html';
+            }, 1000);
+        }, 6000); // Redirect after 8 seconds
+
+        
+    </script>
+</body>
+</html>
\ No newline at end of file
