diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3bb1306..be4751d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
-import "./globals.css";
+import "./styles/base.css";
+import "./styles/variables.css";
 
 export const metadata: Metadata = {
-  title: "Helion Era - Digital Growth Agency",  description: "Premium UI/UX design, website development, social media management, lead generation systems, and digital growth strategy."
-};
+  title: "Helion Era | Digital Growth Solutions",  description: "Transform your business with premium digital growth strategies and solutions."};
 
 export default function RootLayout({
   children,
@@ -12,9 +12,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>
-        {children}
-      
+      <body>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1aaa6c7..09f7695 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,9 +5,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
+import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
 import TextBox from "@/components/Textbox";
 import ButtonIconArrow from "@/components/button/ButtonIconArrow";
-import { Sparkles, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, CheckCircle, X } from "lucide-react";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, CheckCircle, X, Zap, Target, Rocket, TrendingUp, Calendar } from "lucide-react";
 
 const Dashboard = ({ title, stats, logoIcon: LogoIcon, sidebarItems, buttons, listItems, imageSrc, searchPlaceholder, chartTitle, chartData, listTitle, videoSrc, imageAlt, videoAriaLabel, className, containerClassName, sidebarClassName, statClassName, chartClassName, listClassName }) => {
   return (
@@ -58,7 +60,7 @@ export default function Home() {
           description="Unlock your business potential with our premium digital growth solutions. From strategic planning to execution, we deliver measurable results."
           buttons={[
             { text: "Get Started", href: "#contact" },
-            { text: "View Our Work", href: "#about" },
+            { text: "View Our Work", href: "#featured-work" },
           ]}
           dashboard={{
             title: "Growth Metrics Hub",            logoIcon: House,
@@ -74,13 +76,16 @@ export default function Home() {
             stats: [
               {
                 title: "Revenue Growth",                values: [178425, 245890, 312750],
-                valuePrefix: "$",                description: "Monthly increase."},
+                valuePrefix: "$",                description: "Monthly increase."
+              },
               {
                 title: "Client Conversions",                values: [7.84, 12.5, 9.32],
-                valuePrefix: "",                valueSuffix: "%",                description: "Conversion rate."},
+                valuePrefix: "",                valueSuffix: "%",                description: "Conversion rate."
+              },
               {
                 title: "Active Clients",                values: [11240, 15680, 13450],
-                description: "Growing portfolio."},
+                description: "Growing portfolio."
+              },
             ],
             chartTitle: "Monthly Performance",            chartData: [
               { value: 50 },
@@ -102,11 +107,13 @@ export default function Home() {
         <FeatureCardSixteen
           negativeCard={{
             items: [
-              "Generic templates",              "One-size-fits-all approach",              "Limited scalability",              "Poor performance tracking"],
+              "Generic templates",              "One-size-fits-all approach",              "Limited scalability",              "Poor performance tracking"
+            ],
           }}
           positiveCard={{
             items: [
-              "Custom-built solutions",              "Tailored strategy for your business",              "Infinitely scalable",              "Real-time analytics & insights"],
+              "Custom-built solutions",              "Tailored strategy for your business",              "Infinitely scalable",              "Real-time analytics & insights"
+            ],
           }}
           animationType="slide-up"
           title="Why Choose Helion Era"
@@ -114,42 +121,208 @@ export default function Home() {
           textboxLayout="default"
           useInvertedBackground={false}
         />
+      </div>
 
-        <div className="py-20 flex flex-col items-center gap-12">
+      <div id="process" data-section="process">
+        <TimelineCardStack
+          title="Our Process"
+          description="Follow our proven 4-step approach to transform your business and achieve exponential growth."
+          tag="How We Work"
+          tagIcon={Zap}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Learn More", href: "#featured-work" },
+          ]}
+        >
+          <div className="flex flex-col gap-6 p-8 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+                <Target className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold">Strategy & Discovery</h3>
+                <p className="text-slate-600 dark:text-slate-300 mt-2">We dive deep into your business, market, and goals to craft a personalized growth strategy tailored to your unique needs and competitive landscape.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6 p-8 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
+                <Rocket className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold">Execution & Launch</h3>
+                <p className="text-slate-600 dark:text-slate-300 mt-2">Our expert team executes your strategy with precision. We build, optimize, and launch campaigns designed to drive immediate impact and measurable results.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6 p-8 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
+                <TrendingUp className="w-6 h-6 text-green-600 dark:text-green-400" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold">Optimization & Growth</h3>
+                <p className="text-slate-600 dark:text-slate-300 mt-2">We continuously monitor performance, test new approaches, and refine strategies based on real data to maximize your ROI and accelerate sustainable growth.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6 p-8 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center">
+                <Sparkles className="w-6 h-6 text-orange-600 dark:text-orange-400" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold">Scale & Success</h3>
+                <p className="text-slate-600 dark:text-slate-300 mt-2">Once proven effective, we scale what works. Your business grows exponentially while we maintain quality, consistency, and continued innovation throughout the journey.</p>
+              </div>
+            </div>
+          </div>
+        </TimelineCardStack>
+      </div>
+
+      <div id="featured-work" data-section="featured-work">
+        <div className="py-12 flex flex-col items-center gap-8">
           <TextBox
-            title="Ready to Transform Your Business?"
-            description="Join hundreds of companies growing 3x faster with our proven digital strategies."
+            title="Featured Work"
+            description="Discover how we've transformed businesses across industries. Each project showcases our commitment to delivering exceptional results and driving measurable growth."
             textboxLayout="default"
             center={true}
             buttons={[
               {
-                text: "Book Strategy Call",                href: "#contact"},
+                text: "View All Projects",                href: "#contact"
+              },
+            ]}
+          />
+
+          <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+            <div className="flex flex-col gap-4 p-6 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <div className="w-full h-48 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg"></div>
+              <h3 className="text-lg font-semibold">E-Commerce Platform Redesign</h3>
+              <p className="text-slate-600 dark:text-slate-300">Increased conversion rate by 45% through strategic UX improvements and A/B testing</p>
+              <div className="flex gap-2 mt-2">
+                <span className="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">UX Design</span>
+                <span className="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">Development</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 p-6 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <div className="w-full h-48 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg"></div>
+              <h3 className="text-lg font-semibold">SaaS Marketing Campaign</h3>
+              <p className="text-slate-600 dark:text-slate-300">Generated $2.3M in qualified leads through targeted content and conversion optimization</p>
+              <div className="flex gap-2 mt-2">
+                <span className="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full">Marketing</span>
+                <span className="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full">Strategy</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 p-6 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <div className="w-full h-48 bg-gradient-to-br from-green-400 to-green-600 rounded-lg"></div>
+              <h3 className="text-lg font-semibold">Brand Transformation</h3>
+              <p className="text-slate-600 dark:text-slate-300">Rebranded legacy company, resulting in 3x increase in market visibility and engagement</p>
+              <div className="flex gap-2 mt-2">
+                <span className="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">Branding</span>
+                <span className="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">Design</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="booking" data-section="booking">
+        <div className="py-12 flex flex-col items-center gap-8">
+          <TextBox
+            title="Schedule Your Growth Consultation"
+            description="Let's discuss your business goals and discover how our proven strategies can accelerate your revenue growth. Book a free 30-minute consultation with our team."
+            textboxLayout="default"
+            center={true}
+          />
+
+          <div className="w-full max-w-2xl mx-auto">
+            <div className="flex flex-col items-center justify-center p-12 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 text-center">
+              <Calendar className="w-12 h-12 text-slate-400 dark:text-slate-600 mb-4" />
+              <p className="text-slate-600 dark:text-slate-300 mb-4">Calendly Booking Widget</p>
+              <p className="text-sm text-slate-500 dark:text-slate-400">Embedded Calendly scheduling system would appear here for seamless appointment booking.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cta-premium" data-section="cta-premium">
+        <div className="py-12 flex flex-col items-center gap-8">
+          <div className="w-full max-w-3xl mx-auto bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 rounded-lg p-12 text-white text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Grow 3x Faster?</h2>
+            <p className="text-lg text-blue-100 mb-8">Join hundreds of companies transforming their revenue with our premium digital growth solutions. Our proven framework delivers measurable results in weeks, not months.</p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <button className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors">
+                Start Your Growth Journey
+              </button>
+              <button className="px-8 py-3 bg-white/20 text-white font-semibold rounded-lg border border-white/30 hover:bg-white/30 transition-colors">
+                View Our Plans
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="about" data-section="about">
+        <div className="py-8 flex flex-col items-center gap-8">
+          <TextBox
+            title="About Helion Era"
+            description="We are a team of growth strategists, designers, and developers dedicated to helping businesses achieve exponential growth through innovative digital solutions."
+            textboxLayout="default"
+            center={true}
+          />
+        </div>
+      </div>
+
+      <div id="contact" data-section="contact">
+        <div className="py-8 flex flex-col items-center gap-8">
+          <TextBox
+            title="Get In Touch"
+            description="Ready to grow? Reach out to us and let's discuss how we can help your business thrive."
+            textboxLayout="default"
+            center={true}
+            buttons={[
+              {
+                text: "Contact Us",                href: "mailto:hello@helionera.com"
+              },
             ]}
           />
         </div>
       </div>
 
-      <div id="about" data-section="about">
-        <TextBox
-          title="About Helion Era"
-          description="We are a team of growth strategists, designers, and developers dedicated to helping businesses achieve exponential growth through innovative digital solutions."
-          textboxLayout="default"
-          center={true}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <TextBox
-          title="Get In Touch"
-          description="Ready to grow? Reach out to us and let's discuss how we can help your business thrive."
-          textboxLayout="default"
-          center={true}
-          buttons={[
-            {
-              text: "Contact Us",              href: "mailto:hello@helionera.com"},
-          ]}
-        />
-      </div>
+      <FooterBase
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Services", href: "services" },
+              { label: "Process", href: "process" },
+              { label: "Featured Work", href: "featured-work" },
+            ]
+          },
+          {
+            title: "Company",            items: [
+              { label: "About", href: "about" },
+              { label: "Blog", href: "#" },
+              { label: "Careers", href: "#" },
+            ]
+          },
+          {
+            title: "Support",            items: [
+              { label: "Contact", href: "contact" },
+              { label: "Documentation", href: "#" },
+              { label: "Help Center", href: "#" },
+            ]
+          }
+        ]}
+        logoText="Helion Era"
+        copyrightText="© 2025 Helion Era. All rights reserved."
+      />
     </ThemeProvider>
   );
 }
