mirror of
https://github.com/pepaskopec-blip/graduately-web.git
synced 2026-10-27 15:14:34 +00:00
Add a glassmorphism landing page for Graduately.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip
commit
f0b68d315a
22 changed files with 7656 additions and 0 deletions
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
9
AGENTS.md
Normal file
9
AGENTS.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!-- BEGIN:nextjs-agent-rules -->
|
||||||
|
|
||||||
|
# This is NOT the Next.js you know
|
||||||
|
|
||||||
|
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
|
||||||
|
|
||||||
|
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||||||
|
|
||||||
|
<!-- END:nextjs-agent-rules -->
|
||||||
1
CLAUDE.md
Normal file
1
CLAUDE.md
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@AGENTS.md
|
||||||
19
README.md
Normal file
19
README.md
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
# Graduately Web
|
||||||
|
|
||||||
|
Propagační web pro [Graduately](https://github.com/pepaskopec-blip/Graduately) — vzdělávací aplikaci k přípravě na maturitu.
|
||||||
|
|
||||||
|
## Spuštění
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Otevři [http://localhost:3000](http://localhost:3000).
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
- Next.js (App Router)
|
||||||
|
- React
|
||||||
|
- Tailwind CSS
|
||||||
|
- Glassmorphism UI
|
||||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
7
next.config.ts
Normal file
7
next.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
6895
package-lock.json
generated
Normal file
6895
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
package.json
Normal file
26
package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "graduately-web",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "16.3.6",
|
||||||
|
"react": "19.2.8",
|
||||||
|
"react-dom": "19.2.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.3.6",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
BIN
public/screenshots/german.png
Normal file
BIN
public/screenshots/german.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
public/screenshots/subjects.png
Normal file
BIN
public/screenshots/subjects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
public/screenshots/welcome.png
Normal file
BIN
public/screenshots/welcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
264
src/app/globals.css
Normal file
264
src/app/globals.css
Normal file
|
|
@ -0,0 +1,264 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ink: #0f2a2e;
|
||||||
|
--ink-muted: #3d5a5f;
|
||||||
|
--glass: rgba(255, 255, 255, 0.42);
|
||||||
|
--glass-strong: rgba(255, 255, 255, 0.58);
|
||||||
|
--glass-border: rgba(255, 255, 255, 0.55);
|
||||||
|
--accent: #e07a5f;
|
||||||
|
--accent-deep: #c45d42;
|
||||||
|
--teal: #1a8a8a;
|
||||||
|
--sand: #f2e8d5;
|
||||||
|
--font-display: var(--font-fraunces);
|
||||||
|
--font-body: var(--font-sora);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-ink: var(--ink);
|
||||||
|
--color-ink-muted: var(--ink-muted);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-deep: var(--accent-deep);
|
||||||
|
--color-teal: var(--teal);
|
||||||
|
--color-sand: var(--sand);
|
||||||
|
--font-sans: var(--font-sora);
|
||||||
|
--font-display: var(--font-fraunces);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: var(--font-body), system-ui, sans-serif;
|
||||||
|
background: #c8e4e0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: color-mix(in srgb, var(--teal) 35%, transparent);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 10% 20%, #9fd4cf 0%, transparent 55%),
|
||||||
|
radial-gradient(ellipse 70% 50% at 90% 10%, #f0c9a8 0%, transparent 50%),
|
||||||
|
radial-gradient(ellipse 60% 55% at 70% 80%, #7eb8b4 0%, transparent 55%),
|
||||||
|
radial-gradient(ellipse 50% 40% at 20% 85%, #e8d4b8 0%, transparent 50%),
|
||||||
|
linear-gradient(160deg, #b8ddd8 0%, #d4ebe7 40%, #e8dfd0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient__orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.7;
|
||||||
|
animation: drift 18s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient__orb--1 {
|
||||||
|
width: min(48vw, 520px);
|
||||||
|
height: min(48vw, 520px);
|
||||||
|
top: -8%;
|
||||||
|
left: -6%;
|
||||||
|
background: #6db8b2;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient__orb--2 {
|
||||||
|
width: min(42vw, 460px);
|
||||||
|
height: min(42vw, 460px);
|
||||||
|
top: 12%;
|
||||||
|
right: -8%;
|
||||||
|
background: #efb48a;
|
||||||
|
animation-delay: -6s;
|
||||||
|
animation-duration: 22s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient__orb--3 {
|
||||||
|
width: min(55vw, 600px);
|
||||||
|
height: min(55vw, 600px);
|
||||||
|
bottom: -15%;
|
||||||
|
left: 25%;
|
||||||
|
background: #8ec5c0;
|
||||||
|
animation-delay: -11s;
|
||||||
|
animation-duration: 26s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient__noise {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.07;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
|
background-size: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes drift {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0) scale(1);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(3%, 4%) scale(1.05);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(-2%, 2%) scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rise {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(28px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-y {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rise {
|
||||||
|
animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rise-delay-1 {
|
||||||
|
animation-delay: 0.12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rise-delay-2 {
|
||||||
|
animation-delay: 0.24s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rise-delay-3 {
|
||||||
|
animation-delay: 0.36s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rise-delay-4 {
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-soft {
|
||||||
|
animation: float-y 7s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
background: var(--glass);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
backdrop-filter: blur(22px) saturate(1.35);
|
||||||
|
-webkit-backdrop-filter: blur(22px) saturate(1.35);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 0 rgba(255, 255, 255, 0.55) inset,
|
||||||
|
0 18px 40px rgba(15, 42, 46, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-strong {
|
||||||
|
background: var(--glass-strong);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
backdrop-filter: blur(28px) saturate(1.4);
|
||||||
|
-webkit-backdrop-filter: blur(28px) saturate(1.4);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 0 rgba(255, 255, 255, 0.65) inset,
|
||||||
|
0 22px 48px rgba(15, 42, 46, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.9rem 1.55rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fffaf6;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background 0.2s ease,
|
||||||
|
transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--accent-deep);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.9rem 1.4rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.28);
|
||||||
|
color: var(--ink);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
transition:
|
||||||
|
background 0.2s ease,
|
||||||
|
transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.45);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: var(--font-display), Georgia, serif;
|
||||||
|
font-weight: 560;
|
||||||
|
font-size: clamp(1.75rem, 3.5vw, 2.45rem);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.15;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-lead {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
max-width: 36rem;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.ambient__orb,
|
||||||
|
.float-soft,
|
||||||
|
.rise,
|
||||||
|
.rise-delay-1,
|
||||||
|
.rise-delay-2,
|
||||||
|
.rise-delay-3,
|
||||||
|
.rise-delay-4 {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
37
src/app/layout.tsx
Normal file
37
src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Fraunces, Sora } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const sora = Sora({
|
||||||
|
variable: "--font-sora",
|
||||||
|
subsets: ["latin", "latin-ext"],
|
||||||
|
weight: ["400", "500", "600", "700"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const fraunces = Fraunces({
|
||||||
|
variable: "--font-fraunces",
|
||||||
|
subsets: ["latin", "latin-ext"],
|
||||||
|
weight: ["500", "600", "700"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Graduately — příprava na maturitu",
|
||||||
|
description:
|
||||||
|
"Vzdělávací aplikace k přípravě na maturitu. Deutsch, sítě, hardware a čeština — na macOS, Windows, Linux, Android i iOS.",
|
||||||
|
openGraph: {
|
||||||
|
title: "Graduately",
|
||||||
|
description: "Procvičování k maturitě v jednom okně.",
|
||||||
|
type: "website",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||||
|
return (
|
||||||
|
<html
|
||||||
|
lang="cs"
|
||||||
|
className={`${sora.variable} ${fraunces.variable} h-full antialiased`}
|
||||||
|
>
|
||||||
|
<body className="min-h-full font-sans">{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
src/app/page.tsx
Normal file
24
src/app/page.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { Download } from "@/components/Download";
|
||||||
|
import { Features } from "@/components/Features";
|
||||||
|
import { Footer } from "@/components/Footer";
|
||||||
|
import { Hero } from "@/components/Hero";
|
||||||
|
import { Subjects } from "@/components/Subjects";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div id="top" className="relative">
|
||||||
|
<div className="ambient" aria-hidden>
|
||||||
|
<div className="ambient__orb ambient__orb--1" />
|
||||||
|
<div className="ambient__orb ambient__orb--2" />
|
||||||
|
<div className="ambient__orb ambient__orb--3" />
|
||||||
|
<div className="ambient__noise" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Hero />
|
||||||
|
<Subjects />
|
||||||
|
<Features />
|
||||||
|
<Download />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
src/components/Download.tsx
Normal file
81
src/components/Download.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
const platforms = [
|
||||||
|
{
|
||||||
|
name: "macOS",
|
||||||
|
note: "Apple Silicon",
|
||||||
|
href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-macos.zip",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Windows",
|
||||||
|
note: "x64",
|
||||||
|
href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-windows.zip",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Linux",
|
||||||
|
note: "x86_64",
|
||||||
|
href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-linux.zip",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Android",
|
||||||
|
note: "8+",
|
||||||
|
href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-android.zip",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "iOS",
|
||||||
|
note: "26+",
|
||||||
|
href: "https://github.com/pepaskopec-blip/Graduately/raw/main/installers/graduately-installer-ios.zip",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Download() {
|
||||||
|
return (
|
||||||
|
<section id="stahnout" className="px-5 sm:px-8 lg:px-12 py-20 sm:py-28">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="glass-strong rounded-[28px] p-8 sm:p-12">
|
||||||
|
<h2 className="section-title">Stáhni a nainstaluj</h2>
|
||||||
|
<p className="section-lead">
|
||||||
|
Zip rozbalíš a spustíš instalátor. Buildy se aktualizují samy z
|
||||||
|
větve builds.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{platforms.map((platform) => (
|
||||||
|
<a
|
||||||
|
key={platform.name}
|
||||||
|
href={platform.href}
|
||||||
|
className="group flex items-center justify-between gap-4 rounded-2xl border border-white/50 bg-white/35 px-5 py-4 no-underline text-ink backdrop-blur-md transition-[background,transform] duration-200 hover:bg-white/55 hover:-translate-y-0.5"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span className="block font-semibold text-base">
|
||||||
|
{platform.name}
|
||||||
|
</span>
|
||||||
|
<span className="block text-sm text-ink-muted mt-0.5">
|
||||||
|
{platform.note}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="text-accent font-semibold text-sm tracking-wide transition-transform duration-200 group-hover:translate-x-0.5"
|
||||||
|
aria-hidden
|
||||||
|
>
|
||||||
|
↓
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-8 mb-0 text-sm text-ink-muted">
|
||||||
|
Zdrojáky a dokumentace jsou na{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/pepaskopec-blip/Graduately"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-teal font-semibold underline-offset-2 hover:underline"
|
||||||
|
>
|
||||||
|
GitHubu
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
58
src/components/Features.tsx
Normal file
58
src/components/Features.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Učební cesty",
|
||||||
|
text: "Mapa předmětů, uzly lekcí a zamčené placeholdery, které čekají na obsah.",
|
||||||
|
image: "/screenshots/subjects.png",
|
||||||
|
alt: "Obrazovka s mapou předmětů",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cvičení s nápovědou",
|
||||||
|
text: "Německá cesta s vokabeltrainingem, tipy a postupem, který se ukládá.",
|
||||||
|
image: "/screenshots/german.png",
|
||||||
|
alt: "Německá učební cesta v Graduately",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Features() {
|
||||||
|
return (
|
||||||
|
<section id="funkce" className="px-5 sm:px-8 lg:px-12 py-8 sm:py-12 pb-20">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<h2 className="section-title">Jak to vypadá uvnitř</h2>
|
||||||
|
<p className="section-lead">
|
||||||
|
Statistiky, hledání, deset témat a přepínač čeština / angličtina.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-12 grid gap-8 lg:gap-10">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<article
|
||||||
|
key={feature.title}
|
||||||
|
className={`glass-strong rounded-[28px] overflow-hidden grid lg:grid-cols-2 ${
|
||||||
|
index % 2 === 1 ? "lg:[&>*:first-child]:order-2" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="p-8 sm:p-10 flex flex-col justify-center">
|
||||||
|
<h3 className="font-[family-name:var(--font-fraunces)] text-2xl sm:text-3xl font-semibold text-ink m-0">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-3 mb-0 text-ink-muted text-lg leading-relaxed">
|
||||||
|
{feature.text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative min-h-[240px] sm:min-h-[320px]">
|
||||||
|
<Image
|
||||||
|
src={feature.image}
|
||||||
|
alt={feature.alt}
|
||||||
|
fill
|
||||||
|
className="object-cover object-top"
|
||||||
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
src/components/Footer.tsx
Normal file
14
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="px-5 sm:px-8 lg:px-12 pb-10 pt-4">
|
||||||
|
<div className="max-w-6xl mx-auto glass rounded-2xl px-6 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||||
|
<p className="m-0 font-[family-name:var(--font-fraunces)] text-lg font-semibold text-ink">
|
||||||
|
Graduately
|
||||||
|
</p>
|
||||||
|
<p className="m-0 text-sm text-ink-muted">
|
||||||
|
Vzdělávací aplikace k přípravě na maturitu · open source
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
src/components/Hero.tsx
Normal file
67
src/components/Hero.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const GITHUB = "https://github.com/pepaskopec-blip/Graduately";
|
||||||
|
|
||||||
|
export function Hero() {
|
||||||
|
return (
|
||||||
|
<header className="relative min-h-[100svh] flex flex-col overflow-hidden">
|
||||||
|
<div className="absolute inset-y-0 right-0 w-full lg:w-[56%] pointer-events-none">
|
||||||
|
<Image
|
||||||
|
src="/screenshots/welcome.png"
|
||||||
|
alt="Úvodní obrazovka aplikace Graduately"
|
||||||
|
fill
|
||||||
|
priority
|
||||||
|
className="object-cover object-[center_top] float-soft"
|
||||||
|
sizes="(max-width: 1024px) 100vw, 56vw"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-gradient-to-b from-[#c8e4e0]/75 via-[#c8e4e0]/25 to-[#c8e4e0]/80 lg:bg-gradient-to-r lg:from-[#b8ddd8] lg:via-[#b8ddd8]/55 lg:to-transparent"
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="relative z-10 rise flex items-center justify-between px-5 sm:px-8 lg:px-12 pt-6 pb-4">
|
||||||
|
<a
|
||||||
|
href="#top"
|
||||||
|
className="font-[family-name:var(--font-fraunces)] text-xl sm:text-2xl font-semibold tracking-tight text-ink no-underline"
|
||||||
|
>
|
||||||
|
Graduately
|
||||||
|
</a>
|
||||||
|
<div className="flex items-center gap-2 sm:gap-3">
|
||||||
|
<a href="#stahnout" className="btn-ghost !py-2.5 !px-3.5 text-sm">
|
||||||
|
Stáhnout
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={GITHUB}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn-primary !py-2.5 !px-3.5 text-sm"
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex-1 flex flex-col justify-center px-5 sm:px-8 lg:px-12 pb-16 pt-8 max-w-xl lg:max-w-[44%]">
|
||||||
|
<h1 className="rise rise-delay-1 font-[family-name:var(--font-fraunces)] text-[clamp(2.8rem,7vw,4.75rem)] font-semibold leading-[0.95] tracking-[-0.035em] text-ink m-0">
|
||||||
|
Graduately
|
||||||
|
</h1>
|
||||||
|
<p className="rise rise-delay-2 mt-5 font-[family-name:var(--font-fraunces)] text-[clamp(1.65rem,3.2vw,2.35rem)] font-medium leading-snug tracking-[-0.02em] text-ink m-0">
|
||||||
|
Maturita? To dáte.
|
||||||
|
</p>
|
||||||
|
<p className="rise rise-delay-3 mt-4 text-base sm:text-lg text-ink-muted leading-relaxed max-w-md m-0">
|
||||||
|
Procvičování k maturitě v jednom okně — česky i anglicky, se
|
||||||
|
statistikami a automatickými aktualizacemi.
|
||||||
|
</p>
|
||||||
|
<div className="rise rise-delay-4 mt-8 flex flex-wrap gap-3">
|
||||||
|
<a href="#stahnout" className="btn-primary">
|
||||||
|
Stáhnout aplikaci
|
||||||
|
</a>
|
||||||
|
<a href="#predmety" className="btn-ghost">
|
||||||
|
Co umí
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/components/Subjects.tsx
Normal file
54
src/components/Subjects.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
const subjects = [
|
||||||
|
{
|
||||||
|
flag: "DE",
|
||||||
|
name: "Deutsch",
|
||||||
|
detail: "3 jednotky — cvičení, nápovědy a vokabeltraining",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
flag: "NET",
|
||||||
|
name: "Správa počítačových sítí",
|
||||||
|
detail: "1. ročník, 27 lekcí včetně VLSM, teorie a kvízů",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
flag: "HW",
|
||||||
|
name: "Technické vybavení",
|
||||||
|
detail: "Architektura, historie a základy bit/byte",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
flag: "CZ",
|
||||||
|
name: "Český jazyk a literatura",
|
||||||
|
detail: "Mluvnice a 82 knih maturitní četby se zápisky a kvízy",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Subjects() {
|
||||||
|
return (
|
||||||
|
<section id="predmety" className="px-5 sm:px-8 lg:px-12 py-20 sm:py-28">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<h2 className="section-title">Čtyři otevřené předměty</h2>
|
||||||
|
<p className="section-lead">
|
||||||
|
Další předměty jsou zatím zamčené placeholdery — obsah doroste.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="mt-12 grid gap-4 sm:grid-cols-2 list-none p-0 m-0">
|
||||||
|
{subjects.map((subject) => (
|
||||||
|
<li
|
||||||
|
key={subject.name}
|
||||||
|
className="glass rounded-2xl px-6 py-6 transition-[transform,background] duration-200 hover:-translate-y-0.5 hover:bg-[rgba(255,255,255,0.55)]"
|
||||||
|
>
|
||||||
|
<span className="inline-block text-xs font-bold tracking-[0.12em] text-teal mb-3">
|
||||||
|
{subject.flag}
|
||||||
|
</span>
|
||||||
|
<h3 className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-ink m-0">
|
||||||
|
{subject.name}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 mb-0 text-ink-muted leading-relaxed">
|
||||||
|
{subject.detail}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue