DevOps/JUNOHUB-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home page added

Browse Source
This commit is contained in:
root 2026-02-14 21:34:18 +05:00
parent 947d9c8af8
commit a556120950
11 changed files with 1157 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/app/about/page.tsx Normal file
View File

@ -0,0 +1,180 @@
"use client"
import { useRef } from "react"
import { motion, useScroll, useTransform, useInView } from "framer-motion"
import { LandingNavbar } from "@/components/landing/LandingNavbar"
import { LandingFooter } from "@/components/landing/LandingFooter"
import { Users, Globe, Rocket, Heart, Zap, Target, Shield, Sparkles } from "lucide-react"
const values = [
{
title: "Radical Transparency",
description: "We believe in a world where every transaction and data point is clear and accessible to those who need it.",
icon: Target,
color: "from-blue-500 to-indigo-500"
},
{
title: "Built for Speed",
description: "In global commerce, every second counts. Our platform is engineered for sub-50ms latency.",
icon: Zap,
color: "from-amber-400 to-orange-500"
},
{
title: "Security First",
description: "Your business secrets are protected by E2E encryption and military-grade security protocols.",
icon: Shield,
color: "from-emerald-400 to-teal-500"
},
{
title: "Constant Innovation",
description: "We don't just follow trends—we set them by redefining what's possible in supply chain tech.",
icon: Sparkles,
color: "from-purple-500 to-pink-500"
}
]
export default function AboutPage() {
const containerRef = useRef(null)
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"]
})
const titleY = useTransform(scrollYProgress, [0, 0.2], [0, -50])
const titleOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0])
return (
<div ref={containerRef} className="min-h-screen bg-[#0a0e1a]">
<LandingNavbar isLoggedIn={false} />
<main className="relative">
{/* Hero Section with Parallax */}
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden">
<motion.div
style={{ y: titleY, opacity: titleOpacity }}
className="container mx-auto px-6 text-center z-10"
>
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-6xl md:text-9xl font-black text-white tracking-tighter mb-8 uppercase"
>
Mission <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Above All.</span>
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
className="max-w-3xl mx-auto text-xl text-slate-400 font-medium leading-relaxed"
>
We started JUNOHUB with a simple belief: the global supply chain is broken, and
technology is the only way to fix it. We&apos;re building the infrastructure for a
more connected, efficient, and transparent future.
</motion.p>
</motion.div>
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_center,rgba(79,70,229,0.1)_0%,transparent_70%)]" />
</section>
{/* Our Vision Section */}
<section className="container mx-auto px-6 mb-32 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8 }}
>
<h2 className="text-4xl font-black text-white mb-8 tracking-tighter uppercase">Our Vision</h2>
<div className="space-y-6 text-slate-400 font-medium text-lg leading-relaxed">
<p>
Every day, millions of dollars are lost due to inefficient communication,
lost inventory data, and slow synchronization.
</p>
<p>
JUNOHUB eliminates these bottlenecks by providing a unified, high-octane
platform where data flows as fast as the commerce it supports.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8 }}
className="grid grid-cols-2 gap-4"
>
{[
{ label: "Members", value: "10K+", icon: Users, delay: 0 },
{ label: "Countries", value: "120+", icon: Globe, delay: 0.1 },
{ label: "Uptime", value: "99.9%", icon: Rocket, delay: 0.2 },
{ label: "Dedicated", value: "100%", icon: Heart, delay: 0.3 }
].map((item, i) => (
<div key={item.label} className={`p-8 rounded-3xl bg-white/[0.03] border border-white/10 text-center ${i % 2 !== 0 ? 'mt-8' : ''}`}>
<item.icon className="w-8 h-8 text-indigo-400 mx-auto mb-4" />
<div className="text-2xl font-black text-white">{item.value}</div>
<div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{item.label}</div>
</div>
))}
</motion.div>
</section>
{/* Values Section */}
<section className="py-32 bg-white/[0.01] border-y border-white/5">
<div className="container mx-auto px-6 text-center mb-16">
<h2 className="text-4xl font-black text-white mb-4 tracking-tighter uppercase">Core Values</h2>
<div className="w-20 h-1 bg-indigo-500 mx-auto rounded-full" />
</div>
<div className="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{values.map((v, i) => (
<motion.div
key={v.title}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1 }}
className="p-10 rounded-[40px] bg-white/[0.03] border border-white/10 backdrop-blur-sm group hover:bg-white/[0.05] transition-all"
>
<div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${v.color} flex items-center justify-center mb-6 shadow-lg`}>
<v.icon className="w-7 h-7 text-white" />
</div>
<h3 className="text-xl font-black text-white mb-4 uppercase tracking-tight">{v.title}</h3>
<p className="text-slate-400 text-sm font-medium leading-relaxed">{v.description}</p>
</motion.div>
))}
</div>
</section>
{/* Join Movement */}
<section className="py-32">
<div className="container mx-auto px-6 text-center">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
>
<h2 className="text-5xl md:text-7xl font-black text-white mb-8 tracking-tighter uppercase">Join the Movement</h2>
<p className="text-slate-400 font-medium mb-12 max-w-2xl mx-auto text-lg leading-relaxed">
We&apos;re always looking for ambitious vendors and suppliers to join our
expanding ecosystem. Let&apos;s build the future together.
</p>
<div className="flex justify-center">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-12 py-6 bg-indigo-600 rounded-2xl font-black text-white shadow-2xl shadow-indigo-600/20 transition-all uppercase tracking-widest text-sm"
>
GET INVOLVED
</motion.button>
</div>
</motion.div>
</div>
</section>
</main>
<LandingFooter />
</div>
)
}

136
src/app/api/newsletter/subscribe/route.ts Normal file
View File

@ -0,0 +1,136 @@
import { NextResponse } from "next/server"
import { sendEmail } from "@/lib/email"
import { logger } from "@/lib/logger"
// This is a simple mock-up of a newsletter subscription API
// In a real app, you would save the email to a database (e.g., Prisma)
export async function POST(req: Request) {
try {
const { email } = await req.json()
if (!email || !email.includes("@")) {
return NextResponse.json(
{ message: "Invalid email address" },
{ status: 400 }
)
}
// 1. In a production app, you would check if the email already exists
// and then save it to your 'Newsletter' table.
// For now, we'll proceed to sending the welcome email.
const subject = "Welcome to the JUNOHUB Newsletter! ⚡"
const emailHtml = generateNewsletterWelcomeHtml(email)
const result = await sendEmail({
to: email,
subject,
html: emailHtml
})
if (result.success) {
return NextResponse.json({ message: "Subscription successful" })
} else {
logger.error("Failed to send newsletter welcome email", result.error)
// Even if email fails, we might still want to say success if we saved the record
return NextResponse.json({ message: "Subscription received, but email failed to send" })
}
} catch (error) {
logger.error("Newsletter subscription error", error)
return NextResponse.json(
{ message: "Internal server error" },
{ status: 500 }
)
}
}
function generateNewsletterWelcomeHtml(email: string): string {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to JUNOHUB</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #0a0e1a; color: #ffffff;">
<table role="presentation" style="width: 100%; border-collapse: collapse;">
<tr>
<td style="padding: 40px 20px; text-align: center;">
<table role="presentation" style="max-width: 600px; margin: 0 auto; background-color: #1e293b; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3);">
<!-- Header -->
<tr>
<td style="padding: 50px 40px 30px; background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);">
<div style="text-align: center;">
<div style="display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px;">
<div style="width: 56px; height: 56px; background-color: rgba(255, 255, 255, 0.2); border-radius: 16px; display: inline-block; vertical-align: middle;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 12px;">
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" fill="white"/>
</svg>
</div>
<h1 style="margin: 0; font-size: 32px; font-weight: 900; color: #ffffff; letter-spacing: -1px; display: inline-block; vertical-align: middle; margin-left: 10px;">JUNOHUB</h1>
</div>
</div>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 50px 40px;">
<h2 style="margin: 0 0 20px; font-size: 28px; font-weight: 800; color: #ffffff; line-height: 1.2;">
YOU&apos;RE IN THE LOOP. ⚡
</h2>
<p style="margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #cbd5e1;">
Welcome to the JUNOHUB inner circle. You&apos;ve successfully subscribed to our newsletter.
</p>
<p style="margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #cbd5e1;">
Get ready for exclusive insights into global supply chain trends, early access to new features, and strategies to scale your commerce ecosystem.
</p>
<div style="background-color: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.2); border-radius: 16px; padding: 30px; margin: 32px 0;">
<h3 style="margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #ffffff;">What&apos;s Next?</h3>
<ul style="margin: 0; padding: 0; list-style: none; text-align: left;">
<li style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">
<span style="color: #6366f1; margin-right: 8px;">✓</span> Stay tuned for our monthly deep-dives.
</li>
<li style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">
<span style="color: #6366f1; margin-right: 8px;">✓</span> Check out our <a href="https://app.jurassiq-dev.org/platform" style="color: #818cf8; text-decoration: none;">Platform technology</a>.
</li>
<li style="margin: 0; color: #94a3b8; font-size: 14px;">
<span style="color: #6366f1; margin-right: 8px;">✓</span> Connect with us on social media.
</li>
</ul>
</div>
<table role="presentation" style="width: 100%; margin: 40px 0;">
<tr>
<td style="text-align: center;">
<a href="https://app.jurassiq-dev.org" style="display: inline-block; padding: 16px 40px; background-color: #4f46e5; color: #ffffff; text-decoration: none; border-radius: 12px; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 1px;">
Explore Dashboard
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 30px 40px; background-color: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1);">
<p style="margin: 0 0 12px; font-size: 12px; color: #64748b; text-align: center; line-height: 1.5;">
You are receiving this because you subscribed with ${email}.<br>
<a href="#" style="color: #4f46e5; text-decoration: none;">Unsubscribe</a> • <a href="https://app.jurassiq-dev.org/privacy-policy" style="color: #4f46e5; text-decoration: none;">Privacy Policy</a>
</p>
<p style="margin: 0; font-size: 11px; color: #475569; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">
© 2026 JUNOHUB Systems. Powering Modern Commerce.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
`
}

