Implement LFIT ultra low cost plan

README.md

@@ -1,6 +1,6 @@
 # C+N Hosting Website
 
-A modern, pay-as-you-go web hosting website featuring affordable plans starting at $2/month. Built for gamers, small projects, and anyone who needs simple, reliable hosting without enterprise pricing.
+A modern, pay-as-you-go web hosting website featuring affordable plans starting at just $0.50/month. Built for gamers, small projects, Discord bots, and anyone who needs simple, reliable hosting without enterprise pricing.
 
 ## 🎨 Design Features
 
@@ -49,12 +49,12 @@ cn-hosting-website/
 
 ## 🎯 Website Sections
 
-1. **Hero Section**: Eye-catching introduction with animated server icons and "Pay As You Go" messaging
-2. **Who We Are For**: Targeted audience section highlighting gamers, small projects, and backup storage needs
-3. **Services**: Three simple plans (Starter, Growing, Pro) with clear feature lists
-4. **Pricing**: Three transparent pricing tiers ($2, $5, $10 per month) with no hidden fees
+1. **Hero Section**: Eye-catching introduction with "Pay As You Go" messaging
+2. **Who We Are For**: Targeted audience section highlighting gamers, small projects, and developers
+3. **Services**: Four simple plans (LFIT, Starter, Growing, Pro) with clear feature lists
+4. **Pricing**: Four transparent pricing tiers ($0.50, $2, $5, $10 per month) with no hidden fees
 5. **Contact**: Smart contact form with plan selection auto-fill and Discord/email support
-6. **Disclaimer**: Honest transparency about being a small operation
+6. **Disclaimer**: Honest transparency about being a small operation, including uptime limitations
 7. **Footer**: Quick links, support options, and social connections
 
 ## 🎨 Customization
@@ -136,7 +136,7 @@ When users click on a pricing plan's "Choose Plan" button:
 The website specifically caters to:
 - **Gamers** needing affordable game servers
 - **Small Projects** requiring simple hosting without complexity
-- **Backup Storage** users wanting reliable, cheap storage
+- **Developers** needing testing environments or portfolio hosting
 
 ### Pricing Philosophy
 - No contracts

TECHNICAL.md

@@ -29,6 +29,7 @@ This is a single-page application (SPA) built with vanilla HTML, CSS, and JavaSc
 ### 1. Email Auto-fill System
 Triggered when pricing plan buttons are clicked. Auto-fills contact form with:
 - Plan name and price in subject
+- Works for all 4 plans: LFIT ($0.50 - ultralight hosting for bots/scripts), Starter ($2), Growing ($5), and Pro ($10)
 - Smart field focusing
 - Email persistence with localStorage
 - Visual feedback animations

index.html

@@ -27,26 +27,13 @@ <h1 class="hero-title">
                 </h1>
                 <p class="hero-subtitle">
                     Only pay for what you use. No contracts, no surprises. 
-                    Start at $2/month and scale when you need to.
+                    Start at $0.50/month and scale when you need to.
                 </p>
                 <div class="hero-buttons">
                     <a href="#pricing" class="btn btn-primary">Get Started</a>
                     <a href="#services" class="btn btn-secondary">Learn More</a>
                 </div>
             </div>
-            <div class="hero-visual">
-                <div class="server-grid">
-                    <div class="server-card">
-                        <i class="fas fa-server"></i>
-                    </div>
-                    <div class="server-card">
-                        <i class="fas fa-database"></i>
-                    </div>
-                    <div class="server-card">
-                        <i class="fas fa-shield-alt"></i>
-                    </div>
-                </div>
-            </div>
         </div>
     </section>
 
@@ -75,10 +62,10 @@ <h3>Small Projects</h3>
                         </div>
                         <div class="target-audience-item">
                             <div class="target-icon">
-                                <i class="fas fa-cloud-upload-alt"></i>
+                                <i class="fas fa-code"></i>
                             </div>
-                            <h3>Backup Storage</h3>
-                            <p>Just need a little space to back up your important files? Simple, reliable storage without the enterprise price tag.</p>
+                            <h3>Developers</h3>
+                            <p>Need a place to test your apps or host your portfolio? Simple hosting without the complexity.</p>
                         </div>
                     </div>
                     <div class="who-we-are-for-cta">
