images-portfolio

wp-content/themes/sevastopol-tort-child/assets/css/portfolio-page.css

@@ -0,0 +1,151 @@
+.portfolio-page {
+	overflow: hidden;
+}
+
+.portfolio-hero {
+	padding: 72px 0 54px;
+	background: var(--color-bg);
+}
+
+.portfolio-hero__inner,
+.portfolio-gallery__inner,
+.portfolio-lead__inner {
+	width: min(100% - 40px, var(--container));
+	margin: 0 auto;
+}
+
+.portfolio-hero__inner {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
+	align-items: end;
+	gap: 40px;
+}
+
+.portfolio-hero__content {
+	display: grid;
+	gap: 22px;
+}
+
+.portfolio-hero__eyebrow {
+	color: var(--color-accent);
+	font-size: var(--fz-xs);
+	font-weight: 800;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+.portfolio-hero__title {
+	max-width: 780px;
+	font-size: var(--fz-xxl);
+	font-weight: 800;
+	line-height: var(--lh-tight);
+}
+
+.portfolio-hero__lead {
+	max-width: 720px;
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}
+
+.portfolio-hero__meta {
+	display: grid;
+	gap: 6px;
+	border: 1px solid var(--color-line);
+	border-radius: var(--radius-md);
+	background: var(--color-surface);
+	padding: 24px;
+	box-shadow: var(--shadow-soft);
+}
+
+.portfolio-hero__meta-number {
+	color: var(--color-accent-dark);
+	font-size: var(--fz-xl);
+	font-weight: 800;
+	line-height: 1;
+}
+
+.portfolio-hero__meta-text {
+	color: var(--color-muted);
+}
+
+.portfolio-gallery {
+	padding: 28px 0 76px;
+	background: var(--color-bg);
+}
+
+.portfolio-gallery__inner {
+	display: grid;
+	gap: 64px;
+}
+
+.portfolio-gallery__section {
+	display: grid;
+	gap: 24px;
+}
+
+.portfolio-gallery__head {
+	display: grid;
+	gap: 12px;
+	max-width: 820px;
+}
+
+.portfolio-gallery__title {
+	font-size: var(--fz-xl);
+	font-weight: 800;
+	line-height: var(--lh-tight);
+}
+
+.portfolio-gallery__lead {
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}
+
+.portfolio-gallery__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	gap: 16px;
+	align-items: stretch;
+}
+
+.portfolio-gallery__item {
+	aspect-ratio: 1;
+	border: 1px solid var(--color-line);
+	border-radius: var(--radius-md);
+	overflow: hidden;
+	background: var(--color-surface-soft);
+	box-shadow: var(--shadow-soft);
+}
+
+.portfolio-gallery__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: transform 0.24s ease;
+}
+
+.portfolio-gallery__item:hover .portfolio-gallery__image {
+	transform: scale(1.04);
+}
+
+.portfolio-lead {
+	padding: 70px 0;
+	background: var(--color-surface-soft);
+}
+
+.portfolio-lead__inner {
+	display: grid;
+	grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.68fr);
+	gap: 44px;
+	align-items: start;
+}
+
+.portfolio-lead__content {
+	display: grid;
+	gap: 22px;
+}
+
+.portfolio-lead__text {
+	max-width: 560px;
+	color: var(--color-muted);
+	font-size: var(--fz-md);
+}

wp-content/themes/sevastopol-tort-child/assets/css/responsive.css

@@ -9,7 +9,8 @@
 	}
 
 	.service-hero__title,
-	.policy-hero__title {
+	.policy-hero__title,
+	.portfolio-hero__title {
 		font-size: 2.8rem;
 	}
 }
@@ -46,7 +47,10 @@
 	.home-categories,
 	.home-steps,
 	.policy-hero,
