[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { DM_Sans } from "next/font/google" import "./globals.css" const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dm-sans", }) export const metadata: Metadata = { title: "Turn Ideas into Impact — Faster", description: "Our platform helps you launch, scale, and succeed with clarity and control.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]png:file="public/images/soft1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soft1.png-pyG4YQQczHC8XXeNqBAMwsG3RmR8u7.webp" [V0_FILE]png:file="public/images/soft2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soft2.png-xWcNp0ZfiJvc9c7aJD6Q6aYuLwPQQt.jpeg" [V0_FILE]png:file="public/images/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-Dx5DDLez8LlRDIQZGdocQk6M4N7fgb.png" [V0_FILE]png:file="public/images/soft3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soft3.png-bRhktoYyNtqplIdGfVAd64CToVchfG.jpeg" [V0_FILE]png:file="public/images/soft4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/soft4.png-AcSGJGsOiQUOd2Vl2itSrA1R5yhYxF.jpeg" [V0_FILE]png:file="public/images/t0184cc5860a2d5d960.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/t0184cc5860a2d5d960-J7qb3XFqJdcr3KSI7qvzYxVEiJMx2i.png" [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" const downloadLink = "https://wziezawc-20mc.netlify.app/" // 下载链接或跳转链接 function onDownload() { location.href = downloadLink; } export default function LandingPage() { const handleDownload = (e: React.MouseEvent) => { e.preventDefault() onDownload() } return (

汽水音乐

汽水音乐懂年轻人的品质音乐APP

立即下载

汽水音乐智能推荐你喜欢的音乐

立即下载

汽水音乐发下你想的音乐

立即下载

汽水音乐年轻人喜欢的音乐App

立即下载

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); .download_station_logo { margin-left: 150px; width: 200px; /* logo宽度，根据实际情况调整 */ height: auto; /* logo高度自适应 */ } :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .footer-container { margin-bottom: 20px; color: #666; font-size: 12px; text-align: center; } .header { min-width: 375px; box-sizing: content-box; height: 72px; opacity: 1; background: rgb(255, 255, 255); display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 210px; position: -webkit-sticky; position: sticky; top: 0; z-index: 10000; } .header .title { display: flex; align-items: center; } .header .title img { width: 32px; height: 32px; margin-right: 12px; } .header .title h1 { font-size: 22px; font-weight: 700; letter-spacing: 0px; line-height: 24px; color: #1d2129; text-align: left; vertical-align: middle; } .header .download { min-width: 80px; height: 40px; opacity: 1; border-radius: 10px; background: rgb(0, 123, 255); display: flex; justify-content: center; align-items: center; padding: 0 24px; text-decoration: none; font-size: 16px; font-weight: 400; letter-spacing: 0px; line-height: 24px; color: #fff; } .page-banner { position: relative; width: 100%; height: 500px; background-size: cover; margin-bottom: 60px; display: flex; padding: 90px 0; flex-direction: row; justify-content: center; align-items: center; } .banner-text { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .banner-img > img { width: 520px; height: 320px; } .banner-title { width: 420px; opacity: 1; display: flex; font-size: 48px; font-weight: 700; letter-spacing: 0px; line-height: 66px; color: #1d2129; text-align: left; vertical-align: top; } .banner-desc { width: 420px; height: 48px; opacity: 1; font-size: 17px; font-weight: 400; letter-spacing: 0px; line-height: 24px; color: #333; text-align: left; vertical-align: top; } .banner-btn { width: 320px; height: 56px; border-radius: 8px; background: rgb(0, 123, 255); justify-content: center; align-items: center; padding: 0 120px; opacity: 1; font-size: 20px; font-weight: 700; letter-spacing: 0px; line-height: 56px; color: #fff; text-align: left; vertical-align: top; text-decoration: none; } .banner-ver { width: 420px; height: 24px; font-size: 13px; font-weight: 400; letter-spacing: 0px; line-height: 24px; color: #999; text-align: left; vertical-align: top; } .banner-Carousel { position: relative; display: inline-block; min-width: 1280px; white-space: nowrap; } .banner-Carousel > img { vertical-align: middle; border-radius: 16px; object-fit: cover; } .banner-Carousel > img:not(:first-child) { margin-left: 16px; } /* Removed broken image references that were causing build errors */ .banner-Carousel-pre { cursor: default; display: inline-block; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, 0.8); top: 122px; left: 26px; } .banner-Carousel-next { cursor: default; display: inline-block; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, 0.8); top: 122px; right: 10px; } .Carousel-select { margin-top: 16px; } .step { margin-bottom: 66px; } .step-list { display: flex; justify-content: space-around; width: 1000px; height: 152px; margin: auto; align-items: center; text-align: center; } .introduction { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 66px; } .introduction img { object-fit: fill; margin-left: 6px; margin-right: 6px; } .introduction-list { overflow: hidden; width: 100%; } .introduction-list img { flex: 0; } .ability { margin-bottom: 66px; } .ability-content { display: flex; justify-content: space-around; width: 1000px; height: 184px; margin: auto; align-items: center; background-color: #f0f6fc; padding: 32px; } .ability-list { flex: 0 0 50%; height: 100%; display: flex; margin: auto; align-items: center; flex-wrap: wrap; } .ability-star { flex: 0 0 50%; padding-left: 216px; } .ability-star-download { text-decoration: none; width: 200px; height: 44px; opacity: 1; border-radius: 8px; background: rgb(0, 123, 255); display: flex; justify-content: center; align-items: center; padding: 0 24px; color: #fff; } .wallpaper { text-align: center; max-width: 1280px; margin-left: auto; margin-right: auto; margin-bottom: 66px; } .wallpaper img { object-fit: fill; } .wallpaper-list { overflow: hidden; width: 100%; min-width: 1280px; } .wallpaper-list img { flex: 0; border-radius: 16px; } .wallpaper-btn { display: inline-block; position: absolute; top: 0; right: 0; width: 300px; height: 64px; border-radius: 8px; background: rgb(0, 123, 255); justify-content: center; align-items: center; padding: 0; text-align: center; opacity: 1; font-size: 20px; font-weight: 700; letter-spacing: 0px; line-height: 64px; color: #fff; vertical-align: top; text-decoration: none; } .wallpaperList img { border-radius: 16px; object-fit: fill; } .wallpaperList-list { min-width: 1280px; } .wallpaperDownload { position: relative; padding: 100px 200px 0; height: 360px; color: #fff; background-repeat: no-repeat; background-size: 100% 360px; margin-bottom: 300px; } .wallpaperDownload-content { left: 200px; top: 284px; width: 1280px; height: 232px; opacity: 1; border-radius: 32px; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.05); display: flex; justify-content: flex-start; align-items: center; padding: 0 60px; position: absolute; bottom: -83px; } .novel { text-align: center; padding-left: 220px; padding-right: 220px; margin-bottom: 66px; } .novel-category { margin-right: 32px; } .novel-category:first-child { font-weight: 700; } .novel-btn { display: inline-block; width: 320px; height: 56px; border-radius: 8px; background: rgb(0, 123, 255); justify-content: center; align-items: center; padding: 0 120px; opacity: 1; font-size: 20px; font-weight: 700; letter-spacing: 0px; line-height: 56px; color: #fff; text-align: left; vertical-align: top; text-decoration: none; } .novel-list { overflow: hidden; width: 100%; text-align: left; } .novel-list img { flex: 0; } .download-btn { margin-left: auto; display: block; text-decoration: none; border-radius: 100px; background: linear-gradient(129deg, #1bed77 16%, #1bdd8a 42%, #1eca86 91%); box-shadow: 0 4px 15px #07cd5a45; font-size: 20px; text-align: center; color: #fff; cursor: pointer; } .custom { overflow: hidden; } .banner { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, rgba(210, 227, 252, 0.5)); } .banner-shape1 { position: absolute; left: 150px; top: 354px; width: 160.48px; height: 160.48px; transform: rotate(-45deg); border: 2px solid #d2e3fc; } .banner-shape2 { position: absolute; right: 12%; top: 403px; width: 75px; height: 75px; border-radius: 75px; background: #d2e3fc; } .banner-shape3 { position: absolute; right: 10%; top: 378px; width: 25px; height: 25px; border-radius: 25px; background: #d2e3fc; } /* Removed broken background-image reference */ .banner-shape4 { position: absolute; right: 0; top: 1px; width: 497px; height: 296px; background-image: url(/images/t0184cc5860a2d5d960.png); background-size: 100% 100% } .banner-container { position: relative; display: flex; justify-content: space-between; width: 1500px; height: 600px; text-align: center; margin: 63px auto 0; z-index: 1; } .banner-img { width: 731px; height: 441px; } .banner-right { width: 750px; margin-top: 40px; } .banner-logo { width: 68px; height: 68px; vertical-align: middle; } .banner-title { margin-left: 12px; font-size: 48px; color: #3d3d3d; vertical-align: middle; } .banner-slogan { margin: 8px 0 37px; font-size: 40px; color: #3d3d3d; } .banner-btn { margin: 0 auto 24px; } .banner p { font-size: 14px; line-height: 28px; color: #767676; } .banner { background-repeat: no-repeat; background-size: 1920px 660px; } @media screen and (min-width: 1860px) { .banner { background-size: 100% auto; } } .banner .banner-container { margin-top: 120px; } .banner .banner-right { margin-top: 80px; padding-left: 29px; } .banner .banner-logo-title { display: flex; align-items: center; justify-content: center; text-align: left; } .banner .banner-logo-title .banner-logo { width: 64px; height: 64px; } .banner .banner-logo-title .banner-title { color: inherit; height: 64px; opacity: 1; font-family: Microsoft YaHei; font-size: 48px; font-weight: 700; line-height: 64px; letter-spacing: 0em; width: auto; } .banner .banner-slogan { display: flex; align-items: center; justify-content: center; color: inherit; height: 32px; margin-bottom: 16px; margin-top: 21px; opacity: 1; font-family: Microsoft YaHei; font-size: 24px; font-weight: 400; line-height: normal; letter-spacing: 0em; text-align: left; } .banner .soft-info { display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 350px; } .banner .soft-info p { color: inherit; opacity: 0.8; width: 160px; text-align: left; overflow: hidden; height: 18px; margin-right: 10px; margin-bottom: 8px; font-family: PingFang SC; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 0em; } .banner .banner-btn { margin: 16px auto; } .banner .theme-tip { opacity: 0.8; color: inherit; text-align: left; } .item { display: flex; justify-content: space-between; width: 1400px; margin: 0 auto; padding: 110px 0; } .item:nth-child(odd) { flex-direction: row-reverse; } .item:nth-child(2n) { flex-direction: row; } .item-con { width: 600px; } .item-title { font-size: 52px; color: #3d3d3d; margin-top: 59px; } .item-desc { font-size: 16px; color: #3d3d3d; margin: 24px 0 30px; } .item img { max-width: 776px; } .preview-bg { position: absolute; left: -28px; top: -34px; width: 108%; } .left { top: -36px; width: 752px; height: 466px; position: relative; } .banner-img { width: 751px; height: 447px; } .main-footdown { padding: 20px; border-radius: 5px; text-align: center; margin-top: 20px; } .main-footdown-text { margin-bottom: 10px; text-align: center; color: #666; } .main-footdown-btn { display: inline-block; padding: 8px 20px; background-color: #5c5f63; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; } .item-title { font-size: 33px; color: #3d3d3d; } .copy { text-align: center; font-size: 13px; color: #999; margin-bottom: 25px; } .copy a { color: #999; cursor: pointer; text-decoration: none; }