@@ -94,6 +81,18 @@ <h3>Backup Storage</h3>
         <div class="container">
             <h2 class="section-title">Simple Plans</h2>
             <div class="services-grid">
+                <div class="service-card budget-service">
+                    <div class="service-icon">
+                        <i class="fas fa-leaf"></i>
+                    </div>
+                    <h3>LFIT</h3>
+                    <p>Ultralight hosting for Discord bots, simple scripts, and lightweight web apps.</p>
+                    <ul>
+                        <li>Perfect for bots & scripts</li>
+                        <li>1GB storage</li>
+                        <li>Always-on hosting</li>
+                    </ul>
+                </div>
                 <div class="service-card">
                     <div class="service-icon">
                         <i class="fas fa-rocket"></i>
@@ -127,7 +126,7 @@ <h3>Pro</h3>
                     <ul>
                         <li>50GB storage</li>
                         <li>Priority support</li>
-                        <li>Daily backups</li>
+                        <li>Advanced features</li>
                     </ul>
                 </div>
             </div>
@@ -138,6 +137,25 @@ <h3>Pro</h3>
         <div class="container">
             <h2 class="section-title">What You Pay</h2>
             <div class="pricing-grid">
+                <div class="pricing-card budget">
+                    <div class="pricing-header">
+                        <h3>LFIT</h3>
+                        <p style="font-size: 0.8rem; color: #888; margin: 0.5rem 0;">Ultralight Hosting</p>
+                        <div class="price">
+                            <span class="currency">$</span>
+                            <span class="amount">0.50</span>
+                            <span class="period">/month</span>
+                        </div>
+                    </div>
+                    <ul class="pricing-features">
+                        <li><i class="fas fa-check"></i> Discord Bot Hosting</li>
+                        <li><i class="fas fa-check"></i> 1GB Storage</li>
+                        <li><i class="fas fa-check"></i> Basic SSL</li>
+                        <li><i class="fas fa-check"></i> Script Hosting</li>
+                        <li><i class="fas fa-check"></i> 24/7 Uptime*</li>
+                    </ul>
+                    <a href="#contact" class="btn btn-outline">Choose Plan</a>
+                </div>
                 <div class="pricing-card">
                     <div class="pricing-header">
                         <h3>Starter</h3>
@@ -152,7 +170,7 @@ <h3>Starter</h3>
                         <li><i class="fas fa-check"></i> Basic SSL</li>
                         <li><i class="fas fa-check"></i> 1 Email Account</li>
                         <li><i class="fas fa-check"></i> Email Support</li>
-                        <li><i class="fas fa-check"></i> 99% Uptime</li>
+                        <li><i class="fas fa-check"></i> 24/7 Uptime*</li>
                     </ul>
                     <a href="#contact" class="btn btn-outline">Choose Plan</a>
                 </div>
@@ -170,7 +188,7 @@ <h3>Growing</h3>
                         <li><i class="fas fa-check"></i> Free SSL</li>
                         <li><i class="fas fa-check"></i> 5 Email Accounts</li>
                         <li><i class="fas fa-check"></i> Chat Support</li>
-                        <li><i class="fas fa-check"></i> 99.5% Uptime</li>
+                        <li><i class="fas fa-check"></i> 24/7 Uptime*</li>
                     </ul>
                     <a href="#contact" class="btn btn-primary">Choose Plan</a>
                 </div>
@@ -188,11 +206,12 @@ <h3>Pro</h3>
                         <li><i class="fas fa-check"></i> Free SSL</li>
                         <li><i class="fas fa-check"></i> 10 Email Accounts</li>
                         <li><i class="fas fa-check"></i> Priority Support</li>
-                        <li><i class="fas fa-check"></i> Daily Backups</li>
+                        <li><i class="fas fa-check"></i> 24/7 Uptime*</li>
                     </ul>
                     <a href="#contact" class="btn btn-outline">Choose Plan</a>
                 </div>
             </div>
