Merge version_6 into main #8
@@ -3,7 +3,8 @@ import "./styles/base.css";
|
||||
import "./styles/variables.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Helion Era | Digital Growth Solutions", description: "Transform your business with premium digital growth strategies and solutions."};
|
||||
title: "Helion Era | Digital Growth Solutions", description: "Transform your business with premium digital growth strategies and solutions."
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
|
||||
539
src/app/page.tsx
539
src/app/page.tsx
@@ -7,9 +7,8 @@ import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDash
|
||||
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 FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Sparkles, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, CheckCircle, X, Zap, Target, Rocket, TrendingUp, Calendar } from "lucide-react";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Sparkles, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, CheckCircle, X, Zap, Target, Rocket, TrendingUp, Calendar, Twitter, Linkedin, Github } 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 (
|
||||
@@ -51,278 +50,274 @@ export default function Home() {
|
||||
bottomRightText="hello@helionera.com"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Digital Growth"
|
||||
tagIcon={Sparkles}
|
||||
title="Grow Your Revenue 3x Faster"
|
||||
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: "#featured-work" },
|
||||
]}
|
||||
dashboard={{
|
||||
title: "Growth Metrics Hub", logoIcon: House,
|
||||
imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Dashboard", href: "#" },
|
||||
{ text: "Export CSV", href: "#" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: House, active: true },
|
||||
{ icon: MessageSquareText },
|
||||
{ icon: Settings },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Revenue Growth", values: [178425, 245890, 312750],
|
||||
valuePrefix: "$", description: "Monthly increase."
|
||||
},
|
||||
{
|
||||
title: "Client Conversions", values: [7.84, 12.5, 9.32],
|
||||
valuePrefix: "", valueSuffix: "%", description: "Conversion rate."
|
||||
},
|
||||
{
|
||||
title: "Active Clients", values: [11240, 15680, 13450],
|
||||
description: "Growing portfolio."
|
||||
},
|
||||
],
|
||||
chartTitle: "Monthly Performance", chartData: [
|
||||
{ value: 50 },
|
||||
{ value: 30 },
|
||||
{ value: 70 },
|
||||
{ value: 40 },
|
||||
{ value: 90 },
|
||||
],
|
||||
listTitle: "Recent Wins", listItems: [
|
||||
{ icon: CircleDollarSign, title: "$150K Revenue", status: "Secured" },
|
||||
{ icon: ArrowLeftRight, title: "Brand Pivot", status: "Executed" },
|
||||
{ icon: Send, title: "Campaign Launch", status: "Live" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSixteen
|
||||
negativeCard={{
|
||||
items: [
|
||||
"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"
|
||||
],
|
||||
}}
|
||||
animationType="slide-up"
|
||||
title="Why Choose Helion Era"
|
||||
description="We don't believe in one-size-fits-all. Our approach is customized to your unique business needs and goals."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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="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}
|
||||
<main className="flex flex-col w-full">
|
||||
<section id="hero" data-section="hero" className="w-full">
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Digital Growth"
|
||||
tagIcon={Sparkles}
|
||||
title="Grow Your Revenue 3x Faster"
|
||||
description="Unlock your business potential with our premium digital growth solutions. From strategic planning to execution, we deliver measurable results."
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Projects", href: "#contact"
|
||||
},
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#featured-work" },
|
||||
]}
|
||||
dashboard={{
|
||||
title: "Growth Metrics Hub", logoIcon: House,
|
||||
imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Dashboard", href: "#" },
|
||||
{ text: "Export CSV", href: "#" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: House, active: true },
|
||||
{ icon: MessageSquareText },
|
||||
{ icon: Settings },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Revenue Growth", values: [178425, 245890, 312750],
|
||||
valuePrefix: "$", description: "Monthly increase."
|
||||
},
|
||||
{
|
||||
title: "Client Conversions", values: [7.84, 12.5, 9.32],
|
||||
valuePrefix: "", valueSuffix: "%", description: "Conversion rate."
|
||||
},
|
||||
{
|
||||
title: "Active Clients", values: [11240, 15680, 13450],
|
||||
description: "Growing portfolio."
|
||||
},
|
||||
],
|
||||
chartTitle: "Monthly Performance", chartData: [
|
||||
{ value: 50 },
|
||||
{ value: 30 },
|
||||
{ value: 70 },
|
||||
{ value: 40 },
|
||||
{ value: 90 },
|
||||
],
|
||||
listTitle: "Recent Wins", listItems: [
|
||||
{ icon: CircleDollarSign, title: "$150K Revenue", status: "Secured" },
|
||||
{ icon: ArrowLeftRight, title: "Brand Pivot", status: "Executed" },
|
||||
{ icon: Send, title: "Campaign Launch", status: "Live" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="services" data-section="services" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<FeatureCardSixteen
|
||||
negativeCard={{
|
||||
items: [
|
||||
"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"
|
||||
],
|
||||
}}
|
||||
animationType="slide-up"
|
||||
title="Why Choose Helion Era"
|
||||
description="We don't believe in one-size-fits-all. Our approach is customized to your unique business needs and goals."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="process" data-section="process" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="featured-work" data-section="featured-work" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<div className="flex flex-col gap-12">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<TextBox
|
||||
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: "View All Projects", href: "#contact"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
||||
<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 h-full">
|
||||
<div className="w-full h-48 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg"></div>
|
||||
<div className="flex flex-col gap-2 flex-grow">
|
||||
<h3 className="text-lg font-semibold">E-Commerce Platform Redesign</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 text-sm">Increased conversion rate by 45% through strategic UX improvements and A/B testing</p>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 flex-wrap">
|
||||
<span className="px-3 py-1 text-xs 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-xs 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 h-full">
|
||||
<div className="w-full h-48 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg"></div>
|
||||
<div className="flex flex-col gap-2 flex-grow">
|
||||
<h3 className="text-lg font-semibold">SaaS Marketing Campaign</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 text-sm">Generated $2.3M in qualified leads through targeted content and conversion optimization</p>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 flex-wrap">
|
||||
<span className="px-3 py-1 text-xs 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-xs 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 h-full">
|
||||
<div className="w-full h-48 bg-gradient-to-br from-green-400 to-green-600 rounded-lg"></div>
|
||||
<div className="flex flex-col gap-2 flex-grow">
|
||||
<h3 className="text-lg font-semibold">Brand Transformation</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 text-sm">Rebranded legacy company, resulting in 3x increase in market visibility and engagement</p>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 flex-wrap">
|
||||
<span className="px-3 py-1 text-xs 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-xs bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">Design</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="booking" data-section="booking" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<div className="flex flex-col gap-12 items-center">
|
||||
<div className="w-full max-w-2xl">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="cta-premium" data-section="cta-premium" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<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-8 md: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-base md: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>
|
||||
</section>
|
||||
|
||||
<section id="about" data-section="about" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<div className="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>
|
||||
</section>
|
||||
|
||||
<section id="contact" data-section="contact" className="w-full py-16 md:py-24 lg:py-32">
|
||||
<div className="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>
|
||||
</section>
|
||||
|
||||
<footer className="w-full py-12 md:py-16 mt-12 md:mt-16">
|
||||
<FooterCard
|
||||
logoText="Helion Era"
|
||||
copyrightText="© 2025 Helion Era. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "https://twitter.com/helionera", ariaLabel: "Twitter" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/company/helionera", ariaLabel: "LinkedIn" },
|
||||
{ icon: Github, href: "https://github.com/helionera", ariaLabel: "GitHub" }
|
||||
]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<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."
|
||||
/>
|
||||
</footer>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user