Skip to content

Commit 108164c

Browse files
naheel0naheel0
authored
Merge pull request #17 from BeyteFlow/frontend
update frontend
2 parents 9f0515b + 47b786d commit 108164c

10 files changed

Lines changed: 501 additions & 32 deletions

File tree

‎src/app/docs/page.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
"use client";
2+
import React from 'react';
3+
import { Navbar } from '@/components/layout/Navbar';
4+
import { Footer } from '@/components/layout/Footer';
5+
import { ChevronRight, Terminal } from 'lucide-react';
6+
7+
export default function DocsPage() {
8+
const navLinks = [
9+
{ name: 'Home', href: '/' },
10+
{ name: 'Features', href: '/features' },
11+
{ name: 'Examples', href: '/examples' },
12+
{ name: 'Docs', href: '/docs' },
13+
];
14+
15+
return (
16+
<div className="min-h-screen bg-black text-white">
17+
<Navbar links={navLinks} />
18+
<main className="pt-32 pb-20 max-w-7xl mx-auto px-4 flex flex-col md:flex-row gap-12">
19+
20+
{/* Sidebar Nav */}
21+
<aside className="w-full md:w-64 space-y-8">
22+
<div>
23+
<h4 className="text-xs font-bold uppercase tracking-widest text-blue-500 mb-4">Introduction</h4>
24+
<ul className="space-y-3 text-sm text-gray-400">
25+
<li className="text-white font-medium cursor-pointer">Getting Started</li>
26+
<li className="hover:text-white cursor-pointer">Core Concepts</li>
27+
<li className="hover:text-white cursor-pointer">Security</li>
28+
</ul>
29+
</div>
30+
<div>
31+
<h4 className="text-xs font-bold uppercase tracking-widest text-gray-500 mb-4">Configuration</h4>
32+
<ul className="space-y-3 text-sm text-gray-400">
33+
<li className="hover:text-white cursor-pointer">Custom Prompts</li>
34+
<li className="hover:text-white cursor-pointer">Template Styles</li>
35+
</ul>
36+
</div>
37+
</aside>
38+
39+
{/* Main Content */}
40+
<div className="flex-1 max-w-3xl">
41+
<h1 className="text-4xl font-bold mb-6">Getting Started</h1>
42+
<p className="text-gray-400 text-lg mb-8 leading-relaxed">
43+
ReadmeGenAI is designed to be plug-and-play. Our goal is to remove the friction
44+
of writing documentation so you can focus on writing code.
45+
</p>
46+
47+
<div className="space-y-12">
48+
<section>
49+
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
50+
1. Provide your URL
51+
</h2>
52+
<p className="text-gray-400 mb-4">
53+
Enter your public GitHub repository URL into the generator. Ensure the repo
54+
contains at least a main entry point (like `index.js` or `main.py`).
55+
</p>
56+
</section>
57+
58+
<section className="p-6 rounded-2xl bg-zinc-900 border border-white/5">
59+
<div className="flex items-center gap-2 mb-4 text-blue-400 font-mono text-sm">
60+
<Terminal size={16} />
61+
<span>Quick Start Command</span>
62+
</div>
63+
<code className="text-sm bg-black p-4 rounded-lg block border border-white/10 text-zinc-300">
64+
npx readmegenai@latest --repo [your-url]
65+
</code>
66+
</section>
67+
68+
<section>
69+
<h2 className="text-2xl font-bold mb-4">2. AI Analysis</h2>
70+
<p className="text-gray-400 mb-4">
71+
Our engine uses Octokit to build a virtual file tree. This tree is passed to
72+
Gemini 2.5 Flash with a specific context window optimized for software architecture.
73+
</p>
74+
</section>
75+
</div>
76+
</div>
77+
</main>
78+
<Footer />
79+
</div>
80+
);
81+
}

