Maahela adjustments

src/components/FeatureCard.tsx

@@ -4,11 +4,10 @@ interface FeatureCardProps {
   title: string;
   desc: string;
   active?: boolean;
-  onClick?: () => void;
 }
 
-const FeatureCard: React.FC<FeatureCardProps> = ({ title, desc, active = false, onClick }) => (
-  <div className={`feature-card${active ? " active" : ""}`} onClick={onClick}>
+const FeatureCard: React.FC<FeatureCardProps> = ({ title, desc, active = false }) => (
+  <div className={`feature-card${active ? " active" : ""}`}>
     <h3>{title}</h3>
     <p>{desc}</p>
   </div>

src/components/Footer.tsx

@@ -28,15 +28,20 @@ const Footer = () => {
         {/* Right: Contact Info */}
         <div className="flex flex-col items-center md:items-start w-full md:w-1/3 mt-4 md:mt-0">
           <span className="text-white font-semibold mb-4">Contact Us</span>
-          <div className="flex items-center text-[#E0E0E0] mb-2">
-            <FaEnvelope className="w-5 h-5 mr-2" />
-            info@xployt.com
+          <div className="flex items-center text-[#E0E0E0] mb-3">
+            <FaEnvelope className="w-5 h-5 mr-3" />
+            <a href="mailto:support@xployt.ai" className="hover:text-white transition-colors">support@xployt.ai</a>
           </div>
-          <div className="flex items-center text-[#E0E0E0] mb-2">
-            <FaPhone className="w-5 h-5 mr-2" />
-            +9411XXXXXXX
+          <div className="flex items-center text-[#E0E0E0] mb-3">
+            <FaPhone className="w-5 h-5 mr-3" />
+            <a href="tel:+94112345678" className="hover:text-white transition-colors">+94 11 234 5678</a>
+          </div>
+          <div className="text-[#E0E0E0] leading-relaxed">
+            <div className="font-medium mb-1">Xployt.ai Inc.</div>
+            <div>Level 12, World Trade Center</div>
+            <div>Echelon Square, Colombo 01</div>
+            <div>Sri Lanka</div>
           </div>
-          <div className="text-[#E0E0E0]">Xployt Co, Colombo, Sri Lanka</div>
         </div>
       </div>
       <div className="max-w-6xl mx-auto mt-8 border-t border-[#23262F] pt-4 text-center">

src/components/PricingCard.tsx

@@ -4,19 +4,25 @@ interface PricingCardProps {
   plan: string;
   price: string;
   per?: string;
+  tokens?: string;
   features: string[];
   buttonText: string;
   highlight?: boolean;
   onButtonClick?: () => void;
 }
 
-const PricingCard: React.FC<PricingCardProps> = ({ plan, price, per, features, buttonText, highlight = false, onButtonClick }) => (
+const PricingCard: React.FC<PricingCardProps> = ({ plan, price, per, tokens, features, buttonText, highlight = false, onButtonClick }) => (
   <div className={`pricing-card${highlight ? " pricing-card-highlight" : ""}`}>
     <div className="pricing-plan">{plan}</div>
     <div className={`pricing-price-row${highlight ? " pricing-price-row-highlight" : ""}`}>
       <div className="pricing-price">{price}</div>
       {per && <span className="pricing-per">{per}</span>}
     </div>
+    {tokens && (
+      <div className="pricing-tokens">
+        <span className="pricing-tokens-badge">{tokens}</span>
+      </div>
+    )}
     <ul className="pricing-features">
       {features.map((feature, idx) => (
         <li key={idx}><img src="/checkmark.png" alt="check" className="pricing-check" /> {feature}</li>

src/pages/About.tsx

@@ -8,20 +8,27 @@ const About = () => {
                     <img src="/map.png" alt="Team working" />
                 </div>
                 <div className="about-content">
-                    <div className="about-label">ABOUT US</div>
+                    {/* <div className="about-label">ABOUT US</div> */}
                     <h1 className="about-title">At Xployt.ai, we're on a mission to make modern web development secure</h1>
                     <p className="about-prose">
-                        Xployt.ai is a cutting-edge security scanning platform designed to help developers
-                        identify and fix vulnerabilities in their codebase. We combine static analysis,
-                        AI-driven heuristics, and developer-friendly reporting to make security work for teams.
+                        We know how it feels when security vulnerabilities slip into production. That sleepless night, 
+                        the emergency hotfix, the worried conversations with your team. We've been there too.
                     </p>
                     <p className="about-prose">
-                        Whether you're a solo developer or part of a large engineering org, our goal is to
-                        make app security accessible, actionable, and integrated into your workflow.
+                        Xployt.ai was built by developers who got tired of expensive security tools that were either 
+                        too complex to use or too simple to be effective. We wanted something different - a platform 
+                        that catches real vulnerabilities before they become real problems, without breaking your 
+                        development flow or your budget.
+                    </p>
+                    <p className="about-prose">
+                        Today, we help developers like you scan GitHub repositories, catch security issues early, 
+                        and ship with confidence. No security degree required. Just connect your repo and let our 
+                        AI-powered engine do the heavy lifting while you focus on building great products.
+                    </p>
+                    <p className="about-prose">
+                        Because at the end of the day, security isn't just about protecting code - it's about 
+                        protecting the trust your users place in you.
                     </p>
-                    <div className="about-actions">
-                        <button className="about-btn">Read More</button>
-                    </div>
                 </div>
             </div>
         </section>

src/pages/Home.css

@@ -184,7 +184,6 @@ body, .home-root {
   box-shadow: 0 2px 24px 0 rgba(0,0,0,0.12);
   border: 2px solid transparent;
   transition: transform 0.2s ease, box-shadow 0.25s ease, border 0.3s;
-  cursor: pointer;
   will-change: transform, box-shadow;
   display: flex;
   flex-direction: column;
@@ -195,16 +194,12 @@ body, .home-root {
   border: 2px solid transparent;
   background: linear-gradient(120deg,rgba(255,255,255,0.04) 60%,rgba(255,255,255,0.01));
 }
-/* Hover & focus styles for better affordance */
-.feature-card:hover,
-.feature-card:focus-visible {
+/* Hover styles - cards are hoverable but not clickable */
+.feature-card:hover {
   transform: translateY(-12px) scale(1.04);
   box-shadow: 0 22px 60px rgba(0,0,0,0.46);
   border-color: rgba(255,255,255,0.14);
 }
-.feature-card:active {
-  transform: translateY(-4px) scale(0.995);
-}
 .feature-card h3 {
   font-size: 2rem;
   font-weight: 700;
@@ -371,22 +366,17 @@ body, .home-root {
   box-shadow: 0 2px 24px 0 rgba(0,0,0,0.12);
   border: 2px solid transparent;
   transition: transform 0.2s ease, box-shadow 0.25s ease, border 0.3s;
-  cursor: pointer;
   will-change: transform, box-shadow;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   text-align: center;
 }
-.howit-card:hover,
-.howit-card:focus-visible {
+.howit-card:hover {
   transform: translateY(-12px) scale(1.04);
   box-shadow: 0 22px 60px rgba(0,0,0,0.46);
   border-color: rgba(255,255,255,0.14);
 }
-.howit-card:active {
-  transform: translateY(-4px) scale(0.995);
-}
 
 /* Respect user preference for reduced motion */
 @media (prefers-reduced-motion: reduce) {
@@ -542,7 +532,7 @@ body, .home-root {
   border-radius: 32px;
   color: #fff;
   font-size: 2.2rem;
-  font-weight: 800;
+  font-weight: 500;
   padding: 0.7rem 3.5rem;
   margin-right: 0.5rem;
   box-shadow: 0 0 24px 0 rgba(120,120,140,0.18);
@@ -556,6 +546,32 @@ body, .home-root {
   font-size: 1.1rem;
   font-weight: 500;
 }
+.pricing-tokens {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  margin-top: -1rem;
+}
+.pricing-tokens-badge {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  padding: 0.5rem 1.5rem;
+  border-radius: 20px;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  letter-spacing: 0.05em;
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  }
+  50% {
+    box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6);
+  }
+}
 .pricing-features {
   list-style: none;
   padding: 0;

src/pages/Home.tsx

@@ -3,8 +3,9 @@ import "./Home.css";
 import { useState } from "react";
 import FeatureCard from "@/components/FeatureCard.tsx";
 import PricingCard from "@/components/PricingCard.tsx";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+
 
-// Feature list
 const features = [
   {
     title: "AI-Powered Vulnerability Detection",
@@ -22,7 +23,7 @@ const features = [
     title: "Dependency Vulnerability Detection",
     desc: "Detects vulnerable packages and suggests secure alternatives"
   },
-  // Dummy features for demonstration
+
   {
     title: "Automated Code Review",
     desc: "Instantly reviews your code for best practices and security compliance."
@@ -49,12 +50,23 @@ const features = [
   }
 ];
 
-const DOT_COUNT = 4; // Number of dots to show
+const DOT_COUNT = 4; 
 
 const Home = () => {
   const navigate = useNavigate();
+  const { user, login } = useAuth();
   const [active, setActive] = useState(0);
 
+  const handleStartScan = () => {
+    if (user) {
+      // If user is already logged in, go to repo import
+      navigate("/repo-import");
+    } else {
+      // If not logged in, trigger GitHub OAuth login
+      login();
+    }
+  };
+
   const getDotActive = (dotIdx: number) => {
     // Map dot index to feature index
     const start = active - (active % DOT_COUNT);
@@ -85,7 +97,7 @@ const Home = () => {
             <p className="hero-desc">Our AI-powered platform analyzes your MERN stack applications for security vulnerabilities providing actionable insights and automated fixes.</p>
             <button
               className="hero-btn"
-              onClick={() => navigate("/login")}
+              onClick={handleStartScan}
             >
               Start Free Scan
             </button>
@@ -151,7 +163,7 @@ const Home = () => {
           <p className="about-desc">
             Whether you're a solo developer or building your next startup, we make app security simple, smart, and seamless.
           </p>
-          <button className="about-btn">
+          <button className="about-btn" onClick={() => navigate("/about")}>
             Read More
           </button>
         </div>
@@ -164,38 +176,20 @@ const Home = () => {
         </div>
         <div className="howit-steps">
           {/*TODO: add images of the mentioned logos*/}
-          <div
-            className="howit-card"
-            role="button"
-            tabIndex={0}
-            onClick={() => navigate('/documentation')}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/documentation'); }}
-          >
+          <div className="howit-card">
             <img src="/github.png" alt="GitHub" className="howit-icon" />
             <div className="howit-step">STEP 01</div>
             <div className="howit-card-title">Connect GitHub</div>
             <div className="howit-card-desc">Securely authorize access to your GitHub repositories. We use OAuth for safe authentication.</div>
           </div>
-          <div
-            className="howit-card"
-            role="button"
-            tabIndex={0}
-            onClick={() => navigate('/documentation')}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/documentation'); }}
-          >
+          <div className="howit-card">
             {/* folder.png was missing in public; use an existing decorative asset instead */}
             <img src="/Folder.png" alt="Folder" className="howit-icon" />
             <div className="howit-step">STEP 02</div>
             <div className="howit-card-title">Select Repository</div>
             <div className="howit-card-desc">Choose the specific MERN application repository you want to analyze.</div>
           </div>
-          <div
-            className="howit-card"
-            role="button"
-            tabIndex={0}
-            onClick={() => navigate('/documentation')}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/documentation'); }}
-          >
+          <div className="howit-card">
             <img src="/shield-image.png" alt="Shield" className="howit-icon" />
             <div className="howit-step">STEP 03</div>
             <div className="howit-card-title">Get Security Report</div>
@@ -213,6 +207,7 @@ const Home = () => {
           <PricingCard
             plan="BASIC"
             price="FREE"
+            tokens="500 Tokens"
             features={["Real-time Threat Monitoring", "Community support", "Limited scans per month"]}
             buttonText="Get Started"
           />