344 lines
16 KiB
TypeScript
344 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { AlertCircle, AlertTriangle, BarChart2, Brain, Calendar, CalendarPlus, CheckCircle, CheckSquare, Clock, LayoutDashboard, LayoutGrid, Loader, Maximize, Plus, Rocket, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Metrics", id: "#metrics"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Sign Up", id: "#contact"},
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "#contact"}}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4e6quw"
|
|
logoAlt="Cinque Logo"
|
|
brandName="Cinque"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Unleash Your Project Potential with Cinque AI"
|
|
description="Cinque empowers you to master up to 5 active projects with intelligent AI assistance, optimizing workloads and automating task scheduling directly into your Google Calendar."
|
|
testimonials={[
|
|
{
|
|
name: "Alex K.", handle: "@alexk_tech", testimonial: "Cinque transformed how I manage my projects. The AI suggestions are uncannily accurate!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/picture-happy-man-black-board-with-text-successful_176420-2909.jpg", imageAlt: "Alex K."},
|
|
]}
|
|
tag="AI-Powered Productivity"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Start Free Trial", href: "#contact"},
|
|
{
|
|
text: "Learn More", href: "#features"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "asset://hero-group-avatar-1", alt: "Professional Headshot 1"},
|
|
{
|
|
src: "asset://hero-group-avatar-2", alt: "Professional Headshot 2"},
|
|
{
|
|
src: "asset://hero-group-avatar-3", alt: "Professional Headshot 3"},
|
|
{
|
|
src: "asset://hero-group-avatar-4", alt: "Professional Headshot 4"},
|
|
{
|
|
src: "asset://hero-group-avatar-5", alt: "Professional Headshot 5"},
|
|
]}
|
|
avatarText="Trusted by leading professionals"
|
|
imageSrc="http://img.b2bpic.net/free-photo/working-with-device-lifestyle_23-2151848729.jpg"
|
|
imageAlt="Cinque AI dashboard showing project cards and calendar integration"
|
|
showDimOverlay={true}
|
|
showBlur={true}
|
|
textPosition="bottom"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Bovisa Centro", description: "Manage 'Abbigliamento / Brand' projects with AI-driven insights for creative campaigns and brand launches.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-designer-taking-photography-fashion-sketch-smartphone_23-2147875024.jpg", imageAlt: "Abstract representation of Bovisa Centro project"},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "AI Status: On Track"},
|
|
{
|
|
icon: Clock,
|
|
text: "Time Budget: 6h / 10h settimanali"},
|
|
{
|
|
icon: Calendar,
|
|
text: "Next Action: Domani ore 10:00 — Fitting prototipi"},
|
|
{
|
|
icon: Brain,
|
|
text: "AI Suggestion: Ho trovato uno slot libero giovedì per Bovisa Centro. Vuoi bloccarlo?"},
|
|
],
|
|
reverse: false,
|
|
|
|
imageAlt: "fashion brand management dashboard card"},
|
|
{
|
|
title: "Milionesimo Studio", description: "Streamline 'Design Studio' projects from concept to delivery, ensuring creative milestones are met on time.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-with-computer_23-2149930993.jpg", imageAlt: "Abstract representation of Milionesimo Studio project"},
|
|
items: [
|
|
{
|
|
icon: AlertTriangle,
|
|
text: "AI Status: Overloaded"},
|
|
{
|
|
icon: Clock,
|
|
text: "Time Budget: 14h / 10h settimanali"},
|
|
{
|
|
icon: Calendar,
|
|
text: "Next Action: Call cliente alle 15:30"},
|
|
{
|
|
icon: Brain,
|
|
text: "AI Suggestion: Considera di riprogrammare la revisione del branding per alleggerire il carico."},
|
|
],
|
|
reverse: true,
|
|
|
|
imageAlt: "fashion brand management dashboard card"},
|
|
{
|
|
title: "H10", description: "Optimize 'Musica / Produzione' workflows with smart scheduling for recording sessions and release schedules.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/music-producer-mixing-mastering-songs-digital-post-production-pc-interface_482257-116465.jpg", imageAlt: "Abstract representation of H10 project"},
|
|
items: [
|
|
{
|
|
icon: Loader,
|
|
text: "AI Status: Optimized"},
|
|
{
|
|
icon: Clock,
|
|
text: "Time Budget: 8h / 10h settimanali"},
|
|
{
|
|
icon: Calendar,
|
|
text: "Next Action: Revisione branding venerdì"},
|
|
{
|
|
icon: Brain,
|
|
text: "AI Suggestion: L'AI ha identificato un nuovo slot per il mixaggio finale la prossima settimana."},
|
|
],
|
|
reverse: false,
|
|
|
|
imageAlt: "fashion brand management dashboard card"},
|
|
{
|
|
title: "Palmisano", description: "Coordinate 'Software House / Digital Tailoring' developments with precision, from coding to client feedback.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-vector/multimedia-25-flat-color-icon-pack-including-arrow-media-player-media-multimedia_1142-23188.jpg", imageAlt: "Abstract representation of Palmisano project"},
|
|
items: [
|
|
{
|
|
icon: AlertCircle,
|
|
text: "AI Status: Urgent"},
|
|
{
|
|
icon: Clock,
|
|
text: "Time Budget: 12h / 10h settimanali"},
|
|
{
|
|
icon: Calendar,
|
|
text: "Next Action: Debug session alle 09:00"},
|
|
{
|
|
icon: Brain,
|
|
text: "AI Suggestion: Prioritizzare il bug fix critico. Riprogrammare le riunioni interne a venerdì."},
|
|
],
|
|
reverse: true,
|
|
|
|
imageAlt: "fashion brand management dashboard card"},
|
|
{
|
|
title: "Aggiungi Progetto", description: "Ready for your next big idea? Effortlessly add new projects and let Cinque's AI help you integrate them into your optimized workflow.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-with-notepad-clock_23-2148557262.jpg", imageAlt: "Empty card with plus icon for adding a new project"},
|
|
items: [
|
|
{
|
|
icon: Plus,
|
|
text: "Click to add a new project"},
|
|
{
|
|
icon: CalendarPlus,
|
|
text: "Seamless Google Calendar integration"},
|
|
{
|
|
icon: LayoutGrid,
|
|
text: "Organize your next big idea"},
|
|
],
|
|
reverse: false,
|
|
|
|
imageAlt: "fashion brand management dashboard card"},
|
|
]}
|
|
title="Master Your Projects, Effortlessly"
|
|
description="Cinque's intuitive dashboard helps you visualize, manage, and optimize up to 5 active projects with smart, AI-driven insights and automation."
|
|
tag="Intelligent Project Workflow"
|
|
tagIcon={LayoutDashboard}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "30%", title: "Time Saved", description: "Reduce wasted time on manual scheduling and re-prioritization.", icon: Clock,
|
|
},
|
|
{
|
|
id: "m2", value: "20%", title: "Workload Optimization", description: "Achieve a balanced workload and avoid burnout with intelligent distribution.", icon: Maximize,
|
|
},
|
|
{
|
|
id: "m3", value: "25%", title: "Project Completion", description: "Increase your success rate with proactive AI insights and task automation.", icon: CheckSquare,
|
|
},
|
|
]}
|
|
title="Impactful Productivity Gains"
|
|
description="Cinque doesn't just manage projects; it elevates your entire workflow, translating into tangible benefits for your business."
|
|
tag="Real Results"
|
|
tagIcon={BarChart2}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Innovate Solutions", "Creative Hub Studios", "Quantum Labs", "Synergy Digital", "Arcane Corp", "Apex Systems", "MetaFlow Technologies"]}
|
|
title="Trusted by Innovative Teams"
|
|
description="Leading startups and creative agencies rely on Cinque to keep their projects on track and their teams productive."
|
|
tag="Industry Endorsements"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="Cinque is a game-changer! The AI's ability to seamlessly schedule tasks and optimize our project flow has significantly boosted our team's efficiency and morale. It's truly a premium SaaS experience."
|
|
rating={5}
|
|
author="Isabella Rossi, CEO of CreativeFlow"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", alt: "Isabella Rossi"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/scientist-factory-using-tablet-check-photovoltaics-materials-parameters_482257-120526.jpg", alt: "Marco Bianchi"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg", alt: "Sofia Ricci"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-office_23-2148452664.jpg", alt: "Luca Galli"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/crazy-businessman-hero-happy-expression_1194-4011.jpg", alt: "Elena Conti"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "Come funziona l'ottimizzazione del carico di lavoro AI?", content: "Cinque's AI analyzes your project tasks, deadlines, and team availability to suggest optimal workload distribution and prevent bottlenecks, ensuring smooth project progression."},
|
|
{
|
|
id: "faq2", title: "Cinque si integra con Google Calendar?", content: "Sì, Cinque si integra perfettamente con Google Calendar, consentendo all'AI di programmare automaticamente le attività e gli appuntamenti, sincronizzando il tuo programma in tempo reale."},
|
|
{
|
|
id: "faq3", title: "Posso gestire più di 5 progetti?", content: "Cinque è progettato per ottimizzare la gestione di un massimo di 5 progetti attivi contemporaneamente, garantendo una focalizzazione strategica e massimizzando la produttività senza sovraccarico."},
|
|
{
|
|
id: "faq4", title: "L'AI può aiutarmi a riprogrammare le attività?", content: "Assolutamente. L'AI di Cinque monitora i progressi e le disponibilità, proponendo automaticamente la riprogrammazione delle attività per adattarsi a cambiamenti o priorità emergenti."},
|
|
]}
|
|
sideTitle="Domande Frequenti"
|
|
sideDescription="Find answers to the most common questions about Cinque's AI features, project management, and Google Calendar integration."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "downward-rays-animated-grid"}}
|
|
tag="Ready to Transform Your Workflow?"
|
|
title="Get Started with Cinque Today"
|
|
description="Experience the future of project management. Sign up for our exclusive early access and let AI elevate your productivity."
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Join the Waitlist"
|
|
termsText="By joining, you agree to receive updates and promotions from Cinque."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4e6quw"
|
|
logoAlt="Cinque Logo"
|
|
logoText="Cinque"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#"},
|
|
{
|
|
label: "Updates", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Blog", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Support", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Cinque. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|