mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-08-25 13:51:15 +00:00
start web
This commit is contained in:
MacRimi
BIN
web/app/components/.DS_Store
vendored
Normal file
BIN
web/app/components/.DS_Store
vendored
Normal file
Binary file not shown.
18
web/app/components/CTA.tsx
Normal file
18
web/app/components/CTA.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function CTA() {
|
||||
return (
|
||||
<section className="py-20 bg-primary text-white">
|
||||
<div className="container mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">Ready to Streamline Your Workflow?</h2>
|
||||
<p className="text-xl mb-8 max-w-2xl mx-auto">
|
||||
Join thousands of teams already using StreamLine to boost their productivity.
|
||||
</p>
|
||||
<Button size="lg" variant="secondary">
|
||||
Start Your Free Trial
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
36
web/app/components/DocSidebar.tsx
Normal file
36
web/app/components/DocSidebar.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
const sidebarItems = [
|
||||
{ title: "Introduction", href: "/docs/introduction" },
|
||||
{ title: "Installation", href: "/docs/installation" },
|
||||
{ title: "Getting Started", href: "/docs/getting-started" },
|
||||
{ title: "Features", href: "/docs/features" },
|
||||
{ title: "API", href: "/docs/api" },
|
||||
{ title: "FAQ", href: "/docs/faq" },
|
||||
]
|
||||
|
||||
export default function DocSidebar() {
|
||||
const pathname = usePathname()
|
||||
|
||||
return (
|
||||
<nav className="w-64 bg-gray-100 p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Documentation</h2>
|
||||
<ul className="space-y-2">
|
||||
{sidebarItems.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`block p-2 rounded ${
|
||||
pathname === item.href ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
44
web/app/components/Features.tsx
Normal file
44
web/app/components/Features.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { CheckCircle, Zap, Users, TrendingUp } from "lucide-react"
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <CheckCircle className="h-8 w-8 text-primary" />,
|
||||
title: "Task Management",
|
||||
description: "Organize and prioritize tasks with ease.",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="h-8 w-8 text-primary" />,
|
||||
title: "Real-time Collaboration",
|
||||
description: "Work together seamlessly in real-time.",
|
||||
},
|
||||
{
|
||||
icon: <Users className="h-8 w-8 text-primary" />,
|
||||
title: "Team Communication",
|
||||
description: "Stay connected with built-in messaging.",
|
||||
},
|
||||
{
|
||||
icon: <TrendingUp className="h-8 w-8 text-primary" />,
|
||||
title: "Analytics Dashboard",
|
||||
description: "Track progress and gain insights with powerful analytics.",
|
||||
},
|
||||
]
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<section id="features" className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md">
|
||||
<div className="mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
76
web/app/components/Footer.tsx
Normal file
76
web/app/components/Footer.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import Link from "next/link"
|
||||
import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white py-12">
|
||||
<div className="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">StreamLine</h3>
|
||||
<p className="text-gray-400">Streamlining your workflow, one task at a time.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Product</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="#features" className="text-gray-400 hover:text-white">
|
||||
Features
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#pricing" className="text-gray-400 hover:text-white">
|
||||
Pricing
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
Integrations
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Company</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
About Us
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
Careers
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Connect</h4>
|
||||
<div className="flex space-x-4">
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
<Facebook className="h-6 w-6" />
|
||||
</Link>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
<Twitter className="h-6 w-6" />
|
||||
</Link>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
<Instagram className="h-6 w-6" />
|
||||
</Link>
|
||||
<Link href="#" className="text-gray-400 hover:text-white">
|
||||
<Linkedin className="h-6 w-6" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
|
||||
<p>© 2025 StreamLine. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
27
web/app/components/Header.tsx
Normal file
27
web/app/components/Header.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="py-4 px-6 bg-white shadow-sm">
|
||||
<div className="container mx-auto flex justify-between items-center">
|
||||
<Link href="/" className="text-2xl font-bold text-primary">
|
||||
StreamLine
|
||||
</Link>
|
||||
<nav className="hidden md:flex space-x-6">
|
||||
<Link href="#features" className="text-gray-600 hover:text-primary">
|
||||
Features
|
||||
</Link>
|
||||
<Link href="#testimonials" className="text-gray-600 hover:text-primary">
|
||||
Testimonials
|
||||
</Link>
|
||||
<Link href="#pricing" className="text-gray-600 hover:text-primary">
|
||||
Pricing
|
||||
</Link>
|
||||
</nav>
|
||||
<Button>Get Started</Button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
23
web/app/components/Hero.tsx
Normal file
23
web/app/components/Hero.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<div className="relative pt-32 pb-20 sm:pt-40 sm:pb-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-8">
|
||||
Everything App
|
||||
<br />
|
||||
<span className="text-gray-400">for your teams</span>
|
||||
</h1>
|
||||
<p className="max-w-2xl mx-auto text-lg sm:text-xl text-gray-400 mb-10">
|
||||
Huly, an open-source platform, serves as an all-in-one replacement of Linear, Jira, Slack, and Notion.
|
||||
</p>
|
||||
<Button className="relative group px-8 py-6 text-lg bg-gradient-to-r from-primary to-accent hover:opacity-90">
|
||||
<span className="relative z-10">Try it free</span>
|
||||
<div className="absolute inset-0 bg-white/20 blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
47
web/app/components/Navbar.tsx
Normal file
47
web/app/components/Navbar.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"
|
||||
>
|
||||
StreamLine
|
||||
</Link>
|
||||
<div className="hidden md:block ml-10">
|
||||
<div className="flex items-center space-x-8">
|
||||
<Link href="#" className="text-sm text-gray-300 hover:text-white">
|
||||
Pricing
|
||||
</Link>
|
||||
<Link href="/docs" className="text-sm text-gray-300 hover:text-white">
|
||||
Docs
|
||||
</Link>
|
||||
<Link href="#" className="text-sm text-gray-300 hover:text-white">
|
||||
Resources
|
||||
</Link>
|
||||
<Link href="#" className="text-sm text-gray-300 hover:text-white">
|
||||
Community
|
||||
</Link>
|
||||
<Link href="#" className="text-sm text-gray-300 hover:text-white">
|
||||
Download
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" className="text-sm">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button className="text-sm bg-gradient-to-r from-primary to-accent hover:opacity-90">Get Started</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
53
web/app/components/Pricing.tsx
Normal file
53
web/app/components/Pricing.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Check } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: "Basic",
|
||||
price: "$9",
|
||||
features: ["5 team members", "10 projects", "Basic analytics", "Email support"],
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
price: "$29",
|
||||
features: ["Unlimited team members", "Unlimited projects", "Advanced analytics", "Priority support"],
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
features: ["Custom features", "Dedicated account manager", "On-premise deployment", "24/7 phone support"],
|
||||
},
|
||||
]
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<section id="pricing" className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Choose Your Plan</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{plans.map((plan, index) => (
|
||||
<div key={index} className="bg-white p-8 rounded-lg shadow-md">
|
||||
<h3 className="text-2xl font-bold mb-4">{plan.name}</h3>
|
||||
<p className="text-4xl font-bold mb-6">
|
||||
{plan.price}
|
||||
<span className="text-lg font-normal text-gray-600">/month</span>
|
||||
</p>
|
||||
<ul className="mb-8">
|
||||
{plan.features.map((feature, featureIndex) => (
|
||||
<li key={featureIndex} className="flex items-center mb-2">
|
||||
<Check className="h-5 w-5 text-primary mr-2" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full" variant={index === 1 ? "default" : "outline"}>
|
||||
{index === 2 ? "Contact Sales" : "Get Started"}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
21
web/app/components/ProductPreview.tsx
Normal file
21
web/app/components/ProductPreview.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import Image from "next/image"
|
||||
|
||||
export default function ProductPreview() {
|
||||
return (
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-20">
|
||||
<div className="relative rounded-lg overflow-hidden border border-white/10 shadow-2xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary/10 via-accent/10 to-transparent" />
|
||||
<Image
|
||||
src="https://sjc.microlink.io/dACoBD81V0jhbU_TaUYiRrOVrhAXOh8TCYVdXmvVaYFIpbvF9B17bU0pnQF3gHfzVAOFzC-nwZVACScUpFYQsg.jpeg"
|
||||
alt="Huly App Interface"
|
||||
width={1200}
|
||||
height={800}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
{/* Glow effect */}
|
||||
<div className="absolute -inset-x-20 top-0 h-[500px] bg-gradient-conic opacity-30 blur-3xl" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
37
web/app/components/Testimonials.tsx
Normal file
37
web/app/components/Testimonials.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "StreamLine has revolutionized our team's workflow. It's a game-changer!",
|
||||
author: "Jane Doe",
|
||||
company: "Tech Innovators Inc.",
|
||||
},
|
||||
{
|
||||
quote: "The best project management tool we've ever used. Highly recommended!",
|
||||
author: "John Smith",
|
||||
company: "Creative Solutions LLC",
|
||||
},
|
||||
{
|
||||
quote: "StreamLine helped us increase productivity by 40%. It's incredible!",
|
||||
author: "Emily Johnson",
|
||||
company: "Startup Ventures",
|
||||
},
|
||||
]
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section id="testimonials" className="py-20 bg-white">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-gray-50 p-6 rounded-lg">
|
||||
<p className="text-lg mb-4">"{testimonial.quote}"</p>
|
||||
<p className="font-semibold">{testimonial.author}</p>
|
||||
<p className="text-sm text-gray-600">{testimonial.company}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
BIN
web/app/components/ui/.DS_Store
vendored
Normal file
BIN
web/app/components/ui/.DS_Store
vendored
Normal file
Binary file not shown.
56
web/app/components/ui/button.tsx
Normal file
56
web/app/components/ui/button.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
35
web/app/components/ui/steps.tsx
Normal file
35
web/app/components/ui/steps.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from "react"
|
||||
|
||||
interface StepProps {
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Step: React.FC<StepProps> = ({ title, children }) => (
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold mb-2 text-gray-900">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
interface StepsProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Steps: React.FC<StepsProps> & { Step: typeof Step } = ({ children }) => (
|
||||
<div className="space-y-4">
|
||||
{React.Children.map(children, (child, index) => (
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4 mt-1">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-grow">{child}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
Steps.Step = Step
|
||||
|
||||
export { Steps }
|
||||
|
||||
Reference in New Issue
Block a user