‎src/app/examples/page.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
"use client";
2+
import React from 'react';
3+
import { Navbar } from '@/components/layout/Navbar';
4+
import { Footer } from '@/components/layout/Footer';
5+
import { Button } from '@/components/ui/Button';
6+
import { ExternalLink, Star, Box, Cpu, Globe } from 'lucide-react';
7+
import Link from 'next/link';
8+
9+
const examples = [
10+
{
11+
title: "Modern Web App",
12+
repo: "nextjs-saas-template",
13+
icon: <Globe className="text-blue-400" />,
14+
tags: ["Next.js 16", "Tailwind", "Prisma"],
15+
stars: "1.2k",
16+
description: "A comprehensive README featuring deployment guides, environment variable tables, and architecture diagrams."
17+
},
18+
{
19+
title: "Utility Library",
20+
repo: "ts-utils-core",
21+
icon: <Box className="text-emerald-400" />,
22+
tags: ["TypeScript", "Rollup", "Vitest"],
23+
stars: "850",
24+
description: "Technical-heavy documentation with API references, installation via multiple package managers, and usage snippets."
25+
},
26+
{
27+
title: "Backend Engine",
28+
repo: "go-stream-processor",
29+
icon: <Cpu className="text-purple-400" />,
30+
tags: ["Go", "Docker", "Redis"],
31+
stars: "2.4k",
32+
description: "High-performance oriented README focusing on benchmark results, configuration flags, and horizontal scaling."
33+
}
34+
];
35+
36+
export default function ExamplesPage() {
37+
const navLinks = [
38+
{ name: 'Home', href: '/' },
39+
{ name: 'Features', href: '/#features' },
40+
{ name: 'Examples', href: '/examples' },
41+
{ name: 'Docs', href: '#docs' },
42+
];
43+
44+
return (
45+
<div className="min-h-screen bg-black text-white selection:bg-white/30">
46+
<Navbar links={navLinks} />
47+
48+
<main className="pt-32 pb-20 px-4">
49+
{/* Header Section */}
50+
<div className="max-w-5xl mx-auto text-center mb-20">
51+
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tighter mb-6">
52+
Trusted by developers <br />
53+
<span className="bg-clip-text text-transparent bg-linear-to-b from-white to-white/40">
54+
to tell their story.
55+
</span>
56+
</h1>
57+
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
58+
Explore how ReadmeGenAI adapts to different tech stacks and project scales to create documentation that converts visitors into users.
59+
</p>
60+
</div>
61+
62+
{/* Examples Grid */}
63+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
64+
{examples.map((example, idx) => (
65+
<div
66+
key={idx}
67+
className="group relative p-8 rounded-3xl bg-zinc-950 border border-white/5 hover:border-white/20 transition-all duration-300"
68+
>
69+
<div className="flex justify-between items-start mb-6">
70+
<div className="p-3 rounded-2xl bg-white/5 group-hover:bg-white/10 transition-colors">
71+
{example.icon}
72+
</div>
73+
<div className="flex items-center gap-1 text-xs font-medium text-gray-500">
74+
<Star size={12} className="fill-current text-amber-500/50" />
75+
{example.stars}
76+
</div>
77+
</div>
78+
79+
<h3 className="text-xl font-bold mb-2 group-hover:text-blue-400 transition-colors">
80+
{example.title}
81+
</h3>
82+
<p className="text-sm text-gray-500 font-mono mb-4">
83+
{example.repo}
84+
</p>
85+
<p className="text-gray-400 text-sm leading-relaxed mb-6">
86+
{example.description}
87+
</p>
88+
89+
<div className="flex flex-wrap gap-2 mb-8">
90+
{example.tags.map(tag => (
91+
<span key={tag} className="px-2 py-1 rounded-md bg-white/5 text-[10px] font-semibold tracking-wider uppercase text-gray-400">
92+
{tag}
93+
</span>
94+
))}
95+
</div>
96+
97+
<Link href="/#search-input">
98+
<Button variant="outline" className="w-full text-sm py-2">
99+
Try this style
100+
<ExternalLink size={14} />
101+
</Button>
102+
</Link>
103+
</div>
104+
))}
105+
</div>
106+
107+
{/* Bottom CTA */}
108+
<div className="mt-32 max-w-4xl mx-auto p-12 rounded-[3rem] bg-linear-to-b from-zinc-900 to-black border border-white/5 text-center">
109+
<h2 className="text-3xl font-bold mb-6">Ready to document your project?</h2>
110+
<Link href="/generate">
111+
<Button className="px-12 py-6 text-lg">
112+
Start Generating for Free
113+
</Button>
114+
</Link>
115+
</div>
116+
</main>
117+
118+
<Footer />
119+
</div>
120+
);
121+
}

