Skip to content

Add futuristic landing page components #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DDRCZ wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add futuristic landing page components #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions src/components/AutomationFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React from 'react';
import { ArrowRight, Database, Mail, Zap, FileText, Users, BarChart } from 'lucide-react';

const flowSteps = [
{ icon: FileText, title: 'Manuálny proces', color: 'text-red-400' },
{ icon: Zap, title: 'Automatizácia', color: 'text-neon-purple' },
{ icon: Database, title: 'Spracovanie dát', color: 'text-neon-pink' },
{ icon: Mail, title: 'Notifikácie', color: 'text-blue-400' },
{ icon: Users, title: 'Tímová spolupráca', color: 'text-green-400' },
{ icon: BarChart, title: 'Analýzy', color: 'text-yellow-400' }
];

const AutomationFlow = () => {
return (
<section className="py-20 px-4">
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
Ako funguje <span className="gradient-text">automatizácia</span>
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Transformujeme vaše manuálne procesy na inteligentné, automatizované workflow.
</p>
</div>

<div className="relative">
{/* Flow diagram */}
<div className="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-4">
{flowSteps.map((step, index) => (
<React.Fragment key={index}>
<div className="flex flex-col items-center group">
<div className="w-20 h-20 rounded-full bg-card/50 neon-border flex items-center justify-center mb-4 group-hover:neon-glow transition-all duration-300 group-hover:scale-110">
<step.icon className={`w-10 h-10 ${step.color}`} />
</div>
<h3 className="text-lg font-semibold text-center max-w-[120px]">
{step.title}
</h3>
</div>

{index < flowSteps.length - 1 && (
<ArrowRight className="w-8 h-8 text-neon-purple hidden lg:block animate-pulse" />
)}
Comment on lines +40 to +42
Copy link

@sourcery-ai sourcery-ai bot Jun 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

návrh: DRY duplicitné komponenty ArrowRight v AutomationFlow

Zvážte kombináciu desktopových a mobilných komponentov ArrowRight do jedného prvku pomocou podmienených tried pre rotáciu a zobrazenie na základe breakpointov.

Suggested change
{index < flowSteps.length - 1 && (
<ArrowRight className="w-8 h-8 text-neon-purple hidden lg:block animate-pulse" />
)}
{index < flowSteps.length - 1 && (
<ArrowRight
className={`
w-8 h-8 text-neon-purple animate-pulse
${/* Zobraziť na desktope, otočiť a zobraziť na mobile */''}
hidden lg:block
lg:hidden block rotate-90 lg:rotate-0
`}
/>
)}
Original comment in English

suggestion: DRY duplicate ArrowRight components in AutomationFlow

Consider combining the desktop and mobile ArrowRight components into a single element by using conditional classes for rotation and display based on breakpoints.

Suggested change
{index < flowSteps.length - 1 && (
<ArrowRight className="w-8 h-8 text-neon-purple hidden lg:block animate-pulse" />
)}
{index < flowSteps.length - 1 && (
<ArrowRight
className={`
w-8 h-8 text-neon-purple animate-pulse
${/* Show on desktop, rotate and show on mobile */''}
hidden lg:block
lg:hidden block rotate-90 lg:rotate-0
`}
/>
)}


{index < flowSteps.length - 1 && (
<ArrowRight className="w-8 h-8 text-neon-purple lg:hidden rotate-90 animate-pulse" />
)}
</React.Fragment>
))}
</div>

{/* Background glow effects */}
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-neon-purple/5 rounded-full blur-3xl" />
</div>
</div>

{/* Statistics */}
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8">
<div className="text-center">
<div className="text-3xl md:text-4xl font-bold gradient-text mb-2">500+</div>
<div className="text-muted-foreground">Automatizovaných procesov</div>
</div>
<div className="text-center">
<div className="text-3xl md:text-4xl font-bold gradient-text mb-2">50+</div>
<div className="text-muted-foreground">Spokojných klientov</div>
</div>
<div className="text-center">
<div className="text-3xl md:text-4xl font-bold gradient-text mb-2">90%</div>
<div className="text-muted-foreground">Úspora času</div>
</div>
<div className="text-center">
<div className="text-3xl md:text-4xl font-bold gradient-text mb-2">24/7</div>
<div className="text-muted-foreground">Nepretržitá podpora</div>
</div>
</div>
</div>
</section>
);
};

