Skip to content

Commit 28f76d4

Browse files
codewizdavemartyy-code
codewizdave
and
martyy-code
committed
feat: add framer-motion animations to all pages
- Hero with stagger animations - Value propositions with scroll-triggered animations - Projects list with staggered entrance - Project details with terminal animation sequence Co-Authored-By: martyy-code <nesalia.inc@gmail.com>
1 parent f8f2751 commit 28f76d4

5 files changed

Lines changed: 233 additions & 106 deletions

File tree

‎package-lock.json‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"cmdk": "^1.1.1",
1616
"date-fns": "^4.1.0",
1717
"embla-carousel-react": "^8.6.0",
18+
"framer-motion": "^12.38.0",
1819
"geist": "^1.7.0",
1920
"input-otp": "^1.4.2",
2021
"lucide-react": "^0.577.0",

‎src/app/page.tsx‎

Lines changed: 64 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,87 @@
1+
"use client";
2+
13
import { ArrowRight, Layers, Zap, Terminal, Box } from 'lucide-react';
24
import Link from 'next/link';
35
import { Button } from '@/components/ui/button';
6+
import { motion } from 'framer-motion';
7+
8+
const transition = { duration: 0.6, ease: [0.16, 1, 0.3, 1] };
9+
const containerVariants = {
10+
hidden: { opacity: 0 },
11+
show: {
12+
opacity: 1,
13+
transition: { staggerChildren: 0.15 },
14+
},
15+
};
16+
const itemVariants = {
17+
hidden: { opacity: 0, y: 20 },
18+
show: { opacity: 1, y: 0, transition },
19+
};
420

