Feature/landing updates

src/pages/Landing.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useToast } from '@/hooks/use-toast';
-import DeployChainIcon from '@/components/DeployChainIcon';
+
 import DeploymentCard from '@/components/DeploymentCard';
 import deploymentPipeline from '@/assets/deployment-pipeline.jpg';
 
@@ -20,6 +20,7 @@ const Landing = () => {
   const [deploying, setDeploying] = useState(false);
   const [repoUrl, setRepoUrl] = useState('');
   const [branch, setBranch] = useState('main');
+  const [menuOpen, setMenuOpen] = useState(false);
   const { toast } = useToast();
 
   // Mock data for deployments
@@ -135,63 +136,129 @@ const Landing = () => {
   };
 
   return (
-    <div className="min-h-screen bg-background">
+  <div className="min-h-screen bg-background">
       {/* Navigation */}
       <motion.nav
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border"
+        className="fixed top-0 left-0 right-0 z-50 bg-black/40 backdrop-blur-lg border-b border-transparent"
       >
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center">
-              <span className="text-2xl font-bold text-primary">DeployChain</span>
+              <span className="text-2xl font-bold text-white">DeployChain</span>
             </div>
+            {/* Desktop Nav */}
             <div className="hidden md:flex space-x-8">
-              {['hero', 'problem', 'solution', 'features', 'demo', 'deployments', 'try-it'].map((section) => (
-                <button
-                  key={section}
-                  onClick={() => smoothScrollTo(section)}
-                  className="text-muted-foreground hover:text-primary transition-colors capitalize"
-                >
-                  {section.replace('-', ' ')}
-                </button>
-              ))}
+              <button
+                onClick={() => smoothScrollTo('problem')}
+                className="text-white hover:text-primary transition-colors capitalize"
+              >
+                About
+              </button>
+              <button
+                onClick={() => smoothScrollTo('features')}
+                className="text-white hover:text-primary transition-colors capitalize"
+              >
+                Features
+              </button>
+              <button
+                onClick={() => smoothScrollTo('try-it')}
+                className="ml-2 px-4 py-2 rounded bg-primary text-primary-foreground font-semibold hover:bg-primary/80 transition-colors"
+              >
+                Try It Now
+              </button>
+            </div>
+            {/* Hamburger for mobile */}
+            <div className="md:hidden flex items-center">
+              <button
+                className="text-white focus:outline-none"
+                onClick={() => setMenuOpen((open) => !open)}
+                aria-label="Open navigation menu"
+              >
+                <svg width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
+        {/* Mobile Menu Drawer */}
+        {menuOpen && (
+          <div className="fixed inset-0 z-50 bg-black/70 md:hidden" onClick={() => setMenuOpen(false)}>
+            <div className="absolute top-0 right-0 w-3/4 max-w-xs h-full bg-black shadow-lg flex flex-col p-6" onClick={e => e.stopPropagation()}>
+              <button className="self-end mb-8 text-white" onClick={() => setMenuOpen(false)} aria-label="Close navigation menu">
+                <svg width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+              <button
+                onClick={() => { setMenuOpen(false); smoothScrollTo('problem'); }}
+                className="text-white text-lg py-2 px-2 text-left w-full hover:text-primary transition-colors capitalize"
+              >
+                About
+              </button>
+              <button
+                onClick={() => { setMenuOpen(false); smoothScrollTo('features'); }}
+                className="text-white text-lg py-2 px-2 text-left w-full hover:text-primary transition-colors capitalize"
+              >
+                Features
+              </button>
+              <button
+                onClick={() => { setMenuOpen(false); smoothScrollTo('try-it'); }}
+                className="mt-4 px-4 py-2 rounded bg-primary text-primary-foreground font-semibold hover:bg-primary/80 transition-colors text-left w-full"
+              >
+                Try It Now
+              </button>
+            </div>
+          </div>
+        )}
       </motion.nav>
 
       {/* Hero Section */}
-      <section id="hero" className="min-h-screen flex items-center justify-center bg-hero-gradient text-white pt-16">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <section id="hero" className="relative min-h-screen flex items-center justify-center bg-hero-gradient text-white pt-16 overflow-hidden">
+        {/* Video Background */}
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="absolute inset-0 w-full h-full object-cover z-0 opacity-60 bg-black"
+          style={{ backgroundColor: '#111', backgroundImage: 'none' }}
+        >
+          <source src="/Your%20paragraph%20text.mp4" type="video/mp4" />
+        </video>
+        {/* Overlay to prevent white blink */}
+        <div className="absolute inset-0 w-full h-full z-0 pointer-events-none" style={{ background: 'rgba(10,10,20,0.7)' }} />
+        <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center flex flex-col items-center">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
+            className="w-full"
           >
-            <DeployChainIcon />
-            <h1 className="text-5xl md:text-7xl font-bold mb-6">DeployChain</h1>
-            <p className="text-2xl md:text-3xl mb-4 font-light">
+
+            <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-7xl font-bold mb-4 sm:mb-6">DeployChain</h1>
+            <p className="text-lg xs:text-xl sm:text-2xl md:text-3xl mb-2 sm:mb-4 font-light">
               Vercel for Web3: Deploy dApps with One Git Push
             </p>
-            <p className="text-xl md:text-2xl mb-12 text-blue-100 max-w-3xl mx-auto">
+            <p className="text-base xs:text-lg sm:text-xl md:text-2xl mb-6 sm:mb-12 text-blue-100 max-w-3xl mx-auto">
               Smart contracts + frontend deployed seamlessly to Sepolia testnet.
             </p>
-            <div className="flex flex-col sm:flex-row gap-6 justify-center">
+            <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center w-full items-center">
               <motion.button
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
                 onClick={() => smoothScrollTo('try-it')}
-                className="btn-hero"
+                className="btn-hero w-full sm:w-auto"
               >
                 Try It Now
               </motion.button>
               <motion.button
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
                 onClick={() => smoothScrollTo('demo')}
-                className="btn-outline"
+                className="btn-outline w-full sm:w-auto"
               >
                 Watch Demo
               </motion.button>
@@ -234,10 +301,10 @@ const Landing = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: index * 0.2 }}
-                className="card-problem"
+                className="card-problem p-6 rounded-xl shadow-md bg-white/80 dark:bg-gray-900/80 text-center flex flex-col items-center"
               >