export default AutomationFlow;
84 changes: 84 additions & 0 deletions src/components/BenefitsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React from 'react';
import { Clock, DollarSign, Target, Shield, Users, BarChart3 } from 'lucide-react';
import { Card } from '@/components/ui/card';

const benefits = [
{
icon: Clock,
title: 'Úspora času',
description: 'Automatizujte opakujúce sa úlohy a zamerajte sa na strategické rozhodnutia.',
stats: '90% menej času'
},
{
icon: DollarSign,
title: 'Zníženie nákladov',
description: 'Redukujte prevádzkové náklady elimináciou manuálnych procesov.',
stats: '50% úspora nákladov'
},
{
icon: Target,
title: 'Vyššia presnosť',
description: 'Minimalizujte ľudské chyby a zvýšte kvalitu vašich procesov.',
stats: '99% presnosť'
},
{
icon: Shield,
title: 'Bezpečnosť',
description: 'Zabezpečte konzistentné dodržiavanie bezpečnostných štandardov.',
stats: '100% compliance'
},
{
icon: Users,
title: 'Spokojnosť zamestnancov',
description: 'Oslobodenie od rutinných úloh pre kreatívnejšiu prácu.',
stats: '85% spokojnosť'
},
{
icon: BarChart3,
title: 'Rast produktivity',
description: 'Zvýšte výkon celého tímu vďaka efektívnym procesom.',
stats: '200% rast'
}
];

