Gitlab-Migration/demo-websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update homepage, add demos data.

Browse Source 
* display ydemo sections dynamically.
* Introduced a new `demos.ts` file for demo content management.
* Added `framer-motion` for animations and updated dependencies in `package.json`.
This commit is contained in:
Thatsaphorn
2025-06-07 08:28:38 +02:00
parent 4d3def4ed7
commit fce60ba750
6 changed files with 195 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.run/main-website.run.xml Normal file
View File

@@ -0,0 +1,12 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="main-website" type="js.build_tools.npm">
<package-json value="$PROJECT_DIR$/main-website/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
</component>

55
main-website/app/data/demos.ts Normal file
View File

@@ -0,0 +1,55 @@
export const demoCategories = [
{
label: 'Anwaltskanzlei',
items: [
{
name: 'Anwaltskanzlei Demo 1',
url: 'http://localhost:5101',
preview: '/previews/lawfirm-1.png',
description: [
'Modernes Design',
'Dunkles Layout',
'Optimiert für Rechtsanwälte',
],
},
{
name: 'Anwaltskanzlei Demo 2',
url: 'http://localhost:5102',
preview: '/previews/lawfirm-1.png',
description: [
'Modernes Design',
'Dunkles Layout',
'Optimiert für Rechtsanwälte',
'Optimiert für Rechtsanwälte 1',
],
},
{
name: 'Anwaltskanzlei Demo 2',
url: 'http://localhost:5102',
preview: '/previews/lawfirm-1.png',
description: [
'Modernes Design',
'Dunkles Layout',
'Optimiert für Rechtsanwälte',
'Optimiert für Rechtsanwälte 2',
'Optimiert für Rechtsanwälte 3',
],
},
],
},
{
label: 'SaaS',
items: [
{
name: 'SaaS Landing Page',
url: 'http://localhost:5201',
preview: '/previews/saas-1.png',
description: [
'Klares und minimales UI',
'Produktorientiertes Layout',
'Responsive + animiert',
],
},
],
},
]

38
main-website/app/layout.tsx
View File

@@ -1,34 +1,34 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import type {Metadata} from "next";
import {Geist, Geist_Mono} from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Demo | Rhein-Software",
description: "Demos für Rhein-Software",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
</body>
</html>
);
}

159
main-website/app/page.tsx
View File

@@ -1,103 +1,62 @@
import Image from "next/image";
'use client'
import {demoCategories} from './data/demos'
import Image from 'next/image'
import Link from 'next/link'
import {motion} from 'framer-motion'
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
return (
<main className="min-h-screen bg-zinc-900 text-white py-10 px-6 font-sans">
<h1 className="text-4xl font-bold text-center mb-12">Demos</h1>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
}
{demoCategories.map((section) => (
<section key={section.label} className="mb-16">
<h2 className="text-2xl font-semibold mb-6">{section.label}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{section.items.map((demo) => (
<motion.div
key={demo.name}
className="flex flex-col rounded-lg border border-zinc-700 shadow-md overflow-hidden bg-zinc-800"
initial={{opacity: 0, y: 20}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.4}}
>
<Image
src={demo.preview}
alt={`${demo.name} Vorschau`}
width={600}
height={300}
className="w-full h-auto object-cover"
/>
<div className="flex flex-col flex-1 p-4">
<h3 className="text-xl font-semibold mb-2">{demo.name}</h3>
{demo.description?.length > 0 && (
<ul className="text-sm text-zinc-400 list-disc list-inside space-y-1 mb-4">
{demo.description.map((line, i) => (
<li key={i}>{line}</li>
))}
</ul>
)}
<div className="mt-auto">
<Link
href={demo.url}
target="_blank"
className="block text-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded w-full transition-colors"
>
Demo Öffnen
</Link>
</div>
</div>
</motion.div>
))}
</div>
</section>
))}
</main>
)
}

43
main-website/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "main-website",
"version": "0.1.0",
"dependencies": {
"framer-motion": "^12.16.0",
"next": "15.3.3",
"react": "^19.0.0",
"react-dom": "^19.0.0"
@@ -3306,6 +3307,33 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/framer-motion": {
"version": "12.16.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.16.0.tgz",
"integrity": "sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.16.0",
"motion-utils": "^12.12.1",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4578,6 +4606,21 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/motion-dom": {
"version": "12.16.0",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.16.0.tgz",
"integrity": "sha512-Z2nGwWrrdH4egLEtgYMCEN4V2qQt1qxlKy/uV7w691ztyA41Q5Rbn0KNGbsNVDZr9E8PD2IOQ3hSccRnB6xWzw==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.12.1"
}
},
"node_modules/motion-utils": {
"version": "12.12.1",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.12.1.tgz",
"integrity": "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==",
"license": "MIT"
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

13
main-website/package.json
View File

@@ -9,19 +9,20 @@
"lint": "next lint"
},
"dependencies": {
"framer-motion": "^12.16.0",
"next": "15.3.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.3"
"react-dom": "^19.0.0"
},
"devDependencies": {
"typescript": "^5",
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.3",
"@eslint/eslintrc": "^3"
"tailwindcss": "^4",
"typescript": "^5"
}
}