‎src/app/features/page.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
"use client";
2+
import React from 'react';
3+
import { Navbar } from '@/components/layout/Navbar';
4+
import { Footer } from '@/components/layout/Footer';
5+
import { Cpu, Globe, ShieldCheck, Sparkles, Zap, Code2 } from 'lucide-react';
6+
7+
const features = [
8+
{
9+
icon: <Sparkles className="text-blue-400" />,
10+
title: "Gemini 2.5 Intelligence",
11+
desc: "Leverages the latest LLM to understand not just your files, but the intent behind your code."
12+
},
13+
{
14+
icon: <Globe className="text-emerald-400" />,
15+
title: "Octokit Integration",
16+
desc: "Seamlessly pulls repository metadata, stars, and real-time structure directly from GitHub."
17+
},
18+
{
19+
icon: <ShieldCheck className="text-purple-400" />,
20+
title: "Security First",
21+
desc: "We never store your code. We only analyze structure and public metadata to ensure your IP stays yours."
22+
},
23+
{
24+
icon: <Zap className="text-amber-400" />,
25+
title: "Instant Generation",
26+
desc: "Generate a complete, production-ready README in under 5 seconds—saving hours of manual writing."
27+
},
28+
{
29+
icon: <Code2 className="text-pink-400" />,
30+
title: "Framework Aware",
31+
desc: "Automatically detects Next.js, Go, Python, and more to provide relevant setup instructions."
32+
},
33+
{
34+
icon: <Cpu className="text-indigo-400" />,
35+
title: "Custom Logic",
36+
desc: "Uses custom-tuned prompts to ensure your documentation sounds human, professional, and clear."
37+
}
38+
];
39+
40+
export default function FeaturesPage() {
41+
const navLinks = [
42+
{ name: 'Home', href: '/' },
43+
{ name: 'Features', href: '/features' },
44+
{ name: 'Examples', href: '/examples' },
45+
{ name: 'Docs', href: '/docs' },
46+
];
47+
48+
return (
49+
<div className="min-h-screen bg-black text-white">
50+
<Navbar links={navLinks} />
51+
<main className="pt-32 pb-20 px-4">
52+
<div className="max-w-5xl mx-auto text-center mb-20">
53+
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tighter mb-6">
54+
Documentation <br />
55+
<span className="bg-clip-text text-transparent bg-gradient-to-b from-white to-white/40">
56+
reimagined.
57+
</span>
58+
</h1>
59+
</div>
60+
61+
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
62+
{features.map((f, i) => (
63+
<div key={i} className="p-8 rounded-3xl bg-zinc-950 border border-white/5 hover:border-blue-500/30 transition-all group">
64+
<div className="mb-6 p-3 rounded-xl bg-white/5 w-fit group-hover:scale-110 transition-transform">
65+
{f.icon}
66+
</div>
67+
<h3 className="text-xl font-bold mb-3">{f.title}</h3>
68+
<p className="text-gray-400 text-sm leading-relaxed">{f.desc}</p>
69+
</div>
70+
))}
71+
</div>
72+
</main>
73+
<Footer />
74+
</div>
75+
);
76+
}

‎src/app/generate/page.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use client";
2+
import React, { useState } from 'react';
3+
import { Navbar } from '@/components/layout/Navbar';
4+
import { Footer } from '@/components/layout/Footer';
5+
import { SearchInput } from '@/components/Generator/SearchInput';
6+
import { MarkdownPreview } from '@/components/Generator/MarkdownPreview';
7+
8+
export default function GeneratePage() {
9+
const [markdown, setMarkdown] = useState('');
10+
const [isLoading, setIsLoading] = useState(false);
11+
12+
const handleGenerate = async (githubUrl: string) => {
13+
setIsLoading(true);
14+
setMarkdown(''); // Clear previous results
15+
try {
16+
const response = await fetch('/api/generate', {
17+
method: 'POST',
18+
headers: { 'Content-Type': 'application/json' },
19+
body: JSON.stringify({ url: githubUrl }),
20+
});
21+
22+
const data = await response.json();
23+
if (data.markdown) {
24+
setMarkdown(data.markdown);
25+
} else {
26+
alert(data.error || "Something went wrong");
27+
}
28+
} catch (error) {
29+
console.error("Generation failed:", error);
30+
alert("Failed to connect to the server.");
31+
} finally {
32+
setIsLoading(false);
33+
}
34+
};
35+
36+
const navLinks = [
37+
{ name: 'Home', href: '/' },
38+
{ name: 'Features', href: '/features' },
39+
{ name: 'Examples', href: '/examples' },
40+
{ name: 'Docs', href: '/docs' },
41+
];
42+
43+
return (
44+
<div className="min-h-screen bg-black text-white">
45+
<Navbar links={navLinks} />
46+
47+
<main className="pt-40 pb-20 px-4 max-w-6xl mx-auto">
48+
<div className="text-center mb-16 space-y-4">
49+
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">Generate Documentation</h1>
50+
<p className="text-gray-400">Enter your repository URL and let the AI do the heavy lifting.</p>
51+
</div>
52+
53+
<SearchInput onGenerate={handleGenerate} isLoading={isLoading} />
54+
55+
{/* Results will appear here once generated */}
56+
<MarkdownPreview content={markdown} />
57+
58+
{/* Empty state helper */}
59+
{!markdown && !isLoading && (
60+
<div className="mt-20 text-center border border-dashed border-white/5 rounded-3xl py-20 bg-zinc-950/30">
61+
<p className="text-gray-600 font-mono text-sm">Waiting for repository URL...</p>
62+
</div>
63+
)}
64+
</main>
65+
66+
<Footer />
67+
</div>
68+
);
69+
}

‎src/app/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { Code, Layout, FileText } from 'lucide-react';
66

77
export default function Home() {
88
const navLinks = [
9-
{ name: 'Home', href: '#' },
10-
{ name: 'Features', href: '#features' },
11-
{ name: 'Examples', href: '#examples' },
12-
{ name: 'Docs', href: '#docs' },
9+
{ name: 'Home', href: '/' },
10+
{ name: 'Features', href: '/features' },
11+
{ name: 'Examples', href: '/examples' },
12+
{ name: 'Docs', href: '/docs' },
1313
];
1414

1515
const featureList = [

0 commit comments

Comments
 (0)