Skip to content

Commit 9d859ec

Browse files
claudeclaude
committed
Replace static HTML landing with Next.js + Devup UI
- Remove static index.html - Create Next.js-based landing page using Devup UI - Add complete landing page structure: - Hero section with key value propositions - Features section highlighting 6 core capabilities - Code examples with 4 practical demos - Packages overview for all 9 devup-api packages - Footer with company info and resource links - Configure Next.js 15 with App Router - Setup Devup UI theme with custom color scheme - Use Devup UI components (Box, Container, Grid, Flex) - Add responsive design with mobile-first approach - Include TypeScript configuration
1 parent a9d7226 commit 9d859ec

File tree

14 files changed

+955
-669
lines changed

14 files changed

+955
-669
lines changed

‎index.html‎

Lines changed: 0 additions & 669 deletions
This file was deleted.

‎landing/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
# devup-ui
39+
/df

‎landing/README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Devup API Landing Page
2+
3+
This is the landing page for Devup API, built with **Next.js** and **Devup UI**.
4+
5+
## Tech Stack
6+
7+
- **Next.js 15+** - React framework with App Router
8+
- **Devup UI** - Zero-runtime CSS-in-JS styling library
9+
- **TypeScript** - Type safety
10+
- **React 19** - Latest React features
11+
12+
## Getting Started
13+
14+
### Install Dependencies
15+
16+
```bash
17+
npm install
18+
# or
19+
pnpm install
20+
# or
21+
yarn install
22+
```
23+
24+
### Run Development Server
25+
26+
```bash
27+
npm run dev
28+
```
29+
30+
Open [http://localhost:3000](http://localhost:3000) to see the landing page.
31+
32+
### Build for Production
33+
34+
```bash
35+
npm run build
36+
```
37+
38+
This will generate a static export in the `out/` directory.
39+
40+
### Preview Production Build
41+
42+
```bash
43+
npm run start
44+
```
45+
46+
## Project Structure
47+
48+
```
49+
landing/
50+
├── public/ # Static assets
51+
├── src/
52+
│ ├── app/ # Next.js App Router
53+
│ │ ├── layout.tsx
54+
│ │ ├── page.tsx
55+
│ │ ├── Hero.tsx
56+
│ │ ├── Features.tsx
57+
│ │ ├── CodeExamples.tsx
58+
│ │ ├── Packages.tsx
59+
│ │ └── Footer.tsx
60+
│ └── components/ # Reusable components
61+
├── devup.json # Devup UI theme configuration
62+
├── next.config.ts # Next.js configuration
63+
├── tsconfig.json # TypeScript configuration
64+
└── package.json
65+
```
66+
67+
## Customization
68+
69+
### Theme
70+
71+
Edit `devup.json` to customize colors, typography, spacing, and breakpoints.
72+
73+
### Content
74+
75+
- **Hero Section**: `src/app/Hero.tsx`
76+
- **Features**: `src/app/Features.tsx`
77+
- **Code Examples**: `src/app/CodeExamples.tsx`
78+
- **Packages**: `src/app/Packages.tsx`
79+
- **Footer**: `src/app/Footer.tsx`
80+
81+
## Learn More
82+
83+
- [Next.js Documentation](https://nextjs.org/docs)
84+
- [Devup UI Documentation](https://github.com/dev-five-git/devup-ui)
85+
- [Devup API Documentation](https://github.com/dev-five-git/devup-api)

‎landing/devup.json‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
{
2+
"theme": {
3+
"colors": {
4+
"light": {
5+
"primary": "#2563eb",
6+
"primaryHover": "#1d4ed8",
7+
"secondary": "#3b82f6",
8+
"accent": "#8b5cf6",
9+
"text": "#1f2937",
10+
"textLight": "#6b7280",
11+
"textMuted": "#9ca3af",
12+
"bg": "#ffffff",
13+
"bgSecondary": "#f9fafb",
14+
"bgTertiary": "#f3f4f6",
15+
"border": "#e5e7eb",
16+
"success": "#10b981",
17+
"warning": "#f59e0b",
18+
"error": "#ef4444",
19+
"codeBg": "#1f2937",
20+
"codeText": "#e5e7eb"
21+
},
22+
"dark": {
23+
"primary": "#60a5fa",
24+
"primaryHover": "#3b82f6",
25+
"secondary": "#1e40af",
26+
"accent": "#a78bfa",
27+
"text": "#f3f4f6",
28+
"textLight": "#d1d5db",
29+
"textMuted": "#9ca3af",
30+
"bg": "#111827",
31+
"bgSecondary": "#1f2937",
32+
"bgTertiary": "#374151",
33+
"border": "#374151",
34+
"success": "#34d399",
35+
"warning": "#fbbf24",
36+
"error": "#f87171",
37+
"codeBg": "#0f172a",
38+
"codeText": "#e2e8f0"
39+
}
40+
},
41+
"textStyles": {
42+
"h1": {
43+
"fontSize": ["2rem", "2.5rem", "3.5rem"],
44+
"fontWeight": 800,
45+
"lineHeight": 1.2,
46+
"letterSpacing": "-0.02em"
47+
},
48+
"h2": {
49+
"fontSize": ["1.75rem", "2rem", "2.5rem"],
50+
"fontWeight": 700,
51+
"lineHeight": 1.3,
52+
"letterSpacing": "-0.02em"
53+
},
54+
"h3": {
55+
"fontSize": ["1.25rem", "1.5rem", "1.75rem"],
56+
"fontWeight": 600,
57+
"lineHeight": 1.4,
58+
"letterSpacing": "-0.01em"
59+
},
60+
"body": {
61+
"fontSize": ["0.875rem", "1rem", "1.125rem"],
62+
"fontWeight": 400,
63+
"lineHeight": 1.6
64+
},
65+
"bodyLarge": {
66+
"fontSize": ["1rem", "1.125rem", "1.25rem"],
67+
"fontWeight": 400,
68+
"lineHeight": 1.6
69+
},
70+
"button": {
71+
"fontSize": "1rem",
72+
"fontWeight": 600,
73+
"lineHeight": 1
74+
},
75+
"code": {
76+
"fontFamily": "Monaco, 'Courier New', monospace",
77+
"fontSize": "0.875rem",
78+
"lineHeight": 1.6
79+
}
80+
},
81+
"spacing": {
82+
"xs": "0.25rem",
83+
"sm": "0.5rem",
84+
"md": "1rem",
85+
"lg": "1.5rem",
86+
"xl": "2rem",
87+
"2xl": "3rem",
88+
"3xl": "4rem",
89+
"4xl": "6rem"
90+
},
91+
"breakpoints": {
92+
"sm": "640px",
93+
"md": "768px",
94+
"lg": "1024px",
95+
"xl": "1280px"
96+
}
97+
}
98+
}

‎landing/next.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { NextConfig } from 'next'
2+
import DevupUI from '@devup-ui/next-plugin'
3+
4+
const nextConfig: NextConfig = {
5+
pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
6+
output: 'export',
7+
reactCompiler: true,
8+
}
9+
10+
export default DevupUI(nextConfig)

‎landing/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "devup-api-landing",
3+
"version": "0.1.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "next dev",
8+
"build": "next build",
9+
"start": "next start",
10+
"lint": "next lint"
11+
},
12+
"dependencies": {
13+
"@devup-ui/react": "latest",
14+
"@devup-ui/reset": "latest",
15+
"clsx": "^2.1.1",
16+
"next": "^15.1.3",
17+
"react": "^19.0.0",
18+
"react-dom": "^19.0.0"
19+
},
20+
"devDependencies": {
21+
"@devup-ui/next-plugin": "latest",
22+
"@types/node": "^22",
23+
"@types/react": "^19",
24+
"@types/react-dom": "^19",
25+
"eslint": "^9",
26+
"eslint-config-next": "^15.1.3",
27+
"typescript": "^5"
28+
}
29+
}

‎landing/src/app/CodeExamples.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
'use client'
2+
3+
import { Box, Container, Grid } from '@devup-ui/react'
4+
5+
const examples = [
6+
{
7+
title: 'Installation & Setup',
8+
code: `// Install for your build tool
9+
npm install @devup-api/fetch @devup-api/vite-plugin
10+
11+
// vite.config.ts
12+
import { defineConfig } from 'vite'
13+
import devupApi from '@devup-api/vite-plugin'
14+
15+
export default defineConfig({
16+
plugins: [devupApi()],
17+
})`,
18+
},
19+
{
20+
title: 'Basic Usage',
21+
code: `import { createApi } from '@devup-api/fetch'
22+
23+
const api = createApi('https://api.example.com')
24+
25+
// Use operationId
26+
const users = await api.get('getUsers', {})
27+
28+
// Or use the path directly
29+
const user = await api.get('/users/{id}', {
30+
params: { id: '123' },
31+
})`,
32+
},
33+
{
34+
title: 'React Query Integration',
35+
code: `import { createQueryClient } from '@devup-api/react-query'
36+
37+
const queryClient = createQueryClient(api)
38+
39+
function UserProfile({ userId }) {
40+
const { data, isLoading } = queryClient.useQuery(
41+
'get',
42+
'/users/{id}',
43+
{ params: { id: userId } }
44+
)
45+
return <div>{data?.name}</div>
46+
}`,
47+
},
48+
{
49+
title: 'Type References',
50+
code: `import { type DevupObject } from '@devup-api/fetch'
51+
52+
// Access response types
53+
type User = DevupObject['User']
54+
type Product = DevupObject['Product']
55+
56+
// Request types
57+
type CreateUserRequest =
58+
DevupObject<'request'>['CreateUserBody']`,
59+
},
60+
]
61+
62+
export default function CodeExamples() {
63+
return (
64+
<Box
65+
as="section"
66+
py={['2xl', '3xl']}
67+
bg="#f9fafb"
68+
>
69+
<Container maxW="1200px" px="lg">
70+
<Box
71+
as="h2"
72+
textStyle="h2"
73+
textAlign="center"
74+
mb="2xl"
75+
>
76+
💻 Quick Examples
77+
</Box>
78+
79+
<Grid
80+
gridTemplateColumns={['1fr', '1fr', 'repeat(2, 1fr)']}
81+
gap="xl"
82+
>
83+
{examples.map((example, index) => (
84+
<Box
85+
key={index}
86+
bg="#1f2937"
87+
borderRadius="12px"
88+
overflow="hidden"
89+
boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)"
90+
>
91+
<Box
92+
px="xl"
93+
py="md"
94+
bg="rgba(255, 255, 255, 0.05)"
95+
borderBottom="1px solid rgba(255, 255, 255, 0.1)"
96+
color="#9ca3af"
97+
fontSize="0.875rem"
98+
fontWeight={600}
99+
>
100+
{example.title}
101+
</Box>
102+
<Box
103+
as="pre"
104+
p="xl"
105+
color="#e5e7eb"
106+
fontSize="0.875rem"
107+
lineHeight={1.6}
108+
fontFamily="Monaco, 'Courier New', monospace"
109+
overflowX="auto"
110+
m={0}
111+
>
112+
<code>{example.code}</code>
113+
</Box>
114+
</Box>
115+
))}
116+
</Grid>
117+
</Container>
118+
</Box>
119+
)
120+
}

0 commit comments

Comments
 (0)