Merge version_4 into main #5
155
src/app/page.tsx
155
src/app/page.tsx
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ThemeProvider } from "@/components/context/ThemeContext";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import TextBox from "@/components/Textbox";
|
||||
import ButtonIconArrow from "@/components/button/ButtonIconArrow";
|
||||
import { Sparkles, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, CheckCircle, X } 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 (
|
||||
<div className={containerClassName}>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold">{title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Helion Era"
|
||||
bottomLeftText="Global Community"
|
||||
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: "#about" },
|
||||
]}
|
||||
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 className="py-20 flex flex-col items-center gap-12">
|
||||
<TextBox
|
||||
title="Ready to Transform Your Business?"
|
||||
description="Join hundreds of companies growing 3x faster with our proven digital strategies."
|
||||
textboxLayout="default"
|
||||
center={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Strategy Call", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user