const BenefitsSection = () => {
return (
<section className="py-20 px-4 bg-gradient-to-b from-background to-background/50">
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
Prečo zvoliť <span className="gradient-text">automatizáciu?</span>
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Automatizácia nie je len trend - je to nevyhnutnosť pre firmy,
ktoré chcú zostať konkurencieschopné v digitálnom svete.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{benefits.map((benefit, index) => (
Copy link

@sourcery-ai sourcery-ai bot Jun 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

návrh (riziko_chyby): Vyhnite sa používaniu indexu poľa ako kľúča v mape pre BenefitsSection

Použite stabilný kľúč, ako napríklad benefit.title alebo explicitné id namiesto indexu poľa, aby ste predišli problémom s renderovaním, keď sa zoznam zmení.

Navrhovaná implementácia:

          {benefits.map((benefit) => (
            <Card 
              key={benefit.title}

Ak benefit.title nie je jedinečný alebo máte explicitnú vlastnosť id na každom benefite, použite benefit.id namiesto benefit.title pre kľúč.

Original comment in English

suggestion (bug_risk): Avoid using array index as key in map for BenefitsSection

Use a stable key such as benefit.title or an explicit id instead of the array index to prevent rendering issues when the list changes.

Suggested implementation:

          {benefits.map((benefit) => (
            <Card 
              key={benefit.title}

If benefit.title is not unique or you have an explicit id property on each benefit, use benefit.id instead of benefit.title for the key.

<Card
key={index}
className="neon-border p-6 hover:neon-glow transition-all duration-300 hover:scale-105 bg-card/50 backdrop-blur-sm"
>
<div className="flex items-center mb-4">
<div className="p-3 rounded-lg bg-neon-purple/20 mr-4">
<benefit.icon className="w-8 h-8 text-neon-purple" />
</div>
<div>
<h3 className="text-xl font-semibold">{benefit.title}</h3>
<span className="text-neon-pink font-bold text-sm">{benefit.stats}</span>
</div>
</div>
<p className="text-muted-foreground leading-relaxed">
{benefit.description}
</p>
</Card>
))}
</div>
</div>
</section>
);
};

export default BenefitsSection;
66 changes: 66 additions & 0 deletions src/components/CTASection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { Button } from '@/components/ui/button';
import { ArrowRight, Phone, Mail } from 'lucide-react';
import PhoenixLogo from './PhoenixLogo';

const CTASection = () => {
return (
<section className="py-20 px-4 relative overflow-hidden">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-neon-purple/10 via-background to-neon-pink/10" />

{/* Animated background elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-neon-purple/5 rounded-full blur-3xl animate-float" />
<div className="absolute bottom-1/4 right-1/4 w-48 h-48 bg-neon-pink/5 rounded-full blur-3xl animate-float" style={{ animationDelay: '2s' }} />
</div>

<div className="container mx-auto relative z-10">
<div className="text-center max-w-4xl mx-auto">
<div className="flex justify-center mb-8">
<PhoenixLogo size="lg" animated={true} />
</div>

<h2 className="text-4xl md:text-6xl font-bold mb-6">
Pripravení na <span className="gradient-text animate-glow">transformáciu?</span>
</h2>

<p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto">
Začnite svoju cestu k automatizácii už dnes. Náš tím odborníkov
vám pomôže identifikovať a implementovať najvhodnejšie riešenia.
</p>

<div className="flex flex-col sm:flex-row gap-6 justify-center mb-12">
<Button
size="lg"
className="bg-neon-purple hover:bg-neon-purple/80 text-white neon-glow transition-all duration-300 hover:scale-105 text-lg px-8 py-4"
>
Začnite teraz
<ArrowRight className="ml-2 w-6 h-6" />
</Button>
<Button
size="lg"
variant="outline"
className="border-neon-purple text-neon-purple hover:bg-neon-purple/10 transition-all duration-300 text-lg px-8 py-4"
>
Bezplatná konzultácia
</Button>
</div>

<div className="flex flex-col md:flex-row justify-center items-center gap-8 text-muted-foreground">
<div className="flex items-center gap-2">
<Phone className="w-5 h-5 text-neon-purple" />
<span>+421 XXX XXX XXX</span>
</div>
<div className="flex items-center gap-2">
<Mail className="w-5 h-5 text-neon-pink" />
<span>info@automation.sk</span>
</div>
</div>
</div>
</div>
</section>
);
};

export default CTASection;
74 changes: 74 additions & 0 deletions src/components/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React from 'react';
import { Button } from '@/components/ui/button';
import { ArrowRight, Zap, TrendingUp } from 'lucide-react';
import PhoenixLogo from './PhoenixLogo';

const HeroSection = () => {
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-background via-background to-purple-950/20" />

{/* Animated background elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-neon-purple/10 rounded-full blur-xl animate-float" />
<div className="absolute bottom-1/4 right-1/4 w-24 h-24 bg-neon-pink/10 rounded-full blur-xl animate-float" style={{ animationDelay: '1s' }} />
</div>

<div className="container mx-auto px-4 relative z-10">
<div className="text-center max-w-4xl mx-auto">
{/* Phoenix Logo */}
<div className="flex justify-center mb-8">
<PhoenixLogo size="xl" animated={true} />
</div>

{/* Main headline */}
<h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
Transformujte svoj biznis{' '}
<span className="gradient-text animate-glow">
automatizáciou
</span>
</h1>

{/* Subheadline */}
<p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto">
Pomáhame firmám ušetriť čas, znížiť náklady a zvýšiť efektivitu
pomocou inteligentnej automatizácie procesov.
</p>

{/* Stats */}
<div className="flex flex-col md:flex-row justify-center items-center gap-8 mb-12">
<div className="flex items-center gap-2 text-neon-purple">
<Zap className="w-6 h-6" />
<span className="text-lg font-semibold">90% úspora času</span>
</div>
<div className="flex items-center gap-2 text-neon-pink">
<TrendingUp className="w-6 h-6" />
<span className="text-lg font-semibold">50% zníženie nákladov</span>
</div>
</div>

{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="bg-neon-purple hover:bg-neon-purple/80 text-white neon-glow transition-all duration-300 hover:scale-105"
>
Začnite automatizovať
<ArrowRight className="ml-2 w-5 h-5" />
</Button>
<Button
size="lg"
variant="outline"
className="border-neon-purple text-neon-purple hover:bg-neon-purple/10 transition-all duration-300"
>
Zistite viac
</Button>
</div>
</div>
</div>
</section>
);
};

export default HeroSection;
Loading