-	.policy-content {
+	.policy-content,
+	.portfolio-hero,
+	.portfolio-gallery,
+	.portfolio-lead {
 		padding: 44px 0;
 	}
 
@@ -55,7 +59,9 @@
 	.service-process__inner,
 	.service-lead__inner,
 	.home-hero__inner,
-	.home-steps__inner {
+	.home-steps__inner,
+	.portfolio-hero__inner,
+	.portfolio-lead__inner {
 		grid-template-columns: 1fr;
 	}
 
@@ -94,13 +100,17 @@
 	.home-steps__inner,
 	.site-footer__inner,
 	.policy-hero__inner,
-	.policy-content__inner {
+	.policy-content__inner,
+	.portfolio-hero__inner,
+	.portfolio-gallery__inner,
+	.portfolio-lead__inner {
 		width: min(100% - 20px, var(--container));
 	}
 
 	.service-hero__title,
 	.home-hero__title,
-	.policy-hero__title {
+	.policy-hero__title,
+	.portfolio-hero__title {
 		font-size: 2.2rem;
 	}
 
@@ -119,7 +129,8 @@
 		font-size: 1.7rem;
 	}
 
-	.service-lead__inner {
+	.service-lead__inner,
+	.portfolio-lead__inner {
 		gap: 28px;
 	}
 

wp-content/themes/sevastopol-tort-child/functions.php

@@ -28,7 +28,7 @@ function sev_tort_enqueue_assets() {
 	$responsive_dependencies = array( 'sev-tort-layout' );
 
 	if ( $page ) {
-		$style = isset( $page['style'] ) ? $page['style'] : 'service-page.css';
+		$style = 'portfolio' === $page['slug'] ? 'portfolio-page.css' : ( isset( $page['style'] ) ? $page['style'] : 'service-page.css' );
 		wp_enqueue_style( 'sev-tort-page', $uri . '/assets/css/' . $style, array( 'sev-tort-layout' ), $theme_version );
 		$responsive_dependencies = array( 'sev-tort-page' );
 	} elseif ( is_front_page() ) {

wp-content/themes/sevastopol-tort-child/inc/routes.php

@@ -36,6 +36,10 @@ function sev_tort_template_include( $template ) {
 		return get_stylesheet_directory() . '/page-templates/page-policy.php';
 	}
 
+	if ( 'portfolio' === $page['slug'] ) {
+		return get_stylesheet_directory() . '/page-templates/page-portfolio.php';
+	}
+
 	return get_stylesheet_directory() . '/page-templates/page-service.php';
 }
 

wp-content/themes/sevastopol-tort-child/page-templates/page-portfolio.php

@@ -0,0 +1,125 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$page = sev_tort_current_page_config();
+
+if ( ! function_exists( 'sev_tort_portfolio_image_groups' ) ) {
+function sev_tort_portfolio_image_groups() {
+	$base_dir = get_template_directory() . '/assets/images/images';
+	$base_uri = get_template_directory_uri() . '/assets/images/images';
+	$groups   = array(
+		array(
+			'title' => 'Бенто и праздничные торты',
+			'lead'  => 'Компактные торты, надписи, минималистичный и яркий декор для личных поводов.',
+			'path'  => '',
+			'alt'   => 'Бенто торт на заказ в Севастополе',
+		),
+		array(
+			'title' => 'Медовые торты и классические работы',
+			'lead'  => 'Подборка тортов с натуральным декором, ягодами, кремом и аккуратной подачей.',
+			'path'  => 'medobory_torty_na_zakaz',
+			'alt'   => 'Медовый торт на заказ в Севастополе',
+		),
+		array(
+			'title' => 'Авторские торты Stefany Cake',
+			'lead'  => 'Примеры детских, свадебных, тематических и праздничных тортов с индивидуальным декором.',
+			'path'  => 'stefanycake_torty_na_zakaz',
+			'alt'   => 'Авторский торт на заказ в Севастополе',
+		),
+	);
+
+	foreach ( $groups as $index => $group ) {
+		$directory = trailingslashit( $base_dir );
+		$uri       = trailingslashit( $base_uri );
+
+		if ( $group['path'] ) {
+			$directory .= $group['path'] . '/';
+			$uri       .= $group['path'] . '/';
+		}
+
+		$files = array();
+		foreach ( array( 'jpg', 'jpeg', 'png', 'webp' ) as $extension ) {
+			$matched_files = glob( $directory . '*.' . $extension );
+			if ( $matched_files ) {
+				$files = array_merge( $files, $matched_files );
+			}
+		}
+
+		natsort( $files );
+
+		$groups[ $index ]['images'] = array_map(
+			function ( $file ) use ( $directory, $uri, $group ) {
+				$name   = basename( $file );
+				$number = preg_replace( '/\D+/', '', pathinfo( $name, PATHINFO_FILENAME ) );
+				$size   = @getimagesize( $file );
+
+				return array(
+					'src'    => $uri . $name,
+					'alt'    => trim( $group['alt'] . ( $number ? ' - работа ' . $number : '' ) ),
+					'width'  => $size ? $size[0] : 600,
+					'height' => $size ? $size[1] : 600,
+				);
+			},
+			$files
+		);
+	}
+
+	return $groups;
+}
+}
+
+$portfolio_groups = sev_tort_portfolio_image_groups();
+
+get_header();
+?>
+<main class="portfolio-page">
+	<section class="portfolio-hero">
+		<div class="portfolio-hero__inner">
+			<div class="portfolio-hero__content">
+				<span class="portfolio-hero__eyebrow">Портфолио</span>
+				<h1 class="portfolio-hero__title"><?php echo esc_html( $page['h1'] ); ?></h1>
+				<p class="portfolio-hero__lead"><?php echo esc_html( $page['lead'] ); ?></p>
+			</div>
+			<div class="portfolio-hero__meta">
+				<span class="portfolio-hero__meta-number"><?php echo esc_html( array_sum( array_map( static function ( $group ) { return count( $group['images'] ); }, $portfolio_groups ) ) ); ?></span>
+				<span class="portfolio-hero__meta-text">примеров тортов в галерее</span>
+			</div>
+		</div>
+	</section>
+
+	<section class="portfolio-gallery">
+		<div class="portfolio-gallery__inner">
+			<?php foreach ( $portfolio_groups as $group ) : ?>
+				<div class="portfolio-gallery__section">
+					<div class="portfolio-gallery__head">
+						<h2 class="portfolio-gallery__title"><?php echo esc_html( $group['title'] ); ?></h2>
+						<p class="portfolio-gallery__lead"><?php echo esc_html( $group['lead'] ); ?></p>
+					</div>
+					<div class="portfolio-gallery__grid">
+						<?php foreach ( $group['images'] as $image ) : ?>
+							<figure class="portfolio-gallery__item">
+								<img class="portfolio-gallery__image" src="<?php echo esc_url( $image['src'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" width="<?php echo esc_attr( $image['width'] ); ?>" height="<?php echo esc_attr( $image['height'] ); ?>" loading="lazy">
+							</figure>
+						<?php endforeach; ?>
+					</div>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	</section>
+
+	<section class="portfolio-lead">
+		<div class="portfolio-lead__inner">
+			<div class="portfolio-lead__content">
+				<span class="section-eyebrow">Заявка</span>
+				<h2 class="section-title">Понравился стиль из портфолио?</h2>
+				<p class="portfolio-lead__text">Отправьте пример, дату и пожелания по весу. Подскажем начинку, стоимость и ближайший свободный срок.</p>
+			</div>
+			<?php get_template_part( 'template-parts/lead-form', null, array( 'context' => 'portfolio' ) ); ?>
+		</div>
+	</section>
+</main>
+<?php
+get_footer();