521
export default function HomeLandingPage() {
622
return (
7-
<div className="flex flex-col w-full">
23+
<div className="flex flex-col w-full overflow-hidden">
824
{/* Hero Section */}
925
<section className="px-6 py-24 md:py-32 border-b border-border bg-gradient-to-b from-secondary/20 to-transparent">
10-
<div className="max-w-3xl">
11-
<div className="inline-flex items-center border border-border bg-background px-3 py-1 mb-8">
12-
<span className="flex h-2 w-2 bg-primary mr-2"></span>
26+
<motion.div
27+
className="max-w-3xl"
28+
initial="hidden"
29+
animate="show"
30+
variants={containerVariants}
31+
>
32+
<motion.div variants={itemVariants} className="inline-flex items-center border border-border bg-background px-3 py-1 mb-8">
33+
<span className="flex h-2 w-2 bg-primary mr-2 animate-pulse"></span>
1334
<span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">Wareflow OS v1.0</span>
14-
</div>
15-
<h1 className="text-5xl md:text-7xl font-bold tracking-tighter mb-6 leading-tight">
35+
</motion.div>
36+
37+
<motion.h1 variants={itemVariants} className="text-5xl md:text-7xl font-bold tracking-tighter mb-6 leading-tight">
1638
The unified hub for modern logistics.
17-
</h1>
18-
<p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl leading-relaxed">
39+
</motion.h1>
40+
41+
<motion.p variants={itemVariants} className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl leading-relaxed">
1942
A comprehensive, modular logistics management solution. We combine the power of a lightweight ERP with the developer-first aesthetic of modern deployment platforms.
20-
</p>
21-
<div className="flex flex-col sm:flex-row gap-4">
43+
</motion.p>
44+
45+
<motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4">
2246
<Button size="lg" className="rounded-none text-base px-8 h-14 group">
2347
Explore the Ecosystem <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
2448
</Button>
2549
<Button size="lg" variant="outline" className="rounded-none text-base px-8 h-14 border-border">
2650
Read the Manifesto
2751
</Button>
28-
</div>
29-
</div>
52+
</motion.div>
53+
</motion.div>
3054
</section>
3155

32-
{/* Value Proposition (Glued Grid) */}
33-
<section className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border">
34-
<div className="p-10 hover:bg-secondary/10 transition-colors">
35-
<Layers className="w-8 h-8 mb-6 text-muted-foreground" />
36-
<h3 className="text-xl font-semibold mb-3">Modular by Design</h3>
37-
<p className="text-muted-foreground text-sm leading-relaxed">
38-
Inspired by Odoo. Only install the applications you need. Your warehouse operations, supply chain, and delivery workflows remain independent but perfectly integrated.
39-
</p>
40-
</div>
41-
<div className="p-10 hover:bg-secondary/10 transition-colors">
42-
<Terminal className="w-8 h-8 mb-6 text-muted-foreground" />
43-
<h3 className="text-xl font-semibold mb-3">Single Entry Point</h3>
44-
<p className="text-muted-foreground text-sm leading-relaxed">
45-
One login for all your logistics apps. Command your entire operation from a centralized dashboard with a universal command palette.
46-
</p>
47-
</div>
48-
<div className="p-10 hover:bg-secondary/10 transition-colors">
49-
<Zap className="w-8 h-8 mb-6 text-muted-foreground" />
50-
<h3 className="text-xl font-semibold mb-3">Professional Grade</h3>
51-
<p className="text-muted-foreground text-sm leading-relaxed">
52-
Dark-first, high contrast, zero distractions. Built for operators who need clear information hierarchy and blazing-fast interactions.
53-
</p>
54-
</div>
55-
</section>
56+
{/* Value Proposition */}
57+
<motion.section
58+
className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border"
59+
initial="hidden"
60+
whileInView="show"
61+
viewport={{ once: true, margin: "-100px" }}
62+
variants={containerVariants}
63+
>
64+
{[
65+
{ icon: Layers, title: "Modular by Design", desc: "Inspired by Odoo. Only install the applications you need. Your warehouse operations, supply chain, and delivery workflows remain independent but perfectly integrated." },
66+
{ icon: Terminal, title: "Single Entry Point", desc: "One login for all your logistics apps. Command your entire operation from a centralized dashboard with a universal command palette." },
67+
{ icon: Zap, title: "Professional Grade", desc: "Dark-first, high contrast, zero distractions. Built for operators who need clear information hierarchy and blazing-fast interactions." }
68+
].map((feature, idx) => (
69+
<motion.div key={idx} variants={itemVariants} className="p-10 hover:bg-secondary/10 transition-colors">
70+
<feature.icon className="w-8 h-8 mb-6 text-muted-foreground" />
71+
<h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
72+
<p className="text-muted-foreground text-sm leading-relaxed">{feature.desc}</p>
73+
</motion.div>
74+
))}
75+
</motion.section>
5676

5777
{/* CTA Section */}
58-
<section className="p-12 md:p-24 flex flex-col items-center text-center bg-gradient-to-b from-secondary/10 to-transparent">
78+
<motion.section
79+
className="p-12 md:p-24 flex flex-col items-center text-center bg-gradient-to-b from-secondary/10 to-transparent"
80+
initial={{ opacity: 0, scale: 0.95 }}
81+
whileInView={{ opacity: 1, scale: 1 }}
82+
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
83+
viewport={{ once: true }}
84+
>
5985
<Box className="w-12 h-12 mb-6 text-primary" />
6086
<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">Ready to upgrade your infrastructure?</h2>
6187
<p className="text-muted-foreground max-w-xl mb-8">
@@ -66,7 +92,7 @@ export default function HomeLandingPage() {
6692
View available modules
6793
</Button>
6894
</Link>
69-
</section>
95+
</motion.section>
7096
</div>
7197
);
7298
}

‎src/app/projects/[slug]/page.tsx‎

Lines changed: 66 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
"use client";
2+
13
import { ChevronRight, Check, Terminal, Shield, Workflow } from 'lucide-react';
24
import Link from 'next/link';
35
import { Button } from '@/components/ui/button';
6+
import { motion } from 'framer-motion';
47

58
const getModuleDetails = (slug: string) => ({
69
name: `Wareflow ${slug.charAt(0).toUpperCase() + slug.slice(1)}`,
@@ -25,7 +28,12 @@ export default async function ProjectLandingPage({ params }: { params: Promise<{
2528

2629
{/* Module Hero */}
2730
<div className="p-8 md:p-16 border-b border-border flex flex-col md:flex-row gap-12 items-start justify-between bg-gradient-to-b from-secondary/10 to-transparent">
28-
<div className="max-w-2xl">
31+
<motion.div
32+
className="max-w-2xl"
33+
initial={{ opacity: 0, y: 20 }}
34+
animate={{ opacity: 1, y: 0 }}
35+
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
36+
>
2937
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter mb-6">{module.name}</h1>
3038
<p className="text-xl md:text-2xl text-foreground font-medium mb-4">{module.tagline}</p>
3139
<p className="text-base text-muted-foreground mb-10 leading-relaxed">
@@ -35,73 +43,90 @@ export default async function ProjectLandingPage({ params }: { params: Promise<{
3543
<Button size="lg" className="rounded-none px-8">Add to your Hub</Button>
3644
<Button size="lg" variant="outline" className="rounded-none border-border bg-background">View Documentation</Button>
3745
</div>
38-
</div>
46+
</motion.div>
3947

40-
{/* Terminal Teaser */}
41-
<div className="w-full md:w-80 border border-border bg-black p-4 text-sm font-mono text-muted-foreground">
48+
{/* Animated Terminal */}
49+
<motion.div
50+
className="w-full md:w-80 border border-border bg-black p-4 text-sm font-mono text-muted-foreground"
51+
initial={{ opacity: 0, scale: 0.95 }}
52+
animate={{ opacity: 1, scale: 1 }}
53+
transition={{ delay: 0.2, duration: 0.5 }}
54+
>
4255
<div className="flex space-x-2 mb-4 border-b border-border pb-4">
4356
<div className="w-2 h-2 bg-border"></div>
4457
<div className="w-2 h-2 bg-border"></div>
4558
</div>
46-
<p className="text-emerald-500 mb-2">$ wareflow init {slug}</p>
47-
<p>▸ Fetching dependencies...</p>
48-
<p>▸ Configuring database schema...</p>
49-
<p className="text-foreground mt-2">✓ Module {slug} activated.</p>
50-
</div>
59+
60+
<div className="space-y-1">
61+
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className="text-emerald-500">
62+
$ wareflow init {slug}
63+
</motion.p>
64+
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.2 }}>
65+
▸ Fetching dependencies...
66+
</motion.p>
67+
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.8 }}>
68+
▸ Configuring database schema...
69+
</motion.p>
70+
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 2.5 }} className="text-foreground mt-2">
71+
✓ Module {slug} activated.
72+
</motion.p>
73+
</div>
74+
</motion.div>
5175
</div>
5276

53-
{/* Key Features (Glued together) */}
54-
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border">
55-
<div className="p-10 md:p-16">
77+
{/* Key Features */}
78+
<motion.div
79+
className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border"
80+
initial="hidden"
81+
whileInView="show"
82+
viewport={{ once: true, margin: "-100px" }}
83+
variants={{
84+
hidden: { opacity: 0 },
85+
show: { opacity: 1, transition: { staggerChildren: 0.2 } }
86+
}}
87+
>
88+
<motion.div variants={{ hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } }} className="p-10 md:p-16">
5689
<h3 className="text-2xl font-semibold mb-8">Why choose this module?</h3>
5790
<ul className="space-y-6">
5891
{[
59-
'Sub-second search indexing across all facilities',
60-
'Native barcode generation and scanner support',
61-
'Automated low-stock alerts and PO generation',
62-
'Full audit logs for compliance (SOC2)'
92+
"Sub-second search indexing across all facilities",
93+
"Native barcode generation and scanner support",
94+
"Automated low-stock alerts and PO generation",
95+
"Full audit logs for compliance (SOC2)"
6396
].map((benefit, i) => (
6497
<li key={i} className="flex items-start">
6598
<Check className="w-5 h-5 mr-3 text-primary shrink-0 mt-0.5" />
6699
<span className="text-muted-foreground leading-snug">{benefit}</span>
67100
</li>
68101
))}
69102
</ul>
70-
</div>
103+
</motion.div>
71104

72105
{/* Technical Specs */}
73-
<div className="p-10 md:p-16 bg-secondary/5">
106+
<motion.div variants={{ hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } }} className="p-10 md:p-16 bg-secondary/5">
74107
<h3 className="text-2xl font-semibold mb-8">Technical Foundation</h3>
75108
<div className="space-y-8">
76-
<div className="flex gap-4">
77-
<Terminal className="w-6 h-6 text-muted-foreground shrink-0" />
78-
<div>
79-
<h4 className="font-medium text-foreground mb-1">API-First Architecture</h4>
80-
<p className="text-sm text-muted-foreground">Every action in the UI is available via REST & GraphQL APIs. Integrate with your legacy systems seamlessly.</p>
81-
</div>
82-
</div>
83-
<div className="flex gap-4">
84-
<Shield className="w-6 h-6 text-muted-foreground shrink-0" />
85-
<div>
86-
<h4 className="font-medium text-foreground mb-1">Enterprise Grade Security</h4>
87-
<p className="text-sm text-muted-foreground">Role-based access control (RBAC) down to the specific aisle or warehouse zone.</p>
88-
</div>
89-
</div>
90-
<div className="flex gap-4">
91-
<Workflow className="w-6 h-6 text-muted-foreground shrink-0" />
92-
<div>
93-
<h4 className="font-medium text-foreground mb-1">Webhooks & Automations</h4>
94-
<p className="text-sm text-muted-foreground">Trigger external events instantly when stock levels change or shipments arrive.</p>
109+
{[
110+
{ icon: Terminal, title: "API-First Architecture", desc: "Every action in the UI is available via REST & GraphQL APIs. Integrate seamlessly." },
111+
{ icon: Shield, title: "Enterprise Grade Security", desc: "Role-based access control (RBAC) down to the specific aisle or warehouse zone." },
112+
{ icon: Workflow, title: "Webhooks & Automations", desc: "Trigger external events instantly when stock levels change or shipments arrive." }
113+
].map((spec, i) => (
114+
<div key={i} className="flex gap-4">
115+
<spec.icon className="w-6 h-6 text-muted-foreground shrink-0" />
116+
<div>
117+
<h4 className="font-medium text-foreground mb-1">{spec.title}</h4>
118+
<p className="text-sm text-muted-foreground">{spec.desc}</p>
119+
</div>
95120
</div>
96-
</div>
121+
))}
97122
</div>
98-
</div>
99-
</div>
123+
</motion.div>
124+
</motion.div>
100125

101126
{/* Bottom CTA */}
102127
<div className="p-16 text-center">
103128
<h2 className="text-2xl font-medium mb-6">Ready to deploy {module.name}?</h2>
104-
<Button className="rounded-none px-8" size="lg">Contact Sales</Button>
129+
<Button className="rounded-none px-8 hover:scale-105 transition-transform" size="lg">Contact Sales</Button>
105130
</div>
106131
</div>
107132
);

0 commit comments

Comments
 (0)