Merge version_5 into main #7

Merged
bender merged 2 commits from version_5 into main 2026-03-07 10:22:45 +00:00
2 changed files with 209 additions and 38 deletions

View File

@@ -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: `

View File

@@ -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>
);
}