gitea/templates/pages/product.tmpl

{{template "pages/base_head" .}}
<style>
	/* Product-specific styles - Bold marketing design */
	.pages-product {
		background: #fff;
	}
	.pages-product .pages-header {
		background: transparent;
		border-bottom: none;
		position: absolute;
		width: 100%;
		z-index: 100;
	}
	.pages-product .pages-nav-brand,
	.pages-product .pages-nav-link {
		color: #fff;
		text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}
	.pages-hero-product {
		background: linear-gradient(135deg, var(--pages-primary) 0%, #1a365d 100%);
		color: #fff;
		padding: 120px 0 80px;
		position: relative;
		overflow: hidden;
	}
	.pages-hero-product::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	}
	.pages-hero-product .container {
		position: relative;
		z-index: 1;
	}
	.pages-product .pages-title {
		color: #fff;
		font-size: 3.5rem;
		margin-bottom: 24px;
	}
	.pages-product .pages-tagline {
		color: rgba(255,255,255,0.9);
		font-size: 1.5rem;
		max-width: 700px;
	}
	.pages-product .pages-logo {
		max-height: 100px;
		filter: brightness(0) invert(1);
	}
	.pages-features {
		padding: 80px 0;
		background: #fff;
	}
	.pages-features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 48px;
	}
	.pages-feature {
		text-align: center;
		padding: 32px;
	}
	.pages-feature-icon {
		width: 64px;
		height: 64px;
		margin: 0 auto 24px;
		background: linear-gradient(135deg, var(--pages-primary) 0%, #1a365d 100%);
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.pages-feature-icon img {
		max-width: 32px;
		max-height: 32px;
	}
	.pages-feature-title {
		font-size: 1.25rem;
		font-weight: 600;
		margin: 0 0 12px;
		color: #24292e;
	}
	.pages-feature-description {
		color: #586069;
		line-height: 1.6;
		margin: 0;
	}
	.pages-product .pages-stats {
		background: linear-gradient(135deg, #f6f8fa 0%, #e1e4e8 100%);
		padding: 64px 0;
	}
	.pages-cta-bottom {
		margin-top: 32px;
		text-align: center;
	}
	.pages-product .pages-readme {
		background: #fff;
		padding: 80px 0;
	}
	@media (max-width: 768px) {
		.pages-product .pages-title {
			font-size: 2.5rem;
		}
		.pages-hero-product {
			padding: 100px 0 60px;
		}
	}
</style>
<div class="pages-landing pages-product">
	{{template "pages/header" .}}

	<main class="pages-main">
		<!-- Hero Section -->
		<section class="pages-hero pages-hero-product" {{if .Config.Hero.Background}}style="background-image: url('{{.Config.Hero.Background}}')"{{end}}>
			<div class="container">
				{{if .Config.Branding.Logo}}
				<img src="{{.Config.Branding.Logo}}" alt="{{.Repository.Name}}" class="pages-logo">
				{{end}}
				<h1 class="pages-title">{{if .Config.Hero.Title}}{{.Config.Hero.Title}}{{else}}{{.Repository.Name}}{{end}}</h1>
				{{if .Config.Hero.Tagline}}
				<p class="pages-tagline">{{.Config.Hero.Tagline}}</p>
				{{end}}
				<div class="pages-cta">
					{{if .Config.Hero.CTAPrimary.Text}}
					<a href="{{.Config.Hero.CTAPrimary.Link}}" class="ui large primary button" style="background: #fff; color: var(--pages-primary);">
						{{.Config.Hero.CTAPrimary.Text}}
					</a>
					{{end}}
					{{if .Config.Hero.CTASecondary.Text}}
					<a href="{{.Config.Hero.CTASecondary.Link}}" class="ui large button basic inverted">
						{{.Config.Hero.CTASecondary.Text}}
					</a>
					{{end}}
				</div>
			</div>
		</section>

		<!-- Features Section -->
		{{if .Config.Features}}
		<section class="pages-features">
			<div class="container">
				<div class="pages-features-grid">
					{{range .Config.Features}}
					<div class="pages-feature">
						{{if .Icon}}
						<div class="pages-feature-icon">
							{{svg (printf "octicon-%s" .Icon) 32}}
						</div>
						{{end}}
						<h3 class="pages-feature-title">{{.Title}}</h3>
						<p class="pages-feature-description">{{.Description}}</p>
					</div>
					{{end}}
				</div>
			</div>
		</section>
		{{end}}

		<!-- README Section -->
		{{if .ReadmeContent}}
		<section class="pages-readme">
			<div class="container">
				<div class="markup">
					{{.ReadmeContent}}
				</div>
			</div>
		</section>
		{{end}}

		<!-- Stats Section -->
		<section class="pages-stats">
			<div class="container">
				<div class="pages-stats-grid">
					<div class="pages-stat">
						<span class="pages-stat-value">{{.NumStars}}</span>
						<span class="pages-stat-label">{{ctx.Locale.Tr "repo.stars"}}</span>
					</div>
					<div class="pages-stat">
						<span class="pages-stat-value">{{.NumForks}}</span>
						<span class="pages-stat-label">{{ctx.Locale.Tr "repo.forks"}}</span>
					</div>
				</div>
				<div class="pages-cta-bottom">
					<a href="{{AppSubUrl}}/{{.Repository.FullName}}" class="ui large button" target="_blank">
						{{svg "octicon-star" 16}} Star on Gitea
					</a>
				</div>
			</div>
		</section>
	</main>

	{{template "pages/footer" .}}
</div>
{{template "pages/base_footer" .}}