Compare commits
1 Commits
main
...
components
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c1389166b8 |
@ -1,5 +1,5 @@
|
||||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1741386617926
|
||||
"lastUpdateCheck": 1726089127618
|
||||
}
|
||||
}
|
||||
2
.astro/types.d.ts
vendored
2
.astro/types.d.ts
vendored
@ -1,2 +1,2 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
/// <reference path="astro/content.d.ts" />
|
||||
30
CHANGELOG.md
30
CHANGELOG.md
@ -1,33 +1,3 @@
|
||||
# [1.29.0](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0) (2025-03-08)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
|
||||
* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
|
||||
* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
|
||||
|
||||
# [1.29.0-beta.3](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.2...v1.29.0-beta.3) (2024-10-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
|
||||
|
||||
# [1.29.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.1...v1.29.0-beta.2) (2024-10-05)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
|
||||
|
||||
# [1.29.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0-beta.1) (2024-10-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
|
||||
|
||||
# [1.28.0](https://github.com/deployn/astro-deploy/compare/v1.27.0...v1.28.0) (2024-09-13)
|
||||
|
||||
|
||||
|
||||
21
Dockerfile
21
Dockerfile
@ -1,15 +1,19 @@
|
||||
# Build Stage
|
||||
FROM node:22-slim AS build
|
||||
FROM node:20-slim AS base
|
||||
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
RUN corepack enable
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json pnpm-lock.yaml ./
|
||||
|
||||
FROM base AS prod-deps
|
||||
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
|
||||
|
||||
FROM base AS build-deps
|
||||
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
|
||||
|
||||
FROM build-deps AS build
|
||||
COPY . .
|
||||
ARG SITE_URL
|
||||
ENV SITE_URL=${SITE_URL}
|
||||
@ -17,21 +21,10 @@ ARG DIRECTUS_URL
|
||||
ENV DIRECTUS_URL=${DIRECTUS_URL}
|
||||
RUN pnpm run build
|
||||
|
||||
# Runtime Stage
|
||||
FROM nginx:1.25-alpine AS runtime
|
||||
|
||||
# Copy custom nginx config
|
||||
COPY nginx/nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
# Copy built assets from build stage
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
|
||||
# Add curl for healthchecks
|
||||
RUN apk add --no-cache curl
|
||||
|
||||
# Healthcheck
|
||||
HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
@ -6,7 +6,7 @@ A custom Astro.js template
|
||||
|
||||
## Features
|
||||
|
||||
- 🚀 Astro.js 5 for modern web development.
|
||||
- 🚀 Astro.js 4 for modern web development.
|
||||
- 🐳 Docker integration for consistent environments and easy deployment.
|
||||
- 🍃 Tailwind CSS for utility-first styling and rapid UI development.
|
||||
- ⚛️ React.js integration, enabling complex UI construction with ease.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
user nginx;
|
||||
worker_processes auto;
|
||||
|
||||
error_log /var/log/nginx/error.log warn;
|
||||
error_log /var/log/nginx/error.log notice;
|
||||
pid /var/run/nginx.pid;
|
||||
|
||||
events {
|
||||
@ -19,10 +19,8 @@ http {
|
||||
access_log /var/log/nginx/access.log main;
|
||||
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
tcp_nodelay on;
|
||||
|
||||
keepalive_timeout 65;
|
||||
types_hash_max_size 2048;
|
||||
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
@ -34,33 +32,26 @@ http {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name localhost;
|
||||
port_in_redirect off;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
rewrite ^([^.]*[^/])$ $1/ permanent;
|
||||
try_files $uri $uri/ $uri/index.html =404;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location ~* \.(?:ico|css|js|gif|jpe?g|png|svg|woff|woff2|eot|ttf|webp)$ {
|
||||
expires 30d;
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
|
||||
expires 60d;
|
||||
add_header Cache-Control "public, no-transform";
|
||||
}
|
||||
|
||||
error_page 404 /404.html;
|
||||
location = /404.html {
|
||||
internal;
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
internal;
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
|
||||
add_header X-Frame-Options "SAMEORIGIN";
|
||||
add_header X-Content-Type-Options "nosniff";
|
||||
add_header X-XSS-Protection "1; mode=block";
|
||||
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin";
|
||||
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()";
|
||||
}
|
||||
}
|
||||
|
||||
37
package.json
37
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "astro-deploy",
|
||||
"type": "module",
|
||||
"version": "1.29.0",
|
||||
"version": "1.28.0",
|
||||
"description": "A custom Astro.js template",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@ -15,50 +15,49 @@
|
||||
"upgrade": "pnpm update --interactive --latest",
|
||||
"commit": "cz"
|
||||
},
|
||||
"packageManager": "pnpm@9.8.0",
|
||||
"dependencies": {
|
||||
"@astrojs/alpinejs": "^0.4.0",
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@astrojs/mdx": "^4.1.0",
|
||||
"@astrojs/react": "^4.2.1",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@astrojs/tailwind": "^5.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@astrojs/check": "^0.9.3",
|
||||
"@astrojs/mdx": "^3.1.5",
|
||||
"@astrojs/react": "^3.6.2",
|
||||
"@astrojs/sitemap": "^3.1.6",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"astro": "^5.4.2",
|
||||
"astro-expressive-code": "^0.40.2",
|
||||
"astro": "^4.15.4",
|
||||
"astro-expressive-code": "^0.36.1",
|
||||
"astro-icon": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.5.0",
|
||||
"@commitlint/config-conventional": "^19.5.0",
|
||||
"@commitlint/cz-commitlint": "^19.5.0",
|
||||
"@directus/sdk": "^19.0.1",
|
||||
"@directus/sdk": "^17.0.1",
|
||||
"@iconify-json/line-md": "^1.2.1",
|
||||
"@pagefind/default-ui": "^1.1.1",
|
||||
"@semantic-release/changelog": "^6.0.3",
|
||||
"@semantic-release/git": "^10.0.1",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/alpinejs": "^3.13.10",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vite-pwa/assets-generator": "^0.2.6",
|
||||
"alpinejs": "^3.14.1",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"commitizen": "^4.3.1",
|
||||
"commitizen": "^4.3.0",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"lucide-react": "^0.479.0",
|
||||
"lucide-react": "^0.439.0",
|
||||
"pagefind": "^1.1.1",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
"pwa-asset-generator": "^6.3.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"semantic-release": "^24.1.1",
|
||||
"sharp": "0.32.6",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.6.2"
|
||||
|
||||
13785
pnpm-lock.yaml
generated
13785
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
68
src/components/Modal.astro
Normal file
68
src/components/Modal.astro
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { id, title } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
id={id}
|
||||
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div
|
||||
class="w-full max-w-lg transform rounded-2xl bg-white p-6 shadow-xl transition-all dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
{title}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
onclick={`window.closeModal('${id}')`}>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 space-y-6">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
interface CustomWindow extends Window {
|
||||
closeModal: (id: string) => void;
|
||||
openModal: (id: string) => void;
|
||||
}
|
||||
|
||||
declare let window: CustomWindow;
|
||||
|
||||
function closeModal(id: string) {
|
||||
const modal = document.getElementById(id);
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(id: string) {
|
||||
const modal = document.getElementById(id);
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
window.closeModal = closeModal;
|
||||
window.openModal = openModal;
|
||||
</script>
|
||||
26
src/components/Tooltip.astro
Normal file
26
src/components/Tooltip.astro
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
interface Props {
|
||||
text: string;
|
||||
position?: 'top' | 'right' | 'bottom' | 'left';
|
||||
}
|
||||
|
||||
const { text, position = 'top' } = Astro.props;
|
||||
|
||||
const positionClasses = {
|
||||
top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',
|
||||
right: 'left-full top-1/2 ml-2 -translate-y-1/2',
|
||||
bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',
|
||||
left: 'right-full top-1/2 mr-2 -translate-y-1/2',
|
||||
};
|
||||
---
|
||||
|
||||
<div class="group relative inline-block">
|
||||
<slot />
|
||||
<div
|
||||
class={`invisible absolute ${positionClasses[position]} z-10 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2 text-sm text-white opacity-0 shadow-lg transition-all duration-300 ease-in-out group-hover:visible group-hover:opacity-100`}>
|
||||
{text}
|
||||
<div
|
||||
class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-800">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Astro Deploy 404" description="404: Page not found.">
|
||||
<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
|
||||
<h1 class="text-center text-zinc-900 dark:text-zinc-200">404: Page Not Found</h1>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
|
||||
The page you are looking for does not exist. Please check the URL or return to the home page.
|
||||
</p>
|
||||
</header>
|
||||
</BaseLayout>
|
||||
@ -110,11 +110,14 @@ const {
|
||||
{author.url ? (
|
||||
<a
|
||||
href={author.url}
|
||||
class="font-medium text-primary-600 underline hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
|
||||
class="font-medium text-primary-600 underline
|
||||
hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
|
||||
{author.name}
|
||||
</a>
|
||||
) : (
|
||||
<span class="font-medium text-primary-600 dark:text-primary-400">
|
||||
<span
|
||||
class="font-medium text-primary-600
|
||||
dark:text-primary-400 ">
|
||||
{author.name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -21,11 +21,6 @@ interface Props {
|
||||
}
|
||||
|
||||
const { entry } = Astro.props as Props;
|
||||
|
||||
if (!entry) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const { Content } = await entry.render();
|
||||
const components = { table: Table };
|
||||
const {
|
||||
|
||||
@ -3,6 +3,8 @@ import { Icon } from 'astro-icon/components';
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Heading from '@/components/ui/Heading.astro';
|
||||
import FeatureSection from '@/components/FeatureSection.astro';
|
||||
import Modal from '@/components/Modal.astro';
|
||||
import Tooltip from '@/components/Tooltip.astro';
|
||||
|
||||
import index1 from '@/assets/images/index-1.png';
|
||||
import index2 from '@/assets/images/index-2.png';
|
||||
@ -47,37 +49,44 @@ const features = [
|
||||
<BaseLayout
|
||||
title="Astro Deploy"
|
||||
description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
|
||||
<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
|
||||
<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
|
||||
<header class="relative mx-auto px-4 pb-32 pt-40 sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-primary-100 to-primary-50 dark:from-primary-900 dark:to-primary-800">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<Heading
|
||||
level={1}
|
||||
classes="text-center text-4xl sm:text-5xl lg:text-6xl font-bold text-primary-900 dark:text-primary-100">
|
||||
Deploy Your
|
||||
<span
|
||||
class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
|
||||
<span class="bg-gradient-to-r from-accent-600 to-primary-600 bg-clip-text text-transparent">
|
||||
Astro.js
|
||||
</span>
|
||||
Site!
|
||||
</Heading>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
|
||||
<p
|
||||
class="mx-auto mt-6 max-w-3xl text-center text-lg text-primary-800/80 dark:text-primary-200/80 sm:text-xl">
|
||||
Supercharge your website with the Astro Deploy boilerplate with Docker support for
|
||||
out-of-this-world web experiences. Launch today!
|
||||
</p>
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="mt-10 flex justify-center">
|
||||
<a
|
||||
href="https://github.com/deployn/astro-deploy"
|
||||
class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
|
||||
class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-base font-medium text-white shadow-lg transition-all hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-primary-800 sm:text-lg">
|
||||
<span>Get started!</span>
|
||||
<Icon name="line-md:chevron-right" class="size-3" />
|
||||
<Icon name="line-md:chevron-right" class="size-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section
|
||||
class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
|
||||
<section class="mx-auto max-w-6xl px-8 py-16 sm:py-24 lg:px-8 lg:py-32">
|
||||
<Heading
|
||||
level={2}
|
||||
classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
|
||||
classes="max-w-3xl text-center mx-auto pb-2 text-3xl sm:text-4xl lg:text-5xl font-bold bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-400 dark:to-primary-200 text-transparent">
|
||||
Launch Stunning Websites Effortlessly with Astro Deploy
|
||||
</Heading>
|
||||
<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
|
||||
<p
|
||||
class="mx-auto mt-6 max-w-4xl text-center text-lg text-gray-700 dark:text-gray-300 sm:text-xl">
|
||||
Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
|
||||
experiences.
|
||||
</p>
|
||||
@ -94,6 +103,39 @@ const features = [
|
||||
))
|
||||
}
|
||||
|
||||
<section class="bg-gray-100 py-16 dark:bg-gray-800 dark:text-gray-100 sm:py-24">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<Heading level={2} classes="text-3xl sm:text-4xl font-bold text-center mb-8">
|
||||
Interactive Components
|
||||
</Heading>
|
||||
<div class="flex flex-col items-center justify-center gap-8 sm:flex-row">
|
||||
<Modal id="myModal" title="Example Modal">
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
This is the content of a modal. It can include any HTML content.
|
||||
</p>
|
||||
<button
|
||||
class="mt-4 rounded bg-primary-600 px-4 py-2 text-white transition-colors hover:bg-primary-700"
|
||||
onclick="closeModal('myModal')">
|
||||
Close Modal
|
||||
</button>
|
||||
</Modal>
|
||||
|
||||
<Tooltip text="This is a tooltip">
|
||||
<button
|
||||
class="rounded bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600">
|
||||
Hover me
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<button
|
||||
onclick="openModal('myModal')"
|
||||
class="rounded-lg bg-primary-600 px-6 py-3 text-white shadow-md transition-colors hover:bg-primary-700">
|
||||
Open modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
|
||||
<div
|
||||
class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user