+            <p style="text-align: center; color: #888; font-size: 0.8rem; margin-top: 2rem;">*See disclaimer below for uptime details</p>
         </div>
     </section>
 
@@ -248,6 +267,7 @@ <h4>Chat With Us</h4>
                 <h3>⚠️ Heads Up</h3>
                 <p>We're a small operation trying to help people get online without breaking the bank.</p>
                 <p>This site was created with AI - we're just doing our best to keep things simple and affordable.</p>
+                <p>*24/7 is best case scenario, we are a duo trying to provide low cost hosting so issues may occur</p>
             </div>
         </div>
     </section>

styles.css

@@ -3,6 +3,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
 }
 
 :root {
@@ -463,7 +464,7 @@ section {
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
 }
 
@@ -491,12 +492,12 @@ section {
 }
 
 .service-card:hover::before {
-    transform: scaleX(1);
+    transform: scaleX(0);
 }
 
 .service-card:hover {
-    border-color: #FF8C00;
-    box-shadow: 0 0 30px rgba(255, 140, 0, 0.1);
+    border-color: #333;
+    box-shadow: none;
 }
 
 .service-icon {
@@ -512,8 +513,8 @@ section {
 }
 
 .service-card:hover .service-icon {
-    transform: scale(1.1);
-    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
+    transform: none;
+    box-shadow: none;
 }
 
 .service-icon i {
@@ -551,6 +552,19 @@ section {
     color: #00ffff;
 }
 
+.service-card.budget-service {
+    border-color: #4CAF50;
+}
+
+.service-card.budget-service:hover {
+    border-color: #4CAF50;
+    box-shadow: none;
+}
+
+.service-card.budget-service .service-icon {
+    color: #4CAF50;
+}
+
 /* Who We Are For Section */
 .who-we-are-for {
     padding: 6rem 0;
@@ -616,13 +630,13 @@ section {
 }
 
 .target-audience-item:hover::before {
-    left: 100%;
+    left: -100%;
 }
 
 .target-audience-item:hover {
-    transform: translateY(-5px);
-    border-color: rgba(255, 140, 0, 0.4);
-    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2);
+    transform: none;
+    border-color: #333;
+    box-shadow: none;
 }
 
 .target-icon {
@@ -638,8 +652,8 @@ section {
 }
 
 .target-audience-item:hover .target-icon {
-    transform: scale(1.1);
-    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
+    transform: none;
+    box-shadow: none;
 }
 
 .target-icon i {
@@ -684,7 +698,7 @@ section {
 
 .pricing-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
 }
 
@@ -712,7 +726,7 @@ section {
 }
 
 .pricing-card:hover::before {
-    transform: scaleX(1);
+    transform: scaleX(0);
 }
 
 .pricing-card.featured {
@@ -721,13 +735,41 @@ section {
 }
 
 .pricing-card:hover {
-    border-color: #FF8C00;
-    box-shadow: 0 0 30px rgba(255, 140, 0, 0.1);
+    border-color: #333;
+    box-shadow: none;
 }
 
 .pricing-card.featured:hover {
-    border-color: #FFB6C1;
-    box-shadow: 0 0 30px rgba(255, 182, 193, 0.2);
+    border-color: #FF8C00;
+    box-shadow: none;
+}
+
+.pricing-card.budget {
+    border-color: #4CAF50;
+    position: relative;
+}
+
+.pricing-card.budget::after {
+    content: 'Ultralight';
+    position: absolute;
+    top: -10px;
+    right: 20px;
+    background: #4CAF50;
+    color: #000;
+    padding: 4px 12px;
+    border-radius: 15px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.pricing-card.budget:hover {
+    border-color: #4CAF50;
+    box-shadow: none;
+}
+
+.pricing-card.budget .amount {
+    font-size: 2.5rem;
 }
 
 .pricing-header h3 {
@@ -1092,4 +1134,7 @@ section {
 .pricing-card .btn:active {
     transform: scale(0.95);
     transition: transform 0.1s ease;
-}
+}
+.service-card.budget-service .service-icon i {
+    color: #4CAF50;
+}