Skip to content

Commit 1485709

Browse files
tslimtslim
committed
New Website
0 parents  commit 1485709

File tree

80 files changed

+11968
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+11968
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
.DS_Store
3+
.next

‎CHANGELOG.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Changelog
2+
3+
## 2025-07-29
4+
5+
- Update to React 19 and Next.js 15.4
6+
7+
## 2025-02-19
8+
9+
- Fix scroll issues related to the header navigation ([#1700](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1700))
10+
11+
## 2025-04-28
12+
13+
- Update template to Tailwind CSS v4.1.4
14+
15+
## 2025-04-10
16+
17+
- Update template to Tailwind CSS v4.1.3
18+
19+
## 2025-03-22
20+
21+
- Update template to Tailwind CSS v4.0.15
22+
23+
## 2025-02-10
24+
25+
- Update template to Tailwind CSS v4.0.6
26+
27+
## 2025-01-23
28+
29+
- Update template to Tailwind CSS v4.0
30+
31+
## 2024-06-18
32+
33+
- Update `prettier` and `prettier-plugin-tailwindcss` dependencies
34+
35+
## 2024-05-31
36+
37+
- Fix `npm audit` warnings
38+
39+
## 2024-05-07
40+
41+
- Bump Headless UI dependency to v2.0
42+
43+
## 2024-01-17
44+
45+
- Fix `shiki` dependency issues ([#1549](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1549))
46+
- Fix `sharp` dependency issues ([#1549](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1549))
47+
48+
## 2024-01-16
49+
50+
- Replace Twitter with X
51+
52+
## 2024-01-10
53+
54+
- Update Tailwind CSS, Next.js, Prettier, TypeScript, ESLint, and other dependencies
55+
56+
## 2023-09-07
57+
58+
- Added TypeScript version of template
59+
60+
## 2023-08-24
61+
62+
- Add missing `@types/mdx` dependency ([#1496](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1496))
63+
64+
## 2023-08-15
65+
66+
- Bump Next.js and MDX dependencies
67+
68+
## 2023-08-14
69+
70+
- Simplify article and case study metadata
71+
72+
## 2023-07-31
73+
74+
- Port template to Next.js app router
75+
- Fix route handlers with `.js` extensions ([#1484](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1484))
76+
77+
## 2023-07-26
78+
79+
- Add missing `acorn` and `acorn-jsx` dependencies ([#1481](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1481))
80+
81+
## 2023-07-13
82+
83+
- Initial release

‎CLAUDE.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is a **Studio** - a Tailwind Plus site template built with Next.js, TypeScript, and Tailwind CSS. It's a commercial portfolio/agency website template showcasing work, blog posts, and company information.
8+
9+
## Key Technologies
10+
11+
- **Next.js 15** with App Router and MDX support
12+
- **Tailwind CSS 4** with custom design system
13+
- **TypeScript** with strict configuration
14+
- **Framer Motion** for animations
15+
- **MDX** for content management
16+
- **Shiki** for syntax highlighting
17+
18+
## Architecture
19+
20+
### Content Structure
21+
- **Static Pages**: `src/app/(page)/page.tsx` - About, Contact, Process
22+
- **Blog**: `src/app/blog/` with MDX files and wrapper components
23+
- **Work/Case Studies**: `src/app/work/` with MDX files and wrapper components
24+
- **Components**: Reusable UI components in `src/components/`
25+
26+
### MDX Configuration
27+
- Custom MDX processing in `next.config.mjs` with:
28+
- Automatic layout wrapping for blog posts and case studies
29+
- Shiki syntax highlighting
30+
- Image imports via `recma-import-images`
31+
- GFM (GitHub Flavored Markdown) support
32+
33+
### Design System
34+
- Custom Tailwind configuration with neutral color palette
35+
- Responsive-first design with mobile-first approach
36+
- Animation system using Framer Motion
37+
- Typography system in `src/styles/`
38+
- Grid patterns and visual effects via `GridPattern` component
39+
40+
## Development Commands
41+
42+
```bash
43+
# Install dependencies
44+
npm install
45+
46+
# Development server
47+
npm run dev
48+
49+
# Build for production
50+
npm run build
51+
52+
# Start production server
53+
npm run start
54+
55+
# Linting
56+
npm run lint
57+
58+
# Type checking
59+
npx tsc --noEmit
60+
```
61+
62+
## Key File Locations
63+
64+
- **Layout**: `src/app/layout.tsx` (root) + `src/components/RootLayout.tsx` (navigation)
65+
- **Styles**: `src/styles/` - base.css, tailwind.css, typography.css
66+
- **Components**: `src/components/` - reusable UI components
67+
- **Content**: MDX files in `src/app/blog/` and `src/app/work/`
68+
- **Fonts**: `src/fonts/Mona-Sans.var.woff2`
69+
- **Images**: `src/images/` - organized by clients, team, and general
70+
71+
## Content Management
72+
73+
- Blog posts use `wrapper.tsx` for consistent layout
74+
- Case studies use `wrapper.tsx` for work section
75+
- Images are automatically imported and optimized
76+
- MDX supports custom components via `MDXComponents.tsx`
77+
78+
## Navigation Structure
79+
80+
Main navigation sections:
81+
- `/work` - Case studies portfolio
82+
- `/about` - Company information
83+
- `/process` - Development process
84+
- `/blog` - Technical blog posts
85+
- `/contact` - Contact form/information

‎README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Studio
2+
3+
Studio is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
4+
5+
## Getting started
6+
7+
To get started with this template, first install the npm dependencies:
8+
9+
```bash
10+
npm install
11+
```
12+
13+
Next, run the development server:
14+
15+
```bash
16+
npm run dev
17+
```
18+
19+
Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
20+
21+
## Customizing
22+
23+
You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
24+
25+
## License
26+
27+
This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
28+
29+
## Learn more
30+
31+
To learn more about the technologies used in this site template, see the following resources:
32+
33+
- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
34+
- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
35+
- [Framer Motion](https://www.framer.com/docs/) - the official Framer Motion documentation
36+
- [MDX](https://mdxjs.com/) - the official MDX documentation

‎mdx-components.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type MDXComponents as MDXComponentsType } from 'mdx/types'
2+
3+
import { MDXComponents } from '@/components/MDXComponents'
4+
5+
export function useMDXComponents(components: MDXComponentsType) {
6+
return {
7+
...components,
8+
...MDXComponents,
9+
}
10+
}

‎next-env.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎next.config.mjs‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import rehypeShiki from '@leafac/rehype-shiki'
2+
import nextMDX from '@next/mdx'
3+
import { Parser } from 'acorn'
4+
import jsx from 'acorn-jsx'
5+
import escapeStringRegexp from 'escape-string-regexp'
6+
import * as path from 'path'
7+
import { recmaImportImages } from 'recma-import-images'
8+
import remarkGfm from 'remark-gfm'
9+
import { remarkRehypeWrap } from 'remark-rehype-wrap'
10+
import rehypeUnwrapImages from 'rehype-unwrap-images'
11+
import shiki from 'shiki'
12+
import { unifiedConditional } from 'unified-conditional'
13+
14+
/** @type {import('next').NextConfig} */
15+
const nextConfig = {
16+
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
17+
output: 'export',
18+
images: {
19+
unoptimized: true,
20+
},
21+
}
22+
23+
function remarkMDXLayout(source, metaName) {
24+
let parser = Parser.extend(jsx())
25+
let parseOptions = { ecmaVersion: 'latest', sourceType: 'module' }
26+
27+
return (tree) => {
28+
let imp = `import _Layout from '${source}'`
29+
let exp = `export default function Layout(props) {
30+
return <_Layout {...props} ${metaName}={${metaName}} />
31+
}`
32+
33+
tree.children.push(
34+
{
35+
type: 'mdxjsEsm',
36+
value: imp,
37+
data: { estree: parser.parse(imp, parseOptions) },
38+
},
39+
{
40+
type: 'mdxjsEsm',
41+
value: exp,
42+
data: { estree: parser.parse(exp, parseOptions) },
43+
},
44+
)
45+
}
46+
}
47+
48+
export default async function config() {
49+
let highlighter = await shiki.getHighlighter({
50+
theme: 'css-variables',
51+
})
52+
53+
let withMDX = nextMDX({
54+
extension: /\.mdx$/,
55+
options: {
56+
recmaPlugins: [recmaImportImages],
57+
rehypePlugins: [
58+
[rehypeShiki, { highlighter }],
59+
rehypeUnwrapImages,
60+
[
61+
remarkRehypeWrap,
62+
{
63+
node: { type: 'mdxJsxFlowElement', name: 'Typography' },
64+
start: ':root > :not(mdxJsxFlowElement)',
65+
end: ':root > mdxJsxFlowElement',
66+
},
67+
],
68+
],
69+
remarkPlugins: [
70+
remarkGfm,
71+
[
72+
unifiedConditional,
73+
[
74+
new RegExp(`^${escapeStringRegexp(path.resolve('src/app/blog'))}`),
75+
[[remarkMDXLayout, '@/app/blog/wrapper', 'article']],
76+
],
77+
[
78+
new RegExp(`^${escapeStringRegexp(path.resolve('src/app/work'))}`),
79+
[[remarkMDXLayout, '@/app/work/wrapper', 'caseStudy']],
80+
],
81+
],
82+
],
83+
},
84+
})
85+
86+
return withMDX(nextConfig)
87+
}

‎out/404.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><!--HBn3FhdXMsMiERR_5mVzr--><html lang="en" class="h-full bg-sky-900 text-base antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/fd540cb599578843.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-2fc000cf51bc0fa0.js"/><script src="/_next/static/chunks/4bd1b696-cf72ae8a39fa05aa.js" async=""></script><script src="/_next/static/chunks/964-05defa3e0b8af640.js" async=""></script><script src="/_next/static/chunks/main-app-375446b94b31cd99.js" async=""></script><script src="/_next/static/chunks/959-31463ca6a846b33d.js" async=""></script><script src="/_next/static/chunks/292-1ad81b3916604dc2.js" async=""></script><script src="/_next/static/chunks/app/page-ad89143d768e28b3.js" async=""></script><meta name="robots" content="noindex"/><title>Flexnode Solutions - We build and scale products that matter</title><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="flex min-h-full flex-col"><div hidden=""><!--$--><!--/$--></div><div class="mx-auto max-w-7xl px-6 lg:px-8 flex h-full items-center pt-24 sm:pt-32 lg:pt-40"><div class="mx-auto max-w-2xl lg:max-w-none"><div class="flex max-w-xl flex-col items-center text-center" style="opacity:0;transform:translateY(24px)"><p class="font-display text-4xl font-semibold text-sky-200 sm:text-5xl">404</p><h1 class="mt-4 font-display text-2xl font-semibold text-sky-400">Page not found</h1><p class="mt-2 text-sm text-sky-400">Sorry, we couldn’t find the page you’re looking for.</p><a class="mt-4 text-sm font-semibold text-sky-200 transition hover:text-sky-400" href="/">Go to the home page</a></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/webpack-2fc000cf51bc0fa0.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[7555,[],\"\"]\n3:I[1295,[],\"\"]\n4:I[1487,[\"959\",\"static/chunks/959-31463ca6a846b33d.js\",\"292\",\"static/chunks/292-1ad81b3916604dc2.js\",\"974\",\"static/chunks/app/page-ad89143d768e28b3.js\"],\"FadeIn\"]\n5:I[6874,[\"959\",\"static/chunks/959-31463ca6a846b33d.js\",\"292\",\"static/chunks/292-1ad81b3916604dc2.js\",\"974\",\"static/chunks/app/page-ad89143d768e28b3.js\"],\"\"]\n6:I[9665,[],\"OutletBoundary\"]\n8:I[4911,[],\"AsyncMetadataOutlet\"]\na:I[9665,[],\"ViewportBoundary\"]\nc:I[9665,[],\"MetadataBoundary\"]\nd:\"$Sreact.suspense\"\nf:I[8393,[],\"\"]\n:HL[\"/_next/static/css/fd540cb599578843.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"HBn3FhdXMsMiERR-5mVzr\",\"p\":\"\",\"c\":[\"\",\"_not-found\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/fd540cb599578843.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"h-full bg-sky-900 text-base antialiased\",\"children\":[\"$\",\"body\",null,{\"className\":\"flex min-h-full flex-col\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"id\":\"$undefined\",\"className\":\"mx-auto max-w-7xl px-6 lg:px-8 flex h-full items-center pt-24 sm:pt-32 lg:pt-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-2xl lg:max-w-none\",\"children\":[\"$\",\"$L4\",null,{\"className\":\"flex max-w-xl flex-col items-center text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-display text-4xl font-semibold text-sky-200 sm:text-5xl\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-4 font-display text-2xl font-semibold text-sky-400\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-sky-400\",\"children\":\"Sorry, we couldn’t find the page you’re looking for.\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"mt-4 text-sm font-semibold text-sky-200 transition hover:text-sky-400\",\"children\":\"Go to the home page\"}]]}]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"/_not-found\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"id\":\"$undefined\",\"className\":\"mx-auto max-w-7xl px-6 lg:px-8 flex h-full items-center pt-24 sm:pt-32 lg:pt-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-2xl lg:max-w-none\",\"children\":[\"$\",\"$L4\",null,{\"className\":\"flex max-w-xl flex-col items-center text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-display text-4xl font-semibold text-sky-200 sm:text-5xl\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"mt-4 font-display text-2xl font-semibold text-sky-400\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm text-sky-400\",\"children\":\"Sorry, we couldn’t find the page you’re looking for.\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"mt-4 text-sm font-semibold text-sky-200 transition hover:text-sky-400\",\"children\":\"Go to the home page\"}]]}]}]}],null,[\"$\",\"$L6\",null,{\"children\":[\"$L7\",[\"$\",\"$L8\",null,{\"promise\":\"$@9\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],[[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],null],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$d\",null,{\"fallback\":null,\"children\":\"$Le\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n7:null\n"])</script><script>self.__next_f.push([1,"10:I[8175,[],\"IconMark\"]\n9:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Flexnode Solutions - We build and scale products that matter\"}],[\"$\",\"link\",\"1\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$L10\",\"2\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"e:\"$9:metadata\"\n"])</script></body></html>

‎out/_next/static/HBn3FhdXMsMiERR-5mVzr/_buildManifest.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎out/_next/static/HBn3FhdXMsMiERR-5mVzr/_ssgManifest.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
self.__SSG_MANIFEST=new Set([]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

0 commit comments

Comments
 (0)