-                <h3 className="text-xl font-semibold text-foreground mb-4">{problem.title}</h3>
-                <p className="text-muted-foreground">{problem.description}</p>
+                <h3 className="text-lg sm:text-xl font-semibold text-foreground mb-2 sm:mb-4">{problem.title}</h3>
+                <p className="text-sm sm:text-base text-muted-foreground">{problem.description}</p>
               </motion.div>
             ))}
           </div>
@@ -312,10 +379,10 @@ const Landing = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: index * 0.1 }}
-                className="card-feature"
+                className="card-feature p-6 rounded-xl shadow-md bg-white/80 dark:bg-gray-900/80 text-center flex flex-col items-center"
               >
-                <h3 className="text-xl font-semibold text-primary mb-4">{feature.title}</h3>
-                <p className="text-accent-foreground">{feature.description}</p>
+                <h3 className="text-lg sm:text-xl font-semibold text-primary mb-2 sm:mb-4">{feature.title}</h3>
+                <p className="text-sm sm:text-base text-accent-foreground">{feature.description}</p>
               </motion.div>
             ))}
           </div>
@@ -384,11 +451,13 @@ const Landing = () => {
           ) : (
             <div className="grid md:grid-cols-2 gap-8">
               {deployments.map((deployment, index) => (
-                <DeploymentCard
-                  key={deployment.id}
-                  deployment={deployment}
-                  index={index}
-                />
+                <div className="w-full flex flex-col">
+                  <DeploymentCard
+                    key={deployment.id}
+                    deployment={deployment}
+                    index={index}
+                  />
+                </div>
               ))}
             </div>
           )}

index.html → web/index.html

@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DeployChain - Vercel for Web3 dApps</title>
@@ -11,11 +12,11 @@
     <meta property="og:title" content="DeployChain - Vercel for Web3 dApps" />
     <meta property="og:description" content="Deploy dApps with one Git push. Smart contracts + frontend deployed seamlessly to Web3." />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+  <meta property="og:image" content="" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@lovable_dev" />
-    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+  <meta name="twitter:image" content="" />
   </head>
 
   <body>