69
src/app/cookies/page.tsx Normal file
View File

@ -0,0 +1,69 @@
"use client"
import { motion } from "framer-motion"
import { LandingNavbar } from "@/components/landing/LandingNavbar"
import { LandingFooter } from "@/components/landing/LandingFooter"
import { Cookie, Shield, Eye } from "lucide-react"
export default function CookiesPage() {
return (
<div className="min-h-screen bg-[#0a0e1a]">
<LandingNavbar isLoggedIn={false} />
<main className="pt-32 pb-20 container mx-auto px-6 max-w-4xl">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="bg-white/5 backdrop-blur-xl rounded-[40px] p-8 md:p-12 border border-white/10"
>
<div className="flex items-center gap-4 mb-8">
<div className="w-16 h-16 rounded-2xl bg-indigo-500/20 flex items-center justify-center border border-indigo-500/20">
<Cookie className="w-8 h-8 text-indigo-400" />
</div>
<h1 className="text-4xl md:text-5xl font-black text-white tracking-tighter uppercase">Cookie Policy</h1>
</div>
<div className="prose prose-invert max-w-none space-y-8 text-slate-400 font-medium leading-relaxed">
<section>
<h2 className="text-2xl font-black text-white uppercase tracking-tight mb-4">1. What are cookies?</h2>
<p>
Cookies are small text files that are stored on your device when you visit our website. They help us make your experience better by remembering your preferences and how you use the site.
</p>
</section>
<section>
<h2 className="text-2xl font-black text-white uppercase tracking-tight mb-4">2. How we use cookies</h2>
<p>
JUNOHUB uses cookies to:
</p>
<ul className="list-disc pl-6 space-y-2">
<li>Keep you signed in during your session.</li>
<li>Understand how our platform is being used.</li>
<li>Improve security and prevent fraud.</li>
<li>Personalize your dashboard experience.</li>
</ul>
</section>
<section>
<h2 className="text-2xl font-black text-white uppercase tracking-tight mb-4">3. Types of cookies we use</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="p-6 rounded-2xl bg-white/5 border border-white/5">
<h3 className="text-white font-black mb-2 uppercase text-sm">Essential Cookies</h3>
<p className="text-sm">Necessary for the website to function. These cannot be switched off.</p>
</div>
<div className="p-6 rounded-2xl bg-white/5 border border-white/5">
<h3 className="text-white font-black mb-2 uppercase text-sm">Analytical Cookies</h3>
<p className="text-sm">Help us measure performance and improve our services.</p>
</div>
</div>
</section>
<p className="pt-8 border-t border-white/5 text-sm italic">
Last updated: February 14, 2026. For more information, please contact our support team.
</p>
</div>
</motion.div>
</main>
<LandingFooter />
</div>
)
}

