Skip to content

Commit 5c059c4

Browse files
base44-builder[bot]base44-builder[bot]
committed
File changes
1 parent f78d1fe commit 5c059c4

File tree

3 files changed

+392
-0
lines changed

3 files changed

+392
-0
lines changed

‎src/pages.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ import UserRoleAssignment from './pages/UserRoleAssignment';
103103
import UserSegmentation from './pages/UserSegmentation';
104104
import Whitepapers from './pages/Whitepapers';
105105
import AnalyticsDashboard from './pages/AnalyticsDashboard';
106+
import MarketingLanding from './pages/MarketingLanding';
107+
import ProductShowcase from './pages/ProductShowcase';
106108
import __Layout from './Layout.jsx';
107109

108110

@@ -212,6 +214,8 @@ export const PAGES = {
212214
"UserSegmentation": UserSegmentation,
213215
"Whitepapers": Whitepapers,
214216
"AnalyticsDashboard": AnalyticsDashboard,
217+
"MarketingLanding": MarketingLanding,
218+
"ProductShowcase": ProductShowcase,
215219
}
216220

217221
export const pagesConfig = {

‎src/pages/MarketingLanding.jsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import { Card } from '@/components/ui/card';
2+
import { Button } from '@/components/ui/button';
3+
import { Link } from 'react-router-dom';
4+
import { createPageUrl } from '@/utils';
5+
import {
6+
Mountain, BarChart3, Users, Award, Sparkles,
7+
TrendingUp, Calendar, Heart, Menu
8+
} from 'lucide-react';
9+
10+
const HERO_IMAGE = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200';
11+
12+
export default function MarketingLanding() {
13+
return (
14+
<div className="min-h-screen bg-white dark:bg-[#221a10] text-slate-900 dark:text-white font-['Newsreader']">
15+
{/* Header */}
16+
<header className="sticky top-0 z-50 w-full bg-white/80 dark:bg-[#221a10]/80 backdrop-blur-md border-b border-slate-200 dark:border-white/10">
17+
<div className="flex items-center p-4 justify-between max-w-7xl mx-auto">
18+
<div className="flex items-center gap-2">
19+
<Mountain className="h-6 w-6 text-[#f49d25]" />
20+
<h2 className="text-lg font-bold">INTeract</h2>
21+
</div>
22+
<div className="flex items-center gap-4">
23+
<p className="text-[#9c7a49] text-sm font-bold cursor-pointer hidden md:block">Log In</p>
24+
<Menu className="h-6 w-6 md:hidden" />
25+
</div>
26+
</div>
27+
</header>
28+
29+
<main>
30+
{/* Hero Section */}
31+
<section className="relative w-full">
32+
<div
33+
className="relative min-h-[90vh] flex flex-col items-center justify-center p-6 bg-cover bg-center"
34+
style={{
35+
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url(${HERO_IMAGE})`
36+
}}
37+
>
38+
<div className="bg-white/10 backdrop-blur-md border border-white/20 p-8 rounded-xl max-w-lg w-full text-center space-y-6 shadow-2xl">
39+
<div className="space-y-3">
40+
<h1 className="text-white text-4xl md:text-5xl font-bold leading-tight">
41+
Elevate Your Workplace.
42+
</h1>
43+
<p className="text-white/90 text-base italic">
44+
Gamified engagement built on the robust Base44 backend.
45+
</p>
46+
</div>
47+
<Link to={createPageUrl('Dashboard')}>
48+
<Button className="bg-[#f49d25] hover:bg-[#e08d15] text-white font-bold py-4 px-8 text-lg w-full">
49+
Get Started
50+
</Button>
51+
</Link>
52+
</div>
53+
<div className="absolute bottom-8 animate-bounce text-white/60">
54+
<TrendingUp className="h-8 w-8" />
55+
</div>
56+
</div>
57+
</section>
58+
59+
{/* Trust Section */}
60+
<section className="py-6 bg-white dark:bg-zinc-950/20 border-y border-slate-200 dark:border-white/5">
61+
<p className="text-center text-[#9c7a49] text-xs font-bold uppercase tracking-widest mb-8">
62+
Trusted by Industry Leaders
63+
</p>
64+
<div className="flex overflow-x-hidden">
65+
<div className="flex items-center gap-12 animate-scroll">
66+
{['Base44', 'Stitch', 'Vertex', 'Lumina Energy', 'Core Systems', 'Base44', 'Stitch'].map((company, i) => (
67+
<span key={i} className="text-2xl font-semibold text-[#9c7a49]/40 whitespace-nowrap">
68+
{company}
69+
</span>
70+
))}
71+
</div>
72+
</div>
73+
</section>
74+
75+
{/* Section Header */}
76+
<div className="pt-20 pb-10 flex flex-col items-center px-6">
77+
<h4 className="text-[#f49d25] text-sm font-bold uppercase tracking-widest mb-2">The Ascent</h4>
78+
<h2 className="text-3xl md:text-4xl font-bold text-center max-w-xl">
79+
Studio-grade tools for modern culture.
80+
</h2>
81+
</div>
82+
83+
{/* Features Bento Grid */}
84+
<section className="px-6 pb-32 max-w-7xl mx-auto">
85+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
86+
{/* Real-time Analytics */}
87+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all">
88+
<div className="w-full h-48 bg-gradient-to-br from-slate-100 to-[#e2d1c3] rounded-lg mb-6 flex items-center justify-center relative overflow-hidden">
89+
<BarChart3 className="h-16 w-16 text-[#f49d25]/40" />
90+
<div className="absolute bottom-4 left-4 right-4 h-1 bg-[#f49d25]/20 rounded-full overflow-hidden">
91+
<div className="h-full bg-[#f49d25] w-2/3 rounded-full" />
92+
</div>
93+
</div>
94+
<h3 className="text-xl font-bold mb-2">Real-time Analytics</h3>
95+
<p className="text-[#9c7a49]">Monitor engagement as it happens with studio-grade data visualization and predictive trends.</p>
96+
</Card>
97+
98+
{/* Avatar Upgrades */}
99+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all lg:row-span-2">
100+
<div className="w-full min-h-[300px] lg:min-h-full bg-gradient-to-t from-[#fff1eb] to-[#ace0f9] rounded-lg flex flex-col items-center justify-center p-8 text-center relative overflow-hidden">
101+
<Sparkles className="h-20 w-20 text-[#f49d25] mb-6 drop-shadow-lg" />
102+
<h3 className="text-xl font-bold mb-2 text-slate-800">Avatar Upgrades</h3>
103+
<p className="text-slate-600 text-sm italic">Unlock premium aesthetic gear as your professional impact grows across the platform.</p>
104+
<Award className="absolute top-10 right-10 h-10 w-10 text-[#f49d25]/30 rotate-12" />
105+
<Heart className="absolute bottom-20 left-10 h-10 w-10 text-[#f49d25]/30 -rotate-12" />
106+
</div>
107+
</Card>
108+
109+
{/* Peer Recognition */}
110+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all">
111+
<div className="w-full h-48 bg-gradient-to-br from-orange-100 to-pink-100 rounded-lg mb-6 flex items-center justify-center">
112+
<Heart className="h-16 w-16 text-[#f49d25]" />
113+
</div>
114+
<h3 className="text-xl font-bold mb-2">Peer Recognition</h3>
115+
<p className="text-[#9c7a49]">Social capital powered by genuine appreciation. Make every shoutout count.</p>
116+
</Card>
117+
118+
{/* Pulse Surveys */}
119+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all">
120+
<div className="w-full h-48 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-lg mb-6 flex items-center justify-center">
121+
<BarChart3 className="h-16 w-16 text-blue-500" />
122+
</div>
123+
<h3 className="text-xl font-bold mb-2">Pulse Surveys</h3>
124+
<p className="text-[#9c7a49]">Anonymous weekly check-ins that give you the sentiment pulse of your entire org.</p>
125+
</Card>
126+
127+
{/* Team Challenges */}
128+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all">
129+
<div className="w-full h-48 bg-gradient-to-br from-green-100 to-teal-100 rounded-lg mb-6 flex items-center justify-center">
130+
<Users className="h-16 w-16 text-green-500" />
131+
</div>
132+
<h3 className="text-xl font-bold mb-2">Team Challenges</h3>
133+
<p className="text-[#9c7a49]">Cross-departmental wellness initiatives that build camaraderie at scale.</p>
134+
</Card>
135+
136+
{/* Milestone Celebrations */}
137+
<Card className="p-6 border-[#9c7a49]/10 hover:-translate-y-1 transition-all">
138+
<div className="w-full h-48 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg mb-6 flex items-center justify-center">
139+
<Calendar className="h-16 w-16 text-purple-500" />
140+
</div>
141+
<h3 className="text-xl font-bold mb-2">Milestone Celebrations</h3>
142+
<p className="text-[#9c7a49]">Never miss a birthday or work anniversary. Automated celebrations that feel personal.</p>
143+
</Card>
144+
</div>
145+
</section>
146+
147+
{/* CTA Section */}
148+
<section className="px-6 py-20 bg-gradient-to-br from-[#f49d25]/10 to-transparent">
149+
<div className="max-w-3xl mx-auto text-center space-y-6">
150+
<h2 className="text-3xl md:text-4xl font-bold">Ready to transform your culture?</h2>
151+
<p className="text-slate-600 dark:text-slate-400 text-lg">
152+
Join forward-thinking companies using INTeract to build thriving remote cultures.
153+
</p>
154+
<Link to={createPageUrl('Dashboard')}>
155+
<Button className="bg-[#f49d25] hover:bg-[#e08d15] text-white font-bold px-12 py-6 text-lg shadow-xl shadow-[#f49d25]/20">
156+
Start Your Journey
157+
</Button>
158+
</Link>
159+
</div>
160+
</section>
161+
162+
{/* Footer */}
163+
<footer className="bg-slate-900 dark:bg-[#16110a] text-white py-12 px-6">
164+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
165+
<div>
166+
<div className="flex items-center gap-2 mb-4">
167+
<Mountain className="h-6 w-6 text-[#f49d25]" />
168+
<span className="font-bold text-lg">INTeract</span>
169+
</div>
170+
<p className="text-sm text-slate-400">Elevating workplace culture through gamified engagement.</p>
171+
</div>
172+
<div>
173+
<h4 className="font-bold mb-4">Product</h4>
174+
<ul className="space-y-2 text-sm text-slate-400">
175+
<li>Features</li>
176+
<li>Pricing</li>
177+
<li>Integrations</li>
178+
</ul>
179+
</div>
180+
<div>
181+
<h4 className="font-bold mb-4">Company</h4>
182+
<ul className="space-y-2 text-sm text-slate-400">
183+
<li>About</li>
184+
<li>Careers</li>
185+
<li>Contact</li>
186+
</ul>
187+
</div>
188+
<div>
189+
<h4 className="font-bold mb-4">Resources</h4>
190+
<ul className="space-y-2 text-sm text-slate-400">
191+
<li>Documentation</li>
192+
<li>Support</li>
193+
<li>Privacy</li>
194+
</ul>
195+
</div>
196+
</div>
197+
<div className="max-w-7xl mx-auto mt-12 pt-8 border-t border-white/10 text-center text-sm text-slate-400">
198+
© 2026 INTeract. All rights reserved.
199+
</div>
200+
</footer>
201+
</main>
202+
</div>
203+
);
204+
}

0 commit comments

Comments
 (0)