Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -16,31 +16,31 @@ import { useState, useEffect } from "react";
 export default function HomePage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
+    { name: "Services", id: "services" },
-    { name: "Portfolio", id: "/portfolio" },
+    { name: "Portfolio", id: "portfolio" },
-    { name: "Pricing", id: "/pricing" },
+    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "/about" },
+    { name: "About", id: "about" },
-    { name: "Contact", id: "/contact" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
     {
       title: "Company",      items: [
-        { label: "About", href: "/about" },
+        { label: "About", href: "#about" },
-        { label: "Services", href: "/services" },
+        { label: "Services", href: "#services" },
-        { label: "Portfolio", href: "/portfolio" },
+        { label: "Portfolio", href: "#portfolio" },
       ],
     },
     {
       title: "Products",      items: [
-        { label: "Pricing", href: "/pricing" },
+        { label: "Pricing", href: "#pricing" },
-        { label: "Website Design", href: "/services" },
+        { label: "Website Design", href: "#services" },
-        { label: "Hosting Plans", href: "/pricing" },
+        { label: "Hosting Plans", href: "#pricing" },
       ],
     },
     {
       title: "Support",      items: [
-        { label: "Contact Us", href: "/contact" },
+        { label: "Contact Us", href: "#contact" },
         { label: "Email Support", href: "mailto:support@forgewebco.com" },
         { label: "FAQ", href: "#" },
       ],
@@ -58,13 +58,21 @@ export default function HomePage() {
 
   const websites = [
     {
-      name: "Forge Web Co.",      url: "forge-web-co.com",      color: "from-blue-400 to-blue-600"},
+      name: "Forge Web Co.",      url: "forge-web-co.com",      color: "from-blue-400 to-blue-600",      content: [
+        "Professional Website Design",        "Mobile Optimized",        "SEO Ready",        "Fast Loading",        "Contact Today"],
+    },
     {
-      name: "Tech Innovations",      url: "tech-innovations.io",      color: "from-purple-400 to-purple-600"},
+      name: "Tech Innovations",      url: "tech-innovations.io",      color: "from-purple-400 to-purple-600",      content: [
+        "Cutting Edge Technology",        "Innovation First",        "Custom Solutions",        "Expert Team",        "Get Started"],
+    },
     {
-      name: "Creative Studio",      url: "creative-studio.design",      color: "from-pink-400 to-pink-600"},
+      name: "Creative Studio",      url: "creative-studio.design",      color: "from-pink-400 to-pink-600",      content: [
+        "Creative Design Services",        "Stunning Visuals",        "Brand Excellence",        "Portfolio Gallery",        "See Our Work"],
+    },
     {
-      name: "Digital Solutions",      url: "digital-solutions.co",      color: "from-green-400 to-green-600"},
+      name: "Digital Solutions",      url: "digital-solutions.co",      color: "from-green-400 to-green-600",      content: [
+        "Digital Marketing",        "Business Growth",        "Data Driven",        "Results Focused",        "Schedule Consultation"],
+    },
   ];
 
   useEffect(() => {
@@ -94,7 +102,7 @@ export default function HomePage() {
           brandName="Forge Web Co."
           navItems={navItems}
           button={{
-            text: "Request a Website",            href: "/contact"}}
+            text: "Request a Website",            href: "#contact"}}
         />
       </div>
 
@@ -108,8 +116,8 @@ export default function HomePage() {
             tagIcon={Sparkles}
             tagAnimation="slide-up"
             buttons={[
-              { text: "View Pricing", href: "/pricing" },
+              { text: "View Pricing", href: "#pricing" },
-              { text: "Request a Website", href: "/contact" },
+              { text: "Request a Website", href: "#contact" },
             ]}
             buttonAnimation="slide-up"
             carouselItems={[
@@ -130,7 +138,7 @@ export default function HomePage() {
             autoPlayInterval={4000}
           />
 
-          {/* Smartphone Render with Animated Website Display */}
+          {/* Smartphone Render with Actual Website Content */}
           <div className="absolute bottom-0 right-0 transform translate-y-1/3 mr-8 hidden lg:block">
             {/* Glow effect behind smartphone */}
             <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-3xl blur-3xl opacity-40 -z-10 animate-pulse"></div>
@@ -141,22 +149,36 @@ export default function HomePage() {
               <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-black rounded-b-2xl z-10"></div>
 
               {/* Screen content */}
-              <div className={`w-full h-full bg-gradient-to-br ${currentWebsite.color} p-6 flex flex-col justify-between overflow-hidden transition-all duration-700 ease-in-out`}>
+              <div className={`w-full h-full bg-gradient-to-br ${currentWebsite.color} p-6 flex flex-col justify-between overflow-hidden transition-all duration-700 ease-in-out relative`}>
                 {/* Website header */}
-                <div className="text-white">
+                <div className="text-white z-10">
                   <h3 className="text-lg font-bold truncate">{currentWebsite.name}</h3>
                   <p className="text-xs opacity-80 truncate">{currentWebsite.url}</p>
                 </div>
 
-                {/* Website content placeholder */}
+                {/* Website content - displaying actual website sections */}
-                <div className="flex-1 flex flex-col gap-3 justify-center">
+                <div className="flex-1 flex flex-col gap-4 justify-center z-10 transition-opacity duration-500">
-                  <div className="h-3 bg-white opacity-30 rounded w-3/4"></div>
+                  {currentWebsite.content.map((line, idx) => (
-                  <div className="h-2 bg-white opacity-20 rounded w-full"></div>
+                    <div
-                  <div className="h-2 bg-white opacity-20 rounded w-5/6"></div>
+                      key={idx}
+                      className={`${
+                        idx === 0
+                          ? "h-4 bg-white opacity-100 rounded w-5/6 font-bold text-sm flex items-center"
+                          : idx < 3
+                          ? "h-3 bg-white opacity-80 rounded w-4/5"
+                          : idx === 3
+                          ? "h-2 bg-white opacity-60 rounded w-full"
+                          : "h-3 bg-white opacity-20 rounded w-3/4 font-semibold text-xs flex items-center"
+                      }`}
+                    >
+                      {idx === 0 && <span className="text-white text-xs font-bold pl-1">{line}</span>}
+                      {idx === 4 && <span className="text-white text-xs font-semibold pl-1">{line}</span>}
+                    </div>
+                  ))}
                 </div>
 
                 {/* Website footer button */}
-                <div className="bg-white bg-opacity-20 hover:bg-opacity-30 transition-all rounded px-4 py-2 text-center">
+                <div className="bg-white bg-opacity-20 hover:bg-opacity-30 transition-all rounded px-4 py-2 text-center z-10 cursor-pointer transform hover:scale-105">
                   <p className="text-white text-xs font-semibold">Learn More</p>
                 </div>
               </div>