25
src/app/page.tsx
View File

@ -1,14 +1,23 @@
import { auth } from "@/auth"
import { redirect } from "next/navigation"
import { LandingNavbar } from "@/components/landing/LandingNavbar"
import { LandingHero } from "@/components/landing/LandingHero"
import { LandingFeatures } from "@/components/landing/LandingFeatures"
import { LandingSolutions } from "@/components/landing/LandingSolutions"
import { LandingFooter } from "@/components/landing/LandingFooter"
export default async function HomePage() {
const session = await auth()
const isLoggedIn = !!session
if (!session) {
redirect("/login")
} else {
redirect("/dashboard")
}
return null
return (
<div className="min-h-screen bg-[#0a0e1a] selection:bg-indigo-500/30">
<LandingNavbar isLoggedIn={isLoggedIn} />
<main>
<LandingHero />
<LandingFeatures />
<LandingSolutions />
</main>
<LandingFooter />
</div>
)
}

130
src/app/platform/page.tsx Normal file
View File

@ -0,0 +1,130 @@
"use client"
import { motion } from "framer-motion"
import { LandingNavbar } from "@/components/landing/LandingNavbar"
import { LandingFooter } from "@/components/landing/LandingFooter"
import {
Zap,
Shield,
RefreshCcw,
BarChart3,
Globe,
Layers,
Cpu,
Network
} from "lucide-react"
const architectureItems = [
{
title: "Real-time Sync Engine",
description: "Our proprietary sync engine ensures that inventory and product data are updated across your entire network in milliseconds.",
icon: RefreshCcw,
color: "text-blue-400"
},
{
title: "E2E Encryption",
description: "All communications and trade data are protected with AES-256 end-to-end encryption, ensuring your business secrets stay secret.",
icon: Shield,
color: "text-emerald-400"
},
{
title: "Global Infrastructure",
description: "Built on a global edge network to provide low-latency access to your dashboard from anywhere in the world.",
icon: Globe,
color: "text-purple-400"
},
{
title: "Scalable Core",
description: "Whether you have 10 or 10,000 vendors, our architecture scales horizontally to meet your demands without performance loss.",
icon: Layers,
color: "text-orange-400"
}
]
export default function PlatformPage() {
return (
<div className="min-h-screen bg-[#0a0e1a]">
<LandingNavbar isLoggedIn={false} />
<main className="pt-32 pb-20">
{/* Hero section for Platform */}
<section className="container mx-auto px-6 mb-24 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 mb-8"
>
<Cpu className="w-4 h-4 text-indigo-400" />
<span className="text-xs font-black uppercase tracking-[0.2em] text-indigo-400">The Technology</span>
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="text-5xl md:text-7xl font-black text-white tracking-tighter mb-8 uppercase"
>
Built for the <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Next Century.</span>
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
className="max-w-2xl mx-auto text-xl text-slate-400 font-medium"
>
JUNOHUB isn&apos;t just an app—it&apos;s a high-performance infrastructure designed to power
the world&apos;s most ambitious supply chains.
</motion.p>
</section>
{/* Architecture Grid */}
<section className="container mx-auto px-6 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{architectureItems.map((item, index) => (
<motion.div
key={item.title}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
className="p-10 rounded-[40px] bg-white/[0.03] border border-white/10 backdrop-blur-sm group hover:bg-white/[0.05] transition-all"
>
<div className="w-14 h-14 rounded-2xl bg-white/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<item.icon className={`w-7 h-7 ${item.color}`} />
</div>
<h3 className="text-2xl font-black text-white mb-4 uppercase tracking-tight">{item.title}</h3>
<p className="text-slate-400 font-medium leading-relaxed leading-relaxed">{item.description}</p>
</motion.div>
))}
</div>
</section>
{/* Deep Tech Section */}
<section className="bg-indigo-600/5 py-24 border-y border-white/5">
<div className="container mx-auto px-6 text-center">
<Network className="w-16 h-16 text-indigo-400 mx-auto mb-8" />
<h2 className="text-4xl font-black text-white mb-8 tracking-tighter uppercase">Fully Distributed Network</h2>
<div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 text-slate-400 font-bold uppercase tracking-widest text-sm">
<div className="space-y-4">
<div className="text-5xl font-black text-indigo-400">99.9%</div>
<div>Uptime SLA</div>
</div>
<div className="space-y-4">
<div className="text-5xl font-black text-indigo-400">&lt;50ms</div>
<div>Global Latency</div>
</div>
<div className="space-y-4">
<div className="text-5xl font-black text-indigo-400">AES-256</div>
<div>Security Standard</div>
</div>
</div>
</div>
</section>
</main>
<LandingFooter />
</div>
)
}

