This commit is contained in:
MacRimi 2025-02-17 19:05:04 +01:00
parent fe7fb6b0a9
commit 51aa442386
14 changed files with 8 additions and 427 deletions

View File

@ -1,18 +0,0 @@
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>
)
}

View File

@ -1,41 +0,0 @@
"use client"
import type React from "react"
import { useState } from "react"
import { Copy, Check } from "lucide-react"
interface CopyableCodeProps {
code: string
}
const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
const [isCopied, setIsCopied] = useState(false)
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(code)
setIsCopied(true)
setTimeout(() => setIsCopied(false), 2000)
} catch (err) {
console.error("Failed to copy text: ", err)
}
}
return (
<div className="relative">
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto">
<code>{code}</code>
</pre>
<button
onClick={copyToClipboard}
className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
aria-label="Copy to clipboard"
>
{isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
</button>
</div>
)
}
export default CopyableCode

View File

@ -1,36 +0,0 @@
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>
)
}

View File

@ -1,44 +0,0 @@
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>
)
}

View File

@ -1,76 +0,0 @@
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>&copy; 2025 StreamLine. All rights reserved.</p>
</div>
</footer>
)
}

View File

@ -1,27 +0,0 @@
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>
)
}

View File

@ -1,23 +0,0 @@
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>
)
}

View File

@ -1,47 +0,0 @@
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>
)
}

View File

@ -1,53 +0,0 @@
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>
)
}

View File

@ -1,21 +0,0 @@
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>
)
}

View File

@ -1,37 +0,0 @@
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>
)
}

View File

@ -2,6 +2,7 @@ import "./globals.css"
import { Inter } from "next/font/google" import { Inter } from "next/font/google"
import Navbar from "@/components/navbar" import Navbar from "@/components/navbar"
import MouseMoveEffect from "@/components/mouse-move-effect" import MouseMoveEffect from "@/components/mouse-move-effect"
import DocSidebar from "@/components/DocSidebar"
import type React from "react" import type React from "react"
import type { Metadata } from "next" import type { Metadata } from "next"
@ -66,7 +67,10 @@ export default function RootLayout({
<body className={`${inter.className} bg-background text-foreground antialiased`}> <body className={`${inter.className} bg-background text-foreground antialiased`}>
<Navbar /> <Navbar />
<MouseMoveEffect /> <MouseMoveEffect />
<div className="pt-16 md:pt-16">{children}</div> <div className="flex flex-col md:flex-row min-h-screen">
<DocSidebar />
<main className="flex-1 p-4 md:p-6 pt-32 md:pt-6">{children}</main>
</div>
</body> </body>
</html> </html>
) )

View File

@ -128,9 +128,9 @@ export default function DocSidebar() {
return ( return (
<> <>
<div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200"> <div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200 h-12">
<button <button
className="w-full p-4 text-left flex items-center justify-between" className="w-full h-full px-4 text-left flex items-center justify-between"
onClick={toggleMobileMenu} onClick={toggleMobileMenu}
aria-label="Toggle menu" aria-label="Toggle menu"
> >
@ -139,7 +139,7 @@ export default function DocSidebar() {
</button> </button>
</div> </div>
<nav <nav
className={`fixed md:static top-[104px] left-0 w-full h-[calc(100vh-104px)] md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${ className={`fixed md:static top-[112px] left-0 w-full h-[calc(100vh-112px)] md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${
isMobileMenuOpen ? "translate-y-0" : "-translate-y-full" isMobileMenuOpen ? "translate-y-0" : "-translate-y-full"
} md:translate-y-0 transition-transform duration-300 ease-in-out overflow-y-auto z-30`} } md:translate-y-0 transition-transform duration-300 ease-in-out overflow-y-auto z-30`}
> >

Binary file not shown.

Before

Width:  |  Height:  |  Size: 605 KiB

After

Width:  |  Height:  |  Size: 739 KiB