diff --git a/src/components/AutomationFlow.tsx b/src/components/AutomationFlow.tsx new file mode 100644 index 0000000..8b0aa04 --- /dev/null +++ b/src/components/AutomationFlow.tsx @@ -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 ( +
+
+
+

+ Ako funguje automatizácia +

+

+ Transformujeme vaše manuálne procesy na inteligentné, automatizované workflow. +

+
+ +
+ {/* Flow diagram */} +
+ {flowSteps.map((step, index) => ( + +
+
+ +
+

+ {step.title} +

+
+ + {index < flowSteps.length - 1 && ( + + )} + + {index < flowSteps.length - 1 && ( + + )} + + ))} +
+ + {/* Background glow effects */} +
+
+
+
+ + {/* Statistics */} +
+
+
500+
+
Automatizovaných procesov
+
+
+
50+
+
Spokojných klientov
+
+
+
90%
+
Úspora času
+
+
+
24/7
+
Nepretržitá podpora
+
+
+
+
+ ); +}; + +export default AutomationFlow; diff --git a/src/components/BenefitsSection.tsx b/src/components/BenefitsSection.tsx new file mode 100644 index 0000000..8eb7042 --- /dev/null +++ b/src/components/BenefitsSection.tsx @@ -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 ( +
+
+
+

+ Prečo zvoliť automatizáciu? +

+

+ Automatizácia nie je len trend - je to nevyhnutnosť pre firmy, + ktoré chcú zostať konkurencieschopné v digitálnom svete. +

+
+ +
+ {benefits.map((benefit, index) => ( + +
+
+ +
+
+

{benefit.title}

+ {benefit.stats} +
+
+

+ {benefit.description} +

+ + ))} +
+
+
+ ); +}; + +export default BenefitsSection; diff --git a/src/components/CTASection.tsx b/src/components/CTASection.tsx new file mode 100644 index 0000000..c10a851 --- /dev/null +++ b/src/components/CTASection.tsx @@ -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 ( +
+ {/* Background gradient */} +
+ + {/* Animated background elements */} +
+
+
+
+ +
+
+
+ +
+ +

+ Pripravení na transformáciu? +

+ +

+ 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. +

+ +
+ + +
+ +
+
+ + +421 XXX XXX XXX +
+
+ + info@automation.sk +
+
+
+
+
+ ); +}; + +export default CTASection; diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx new file mode 100644 index 0000000..bc9e6ed --- /dev/null +++ b/src/components/HeroSection.tsx @@ -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 ( +
+ {/* Background gradient */} +
+ + {/* Animated background elements */} +
+
+
+
+ +
+
+ {/* Phoenix Logo */} +
+ +
+ + {/* Main headline */} +

+ Transformujte svoj biznis{' '} + + automatizáciou + +

+ + {/* Subheadline */} +

+ Pomáhame firmám ušetriť čas, znížiť náklady a zvýšiť efektivitu + pomocou inteligentnej automatizácie procesov. +

+ + {/* Stats */} +
+
+ + 90% úspora času +
+
+ + 50% zníženie nákladov +
+
+ + {/* CTA Buttons */} +
+ + +
+
+
+
+ ); +}; + +export default HeroSection; diff --git a/src/components/PhoenixLogo.tsx b/src/components/PhoenixLogo.tsx new file mode 100644 index 0000000..977a5b7 --- /dev/null +++ b/src/components/PhoenixLogo.tsx @@ -0,0 +1,112 @@ +import React from 'react'; + +interface PhoenixLogoProps { + size?: 'sm' | 'md' | 'lg' | 'xl'; + animated?: boolean; + className?: string; +} + +const PhoenixLogo: React.FC = ({ + size = 'md', + animated = true, + className = '' +}) => { + const sizeClasses = { + sm: 'w-16 h-16', + md: 'w-24 h-24', + lg: 'w-32 h-32', + xl: 'w-48 h-48' + }; + + return ( +
+ + + + + + + + + + + + + + + + + {/* Phoenix body */} + + + {/* Left wing */} + + + {/* Right wing */} + + + {/* Head/Beak */} + + + {/* Tail feathers */} + + + {/* Additional wing details */} + + + + +
+ ); +}; + +export default PhoenixLogo; diff --git a/src/components/TestimonialsSection.tsx b/src/components/TestimonialsSection.tsx new file mode 100644 index 0000000..fdd089c --- /dev/null +++ b/src/components/TestimonialsSection.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { Card } from '@/components/ui/card'; +import { Star, Quote } from 'lucide-react'; + +const testimonials = [ + { + name: 'Ján Novák', + position: 'CEO, TechCorp s.r.o.', + content: 'Automatizácia nám pomohla ušetriť 60% času na administratívnych úlohách. Môžeme sa konečne sústrediť na rast nášho biznisu.', + rating: 5, + avatar: 'JN' + }, + { + name: 'Mária Svobodová', + position: 'HR Manager, InnovateCo', + content: 'Proces nástupu nových zamestnancov sa zrýchlil z týždňa na jeden deň. Fantastické riešenie!', + rating: 5, + avatar: 'MS' + }, + { + name: 'Peter Kováč', + position: 'CFO, FinanceFlow', + content: 'ROI automatizácie sa ukázal už po 3 mesiacoch. Jedna z najlepších investícií, ktoré sme urobili.', + rating: 5, + avatar: 'PK' + } +]; + +const TestimonialsSection = () => { + return ( +
+
+
+

+ Čo hovoria naši klienti +

+

+ Príbehy úspechu firiem, ktoré sa rozhodli pre automatizáciu. +

+
+ +
+ {testimonials.map((testimonial, index) => ( + + + +
+
+ {testimonial.avatar} +
+
+

{testimonial.name}

+

{testimonial.position}

+
+
+ +
+ {[...Array(testimonial.rating)].map((_, i) => ( + + ))} +
+ +

+ "{testimonial.content}" +

+ + ))} +
+
+
+ ); +}; + +export default TestimonialsSection; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..a334979 --- /dev/null +++ b/src/components/ui/button.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: 'outline' | 'default'; + size?: 'sm' | 'md' | 'lg'; +} + +export const Button: React.FC = ({ + variant = 'default', + size = 'md', + className = '', + children, + ...props +}) => { + const base = 'rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2'; + const variants: Record = { + default: 'bg-neon-purple text-white hover:bg-neon-purple/80', + outline: 'border border-neon-purple text-neon-purple hover:bg-neon-purple/10', + }; + const sizes: Record = { + sm: 'px-3 py-1 text-sm', + md: 'px-4 py-2', + lg: 'px-6 py-3 text-lg', + }; + return ( + + ); +}; +export default Button; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..45e6c97 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface CardProps extends React.HTMLAttributes { + className?: string; +} + +export const Card: React.FC = ({ className = '', children, ...props }) => { + return ( +
+ {children} +
+ ); +}; + +export default Card; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..5e66660 --- /dev/null +++ b/src/index.css @@ -0,0 +1,80 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 10 10 15; + --foreground: 250 250 255; + + --card: 15 15 25; + --card-foreground: 250 250 255; + + --popover: 15 15 25; + --popover-foreground: 250 250 255; + + --primary: 139 92 246; + --primary-foreground: 255 255 255; + + --secondary: 30 30 45; + --secondary-foreground: 200 200 220; + + --muted: 25 25 35; + --muted-foreground: 150 150 170; + + --accent: 168 85 247; + --accent-foreground: 255 255 255; + + --destructive: 239 68 68; + --destructive-foreground: 255 255 255; + + --border: 45 45 65; + --input: 30 30 45; + --ring: 139 92 246; + + --radius: 0.5rem; + + --sidebar-background: 10 10 15; + --sidebar-foreground: 250 250 255; + --sidebar-primary: 139 92 246; + --sidebar-primary-foreground: 255 255 255; + --sidebar-accent: 25 25 35; + --sidebar-accent-foreground: 200 200 220; + --sidebar-border: 45 45 65; + --sidebar-ring: 139 92 246; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-family: 'Inter', system-ui, sans-serif; + } + + html { + scroll-behavior: smooth; + } +} + +@layer components { + .neon-border { + border: 1px solid transparent; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1)); + border-image: linear-gradient(135deg, #8b5cf6, #a855f7) 1; + } + + .neon-glow { + box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); + } + + .gradient-text { + background: linear-gradient(135deg, #8b5cf6, #a855f7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } +} diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..606c020 --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import HeroSection from '../components/HeroSection'; +import BenefitsSection from '../components/BenefitsSection'; +import AutomationFlow from '../components/AutomationFlow'; +import TestimonialsSection from '../components/TestimonialsSection'; +import CTASection from '../components/CTASection'; + +const Index = () => { + return ( +
+ + + + + +
+ ); +}; + +export default Index; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..2a15bcc --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,126 @@ +import type { Config } from "tailwindcss"; + +export default { +darkMode: ["class"], +content: [ +"./pages/**/*.{ts,tsx}", +"./components/**/*.{ts,tsx}", +"./app/**/*.{ts,tsx}", +"./src/**/*.{ts,tsx}", +], +prefix: "", +theme: { +container: { +center: true, +padding: '2rem', +screens: { +'2xl': '1400px' +} +}, +extend: { +colors: { +border: 'hsl(var(--border))', +input: 'hsl(var(--input))', +ring: 'hsl(var(--ring))', +background: 'hsl(var(--background))', +foreground: 'hsl(var(--foreground))', +primary: { +DEFAULT: 'hsl(var(--primary))', +foreground: 'hsl(var(--primary-foreground))' +}, +secondary: { +DEFAULT: 'hsl(var(--secondary))', +foreground: 'hsl(var(--secondary-foreground))' +}, +destructive: { +DEFAULT: 'hsl(var(--destructive))', +foreground: 'hsl(var(--destructive-foreground))' +}, +muted: { +DEFAULT: 'hsl(var(--muted))', +foreground: 'hsl(var(--muted-foreground))' +}, +accent: { +DEFAULT: 'hsl(var(--accent))', +foreground: 'hsl(var(--accent-foreground))' +}, +popover: { +DEFAULT: 'hsl(var(--popover))', +foreground: 'hsl(var(--popover-foreground))' +}, +card: { +DEFAULT: 'hsl(var(--card))', +foreground: 'hsl(var(--card-foreground))' +}, +sidebar: { +DEFAULT: 'hsl(var(--sidebar-background))', +foreground: 'hsl(var(--sidebar-foreground))', +primary: 'hsl(var(--sidebar-primary))', +'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', +accent: 'hsl(var(--sidebar-accent))', +'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', +border: 'hsl(var(--sidebar-border))', +ring: 'hsl(var(--sidebar-ring))' +}, +neon: { +purple: '#8b5cf6', +pink: '#a855f7', +blue: '#3b82f6' +} +}, +borderRadius: { +lg: 'var(--radius)', +md: 'calc(var(--radius) - 2px)', +sm: 'calc(var(--radius) - 4px)' +}, +keyframes: { +'accordion-down': { +from: { +height: '0' +}, +to: { +height: 'var(--radix-accordion-content-height)' +} +}, +'accordion-up': { +from: { +height: 'var(--radix-accordion-content-height)' +}, +to: { +height: '0' +} +}, +'glow': { +'0%, 100%': { +textShadow: '0 0 5px #8b5cf6, 0 0 10px #8b5cf6, 0 0 15px #8b5cf6', +}, +'50%': { +textShadow: '0 0 10px #8b5cf6, 0 0 20px #8b5cf6, 0 0 30px #8b5cf6', +} +}, +'breathe': { +'0%, 100%': { +transform: 'scale(1)', +filter: 'drop-shadow(0 0 10px #8b5cf6)', +}, +'50%': { +transform: 'scale(1.05)', +filter: 'drop-shadow(0 0 20px #8b5cf6)', +} +}, +'float': { +'0%, 100%': { transform: 'translateY(0px)' }, +'50%': { transform: 'translateY(-10px)' } +} +}, +animation: { +'accordion-down': 'accordion-down 0.2s ease-out', +'accordion-up': 'accordion-up 0.2s ease-out', +'glow': 'glow 2s ease-in-out infinite', +'breathe': 'breathe 3s ease-in-out infinite', +'float': 'float 3s ease-in-out infinite' +} +} +}, +plugins: [require("tailwindcss-animate")], +} satisfies Config; diff --git a/tsconfig.json b/tsconfig.json index 8350f34..82bebce 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "strict": true, // Enable all strict type-checking options "skipLibCheck": true, // Skip type checking of declaration files "resolveJsonModule": true, // Allow importing JSON files + "jsx": "react-jsx", "baseUrl": ".", "paths": { "#controllers/*": [ @@ -20,6 +21,6 @@ ], } }, - "include": ["*.ts", "controllers/*.ts", "tools/*.ts"], // Compile all TypeScript files + "include": ["*.ts", "controllers/*.ts", "tools/*.ts", "src/**/*"], // Compile all TypeScript and React files "exclude": ["node_modules", "dist"] // Specify directories to exclude }