├── .prettierrc ├── .eslintrc.json ├── src └── app │ ├── favicon.ico │ ├── fonts │ ├── GeistVF.woff │ └── GeistMonoVF.woff │ ├── examples │ ├── github-accordion │ │ ├── page.module.css │ │ ├── page.tsx │ │ └── components │ │ │ ├── Accordion.tsx │ │ │ └── Accordion.module.css │ └── github-hero │ │ ├── page.tsx │ │ └── components │ │ ├── Content.module.css │ │ ├── Navigation.module.css │ │ ├── Navigation.jsx │ │ ├── Hero.jsx │ │ ├── Hero.module.css │ │ └── Content.jsx │ ├── globals.css │ ├── tutorial.css │ ├── layout.tsx │ ├── page.tsx │ └── page.module.css ├── public ├── accordion │ ├── 00.webp │ ├── 01.webp │ ├── 02.webp │ ├── 03.webp │ ├── 04.webp │ └── 05.webp ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── .gitignore ├── next.config.ts ├── package.json ├── backup.css ├── tsconfig.json └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | {"semi": true} 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/src/app/favicon.ico -------------------------------------------------------------------------------- /public/accordion/00.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/00.webp -------------------------------------------------------------------------------- /public/accordion/01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/01.webp -------------------------------------------------------------------------------- /public/accordion/02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/02.webp -------------------------------------------------------------------------------- /public/accordion/03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/03.webp -------------------------------------------------------------------------------- /public/accordion/04.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/04.webp -------------------------------------------------------------------------------- /public/accordion/05.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/public/accordion/05.webp -------------------------------------------------------------------------------- /src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/blog-examples/main/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /nbproject/ 2 | /.idea/* 3 | *.tmlanguage.cache 4 | *.tmPreferences.cache 5 | *.stTheme.cache 6 | *.sublime-workspace 7 | *.sublime-project 8 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /src/app/examples/github-accordion/page.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100%; 3 | display: grid; 4 | place-items: center; 5 | background: #112; 6 | color: white; 7 | } 8 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/page.tsx: -------------------------------------------------------------------------------- 1 | import { Content } from "./components/Content"; 2 | import { Hero } from "./components/Hero"; 3 | import { Navigation } from "./components/Navigation"; 4 | 5 | export default function GitHubExample() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "19.0.0-rc-66855b96-20241106", 13 | "react-dom": "19.0.0-rc-66855b96-20241106", 14 | "next": "15.0.3" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "eslint": "^8", 22 | "eslint-config-next": "15.0.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Content.module.css: -------------------------------------------------------------------------------- 1 | .mainContent { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | 7 | .textContent { 8 | background-color: rgb(37, 33, 84); 9 | color: rgb(255, 255, 255); 10 | padding: 5rem 1.875rem; 11 | font: 700 1.5rem Inter, sans-serif; 12 | width: 100%; 13 | line-height: 1.6; 14 | margin-inline: -1rem; 15 | } 16 | 17 | .textContent * + * { 18 | margin-top: 1.5rem; 19 | } 20 | 21 | .textContent p { 22 | max-width: 50ch; 23 | margin-inline: auto; 24 | } 25 | 26 | .textContent p:last-child { 27 | margin-bottom: 0; 28 | } 29 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #ffffff; 3 | --foreground: #171717; 4 | interpolate-size: allow-keywords; 5 | font-family: system-ui; 6 | } 7 | 8 | html, 9 | body { 10 | max-width: 100vw; 11 | height: 100%; 12 | } 13 | 14 | body { 15 | color: var(--foreground); 16 | background: var(--background); 17 | font-family: Arial, Helvetica, sans-serif; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | } 21 | 22 | * { 23 | box-sizing: border-box; 24 | padding: 0; 25 | margin: 0; 26 | } 27 | 28 | a { 29 | color: inherit; 30 | text-decoration: none; 31 | } 32 | -------------------------------------------------------------------------------- /backup.css: -------------------------------------------------------------------------------- 1 | .hero-container { 2 | view-timeline-name: --hero-scroll; 3 | } 4 | .hero-text { 5 | position: sticky; 6 | top: 1rem; 7 | } 8 | .hero-image { 9 | isolation: isolate; 10 | } 11 | 12 | @supports (animation-range: exit) { 13 | @media (prefers-reduced-motion: no-preference) { 14 | .hero-text { 15 | animation: fade-out auto ease-in-out; 16 | animation-timeline: --hero-scroll; 17 | animation-range: exit 0% exit 100%; 18 | } 19 | } 20 | } 21 | 22 | @keyframes fade-out { 23 | 0% { 24 | opacity: 1; 25 | scale: 1; 26 | } 27 | 28 | 75% { 29 | opacity: 0; 30 | scale: 0.5; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/app/tutorial.css: -------------------------------------------------------------------------------- 1 | @supports (animation-range: exit) { 2 | @media (prefers-reduced-motion: no-preference) { 3 | .hero-container { 4 | view-timeline-name: --hero-scroll; 5 | } 6 | 7 | .hero-text { 8 | animation: fade-out linear; 9 | /* Connect the animation to the nearest scroller's scroll progress */ 10 | animation-timeline: --hero-scroll; 11 | animation-range: exit 0% exit 100%; 12 | } 13 | } 14 | } 15 | 16 | .hero-text { 17 | position: sticky; 18 | top: 1rem; 19 | } 20 | 21 | .hero-image { 22 | isolation: isolate; 23 | } 24 | 25 | @keyframes fade-out { 26 | 0% { 27 | opacity: 1; 28 | scale: 1; 29 | } 30 | 31 | 100% { 32 | opacity: 0; 33 | scale: 0.25; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Navigation.module.css: -------------------------------------------------------------------------------- 1 | .navigation { 2 | padding: 2rem 0; 3 | } 4 | 5 | .navList { 6 | display: flex; 7 | align-items: center; 8 | gap: 2.875rem; 9 | justify-content: center; 10 | list-style: none; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | .navLink { 16 | color: rgb(43, 38, 115); 17 | font: 700 1.25rem Inter, sans-serif; 18 | text-decoration: none; 19 | padding: 0.5rem; 20 | border-radius: 0.25rem; 21 | transition: all 0.2s ease-in-out; 22 | } 23 | 24 | .navLink:hover, 25 | .navLink:focus { 26 | text-decoration: underline; 27 | outline: 0.125rem solid rgb(43, 38, 115); 28 | outline-offset: 0.25rem; 29 | } 30 | 31 | @media (max-width: 61.9375rem) { 32 | .navigation { 33 | padding: 2rem 1.25rem 1rem; 34 | } 35 | 36 | .navList { 37 | gap: 1.25rem; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Navigation.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Navigation.module.css"; 3 | 4 | export const Navigation = () => { 5 | const navItems = [ 6 | { id: 1, text: "Home", href: "#home" }, 7 | { id: 2, text: "Blog", href: "#blog" }, 8 | { id: 3, text: "Features", href: "#features" }, 9 | ]; 10 | 11 | return ( 12 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import styles from "./Hero.module.css"; 4 | 5 | export const Hero = () => { 6 | return ( 7 |
11 |
12 |
13 |

14 | Scroll-driven animations rock! 15 |

16 |

17 | There's some nice CSS magic going on here. Isn't it? 18 |

19 |
20 |
21 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | import "./tutorial.css"; 5 | 6 | const geistSans = localFont({ 7 | src: "./fonts/GeistVF.woff", 8 | variable: "--font-geist-sans", 9 | weight: "100 900", 10 | }); 11 | const geistMono = localFont({ 12 | src: "./fonts/GeistMonoVF.woff", 13 | variable: "--font-geist-mono", 14 | weight: "100 900", 15 | }); 16 | 17 | export const metadata: Metadata = { 18 | title: "Exclusive Accordions", 19 | description: "Generated by create next app", 20 | }; 21 | 22 | export default function RootLayout({ 23 | children, 24 | }: Readonly<{ 25 | children: React.ReactNode; 26 | }>) { 27 | return ( 28 | 29 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Hero.module.css: -------------------------------------------------------------------------------- 1 | .heroSection { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | text-align: center; 6 | padding: 2rem 1.875rem 0; 7 | gap: 2rem; 8 | } 9 | 10 | .heroContent { 11 | max-width: 50rem; 12 | display: flex; 13 | flex-direction: column; 14 | gap: 1rem; 15 | } 16 | 17 | .heroTitle { 18 | color: rgb(43, 38, 115); 19 | font-size: clamp(1.56rem, 5.24vi + 0.25rem, 4.44rem); 20 | margin: 0; 21 | } 22 | 23 | .heroSubtitle { 24 | color: rgb(82, 74, 185); 25 | font: 700 1.875rem Inter, sans-serif; 26 | } 27 | 28 | @media (max-width: 61.9375rem) { 29 | .heroTitle { 30 | font-size: 2.5rem; 31 | } 32 | 33 | .signUpButton { 34 | padding: 1.25rem; 35 | } 36 | } 37 | 38 | .previewBox { 39 | border-radius: 0.75rem 0.75rem 0 0; 40 | background-color: rgb(217, 217, 217); 41 | width: calc(100% - 2rem); 42 | aspect-ratio: 16 / 9; 43 | max-width: 75rem; 44 | margin-inline: auto; 45 | margin-top: 2rem; 46 | } 47 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/examples/github-accordion/page.tsx: -------------------------------------------------------------------------------- 1 | import { Accordion } from "./components/Accordion"; 2 | import styles from "./page.module.css"; 3 | 4 | export default function GitHubExample() { 5 | return ( 6 |
7 | 40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. 37 | -------------------------------------------------------------------------------- /src/app/examples/github-accordion/components/Accordion.tsx: -------------------------------------------------------------------------------- 1 | import { useId } from "react"; 2 | import styles from "./Accordion.module.css"; 3 | 4 | type AccordionEntry = { 5 | title: string; 6 | content: string; 7 | img: string; 8 | }; 9 | 10 | export const Accordion = ({ entries }: { entries: AccordionEntry[] }) => { 11 | const id = useId(); 12 | 13 | return ( 14 |
15 |
16 |
17 | {entries.map((entry, index) => ( 18 |
24 | 25 | {entry.title} 26 | 27 | 38 | 39 |

{entry.content}

40 |
41 | ))} 42 |
43 |
44 | {entries.map((entry, index) => ( 45 | 53 | ))} 54 | 61 |
62 |
63 |
64 | ); 65 | }; 66 | -------------------------------------------------------------------------------- /src/app/examples/github-accordion/components/Accordion.module.css: -------------------------------------------------------------------------------- 1 | .accordionContainer { 2 | container-type: inline-size; 3 | width: 95%; 4 | max-width: 60rem; 5 | margin: 1rem; 6 | padding: 2rem; 7 | } 8 | 9 | .accordion { 10 | --border-color: #223; 11 | 12 | display: grid; 13 | grid-template-areas: 14 | "images" 15 | "entries"; 16 | grid-columns: 1fr auto; 17 | border: 1px solid var(--border-color); 18 | border-radius: 0.25rem; 19 | overflow: hidden; 20 | 21 | @container (min-width: 700px) { 22 | & { 23 | grid-template-columns: 1fr 1fr; 24 | grid-template-areas: "entries images"; 25 | } 26 | 27 | .images { 28 | aspect-ratio: auto; 29 | } 30 | } 31 | } 32 | 33 | .accordion:not(:has(details[open])) .default { 34 | opacity: 1; 35 | scale: 1; 36 | z-index: 1; 37 | } 38 | 39 | .accordion:has(details:nth-child(1)[open]) .image:nth-child(1), 40 | .accordion:has(details:nth-child(2)[open]) .image:nth-child(2), 41 | .accordion:has(details:nth-child(3)[open]) .image:nth-child(3), 42 | .accordion:has(details:nth-child(4)[open]) .image:nth-child(4), 43 | .accordion:has(details:nth-child(5)[open]) .image:nth-child(5) { 44 | opacity: 1; 45 | scale: 1; 46 | z-index: 1; 47 | } 48 | 49 | .accordion > div { 50 | padding: 2rem; 51 | } 52 | 53 | .accordion div + div { 54 | border-left: 1px solid var(--border-color); 55 | } 56 | 57 | .details { 58 | /* overflow: hidden; */ 59 | } 60 | 61 | .details + .details { 62 | border-top: 1px solid var(--border-color); 63 | } 64 | 65 | .details summary { 66 | cursor: pointer; 67 | font-weight: bold; 68 | padding: 1rem 0; 69 | font-size: 1.25rem; 70 | color: #bbb; 71 | display: flex; 72 | gap: 1rem; 73 | justify-content: space-between; 74 | align-items: center; 75 | text-align: left; 76 | } 77 | 78 | .details summary::-webkit-details-marker { 79 | display: none; 80 | } 81 | 82 | .details:open summary { 83 | color: #fff; 84 | } 85 | 86 | .details summary svg { 87 | opacity: 1; 88 | } 89 | 90 | .details[open] summary svg { 91 | opacity: 0; 92 | } 93 | 94 | .details p { 95 | padding: 0 0 1rem; 96 | } 97 | 98 | .details::details-content { 99 | overflow: hidden; 100 | height: 0; 101 | transition: height 0.3s, content-visibility 0.3s; 102 | transition-behavior: allow-discrete; 103 | } 104 | 105 | .details[open]::details-content { 106 | height: auto; 107 | } 108 | 109 | .entries { 110 | display: flex; 111 | flex-direction: column; 112 | justify-content: center; 113 | flex-grow: 1; 114 | flex-shrink: 0; 115 | grid-area: entries; 116 | } 117 | 118 | .images { 119 | position: relative; 120 | overflow: hidden; 121 | aspect-ratio: 1; 122 | grid-area: images; 123 | } 124 | 125 | .image { 126 | transition: opacity 0.3s, scale 0.3s; 127 | position: absolute; 128 | inset: 0; 129 | width: 100%; 130 | height: 100%; 131 | object-fit: cover; 132 | opacity: 0; 133 | scale: 1.1; 134 | } 135 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import styles from "./page.module.css"; 3 | 4 | export default function Home() { 5 | return ( 6 |
7 |
8 | Next.js logo 16 |
    17 |
  1. 18 | Get started by editing src/app/page.tsx. 19 |
    2. 20 |
  2. Save and see your changes instantly.
    3. 21 |
22 | 23 | 48 |
49 | 93 |
94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /src/app/page.module.css: -------------------------------------------------------------------------------- 1 | .page { 2 | --gray-rgb: 0, 0, 0; 3 | --gray-alpha-200: rgba(var(--gray-rgb), 0.08); 4 | --gray-alpha-100: rgba(var(--gray-rgb), 0.05); 5 | 6 | --button-primary-hover: #383838; 7 | --button-secondary-hover: #f2f2f2; 8 | 9 | display: grid; 10 | grid-template-rows: 20px 1fr 20px; 11 | align-items: center; 12 | justify-items: center; 13 | min-height: 100svh; 14 | padding: 80px; 15 | gap: 64px; 16 | font-family: var(--font-geist-sans); 17 | } 18 | 19 | @media (prefers-color-scheme: dark) { 20 | .page { 21 | --gray-rgb: 255, 255, 255; 22 | --gray-alpha-200: rgba(var(--gray-rgb), 0.145); 23 | --gray-alpha-100: rgba(var(--gray-rgb), 0.06); 24 | 25 | --button-primary-hover: #ccc; 26 | --button-secondary-hover: #1a1a1a; 27 | } 28 | } 29 | 30 | .main { 31 | display: flex; 32 | flex-direction: column; 33 | gap: 32px; 34 | grid-row-start: 2; 35 | } 36 | 37 | .main ol { 38 | font-family: var(--font-geist-mono); 39 | padding-left: 0; 40 | margin: 0; 41 | font-size: 14px; 42 | line-height: 24px; 43 | letter-spacing: -0.01em; 44 | list-style-position: inside; 45 | } 46 | 47 | .main li:not(:last-of-type) { 48 | margin-bottom: 8px; 49 | } 50 | 51 | .main code { 52 | font-family: inherit; 53 | background: var(--gray-alpha-100); 54 | padding: 2px 4px; 55 | border-radius: 4px; 56 | font-weight: 600; 57 | } 58 | 59 | .ctas { 60 | display: flex; 61 | gap: 16px; 62 | } 63 | 64 | .ctas a { 65 | appearance: none; 66 | border-radius: 128px; 67 | height: 48px; 68 | padding: 0 20px; 69 | border: none; 70 | border: 1px solid transparent; 71 | transition: 72 | background 0.2s, 73 | color 0.2s, 74 | border-color 0.2s; 75 | cursor: pointer; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | font-size: 16px; 80 | line-height: 20px; 81 | font-weight: 500; 82 | } 83 | 84 | a.primary { 85 | background: var(--foreground); 86 | color: var(--background); 87 | gap: 8px; 88 | } 89 | 90 | a.secondary { 91 | border-color: var(--gray-alpha-200); 92 | min-width: 180px; 93 | } 94 | 95 | .footer { 96 | grid-row-start: 3; 97 | display: flex; 98 | gap: 24px; 99 | } 100 | 101 | .footer a { 102 | display: flex; 103 | align-items: center; 104 | gap: 8px; 105 | } 106 | 107 | .footer img { 108 | flex-shrink: 0; 109 | } 110 | 111 | /* Enable hover only on non-touch devices */ 112 | @media (hover: hover) and (pointer: fine) { 113 | a.primary:hover { 114 | background: var(--button-primary-hover); 115 | border-color: transparent; 116 | } 117 | 118 | a.secondary:hover { 119 | background: var(--button-secondary-hover); 120 | border-color: transparent; 121 | } 122 | 123 | .footer a:hover { 124 | text-decoration: underline; 125 | text-underline-offset: 4px; 126 | } 127 | } 128 | 129 | @media (max-width: 600px) { 130 | .page { 131 | padding: 32px; 132 | padding-bottom: 80px; 133 | } 134 | 135 | .main { 136 | align-items: center; 137 | } 138 | 139 | .main ol { 140 | text-align: center; 141 | } 142 | 143 | .ctas { 144 | flex-direction: column; 145 | } 146 | 147 | .ctas a { 148 | font-size: 14px; 149 | height: 40px; 150 | padding: 0 16px; 151 | } 152 | 153 | a.secondary { 154 | min-width: auto; 155 | } 156 | 157 | .footer { 158 | flex-wrap: wrap; 159 | align-items: center; 160 | justify-content: center; 161 | } 162 | } 163 | 164 | @media (prefers-color-scheme: dark) { 165 | .logo { 166 | filter: invert(); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/app/examples/github-hero/components/Content.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Content.module.css"; 2 | 3 | export const Content = () => { 4 | return ( 5 |
6 |
7 |

8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis 9 | egestas pretium. Morbi vel sodales nunc, a euismod sapien. Duis orci 10 | tortor, auctor ac pharetra eu, vulputate in metus. Mauris in magna non 11 | risus porttitor commodo non id diam. Phasellus pellentesque vestibulum 12 | pellentesque. Donec non mollis tortor. Morbi fringilla hendrerit urna 13 | et malesuada. Maecenas in tincidunt diam. Morbi urna eros, dignissim 14 | eu mollis eu, feugiat vitae massa. Donec sed elit fringilla leo varius 15 | convallis. 16 |

17 | 18 |

19 | Duis consequat arcu in ultrices venenatis. Praesent in sagittis neque, 20 | nec accumsan sapien. Mauris vitae sollicitudin lectus. Nulla sit amet 21 | ante in nisl tempor convallis. Sed ornare lectus tristique malesuada 22 | tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. 23 | Fusce sodales malesuada enim, fringilla finibus lacus volutpat vitae. 24 | Etiam massa orci, finibus a ornare vitae, sollicitudin et orci. Donec 25 | id enim eget ex interdum volutpat non vel nisi. 26 |

27 | 28 |

29 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 30 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 31 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 32 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 33 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 34 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 35 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 36 | dolor sit amet, consectetur adipiscing elit. 37 |

38 | 39 |

40 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 41 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 42 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 43 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 44 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 45 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 46 | felis viverra non. 47 |

48 | 49 |

50 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 51 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 52 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 53 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 54 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 55 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 56 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 57 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 58 | urna. In hac habitasse platea dictumst. 59 |

60 |

61 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 62 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 63 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 64 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 65 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 66 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 67 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 68 | dolor sit amet, consectetur adipiscing elit. 69 |

70 | 71 |

72 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 73 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 74 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 75 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 76 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 77 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 78 | felis viverra non. 79 |

80 | 81 |

82 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 83 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 84 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 85 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 86 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 87 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 88 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 89 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 90 | urna. In hac habitasse platea dictumst. 91 |

92 |

93 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 94 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 95 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 96 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 97 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 98 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 99 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 100 | dolor sit amet, consectetur adipiscing elit. 101 |

102 | 103 |

104 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 105 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 106 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 107 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 108 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 109 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 110 | felis viverra non. 111 |

112 | 113 |

114 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 115 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 116 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 117 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 118 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 119 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 120 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 121 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 122 | urna. In hac habitasse platea dictumst. 123 |

124 |

125 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis 126 | egestas pretium. Morbi vel sodales nunc, a euismod sapien. Duis orci 127 | tortor, auctor ac pharetra eu, vulputate in metus. Mauris in magna non 128 | risus porttitor commodo non id diam. Phasellus pellentesque vestibulum 129 | pellentesque. Donec non mollis tortor. Morbi fringilla hendrerit urna 130 | et malesuada. Maecenas in tincidunt diam. Morbi urna eros, dignissim 131 | eu mollis eu, feugiat vitae massa. Donec sed elit fringilla leo varius 132 | convallis. 133 |

134 | 135 |

136 | Duis consequat arcu in ultrices venenatis. Praesent in sagittis neque, 137 | nec accumsan sapien. Mauris vitae sollicitudin lectus. Nulla sit amet 138 | ante in nisl tempor convallis. Sed ornare lectus tristique malesuada 139 | tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. 140 | Fusce sodales malesuada enim, fringilla finibus lacus volutpat vitae. 141 | Etiam massa orci, finibus a ornare vitae, sollicitudin et orci. Donec 142 | id enim eget ex interdum volutpat non vel nisi. 143 |

144 | 145 |

146 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 147 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 148 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 149 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 150 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 151 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 152 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 153 | dolor sit amet, consectetur adipiscing elit. 154 |

155 | 156 |

157 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 158 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 159 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 160 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 161 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 162 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 163 | felis viverra non. 164 |

165 | 166 |

167 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 168 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 169 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 170 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 171 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 172 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 173 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 174 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 175 | urna. In hac habitasse platea dictumst. 176 |

177 |

178 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 179 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 180 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 181 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 182 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 183 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 184 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 185 | dolor sit amet, consectetur adipiscing elit. 186 |

187 | 188 |

189 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 190 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 191 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 192 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 193 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 194 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 195 | felis viverra non. 196 |

197 | 198 |

199 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 200 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 201 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 202 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 203 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 204 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 205 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 206 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 207 | urna. In hac habitasse platea dictumst. 208 |

209 |

210 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 211 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 212 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 213 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 214 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 215 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 216 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 217 | dolor sit amet, consectetur adipiscing elit. 218 |

219 | 220 |

221 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 222 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 223 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 224 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 225 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 226 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 227 | felis viverra non. 228 |

229 | 230 |

231 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 232 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 233 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 234 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 235 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 236 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 237 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 238 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 239 | urna. In hac habitasse platea dictumst. 240 |

241 |

242 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis 243 | egestas pretium. Morbi vel sodales nunc, a euismod sapien. Duis orci 244 | tortor, auctor ac pharetra eu, vulputate in metus. Mauris in magna non 245 | risus porttitor commodo non id diam. Phasellus pellentesque vestibulum 246 | pellentesque. Donec non mollis tortor. Morbi fringilla hendrerit urna 247 | et malesuada. Maecenas in tincidunt diam. Morbi urna eros, dignissim 248 | eu mollis eu, feugiat vitae massa. Donec sed elit fringilla leo varius 249 | convallis. 250 |

251 | 252 |

253 | Duis consequat arcu in ultrices venenatis. Praesent in sagittis neque, 254 | nec accumsan sapien. Mauris vitae sollicitudin lectus. Nulla sit amet 255 | ante in nisl tempor convallis. Sed ornare lectus tristique malesuada 256 | tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. 257 | Fusce sodales malesuada enim, fringilla finibus lacus volutpat vitae. 258 | Etiam massa orci, finibus a ornare vitae, sollicitudin et orci. Donec 259 | id enim eget ex interdum volutpat non vel nisi. 260 |

261 | 262 |

263 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 264 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 265 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 266 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 267 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 268 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 269 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 270 | dolor sit amet, consectetur adipiscing elit. 271 |

272 | 273 |

274 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 275 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 276 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 277 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 278 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 279 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 280 | felis viverra non. 281 |

282 | 283 |

284 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 285 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 286 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 287 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 288 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 289 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 290 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 291 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 292 | urna. In hac habitasse platea dictumst. 293 |

294 |

295 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 296 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 297 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 298 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 299 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 300 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 301 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 302 | dolor sit amet, consectetur adipiscing elit. 303 |

304 | 305 |

306 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 307 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 308 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 309 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 310 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 311 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 312 | felis viverra non. 313 |

314 | 315 |

316 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 317 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 318 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 319 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 320 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 321 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 322 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 323 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 324 | urna. In hac habitasse platea dictumst. 325 |

326 |

327 | Mauris iaculis metus eu pretium sollicitudin. Nunc rhoncus turpis at 328 | purus imperdiet pellentesque. Fusce tempor pretium purus. Quisque ac 329 | luctus risus, id ornare neque. Etiam volutpat malesuada elementum. 330 | Donec massa arcu, dignissim vestibulum efficitur id, finibus 331 | scelerisque tellus. Etiam risus orci, interdum vitae libero at, 332 | vestibulum lobortis tellus. Fusce porta mattis sem, ac faucibus eros 333 | pellentesque vel. Donec cursus gravida quam nec fringilla. Lorem ipsum 334 | dolor sit amet, consectetur adipiscing elit. 335 |

336 | 337 |

338 | Praesent sit amet velit dictum, bibendum mauris quis, varius lorem. 339 | Nunc et purus viverra quam venenatis venenatis. Donec a sollicitudin 340 | magna. Fusce scelerisque quam non nisl lacinia, nec molestie lorem 341 | rutrum. Proin vehicula rhoncus eros non tempus. Praesent ultricies 342 | justo ut blandit semper. Integer commodo nisl nisi, nec ultrices 343 | tortor pretium ut. Integer dictum fermentum tellus, sit amet accumsan 344 | felis viverra non. 345 |

346 | 347 |

348 | Pellentesque ut purus placerat, pellentesque ligula id, accumsan 349 | tellus. Nunc imperdiet, nulla non suscipit consequat, nisl magna 350 | posuere purus, sit amet tempor risus sem quis leo. Donec quis dolor 351 | rutrum dolor laoreet faucibus id sit amet nunc. Nullam tempor arcu 352 | magna, id mollis libero ultricies et. Quisque at nibh sed dolor 353 | posuere laoreet sit amet finibus mi. Etiam libero risus, ultricies eu 354 | massa vitae, mattis consequat lectus. Sed id pulvinar libero, ac 355 | sollicitudin elit. Nunc lectus velit, auctor et nisl a, aliquet varius 356 | urna. In hac habitasse platea dictumst. 357 |

358 |
359 |
360 | ); 361 | }; 362 | --------------------------------------------------------------------------------