Merge version_5 into main #7
@@ -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: `
|
||||
|
||||
237
src/app/page.tsx
237
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user