Initial commit
This commit is contained in:
@@ -0,0 +1,381 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Code2,
|
||||
Server,
|
||||
Smartphone,
|
||||
Wrench,
|
||||
MessageSquare,
|
||||
FileSearch,
|
||||
Rocket,
|
||||
HeartHandshake,
|
||||
ArrowRight,
|
||||
Check,
|
||||
Clock,
|
||||
Users,
|
||||
Target,
|
||||
} from "lucide-react";
|
||||
import GlassCard from "@/components/ui/GlassCard";
|
||||
import GlowButton from "@/components/ui/GlowButton";
|
||||
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
|
||||
import type { Dictionary, Locale } from "@/lib/dictionaries";
|
||||
|
||||
interface ServicesContentProps {
|
||||
locale: Locale;
|
||||
dict: Dictionary;
|
||||
}
|
||||
|
||||
export default function ServicesContent({
|
||||
locale,
|
||||
dict,
|
||||
}: ServicesContentProps) {
|
||||
const t = dict.servicesPage;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ──── HERO ──── */}
|
||||
<section className="relative isolate flex min-h-[75svh] items-center overflow-hidden pt-32">
|
||||
<div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />
|
||||
|
||||
{/* Floating orbs */}
|
||||
<motion.div
|
||||
className="pointer-events-none absolute left-[15%] top-[20%] h-[500px] w-[500px] rounded-full"
|
||||
style={{
|
||||
background: "radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%)",
|
||||
filter: "blur(60px)",
|
||||
}}
|
||||
animate={{ x: [0, 30, -20, 0], y: [0, -25, 15, 0] }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute right-[10%] top-[40%] h-[400px] w-[400px] rounded-full"
|
||||
style={{
|
||||
background: "radial-gradient(circle, rgba(167,139,250,0.25) 0%, transparent 70%)",
|
||||
filter: "blur(70px)",
|
||||
}}
|
||||
animate={{ x: [0, -40, 25, 0], y: [0, 30, -20, 0] }}
|
||||
transition={{ duration: 24, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={stagger(0.1)}
|
||||
className="mx-auto max-w-3xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeUp}
|
||||
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
||||
>
|
||||
{t.badge}
|
||||
</motion.span>
|
||||
|
||||
<motion.h1
|
||||
variants={fadeUp}
|
||||
className="font-display text-display-xl font-medium tracking-tight"
|
||||
>
|
||||
<span className="text-gradient-fade">{t.heroTitle}</span>
|
||||
<br />
|
||||
<span className="text-gradient-purple">{t.heroTitleAccent}</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={fadeUp}
|
||||
className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
|
||||
>
|
||||
{t.heroSubtitle}
|
||||
</motion.p>
|
||||
|
||||
<motion.div variants={fadeUp} className="mt-10 flex flex-wrap items-center justify-center gap-4">
|
||||
<GlowButton
|
||||
href={`/${locale}/contact`}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
icon={<ArrowRight className="h-4 w-4" />}
|
||||
>
|
||||
{t.heroCta}
|
||||
</GlowButton>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ──── SERVICE OFFERINGS ──── */}
|
||||
<section className="relative w-full py-24 sm:py-32">
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.06)}
|
||||
className="mx-auto mb-16 max-w-3xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeUp}
|
||||
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
||||
>
|
||||
{t.offeringsLabel}
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
variants={fadeUp}
|
||||
className="font-display text-display-lg font-medium tracking-tight"
|
||||
>
|
||||
<span className="text-gradient-fade">{t.offeringsTitle}</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
variants={fadeUp}
|
||||
className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary"
|
||||
>
|
||||
{t.offeringsSubtitle}
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.1)}
|
||||
className="grid grid-cols-1 gap-5 md:grid-cols-2"
|
||||
>
|
||||
{t.offerings.map((offering, i) => {
|
||||
const icons = [Code2, Server, Smartphone, Wrench];
|
||||
const Icon = icons[i] || Code2;
|
||||
|
||||
return (
|
||||
<motion.div key={i} variants={fadeUp} className="group">
|
||||
<GlassCard className="h-full">
|
||||
<div className="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-purple-500/0 blur-3xl transition-all duration-700 group-hover:bg-purple-500/20" />
|
||||
|
||||
<div className="relative">
|
||||
<div className="mb-5 flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:shadow-glow-sm">
|
||||
<Icon className="h-5 w-5" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-text-primary">
|
||||
{offering.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="mb-6 text-sm leading-relaxed text-text-secondary">
|
||||
{offering.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2.5">
|
||||
{offering.includes.map((item, j) => (
|
||||
<div
|
||||
key={j}
|
||||
className="flex items-start gap-2.5 text-sm"
|
||||
>
|
||||
<span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-purple-500/15 text-purple-300">
|
||||
<Check className="h-3 w-3" strokeWidth={2.5} />
|
||||
</span>
|
||||
<span className="text-text-secondary">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/*
|
||||
<section className="relative w-full py-24 sm:py-32">
|
||||
<div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_65%)] opacity-20" />
|
||||
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.1)}
|
||||
className="grid grid-cols-1 gap-8 lg:grid-cols-5"
|
||||
>
|
||||
<motion.div variants={fadeUp} className="lg:col-span-3">
|
||||
<span className="mb-4 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-emerald-300 backdrop-blur-md">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="absolute inset-0 animate-ping rounded-full bg-emerald-400 opacity-75" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]" />
|
||||
</span>
|
||||
{t.infraBadge}
|
||||
</span>
|
||||
|
||||
<h2 className="mt-4 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
|
||||
{t.infraTitle}
|
||||
</h2>
|
||||
|
||||
<div className="mt-6 space-y-4 text-base leading-relaxed text-text-secondary">
|
||||
{t.infraParagraphs.map((p, i) => (
|
||||
<p key={i}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={fadeUp} className="space-y-3 lg:col-span-2">
|
||||
{t.infraPoints.map((point, i) => {
|
||||
const pointIcons = [Shield, Truck, Clock];
|
||||
const PIcon = pointIcons[i] || Shield;
|
||||
return (
|
||||
<GlassCard key={i} className="flex items-start gap-4 py-5">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-emerald-400/20 bg-emerald-500/10 text-emerald-300">
|
||||
<PIcon className="h-4 w-4" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-text-primary">
|
||||
{point.title}
|
||||
</div>
|
||||
<div className="mt-1 text-xs leading-relaxed text-text-secondary">
|
||||
{point.description}
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
*/}
|
||||
|
||||
<section className="relative w-full py-24 sm:py-32">
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.06)}
|
||||
className="mx-auto mb-16 max-w-3xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeUp}
|
||||
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
||||
>
|
||||
{t.processLabel}
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
variants={fadeUp}
|
||||
className="font-display text-display-lg font-medium tracking-tight"
|
||||
>
|
||||
<span className="text-gradient-fade">{t.processTitle}</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
variants={fadeUp}
|
||||
className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-text-secondary"
|
||||
>
|
||||
{t.processSubtitle}
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.12)}
|
||||
className="relative grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5"
|
||||
>
|
||||
{/* Connecting line — desktop only */}
|
||||
<div className="pointer-events-none absolute top-12 hidden h-px bg-gradient-to-r from-transparent via-purple-400/30 to-transparent lg:inset-x-16 lg:block" />
|
||||
|
||||
{t.processSteps.map((step, i) => {
|
||||
const stepIcons = [MessageSquare, FileSearch, Code2, Rocket, HeartHandshake];
|
||||
const SIcon = stepIcons[i] || Code2;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeUp}
|
||||
className="group relative text-center"
|
||||
>
|
||||
{/* Step number */}
|
||||
<div className="relative mx-auto mb-4 flex h-12 w-12 items-center justify-center">
|
||||
<div className="absolute inset-0 rounded-full border border-purple-400/30 bg-purple-500/10 transition-all duration-500 group-hover:border-purple-400/60 group-hover:bg-purple-500/20 group-hover:shadow-glow-sm" />
|
||||
<SIcon className="relative h-5 w-5 text-purple-300" strokeWidth={1.5} />
|
||||
</div>
|
||||
|
||||
<div className="mb-1 font-mono text-[10px] uppercase tracking-widest text-purple-400/60">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</div>
|
||||
<h3 className="mb-2 text-base font-medium text-text-primary">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-xs leading-relaxed text-text-secondary">
|
||||
{step.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative w-full py-24 sm:py-32">
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.08)}
|
||||
className="relative overflow-hidden rounded-3xl border border-border/60 bg-surface/40 backdrop-blur-md"
|
||||
>
|
||||
<div className="absolute inset-0 grid-bg opacity-20 [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_70%)]" />
|
||||
<div className="absolute -left-32 top-1/2 h-64 w-64 -translate-y-1/2 rounded-full bg-purple-500/10 blur-3xl" />
|
||||
|
||||
<div className="relative grid grid-cols-1 gap-8 px-8 py-12 sm:px-16 sm:py-16 lg:grid-cols-2 lg:gap-16">
|
||||
<motion.div variants={fadeUp}>
|
||||
<span className="mb-4 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300">
|
||||
{t.pricingLabel}
|
||||
</span>
|
||||
<h2 className="mt-4 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
|
||||
{t.pricingTitle}
|
||||
</h2>
|
||||
<p className="mt-6 text-base leading-relaxed text-text-secondary">
|
||||
{t.pricingDescription}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={fadeUp} className="space-y-4">
|
||||
{t.pricingPoints.map((point, i) => {
|
||||
const pIcons = [Target, Users, Clock];
|
||||
const PIcon = pIcons[i] || Target;
|
||||
return (
|
||||
<div key={i} className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-purple-400/20 bg-purple-500/10 text-purple-300">
|
||||
<PIcon className="h-4 w-4" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-text-primary">
|
||||
{point.title}
|
||||
</div>
|
||||
<div className="mt-1 text-xs leading-relaxed text-text-secondary">
|
||||
{point.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="pt-4">
|
||||
<GlowButton
|
||||
href={`/${locale}/contact`}
|
||||
variant="primary"
|
||||
size="md"
|
||||
icon={<ArrowRight className="h-4 w-4" />}
|
||||
>
|
||||
{t.pricingCta}
|
||||
</GlowButton>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { getDictionary, type Locale } from "@/lib/dictionaries";
|
||||
import ServicesContent from "./ServicesContent";
|
||||
import CTA from "@/components/sections/CTA";
|
||||
import { localeAlternates } from "@/lib/seo";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const isSR = locale === "sr";
|
||||
return {
|
||||
title: isSR ? "Usluge" : "Services",
|
||||
description: isSR
|
||||
? "Full-stack web razvoj, self-hosted infrastruktura i deployment iz jednih ruku."
|
||||
: "Full-stack web development, self-hosted infrastructure, and deployment under one roof.",
|
||||
alternates: localeAlternates(locale, "/services"),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ServicesPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
const dict = getDictionary(locale);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ServicesContent locale={locale as Locale} dict={dict} />
|
||||
<CTA locale={locale as Locale} dict={dict} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user