diff --git a/templates/pages/base_footer.tmpl b/templates/pages/base_footer.tmpl
new file mode 100644
index 0000000000..308b1d01b6
--- /dev/null
+++ b/templates/pages/base_footer.tmpl
@@ -0,0 +1,2 @@
+</body>
+</html>
diff --git a/templates/pages/base_head.tmpl b/templates/pages/base_head.tmpl
new file mode 100644
index 0000000000..f83c348d14
--- /dev/null
+++ b/templates/pages/base_head.tmpl
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="{{ctx.Locale.Lang}}" data-theme="{{ctx.CurrentWebTheme.InternalName}}">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>{{if .Config.Hero.Title}}{{.Config.Hero.Title}}{{else}}{{.Repository.Name}}{{end}} - {{.Repository.Owner.Name}}</title>
+	<meta name="description" content="{{if .Config.Hero.Tagline}}{{.Config.Hero.Tagline}}{{else}}{{.Repository.Description}}{{end}}">
+	<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
+	{{template "base/head_style" .}}
+	<style>
+		/* Pages standalone styles - no Gitea navbar */
+		:root {
+			--pages-primary: {{if .Config.Branding.PrimaryColor}}{{.Config.Branding.PrimaryColor}}{{else}}#4183c4{{end}};
+			--pages-secondary: {{if .Config.Branding.SecondaryColor}}{{.Config.Branding.SecondaryColor}}{{else}}#6c757d{{end}};
+		}
+		* { box-sizing: border-box; }
+		body.pages-body {
+			margin: 0;
+			padding: 0;
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+			background: #fff;
+		}
+		.pages-landing {
+			min-height: 100vh;
+			display: flex;
+			flex-direction: column;
+		}
+		.pages-main { flex: 1; }
+		.container {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 0 24px;
+		}
+		/* Header styles */
+		.pages-header {
+			background: #fff;
+			border-bottom: 1px solid #e1e4e8;
+			padding: 16px 0;
+			position: sticky;
+			top: 0;
+			z-index: 100;
+		}
+		.pages-nav {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		.pages-nav-brand {
+			text-decoration: none;
+			font-weight: 600;
+			font-size: 1.25rem;
+			color: #24292e;
+		}
+		.pages-nav-logo { height: 32px; }
+		.pages-nav-links {
+			display: flex;
+			align-items: center;
+			gap: 24px;
+		}
+		.pages-nav-link {
+			color: #586069;
+			text-decoration: none;
+			font-size: 0.875rem;
+		}
+		.pages-nav-link:hover { color: var(--pages-primary); }
+		/* Hero styles */
+		.pages-hero {
+			padding: 80px 0;
+			text-align: center;
+			background: linear-gradient(135deg, #f6f8fa 0%, #fff 100%);
+		}
+		.pages-logo {
+			max-height: 80px;
+			margin-bottom: 24px;
+		}
+		.pages-title {
+			font-size: 3rem;
+			font-weight: 700;
+			margin: 0 0 16px;
+			color: #24292e;
+		}
+		.pages-tagline {
+			font-size: 1.25rem;
+			color: #586069;
+			margin: 0 0 32px;
+			max-width: 600px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+		.pages-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+		/* Stats */
+		.pages-stats {
+			padding: 48px 0;
+			background: #f6f8fa;
+		}
+		.pages-stats-grid {
+			display: flex;
+			justify-content: center;
+			gap: 48px;
+			flex-wrap: wrap;
+		}
+		.pages-stat {
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 8px;
+		}
+		.pages-stat-value {
+			font-size: 2rem;
+			font-weight: 700;
+			color: #24292e;
+		}
+		.pages-stat-label {
+			color: #586069;
+			font-size: 0.875rem;
+		}
+		/* README */
+		.pages-readme {
+			padding: 64px 0;
+		}
+		.pages-readme .markup {
+			max-width: 800px;
+			margin: 0 auto;
+		}
+		/* Footer */
+		.pages-footer {
+			background: #24292e;
+			color: #fff;
+			padding: 48px 0 24px;
+			margin-top: auto;
+		}
+		.pages-footer-links {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+			gap: 32px;
+			margin-bottom: 32px;
+		}
+		.pages-footer-title {
+			font-size: 0.875rem;
+			font-weight: 600;
+			margin: 0 0 16px;
+			color: #fff;
+		}
+		.pages-footer-list {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+		.pages-footer-list li { margin-bottom: 8px; }
+		.pages-footer-list a {
+			color: #959da5;
+			text-decoration: none;
+			font-size: 0.875rem;
+		}
+		.pages-footer-list a:hover { color: #fff; }
+		.pages-footer-bottom {
+			text-align: center;
+			padding-top: 24px;
+			border-top: 1px solid #444d56;
+		}
+		.pages-footer-copyright, .pages-footer-powered {
+			color: #959da5;
+			font-size: 0.75rem;
+			margin: 4px 0;
+		}
+		.pages-footer-powered a { color: #79b8ff; }
+	</style>
+</head>
+<body class="pages-body">
diff --git a/templates/pages/documentation.tmpl b/templates/pages/documentation.tmpl
index c60fbf76cf..55d9aecd74 100644
--- a/templates/pages/documentation.tmpl
+++ b/templates/pages/documentation.tmpl
@@ -1,5 +1,118 @@
-{{template "base/head" .}}
-<div class="page-content pages-landing pages-documentation">
+{{template "pages/base_head" .}}
+<style>
+	/* Documentation-specific styles */
+	.pages-documentation {
+		background: #fff;
+	}
+	.pages-documentation .pages-header {
+		background: #24292e;
+		border-bottom: none;
+	}
+	.pages-documentation .pages-nav-brand,
+	.pages-documentation .pages-nav-link {
+		color: #fff;
+	}
+	.pages-documentation .pages-nav-link:hover {
+		color: #79b8ff;
+	}
+	.pages-docs-layout {
+		display: flex;
+		min-height: calc(100vh - 65px);
+	}
+	.pages-docs-sidebar {
+		width: 280px;
+		background: #f6f8fa;
+		border-right: 1px solid #e1e4e8;
+		padding: 24px;
+		position: sticky;
+		top: 65px;
+		height: calc(100vh - 65px);
+		overflow-y: auto;
+	}
+	.pages-docs-search {
+		margin-bottom: 24px;
+	}
+	.pages-search-input {
+		width: 100%;
+		padding: 8px 12px;
+		border: 1px solid #e1e4e8;
+		border-radius: 6px;
+		font-size: 0.875rem;
+	}
+	.pages-docs-section {
+		margin-bottom: 24px;
+	}
+	.pages-docs-section-title {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #586069;
+		margin: 0 0 12px;
+	}
+	.pages-docs-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	.pages-docs-list li {
+		margin-bottom: 8px;
+	}
+	.pages-docs-list a {
+		color: #24292e;
+		text-decoration: none;
+		font-size: 0.875rem;
+		display: block;
+		padding: 4px 8px;
+		border-radius: 4px;
+	}
+	.pages-docs-list a:hover {
+		background: #e1e4e8;
+		color: var(--pages-primary);
+	}
+	.pages-docs-content {
+		flex: 1;
+		padding: 48px;
+		max-width: 900px;
+	}
+	.pages-docs-article {
+		line-height: 1.7;
+	}
+	.pages-docs-article h1,
+	.pages-docs-article h2,
+	.pages-docs-article h3 {
+		margin-top: 32px;
+		padding-bottom: 8px;
+		border-bottom: 1px solid #e1e4e8;
+	}
+	.pages-docs-article code {
+		background: #f6f8fa;
+		padding: 2px 6px;
+		border-radius: 4px;
+		font-size: 0.875em;
+	}
+	.pages-docs-article pre {
+		background: #24292e;
+		color: #e1e4e8;
+		padding: 16px;
+		border-radius: 6px;
+		overflow-x: auto;
+	}
+	.pages-docs-article pre code {
+		background: none;
+		padding: 0;
+		color: inherit;
+	}
+	@media (max-width: 768px) {
+		.pages-docs-sidebar {
+			display: none;
+		}
+		.pages-docs-content {
+			padding: 24px;
+		}
+	}
+</style>
+<div class="pages-landing pages-documentation">
 	{{template "pages/header" .}}
 
 	<div class="pages-docs-layout">
@@ -21,6 +134,15 @@
 					</ul>
 				</div>
 				{{end}}
+				{{else}}
+				<div class="pages-docs-section">
+					<h4 class="pages-docs-section-title">Documentation</h4>
+					<ul class="pages-docs-list">
+						<li><a href="#">Getting Started</a></li>
+						<li><a href="#">Installation</a></li>
+						<li><a href="#">Configuration</a></li>
+					</ul>
+				</div>
 				{{end}}
 			</nav>
 		</aside>
@@ -32,12 +154,11 @@
 					{{.ReadmeContent}}
 				</div>
 				{{else}}
-				<p>{{ctx.Locale.Tr "repo.no_desc"}}</p>
+				<h1>{{.Repository.Name}}</h1>
+				<p>{{if .Repository.Description}}{{.Repository.Description}}{{else}}Welcome to the documentation.{{end}}</p>
 				{{end}}
 			</article>
 		</main>
 	</div>
-
-	{{template "pages/footer" .}}
 </div>
-{{template "base/footer" .}}
+{{template "pages/base_footer" .}}
diff --git a/templates/pages/portfolio.tmpl b/templates/pages/portfolio.tmpl
index 87d1fb580d..49c44a3421 100644
--- a/templates/pages/portfolio.tmpl
+++ b/templates/pages/portfolio.tmpl
@@ -1,5 +1,131 @@
-{{template "base/head" .}}
-<div class="page-content pages-landing pages-portfolio">
+{{template "pages/base_head" .}}
+<style>
+	/* Portfolio-specific styles - Gallery/Creative design */
+	.pages-portfolio {
+		background: #1a1a1a;
+		color: #fff;
+	}
+	.pages-portfolio .pages-header {
+		background: transparent;
+		border-bottom: 1px solid rgba(255,255,255,0.1);
+	}
+	.pages-portfolio .pages-nav-brand,
+	.pages-portfolio .pages-nav-link {
+		color: #fff;
+	}
+	.pages-portfolio .pages-nav-link:hover {
+		color: var(--pages-primary);
+	}
+	.pages-portfolio .pages-hero {
+		background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
+		padding: 100px 0 60px;
+	}
+	.pages-portfolio .pages-title {
+		color: #fff;
+		font-size: 2.5rem;
+		letter-spacing: -0.02em;
+	}
+	.pages-portfolio .pages-tagline {
+		color: rgba(255,255,255,0.7);
+	}
+	.pages-portfolio .pages-logo {
+		border-radius: 50%;
+		border: 3px solid rgba(255,255,255,0.2);
+	}
+	.pages-gallery {
+		padding: 60px 0;
+		background: #1a1a1a;
+	}
+	.pages-gallery-grid {
+		display: grid;
+		grid-template-columns: repeat(var(--columns, 3), 1fr);
+		gap: 16px;
+	}
+	.pages-gallery-item {
+		position: relative;
+		overflow: hidden;
+		border-radius: 8px;
+		aspect-ratio: 1;
+		background: #2d2d2d;
+	}
+	.pages-gallery-item a {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+	.pages-gallery-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s ease, filter 0.3s ease;
+	}
+	.pages-gallery-item:hover .pages-gallery-image {
+		transform: scale(1.05);
+		filter: brightness(0.8);
+	}
+	.pages-gallery-caption {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 16px;
+		background: linear-gradient(transparent, rgba(0,0,0,0.8));
+		color: #fff;
+		font-size: 0.875rem;
+		font-weight: 500;
+		opacity: 0;
+		transform: translateY(10px);
+		transition: opacity 0.3s ease, transform 0.3s ease;
+	}
+	.pages-gallery-item:hover .pages-gallery-caption {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	.pages-portfolio .pages-readme {
+		background: #2d2d2d;
+		padding: 60px 0;
+	}
+	.pages-portfolio .pages-readme .markup {
+		color: rgba(255,255,255,0.9);
+	}
+	.pages-portfolio .pages-readme .markup h1,
+	.pages-portfolio .pages-readme .markup h2,
+	.pages-portfolio .pages-readme .markup h3 {
+		color: #fff;
+	}
+	.pages-portfolio .pages-readme .markup a {
+		color: var(--pages-primary);
+	}
+	.pages-portfolio .pages-readme .markup code {
+		background: rgba(255,255,255,0.1);
+		color: #fff;
+	}
+	.pages-portfolio .pages-footer {
+		background: #111;
+	}
+	/* Empty gallery placeholder */
+	.pages-gallery-empty {
+		grid-column: 1 / -1;
+		text-align: center;
+		padding: 60px;
+		color: rgba(255,255,255,0.5);
+	}
+	.pages-gallery-empty-icon {
+		font-size: 3rem;
+		margin-bottom: 16px;
+	}
+	@media (max-width: 768px) {
+		.pages-gallery-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+	@media (max-width: 480px) {
+		.pages-gallery-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
+<div class="pages-landing pages-portfolio">
 	{{template "pages/header" .}}
 
 	<main class="pages-main">
@@ -20,7 +146,7 @@
 					</a>
 					{{end}}
 					{{if .Config.Hero.CTASecondary.Text}}
-					<a href="{{.Config.Hero.CTASecondary.Link}}" class="ui button">
+					<a href="{{.Config.Hero.CTASecondary.Link}}" class="ui button basic inverted">
 						{{.Config.Hero.CTASecondary.Text}}
 					</a>
 					{{end}}
@@ -29,28 +155,31 @@
 		</section>
 
 		<!-- Gallery Section -->
-		{{if .Config.Gallery.Items}}
 		<section class="pages-gallery">
 			<div class="container">
-				<div class="pages-gallery-grid" style="--columns: {{if .Config.Gallery.Columns}}{{.Config.Gallery.Columns}}{{else}}4{{end}}">
+				{{if .Config.Gallery.Items}}
+				<div class="pages-gallery-grid" style="--columns: {{if .Config.Gallery.Columns}}{{.Config.Gallery.Columns}}{{else}}3{{end}}">
 					{{range .Config.Gallery.Items}}
 					<div class="pages-gallery-item">
-						{{if .Link}}
-						<a href="{{.Link}}">
-						{{end}}
+						{{if .Link}}<a href="{{.Link}}">{{end}}
 						<img src="{{.Image}}" alt="{{.Title}}" class="pages-gallery-image">
 						{{if .Title}}
 						<div class="pages-gallery-caption">{{.Title}}</div>
 						{{end}}
-						{{if .Link}}
-						</a>
-						{{end}}
+						{{if .Link}}</a>{{end}}
 					</div>
 					{{end}}
 				</div>
+				{{else}}
+				<div class="pages-gallery-grid" style="--columns: 3">
+					<div class="pages-gallery-empty">
+						{{svg "octicon-image" 48}}
+						<p>Add gallery items in your landing.yaml configuration</p>
+					</div>
+				</div>
+				{{end}}
 			</div>
 		</section>
-		{{end}}
 
 		<!-- README Section -->
 		{{if .ReadmeContent}}
@@ -66,4 +195,4 @@
 
 	{{template "pages/footer" .}}
 </div>
-{{template "base/footer" .}}
+{{template "pages/base_footer" .}}
diff --git a/templates/pages/product.tmpl b/templates/pages/product.tmpl
index 66bb71aed8..49df0ce242 100644
--- a/templates/pages/product.tmpl
+++ b/templates/pages/product.tmpl
@@ -1,11 +1,121 @@
-{{template "base/head" .}}
-<div class="page-content pages-landing pages-product">
+{{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="pages-hero-overlay"></div>
 			<div class="container">
 				{{if .Config.Branding.Logo}}
 				<img src="{{.Config.Branding.Logo}}" alt="{{.Repository.Name}}" class="pages-logo">
@@ -16,12 +126,12 @@
 				{{end}}
 				<div class="pages-cta">
 					{{if .Config.Hero.CTAPrimary.Text}}
-					<a href="{{.Config.Hero.CTAPrimary.Link}}" class="ui large primary button">
+					<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 {{if eq .Config.Hero.CTASecondary.Style "outline"}}basic inverted{{end}}">
+					<a href="{{.Config.Hero.CTASecondary.Link}}" class="ui large button basic inverted">
 						{{.Config.Hero.CTASecondary.Text}}
 					</a>
 					{{end}}
@@ -38,11 +148,7 @@
 					<div class="pages-feature">
 						{{if .Icon}}
 						<div class="pages-feature-icon">
-							{{if StringUtils.HasPrefix .Icon "./"}}
-							<img src="{{.Icon}}" alt="{{.Title}}">
-							{{else}}
 							{{svg (printf "octicon-%s" .Icon) 32}}
-							{{end}}
 						</div>
 						{{end}}
 						<h3 class="pages-feature-title">{{.Title}}</h3>
@@ -89,4 +195,4 @@
 
 	{{template "pages/footer" .}}
 </div>
-{{template "base/footer" .}}
+{{template "pages/base_footer" .}}
diff --git a/templates/pages/simple.tmpl b/templates/pages/simple.tmpl
index c73c42d070..586fc21486 100644
--- a/templates/pages/simple.tmpl
+++ b/templates/pages/simple.tmpl
@@ -1,5 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content pages-landing pages-simple">
+{{template "pages/base_head" .}}
+<div class="pages-landing pages-simple">
 	{{template "pages/header" .}}
 
 	<main class="pages-main">
@@ -43,18 +43,15 @@
 			<div class="container">
 				<div class="pages-stats-grid">
 					<div class="pages-stat">
-						<span class="pages-stat-icon">{{svg "octicon-star"}}</span>
 						<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-icon">{{svg "octicon-repo-forked"}}</span>
 						<span class="pages-stat-value">{{.NumForks}}</span>
 						<span class="pages-stat-label">{{ctx.Locale.Tr "repo.forks"}}</span>
 					</div>
 					{{if .Repository.PrimaryLanguage}}
 					<div class="pages-stat">
-						<span class="pages-stat-icon language-color" style="background-color: {{.Repository.PrimaryLanguage.Color}}"></span>
 						<span class="pages-stat-value">{{.Repository.PrimaryLanguage.Language}}</span>
 						<span class="pages-stat-label">{{ctx.Locale.Tr "repo.language"}}</span>
 					</div>
@@ -66,4 +63,4 @@
 
 	{{template "pages/footer" .}}
 </div>
-{{template "base/footer" .}}
+{{template "pages/base_footer" .}}
