dev-five-git · owjs3901 · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
diff --git a/landing/.gitignore b/landing/.gitignore
@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# devup-ui
+/df
diff --git a/landing/README.md b/landing/README.md
@@ -0,0 +1,85 @@
+# Devup API Landing Page
+
+This is the landing page for Devup API, built with **Next.js** and **Devup UI**.
+
+## Tech Stack
+
+- **Next.js 15+** - React framework with App Router
+- **Devup UI** - Zero-runtime CSS-in-JS styling library
+- **TypeScript** - Type safety
+- **React 19** - Latest React features
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+### Run Development Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the landing page.
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+This will generate a static export in the `out/` directory.
+
+### Preview Production Build
+
+```bash
+npm run start
+```
+
+## Project Structure
+
+```
+landing/
+├── public/          # Static assets
+├── src/
+│   ├── app/         # Next.js App Router
+│   │   ├── layout.tsx
+│   │   ├── page.tsx
+│   │   ├── Hero.tsx
+│   │   ├── Features.tsx
+│   │   ├── CodeExamples.tsx
+│   │   ├── Packages.tsx
+│   │   └── Footer.tsx
+│   └── components/  # Reusable components
+├── devup.json       # Devup UI theme configuration
+├── next.config.ts   # Next.js configuration
+├── tsconfig.json    # TypeScript configuration
+└── package.json
+```
+
+## Customization
+
+### Theme
+
+Edit `devup.json` to customize colors, typography, spacing, and breakpoints.
+
+### Content
+
+- **Hero Section**: `src/app/Hero.tsx`
+- **Features**: `src/app/Features.tsx`
+- **Code Examples**: `src/app/CodeExamples.tsx`
+- **Packages**: `src/app/Packages.tsx`
+- **Footer**: `src/app/Footer.tsx`
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Devup UI Documentation](https://github.com/dev-five-git/devup-ui)
+- [Devup API Documentation](https://github.com/dev-five-git/devup-api)
diff --git a/landing/devup.json b/landing/devup.json
@@ -0,0 +1,98 @@
+{
+  "theme": {
+    "colors": {
+      "light": {
+        "primary": "#2563eb",
+        "primaryHover": "#1d4ed8",
+        "secondary": "#3b82f6",
+        "accent": "#8b5cf6",
+        "text": "#1f2937",
+        "textLight": "#6b7280",
+        "textMuted": "#9ca3af",
+        "bg": "#ffffff",
+        "bgSecondary": "#f9fafb",
+        "bgTertiary": "#f3f4f6",
+        "border": "#e5e7eb",
+        "success": "#10b981",
+        "warning": "#f59e0b",
+        "error": "#ef4444",
+        "codeBg": "#1f2937",
+        "codeText": "#e5e7eb"
+      },
+      "dark": {
+        "primary": "#60a5fa",
+        "primaryHover": "#3b82f6",
+        "secondary": "#1e40af",
+        "accent": "#a78bfa",
+        "text": "#f3f4f6",
+        "textLight": "#d1d5db",
+        "textMuted": "#9ca3af",
+        "bg": "#111827",
+        "bgSecondary": "#1f2937",
+        "bgTertiary": "#374151",
+        "border": "#374151",
+        "success": "#34d399",
+        "warning": "#fbbf24",
+        "error": "#f87171",
+        "codeBg": "#0f172a",
+        "codeText": "#e2e8f0"
+      }
+    },
+    "textStyles": {
+      "h1": {
+        "fontSize": ["2rem", "2.5rem", "3.5rem"],
+        "fontWeight": 800,
+        "lineHeight": 1.2,
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "fontSize": ["1.75rem", "2rem", "2.5rem"],
+        "fontWeight": 700,
+        "lineHeight": 1.3,
+        "letterSpacing": "-0.02em"
+      },
+      "h3": {
+        "fontSize": ["1.25rem", "1.5rem", "1.75rem"],
+        "fontWeight": 600,
+        "lineHeight": 1.4,
+        "letterSpacing": "-0.01em"
+      },
+      "body": {
+        "fontSize": ["0.875rem", "1rem", "1.125rem"],
+        "fontWeight": 400,
+        "lineHeight": 1.6
+      },
+      "bodyLarge": {
+        "fontSize": ["1rem", "1.125rem", "1.25rem"],
+        "fontWeight": 400,
+        "lineHeight": 1.6
+      },
+      "button": {
+        "fontSize": "1rem",
+        "fontWeight": 600,
+        "lineHeight": 1
+      },
+      "code": {
+        "fontFamily": "Monaco, 'Courier New', monospace",
+        "fontSize": "0.875rem",
+        "lineHeight": 1.6
+      }
+    },
+    "spacing": {
+      "xs": "0.25rem",
+      "sm": "0.5rem",
+      "md": "1rem",
+      "lg": "1.5rem",
+      "xl": "2rem",
+      "2xl": "3rem",
+      "3xl": "4rem",
+      "4xl": "6rem"
+    },
+    "breakpoints": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  }
+}
diff --git a/landing/next.config.ts b/landing/next.config.ts
@@ -0,0 +1,10 @@
+import type { NextConfig } from 'next'
+import DevupUI from '@devup-ui/next-plugin'
+
+const nextConfig: NextConfig = {
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  output: 'export',
+  reactCompiler: true,
+}
+
+export default DevupUI(nextConfig)
diff --git a/landing/package.json b/landing/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "devup-api-landing",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@devup-ui/react": "latest",
+    "@devup-ui/reset": "latest",
+    "clsx": "^2.1.1",
+    "next": "^15.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@devup-ui/next-plugin": "latest",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "^15.1.3",
+    "typescript": "^5"
+  }
+}
diff --git a/landing/src/app/CodeExamples.tsx b/landing/src/app/CodeExamples.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { Box, Container, Grid } from '@devup-ui/react'
+
+const examples = [
+  {
+    title: 'Installation & Setup',
+    code: `// Install for your build tool
+npm install @devup-api/fetch @devup-api/vite-plugin
+
+// vite.config.ts
+import { defineConfig } from 'vite'
+import devupApi from '@devup-api/vite-plugin'
+
+export default defineConfig({
+  plugins: [devupApi()],
+})`,
+  },
+  {
+    title: 'Basic Usage',
+    code: `import { createApi } from '@devup-api/fetch'
+
+const api = createApi('https://api.example.com')
+
+// Use operationId
+const users = await api.get('getUsers', {})
+
+// Or use the path directly
+const user = await api.get('/users/{id}', {
+  params: { id: '123' },
+})`,
+  },
+  {
+    title: 'React Query Integration',
+    code: `import { createQueryClient } from '@devup-api/react-query'
+
+const queryClient = createQueryClient(api)
+
+function UserProfile({ userId }) {
+  const { data, isLoading } = queryClient.useQuery(
+    'get',
+    '/users/{id}',
+    { params: { id: userId } }
+  )
+  return <div>{data?.name}</div>
+}`,
+  },
+  {
+    title: 'Type References',
+    code: `import { type DevupObject } from '@devup-api/fetch'
+
+// Access response types
+type User = DevupObject['User']
+type Product = DevupObject['Product']
+
+// Request types
+type CreateUserRequest =
+  DevupObject<'request'>['CreateUserBody']`,
+  },
+]
+
+export default function CodeExamples() {
+  return (
+    <Box
+      as="section"
+      py={['2xl', '3xl']}
+      bg="#f9fafb"
+    >
+      <Container maxW="1200px" px="lg">
+        <Box
+          as="h2"
+          textStyle="h2"
+          textAlign="center"
+          mb="2xl"
+        >
+          💻 Quick Examples
+        </Box>
+
+        <Grid
+          gridTemplateColumns={['1fr', '1fr', 'repeat(2, 1fr)']}
+          gap="xl"
+        >
+          {examples.map((example, index) => (
+            <Box
+              key={index}
+              bg="#1f2937"
+              borderRadius="12px"
+              overflow="hidden"
+              boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)"
+            >
+              <Box
+                px="xl"
+                py="md"
+                bg="rgba(255, 255, 255, 0.05)"
+                borderBottom="1px solid rgba(255, 255, 255, 0.1)"
+                color="#9ca3af"
+                fontSize="0.875rem"
+                fontWeight={600}
+              >
+                {example.title}
+              </Box>
+              <Box
+                as="pre"
+                p="xl"
+                color="#e5e7eb"
+                fontSize="0.875rem"
+                lineHeight={1.6}
+                fontFamily="Monaco, 'Courier New', monospace"
+                overflowX="auto"
+                m={0}
+              >
+                <code>{example.code}</code>
+              </Box>
+            </Box>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  )
+}