diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..445f502 --- /dev/null +++ b/src/app/about/page.tsx @@ -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 ( +
+ + +
+ {/* Hero Section with Parallax */} +
+ + + Mission
+ Above All. + + + + We started JUNOHUB with a simple belief: the global supply chain is broken, and + technology is the only way to fix it. We're building the infrastructure for a + more connected, efficient, and transparent future. + + + +
+
+ + {/* Our Vision Section */} +
+ +

Our Vision

+
+

+ Every day, millions of dollars are lost due to inefficient communication, + lost inventory data, and slow synchronization. +

+

+ JUNOHUB eliminates these bottlenecks by providing a unified, high-octane + platform where data flows as fast as the commerce it supports. +

+
+ + + + {[ + { 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) => ( +
+ +
{item.value}
+
{item.label}
+
+ ))} + +
+ + {/* Values Section */} +
+
+

Core Values

+
+
+
+ {values.map((v, i) => ( + +
+ +
+

{v.title}

+

{v.description}

+ + ))} +
+
+ + {/* Join Movement */} +
+
+ +

Join the Movement

+

+ We're always looking for ambitious vendors and suppliers to join our + expanding ecosystem. Let's build the future together. +

+
+ + GET INVOLVED + +
+ +
+
+
+ + +
+ ) +} diff --git a/src/app/api/newsletter/subscribe/route.ts b/src/app/api/newsletter/subscribe/route.ts new file mode 100644 index 0000000..dbc57db --- /dev/null +++ b/src/app/api/newsletter/subscribe/route.ts @@ -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 ` + + + + + + Welcome to JUNOHUB + + + + + + +
+ + + + + + + + + + + + + + + +
+
+
+
+ + + +
+

JUNOHUB

+
+
+
+

+ YOU'RE IN THE LOOP. ⚡ +

+

+ Welcome to the JUNOHUB inner circle. You've successfully subscribed to our newsletter. +

+

+ Get ready for exclusive insights into global supply chain trends, early access to new features, and strategies to scale your commerce ecosystem. +

+ +
+

What's Next?

+
    +
  • + ✓ Stay tuned for our monthly deep-dives. +
    • +
  • + ✓ Check out our Platform technology. +
    • +
  • + ✓ Connect with us on social media. +
    • +
+
+ + + + + +
+ + Explore Dashboard + +
+
+

+ You are receiving this because you subscribed with ${email}.
+ Unsubscribe • Privacy Policy +

+

+ © 2026 JUNOHUB Systems. Powering Modern Commerce. +

+
+
+ + + ` +} diff --git a/src/app/cookies/page.tsx b/src/app/cookies/page.tsx new file mode 100644 index 0000000..22a955d --- /dev/null +++ b/src/app/cookies/page.tsx @@ -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 ( +
+ +
+ +
+
+ +
+

Cookie Policy

+
+ +
+
+

1. What are cookies?

+

+ 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. +

+
+ +
+

2. How we use cookies

+

+ JUNOHUB uses cookies to: +

+
    +
  • Keep you signed in during your session.
    • +
  • Understand how our platform is being used.
    • +
  • Improve security and prevent fraud.
    • +
  • Personalize your dashboard experience.
    • +
+
+ +
+

3. Types of cookies we use

+
+
+

Essential Cookies

+

Necessary for the website to function. These cannot be switched off.

+
+
+

Analytical Cookies

+

Help us measure performance and improve our services.

+
+
+
+ +

+ Last updated: February 14, 2026. For more information, please contact our support team. +

+
+ +
+ +
+ ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx index b735b22..8486fb7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( +
+ +
+ + + +
+ +
+ ) } diff --git a/src/app/platform/page.tsx b/src/app/platform/page.tsx new file mode 100644 index 0000000..f34eeff --- /dev/null +++ b/src/app/platform/page.tsx @@ -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 ( +
+ + +
+ {/* Hero section for Platform */} +
+ + + The Technology + + + + Built for the
+ Next Century. + + + + JUNOHUB isn't just an app—it's a high-performance infrastructure designed to power + the world's most ambitious supply chains. + +
+ + {/* Architecture Grid */} +
+
+ {architectureItems.map((item, index) => ( + +
+ +
+

{item.title}

+

{item.description}

+ + ))} +
+
+ + {/* Deep Tech Section */} +
+
+ +

Fully Distributed Network

+
+
+
99.9%
+
Uptime SLA
+
+
+
<50ms
+
Global Latency
+
+
+
AES-256
+
Security Standard
+
+
+
+
+
+ + +
+ ) +} diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index ac8131c..274cd3f 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -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) => { e.preventDefault() diff --git a/src/components/landing/LandingFeatures.tsx b/src/components/landing/LandingFeatures.tsx new file mode 100644 index 0000000..72551e9 --- /dev/null +++ b/src/components/landing/LandingFeatures.tsx @@ -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 ( +
+
+
+ + EVERYTHING YOU NEED TO
+ DOMINATE THE MARKET. + + + We built JUNOHUB to be the ultimate operating system for modern commerce. + Fast, secure, and beautiful. + +
+ +
+ {features.map((feature, index) => ( + + {/* Accent Glow */} +
+ +
+ +
+ +

+ {feature.title} +

+

+ {feature.description} +

+ + ))} +
+
+
+ ) +} diff --git a/src/components/landing/LandingFooter.tsx b/src/components/landing/LandingFooter.tsx new file mode 100644 index 0000000..c4d23e8 --- /dev/null +++ b/src/components/landing/LandingFooter.tsx @@ -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 ( + + ) +} diff --git a/src/components/landing/LandingHero.tsx b/src/components/landing/LandingHero.tsx new file mode 100644 index 0000000..b432e1f --- /dev/null +++ b/src/components/landing/LandingHero.tsx @@ -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(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 ( +
+ {/* Background Decorative Elements */} +
+
+
+
+ + {/* Grid Pattern */} +
+
+ + + {/* Badge */} + + + Next-Gen Supply Chain + + + {/* Main Heading */} + + THE PULSE OF
+ GLOBAL COMMERCE. + + + {/* Subtext */} + + Bridge the gap between vendors and suppliers with the world's most advanced + encrypted ecosystem. Sync Shopify, chat securely, and scale effortlessly. + + + {/* CTAs */} + + +
+ + GET STARTED NOW + + + + + + + {/* Trust Logos Placeholder / Stats */} + +
+ AES-250 READY +
+
+ SHOPIFY SYNC +
+
+ 120+ COUNTRIES +
+
+ E2E CHAT +
+ + + + {/* Scroll Indicator */} + +
+ +
+ Scroll + +
+ ) +} diff --git a/src/components/landing/LandingNavbar.tsx b/src/components/landing/LandingNavbar.tsx new file mode 100644 index 0000000..864872f --- /dev/null +++ b/src/components/landing/LandingNavbar.tsx @@ -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 ( +
+ + + {/* Mobile Menu */} + + {mobileMenuOpen && ( + +
+ {navLinks.map((link) => ( + setMobileMenuOpen(false)} + > + {link.name} + + ))} +
+
+ setMobileMenuOpen(false)} + > + Sign In + + setMobileMenuOpen(false)} + > + Get Started + +
+
+ + )} + +
+ ) +} diff --git a/src/components/landing/LandingSolutions.tsx b/src/components/landing/LandingSolutions.tsx new file mode 100644 index 0000000..c3d5ccc --- /dev/null +++ b/src/components/landing/LandingSolutions.tsx @@ -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 ( +
+
+
+ {solutions.map((sol, index) => ( + + {/* Role Badge */} +
+ {sol.role} +
+ +

+ {sol.title} +

+ +

+ {sol.description} +

+ +
    + {sol.features.map((feat) => ( +
  • + + {feat} +
    • + ))} +
+ + + {sol.cta} + + + ))} +
+
+
+ ) +}