6
src/app/signup/page.tsx
View File

@ -4,14 +4,16 @@ import { useState } from "react"
import { motion } from "framer-motion"
import { Mail, Lock, Loader2, User, ShoppingBag, Truck, Zap } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useRouter, useSearchParams } from "next/navigation"
import { signIn } from "next-auth/react"
export default function SignupPage() {
const [loading, setLoading] = useState(false)
const [error, setError] = useState("")
const [role, setRole] = useState<"VENDOR" | "SUPPLIER">("VENDOR")
const router = useRouter()
const searchParams = useSearchParams()
const initialRole = searchParams.get("role")?.toUpperCase() === "SUPPLIER" ? "SUPPLIER" : "VENDOR"
const [role, setRole] = useState<"VENDOR" | "SUPPLIER">(initialRole)
const handleSignup = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()

120
src/components/landing/LandingFeatures.tsx Normal file
View File

@ -0,0 +1,120 @@
"use client"
import { motion } from "framer-motion"
import {
Zap,
MessageSquare,
BarChart3,
ShieldCheck,
LayoutDashboard,
RefreshCcw
} from "lucide-react"
const features = [
{
title: "Dynamic Shopify Sync",
description: "Real-time product and inventory synchronization across your entire vendor network.",
icon: RefreshCcw,
color: "text-emerald-400",
bg: "bg-emerald-500/10",
border: "border-emerald-500/20"
},
{
title: "Encrypted E2E Chat",
description: "Secure, real-time communication between vendors and suppliers with full encryption.",
icon: MessageSquare,
color: "text-blue-400",
bg: "bg-blue-500/10",
border: "border-blue-500/20"
},
{
title: "Advanced Analytics",
description: "Deep insights into sales performance, order trends, and connection efficiency.",
icon: BarChart3,
color: "text-purple-400",
bg: "bg-purple-500/10",
border: "border-purple-500/20"
},
{
title: "Premium Dashboard",
description: "A state-of-the-art glassmorphic interface designed for clarity and speed.",
icon: LayoutDashboard,
color: "text-orange-400",
bg: "bg-orange-500/10",
border: "border-orange-500/20"
},
{
title: "Military-Grade Security",
description: "Multi-layer protection for all your trade data and sensitive business relationships.",
icon: ShieldCheck,
color: "text-red-400",
bg: "bg-red-500/10",
border: "border-red-500/20"
},
{
title: "Instant Scaling",
description: "Add vendors or suppliers in seconds and watch your business ecosystem grow.",
icon: Zap,
color: "text-yellow-400",
bg: "bg-yellow-500/10",
border: "border-yellow-500/20"
}
]
export function LandingFeatures() {
return (
<section id="features" className="py-24 relative overflow-hidden">
<div className="container mx-auto px-6">
<div className="text-center mb-20">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-4xl md:text-5xl font-black tracking-tighter text-white mb-6"
>
EVERYTHING YOU NEED TO <br />
<span className="text-indigo-400">DOMINATE THE MARKET.</span>
</motion.h2>
<motion.p
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
className="text-slate-400 max-w-2xl mx-auto font-medium"
>
We built JUNOHUB to be the ultimate operating system for modern commerce.
Fast, secure, and beautiful.
</motion.p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{features.map((feature, index) => (
<motion.div
key={feature.title}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
whileHover={{ y: -5, transition: { duration: 0.2 } }}
className={`p-8 rounded-3xl border border-white/5 bg-white/[0.02] backdrop-blur-sm group hover:bg-white/[0.04] transition-all duration-300 relative overflow-hidden`}
>
{/* Accent Glow */}
<div className={`absolute top-0 right-0 w-32 h-32 ${feature.bg} blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
<div className={`w-14 h-14 rounded-2xl ${feature.bg} flex items-center justify-center mb-6 border ${feature.border} group-hover:scale-110 transition-transform duration-500`}>
<feature.icon className={`w-7 h-7 ${feature.color}`} />
</div>
<h3 className="text-xl font-black text-white mb-4 tracking-tight uppercase">
{feature.title}
</h3>
<p className="text-slate-400 font-medium leading-relaxed">
{feature.description}
</p>
</motion.div>
))}
</div>
</div>
</section>
)
}

139
src/components/landing/LandingFooter.tsx Normal file
View File

@ -0,0 +1,139 @@
"use client"
import Link from "next/link"
import { motion } from "framer-motion"
import { Twitter, Github, Linkedin, Mail, Zap } from "lucide-react"
export function LandingFooter() {
return (
<footer className="py-20 border-t border-white/5 relative overflow-hidden">
{/* Background Glow */}
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-indigo-600/10 blur-[120px] rounded-full -z-10" />
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div className="col-span-1 md:col-span-1">
<Link href="/" className="flex items-center gap-2 mb-6 group">
<div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
<Zap className="w-6 h-6 fill-white" />
</div>
<span className="text-xl font-black tracking-tighter text-white">JUNOHUB</span>
</Link>
<p className="text-slate-500 font-medium mb-8">
The next generation of supply chain connectivity. Secure, encrypted, and real-time.
</p>
<div className="flex items-center gap-4">
<a href="#" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
<Twitter className="w-5 h-5" />
</a>
<a href="#" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
<Linkedin className="w-5 h-5" />
</a>
<a href="#" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
<Github className="w-5 h-5" />
</a>
</div>
</div>
<div>
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Platform</h4>
<ul className="space-y-4">
<li><Link href="/platform" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">Features</Link></li>
<li><Link href="/platform" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">Shopify Sync</Link></li>
<li><Link href="/platform" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">Security</Link></li>
<li><Link href="/platform" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">API</Link></li>
</ul>
</div>
<div>
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Company</h4>
<ul className="space-y-4">
<li><Link href="/about" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">About Us</Link></li>
<li><Link href="/privacy-policy" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">Privacy Policy</Link></li>
<li><Link href="/terms-of-service" className="text-slate-500 hover:text-indigo-400 transition-colors font-medium">Terms of Service</Link></li>
</ul>
</div>
<div>
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Newsletter</h4>
<p className="text-slate-500 font-medium mb-6">Stay updated with the latest in supply chain tech.</p>
{/* Status Message */}
<form
onSubmit={async (e) => {
e.preventDefault();
const form = e.currentTarget;
const email = new FormData(form).get("email") as string;
const btn = form.querySelector('button');
const statusEl = document.getElementById('newsletter-status');
if (btn) btn.disabled = true;
if (statusEl) {
statusEl.textContent = "Processing...";
statusEl.className = "text-xs font-bold text-indigo-400 mt-2 block";
}
try {
const res = await fetch("/api/newsletter/subscribe", {
method: "POST",
body: JSON.stringify({ email }),
headers: { "Content-Type": "application/json" }
});
if (res.ok) {
if (statusEl) {
statusEl.textContent = "Successfully subscribed! ⚡";
statusEl.className = "text-xs font-bold text-emerald-400 mt-2 block";
}
form.reset();
setTimeout(() => { if (statusEl) statusEl.textContent = ""; }, 5000);
} else {
if (statusEl) {
statusEl.textContent = "Something went wrong. Try again.";
statusEl.className = "text-xs font-bold text-rose-400 mt-2 block";
}
}
} catch (err) {
if (statusEl) {
statusEl.textContent = "Connection error.";
statusEl.className = "text-xs font-bold text-rose-400 mt-2 block";
}
} finally {
if (btn) btn.disabled = false;
}
}}
className="flex flex-col gap-2"
>
<div className="flex gap-2">
<input
name="email"
type="email"
required
placeholder="Enter your email"
className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500 transition-colors flex-1"
/>
<button
type="submit"
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white p-3 rounded-xl transition-all active:scale-95 shadow-lg shadow-indigo-600/20"
>
<Mail className="w-5 h-5" />
</button>
</div>
<span id="newsletter-status" className="h-4"></span>
</form>
</div>
</div>
<div className="pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-slate-600 font-medium">
© 2026 JUNOHUB. All rights reserved.
</p>
<div className="flex items-center gap-6">
<Link href="/terms-of-service" className="text-xs text-slate-600 hover:text-slate-400 font-bold uppercase tracking-widest">Terms</Link>
<Link href="/privacy-policy" className="text-xs text-slate-600 hover:text-slate-400 font-bold uppercase tracking-widest">Privacy</Link>
<Link href="/cookies" className="text-xs text-slate-600 hover:text-slate-400 font-bold uppercase tracking-widest">Cookies</Link>
</div>
</div>
</div>
</footer>
)
}

142
src/components/landing/LandingHero.tsx Normal file
View File

@ -0,0 +1,142 @@
"use client"
import { useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"
import { ShieldCheck, Zap, Globe, ArrowRight, Play } from "lucide-react"
import Link from "next/link"
export function LandingHero() {
const containerRef = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end start"],
})
const y1 = useTransform(scrollYProgress, [0, 1], [0, 200])
const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])
const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.9])
return (
<section
ref={containerRef}
className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden"
>
{/* Background Decorative Elements */}
<div className="absolute inset-0 z-0">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-600/20 blur-[120px] rounded-full animate-pulse" />
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-600/20 blur-[120px] rounded-full animate-pulse delay-700" />
</div>
{/* Grid Pattern */}
<div className="absolute inset-0 z-0 opacity-[0.03] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] pointer-events-none" />
<div
className="absolute inset-0 z-0 opacity-[0.4]"
style={{
backgroundImage: `radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)`,
backgroundSize: '40px 40px'
}}
/>
<motion.div
style={{ y: y1, opacity, scale }}
className="container mx-auto px-6 relative z-10 text-center"
>
{/* Badge */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8"
>
<span className="flex h-2 w-2 rounded-full bg-indigo-500 animate-ping" />
<span className="text-xs font-black uppercase tracking-[0.2em] text-indigo-400">Next-Gen Supply Chain</span>
</motion.div>
{/* Main Heading */}
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-5xl md:text-8xl font-black tracking-tighter text-white mb-8 leading-[0.9]"
>
THE PULSE OF <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-indigo-400 animate-gradient-x">GLOBAL COMMERCE.</span>
</motion.h1>
{/* Subtext */}
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.4 }}
className="max-w-2xl mx-auto text-lg md:text-xl text-slate-400 font-medium mb-12 leading-relaxed"
>
Bridge the gap between vendors and suppliers with the world&apos;s most advanced
encrypted ecosystem. Sync Shopify, chat securely, and scale effortlessly.
</motion.p>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.6 }}
className="flex flex-col sm:flex-row items-center justify-center gap-6"
>
<Link
href="/signup"
className="group relative px-10 py-5 bg-indigo-600 rounded-2xl font-black text-white overflow-hidden shadow-2xl shadow-indigo-600/20 active:scale-95 transition-all"
>
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
<span className="relative flex items-center gap-2">
GET STARTED NOW <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</span>
</Link>
<button className="flex items-center gap-3 px-8 py-5 rounded-2xl font-black text-white hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:scale-110 transition-transform">
<Play className="w-4 h-4 fill-white ml-0.5" />
</div>
WATCH DEMO
</button>
</motion.div>
{/* Trust Logos Placeholder / Stats */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="mt-24 pt-12 border-t border-white/5 grid grid-cols-2 md:grid-cols-4 gap-8 opacity-40 hover:opacity-60 transition-opacity"
>
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
<ShieldCheck className="w-5 h-5 text-indigo-400" /> AES-250 READY
</div>
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
<Zap className="w-5 h-5 text-indigo-400" /> SHOPIFY SYNC
</div>
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
<Globe className="w-5 h-5 text-indigo-400" /> 120+ COUNTRIES
</div>
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
<ShieldCheck className="w-5 h-5 text-indigo-400" /> E2E CHAT
</div>
</motion.div>
</motion.div>
{/* Scroll Indicator */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 1 }}
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
>
<div className="w-[1px] h-12 bg-gradient-to-b from-transparent via-indigo-500/50 to-transparent relative overflow-hidden">
<motion.div
animate={{ y: [0, 48] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
className="absolute top-0 left-0 w-full h-1/3 bg-indigo-500"
/>
</div>
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500">Scroll</span>
</motion.div>
</section>
)
}

135
src/components/landing/LandingNavbar.tsx Normal file
View File

@ -0,0 +1,135 @@
"use client"
import { useState, useEffect } from "react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import { Menu, X, ArrowRight, Zap } from "lucide-react"
import { cn } from "@/lib/utils"
interface LandingNavbarProps {
isLoggedIn: boolean
}
export function LandingNavbar({ isLoggedIn }: LandingNavbarProps) {
const [isScrolled, setIsScrolled] = useState(false)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 20)
}
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, [])
const navLinks = [
{ name: "Features", href: "#features" },
{ name: "Solutions", href: "#solutions" },
{ name: "Support", href: "#support" },
]
return (
<header
className={cn(
"fixed top-0 left-0 right-0 z-[100] transition-all duration-500 px-6 py-4",
isScrolled ? "py-3" : "py-6"
)}
>
<nav
className={cn(
"max-w-7xl mx-auto rounded-full transition-all duration-500 px-6 py-2 flex items-center justify-between",
isScrolled
? "bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl shadow-indigo-500/10"
: "bg-transparent border border-transparent"
)}
>
{/* Logo */}
<Link href="/" className="flex items-center gap-2 group">
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-indigo-400 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
<Zap className="w-6 h-6 fill-white" />
</div>
<span className="text-xl font-black tracking-tighter text-white">JUNOHUB</span>
</Link>
{/* Desktop Nav */}
<div className="hidden md:flex items-center gap-8">
{navLinks.map((link) => (
<Link
key={link.name}
href={link.href}
className="text-sm font-bold text-slate-400 hover:text-white transition-colors"
>
{link.name}
</Link>
))}
</div>
{/* Actions */}
<div className="hidden md:flex items-center gap-4">
<Link
href="/login"
className="text-sm font-bold text-white hover:text-indigo-400 transition-colors"
>
Sign In
</Link>
<Link
href="/signup"
className="px-6 py-2.5 bg-white text-slate-900 hover:bg-slate-100 rounded-full text-sm font-black transition-all shadow-xl active:scale-95"
>
Get Started
</Link>
</div>
{/* Mobile Menu Toggle */}
<button
className="md:hidden text-white p-1"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? <X /> : <Menu />}
</button>
</nav>
{/* Mobile Menu */}
<AnimatePresence>
{mobileMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden absolute top-full left-6 right-6 mt-2 bg-slate-900/95 backdrop-blur-2xl rounded-3xl border border-white/10 overflow-hidden shadow-2xl"
>
<div className="p-6 flex flex-col gap-6">
{navLinks.map((link) => (
<Link
key={link.name}
href={link.href}
className="text-lg font-bold text-slate-300"
onClick={() => setMobileMenuOpen(false)}
>
{link.name}
</Link>
))}
<hr className="border-white/5" />
<div className="flex flex-col gap-4">
<Link
href="/login"
className="w-full py-4 bg-white/5 text-white rounded-2xl text-center font-black border border-white/10"
onClick={() => setMobileMenuOpen(false)}
>
Sign In
</Link>
<Link
href="/signup"
className="w-full py-4 bg-white text-slate-900 rounded-2xl text-center font-black shadow-lg"
onClick={() => setMobileMenuOpen(false)}
>
Get Started
</Link>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</header>
)
}

85
src/components/landing/LandingSolutions.tsx Normal file
View File

@ -0,0 +1,85 @@
"use client"
import Link from "next/link"
import { motion } from "framer-motion"
import { CheckCircle2, ArrowRight } from "lucide-react"
const solutions = [
{
role: "For Vendors",
title: "Scale your reach, simplify your supply.",
description: "Connect with global suppliers, sync your Shopify store, and manage orders from a single, high-performance interface.",
features: [
"Seamless Shopify Integration",
"Real-time Inventory Tracking",
"Direct Encrypted Chat with Suppliers",
"Unified Order Management"
],
cta: "Sign Up as Vendor",
gradient: "from-blue-600 to-indigo-600",
bg: "bg-blue-500/5"
},
{
role: "For Suppliers",
title: "Your products, in every shopify window.",
description: "Distribute your catalog to thousands of vendors instantly. Track performance and communicate securely with your partners.",
features: [
"Global Catalog Distribution",
"Automated Product Syncing",
"Detailed Partner Analytics",
"Reliable Payment Settlements"
],
cta: "Sign Up as Supplier",
gradient: "from-indigo-600 to-purple-600",
bg: "bg-purple-500/5"
}
]
export function LandingSolutions() {
return (
<section id="solutions" className="py-24 bg-white/5 border-y border-white/5 relative">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{solutions.map((sol, index) => (
<motion.div
key={sol.role}
initial={{ opacity: 0, x: index === 0 ? -20 : 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className={`p-10 rounded-[40px] border border-white/10 ${sol.bg} relative overflow-hidden group`}
>
{/* Role Badge */}
<div className="inline-block px-4 py-1.5 rounded-full bg-white/10 border border-white/10 text-xs font-black uppercase tracking-widest text-white mb-6">
{sol.role}
</div>
<h3 className="text-3xl md:text-4xl font-black text-white mb-6 leading-tight tracking-tighter uppercase">
{sol.title}
</h3>
<p className="text-slate-400 font-medium mb-8 text-lg">
{sol.description}
</p>
<ul className="space-y-4 mb-10">
{sol.features.map((feat) => (
<li key={feat} className="flex items-center gap-3 text-slate-300 font-bold">
<CheckCircle2 className="w-5 h-5 text-indigo-400" />
{feat}
</li>
))}
</ul>
<Link
href={sol.role === "For Vendors" ? "/signup?role=vendor" : "/signup?role=supplier"}
className={`w-full py-5 rounded-2xl bg-gradient-to-r ${sol.gradient} text-white font-black shadow-xl shadow-indigo-600/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2 group`}
>
{sol.cta} <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Link>
</motion.div>
))}
</div>
</div>
</section>
)
}