File: /var/www/html/wp-content/mu-plugins/ethnic-flutter-app-development-page.php
<?php
/**
* Plugin Name: Ethnic Flutter App Development Page
* Description: Creates and renders the Flutter App Development sub-service page under App Development.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_flutter_page_parent_id' ) ) {
function ethnic_flutter_page_parent_id() {
static $parent_id = null;
if ( null !== $parent_id ) {
return $parent_id;
}
$page = get_page_by_path( 'services/app-development' );
if ( $page instanceof WP_Post ) {
$parent_id = (int) $page->ID;
} else {
$fallback = get_page_by_path( 'app-development' );
$parent_id = $fallback instanceof WP_Post ? (int) $fallback->ID : 0;
}
return $parent_id;
}
}
if ( ! function_exists( 'ethnic_flutter_page_get_target_page' ) ) {
function ethnic_flutter_page_get_target_page() {
static $page = false;
if ( false !== $page ) {
return $page instanceof WP_Post ? $page : null;
}
$page = get_page_by_path( 'services/app-development/flutter-app-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'flutter-app-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_flutter_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_flutter_page_ensure_page' ) ) {
function ethnic_flutter_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_flutter_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Flutter App Development',
'post_name' => 'flutter-app-development',
'post_parent' => $parent_id,
'post_status' => 'publish',
'post_content' => '',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
$page = get_page_by_path( 'services/app-development/flutter-app-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Flutter App Development' !== $page->post_title
|| (int) $page->post_parent !== $parent_id
|| 'publish' !== $page->post_status;
if ( $needs_update ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $page->ID,
)
)
);
clean_post_cache( (int) $page->ID );
}
return;
}
$fallback = get_page_by_path( 'flutter-app-development' );
if ( $fallback instanceof WP_Post ) {
wp_update_post(
array_merge(
$postarr,
array(
'ID' => (int) $fallback->ID,
)
)
);
clean_post_cache( (int) $fallback->ID );
return;
}
wp_insert_post( $postarr );
}
add_action( 'init', 'ethnic_flutter_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_flutter_page_is_target' ) ) {
function ethnic_flutter_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_flutter_page_get_target_page();
if ( ! ( $page instanceof WP_Post ) ) {
return false;
}
return (int) get_queried_object_id() === (int) $page->ID || is_page( (int) $page->ID );
}
}
if ( ! function_exists( 'ethnic_flutter_page_url' ) ) {
function ethnic_flutter_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_flutter_page_contact_url' ) ) {
function ethnic_flutter_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_flutter_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_flutter_page_case_studies_url' ) ) {
function ethnic_flutter_page_case_studies_url() {
return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_flutter_page_url( 'case-studies' );
}
}
if ( ! function_exists( 'ethnic_flutter_page_heading' ) ) {
function ethnic_flutter_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-flutter-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-flutter-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-flutter-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-flutter-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_flutter_page_icon' ) ) {
function ethnic_flutter_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'flutter':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 13.5L14.9 5.6h3.3L10.3 13.5z" />
<path d="M10.3 13.5l2.6-2.6 5.3 5.3h-3.3z" />
<path d="M10.3 13.5l4.6 4.6H11.7L7 13.5z" />
</svg>
<?php
break;
case 'palette':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4c4.4 0 8 2.8 8 6.4 0 3-2.7 5.4-6.1 5.4h-1.2c-.8 0-1.5.6-1.5 1.3 0 .4.1.7.4 1l.7.7c.5.5.2 1.2-.5 1.2C7.5 20 4 16.6 4 12.4 4 7.8 7.6 4 12 4z" />
<circle cx="8.2" cy="10.1" r="1" />
<circle cx="11.1" cy="8.1" r="1" />
<circle cx="14.5" cy="8.3" r="1" />
<circle cx="16.9" cy="10.8" r="1" />
</svg>
<?php
break;
case 'rocket':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5l3.6 3.6-3.6 8.4-3.6-8.4z" />
<path d="M9 15.5l-2 5 5-2 5 2-2-5" />
</svg>
<?php
break;
case 'layers':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 5l8 4.2-8 4.2-8-4.2z" />
<path d="M4 12.2l8 4.2 8-4.2" />
<path d="M4 16.8l8 4.2 8-4.2" />
</svg>
<?php
break;
case 'benefit':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="16" height="16" rx="3" />
<path d="M8 12h8" />
<path d="M12 8v8" />
</svg>
<?php
break;
case 'speed':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 15a7.5 7.5 0 0 1 15 0" />
<path d="M12 12l3.5-3.5" />
<circle cx="12" cy="15" r="1.2" />
</svg>
<?php
break;
case 'integration':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.5" y="5" width="7" height="5.5" rx="1.2" />
<rect x="13.5" y="5" width="7" height="5.5" rx="1.2" />
<rect x="8.5" y="14.2" width="7" height="5.5" rx="1.2" />
<path d="M10.5 7.8h3" />
<path d="M12 10.5v3.7" />
</svg>
<?php
break;
case 'maintenance':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14.8 5.2a3.7 3.7 0 0 0-4.7 4.7l-5.5 5.5a1.8 1.8 0 0 0 2.6 2.6l5.5-5.5a3.7 3.7 0 0 0 4.7-4.7l-2.4 2.4-2.4-2.4z" />
</svg>
<?php
break;
case 'check':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7.5 12.3l3 3 6-6.3" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_flutter_page_render' ) ) {
function ethnic_flutter_page_render() {
$hero_points = array(
'Cross-platform app delivery',
'Consistent UI across devices',
'Faster development for growing products',
);
$overview_features = array(
array(
'icon' => 'layers',
'title' => 'Cross-Platform Efficiency',
'text' => 'One shared Flutter codebase powers iOS and Android experiences.',
),
array(
'icon' => 'palette',
'title' => 'Modern UI Delivery',
'text' => 'Flutter enables polished, branded interfaces with strong consistency.',
),
array(
'icon' => 'rocket',
'title' => 'Faster Product Launch',
'text' => 'Move faster with shared development workflows and simplified releases.',
),
array(
'icon' => 'flutter',
'title' => 'Scalable App Foundation',
'text' => 'We plan for performance, maintainability, and long-term growth.',
),
);
$benefits = array(
array(
'title' => 'Shared codebase for multiple platforms',
'text' => 'Reduce duplication and keep delivery aligned across iOS and Android.',
),
array(
'title' => 'Modern UI capabilities',
'text' => 'Build rich interfaces with consistent design patterns.',
),
array(
'title' => 'Strong visual consistency',
'text' => 'Ensure the same UI and behavior across device types.',
),
array(
'title' => 'Faster iteration for product teams',
'text' => 'Release updates quickly with a unified workflow.',
),
array(
'title' => 'Suitable for MVPs and growth products',
'text' => 'Validate ideas and scale as the product matures.',
),
array(
'title' => 'Scalable foundation for ongoing enhancement',
'text' => 'Support a long-term roadmap without rebuilding.',
),
);
$fit_items = array(
'Launching on iOS and Android together',
'Need for faster MVP development',
'Visual consistency is important',
'Ongoing product iteration is expected',
'Balanced speed and budget matter',
);
$workflow_steps = array(
array(
'title' => 'Discovery & Product Planning',
'text' => 'We align goals, users, and success metrics.',
),
array(
'title' => 'UX / Wireframing',
'text' => 'We define flows and structure for clarity.',
),
array(
'title' => 'UI Design',
'text' => 'We design a consistent interface system.',
),
array(
'title' => 'Flutter Development',
'text' => 'We build the app in shared iterations.',
),
array(
'title' => 'Backend / API Integration',
'text' => 'We connect data systems, services, and APIs.',
),
array(
'title' => 'QA & Device Testing',
'text' => 'We validate usability and performance.',
),
array(
'title' => 'Launch & Support',
'text' => 'We support release and post-launch updates.',
),
);
$ui_highlights = array(
array(
'title' => 'Consistent visual language',
'text' => 'Maintain one design system across devices.',
),
array(
'title' => 'Controlled interface behavior',
'text' => 'Predictable UI across OS variations.',
),
array(
'title' => 'Strong design system alignment',
'text' => 'Match brand and product design expectations.',
),
array(
'title' => 'Polished user experience',
'text' => 'Deliver a premium feel without native divergence.',
),
);
$speed_items = array(
'Faster launch cycles',
'Reduced duplicated effort',
'Efficient iteration',
'Better cost control for multi-platform products',
);
$case_studies = ethnic_shared_service_case_studies(
array(
array(
'industry' => 'Retail',
'title' => 'Cross-Platform Commerce App',
'summary' => 'Unified iOS and Android delivery for a growth-focused retail brand.',
'technologies' => array( 'Flutter', 'Retail', 'Cross-Platform' ),
),
array(
'industry' => 'Logistics',
'title' => 'Operations Tracking Platform',
'summary' => 'Delivered a cross-platform workflow app for field teams.',
'technologies' => array( 'Flutter', 'Logistics', 'Workflows' ),
),
array(
'industry' => 'Fintech',
'title' => 'Financial Services MVP',
'summary' => 'Accelerated MVP launch with consistent UI across platforms.',
'technologies' => array( 'Flutter', 'Fintech', 'MVP Delivery' ),
),
),
3
);
ob_start();
?>
<div class="ethnic-flutter-page" data-ethnic-flutter-page>
<section class="ethnic-flutter-section ethnic-flutter-section--hero">
<div class="ethnic-flutter-shell ethnic-flutter-hero">
<div class="ethnic-flutter-hero__content">
<p class="ethnic-flutter-kicker">Flutter App Development</p>
<h1 class="ethnic-flutter-hero__title">Flutter App Development</h1>
<p class="ethnic-flutter-hero__copy">Build fast, visually polished, and scalable cross-platform apps with Flutter. We help teams launch consistent mobile experiences with speed, cost efficiency, and long-term maintainability.</p>
<div class="ethnic-flutter-actions">
<a class="ethnic-flutter-button ethnic-flutter-button--primary" href="<?php echo esc_url( ethnic_flutter_page_contact_url( array( 'intent' => 'consultation', 'service' => 'flutter-app-development' ) ) ); ?>">Book a Free Consultation</a>
<a class="ethnic-flutter-button ethnic-flutter-button--secondary" href="#flutter-case-studies">View Case Studies</a>
</div>
<ul class="ethnic-flutter-trust">
<?php foreach ( $hero_points as $point ) : ?>
<li>
<span class="ethnic-flutter-trust__icon" aria-hidden="true"><?php echo ethnic_flutter_page_icon( 'check' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<span><?php echo esc_html( $point ); ?></span>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-flutter-hero__visual" aria-hidden="true">
<div class="ethnic-flutter-mockup">
<div class="ethnic-flutter-mockup__phone">
<div class="ethnic-flutter-mockup__screen">
<div class="ethnic-flutter-mockup__pill">Flutter UI</div>
<div class="ethnic-flutter-mockup__cards">
<div>
<strong>Design system</strong>
<span>Aligned</span>
</div>
<div>
<strong>Release</strong>
<span>Faster</span>
</div>
</div>
<div class="ethnic-flutter-mockup__list">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="ethnic-flutter-mockup__glow"></div>
</div>
</div>
</div>
</section>
<section class="ethnic-flutter-section" id="flutter-overview">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'Service Overview', 'Flutter app development services for fast, consistent, and scalable mobile products.', 'We deliver cross-platform apps that balance speed, cost-efficiency, and modern UX for startups, SMBs, and enterprise teams.' ); ?>
<div class="ethnic-flutter-overview">
<div class="ethnic-flutter-overview__copy">
<p>Flutter enables a shared codebase for iOS and Android while delivering a polished, consistent UI across devices. It is ideal for teams that need efficient delivery without sacrificing visual quality.</p>
<p>We focus on maintainability, performance, and scalable architecture so apps can evolve with product roadmaps.</p>
<p>Our Flutter app development services cover planning, design, development, launch, and post-release updates.</p>
</div>
<div class="ethnic-flutter-feature-grid">
<?php foreach ( $overview_features as $feature ) : ?>
<article class="ethnic-flutter-feature">
<span class="ethnic-flutter-icon" aria-hidden="true"><?php echo ethnic_flutter_page_icon( $feature['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $feature['title'] ); ?></h3>
<p><?php echo esc_html( $feature['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-flutter-section ethnic-flutter-section--soft" id="flutter-benefits">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'Flutter Benefits', 'Key advantages of Flutter for cross-platform mobile delivery.', 'Flutter combines speed, UI consistency, and scalability for teams building modern mobile products.' ); ?>
<div class="ethnic-flutter-benefits">
<?php foreach ( $benefits as $benefit ) : ?>
<article class="ethnic-flutter-benefit">
<span class="ethnic-flutter-icon" aria-hidden="true"><?php echo ethnic_flutter_page_icon( 'benefit' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $benefit['title'] ); ?></h3>
<p><?php echo esc_html( $benefit['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-flutter-section" id="flutter-fit">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'When to Choose Flutter', 'Flutter is a strong fit for teams that need speed and UI consistency.', 'The right technology depends on product complexity, integrations, and long-term roadmap goals.' ); ?>
<div class="ethnic-flutter-fit">
<ul>
<?php foreach ( $fit_items as $item ) : ?>
<li><span aria-hidden="true"><?php echo ethnic_flutter_page_icon( 'check' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
<p class="ethnic-flutter-note">Framework choice should be guided by product complexity, integrations, business goals, and the long-term roadmap.</p>
</div>
</div>
</section>
<section class="ethnic-flutter-section ethnic-flutter-section--soft" id="flutter-workflow">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'Cross-Platform Development Workflow', 'How Flutter app delivery moves from planning to launch.', 'We keep the workflow structured, visible, and optimized for speed and quality.' ); ?>
<ol class="ethnic-flutter-workflow">
<?php foreach ( $workflow_steps as $step ) : ?>
<li>
<h3><?php echo esc_html( $step['title'] ); ?></h3>
<p><?php echo esc_html( $step['text'] ); ?></p>
</li>
<?php endforeach; ?>
</ol>
</div>
</section>
<section class="ethnic-flutter-section" id="flutter-ui-consistency">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'UI Consistency', 'Maintain one visual system across platforms without compromises.', 'Flutter helps teams deliver consistent interfaces, predictable behavior, and premium design quality across devices.' ); ?>
<div class="ethnic-flutter-ui">
<?php foreach ( $ui_highlights as $highlight ) : ?>
<article class="ethnic-flutter-ui__card">
<span class="ethnic-flutter-icon" aria-hidden="true"><?php echo ethnic_flutter_page_icon( 'palette' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $highlight['title'] ); ?></h3>
<p><?php echo esc_html( $highlight['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-flutter-section ethnic-flutter-section--soft" id="flutter-speed">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'Speed and Cost Benefits', 'Efficient delivery without overstating outcomes.', 'Flutter can reduce duplicated effort, simplify maintenance, and support faster iterations.' ); ?>
<div class="ethnic-flutter-speed">
<?php foreach ( $speed_items as $item ) : ?>
<div class="ethnic-flutter-speed__item"><?php echo esc_html( $item ); ?></div>
<?php endforeach; ?>
</div>
</div>
</section>
<?php if ( ! empty( $case_studies ) ) : ?>
<section class="ethnic-flutter-section" id="flutter-case-studies">
<div class="ethnic-flutter-shell">
<?php echo ethnic_flutter_page_heading( 'Case Studies', 'Cross-platform app deliveries with measurable outcomes.', 'Examples of Flutter app development aligned to business goals.' ); ?>
<?php echo ethnic_shared_case_study_showcase_render( $case_studies ); ?>
</div>
</section>
<?php endif; ?>
<section class="ethnic-flutter-section ethnic-flutter-section--cta" id="flutter-cta">
<div class="ethnic-flutter-shell">
<div class="ethnic-flutter-cta">
<div class="ethnic-flutter-cta__copy">
<p class="ethnic-flutter-kicker ethnic-flutter-kicker--light">Ready to Talk</p>
<h2>Looking for Flutter App Development Services?</h2>
<p>Discuss Flutter app ideas, cross-platform MVPs, product launches, or modernization requirements with our team.</p>
</div>
<div class="ethnic-flutter-actions ethnic-flutter-actions--cta">
<a class="ethnic-flutter-button ethnic-flutter-button--primary" href="<?php echo esc_url( ethnic_flutter_page_contact_url( array( 'intent' => 'consultation', 'service' => 'flutter-app-development' ) ) ); ?>">Talk to Our Team</a>
<a class="ethnic-flutter-button ethnic-flutter-button--secondary" href="<?php echo esc_url( ethnic_flutter_page_contact_url( array( 'intent' => 'quote', 'service' => 'flutter-app-development' ) ) ); ?>">Get a Free Quote</a>
</div>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_flutter_page_styles' ) ) {
function ethnic_flutter_page_styles() {
return <<<'CSS'
body.ethnic-flutter-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-flutter-target .fullwidth-content > .ethnic-flutter-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
.ethnic-flutter-page {
--ethnic-flutter-text: #0f172a;
--ethnic-flutter-muted: #5c6b84;
--ethnic-flutter-border: rgba(15, 23, 42, 0.08);
--ethnic-flutter-accent: #2f6bff;
--ethnic-flutter-lime: #e7ff89;
--ethnic-flutter-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
--ethnic-flutter-shadow-hover: 0 30px 80px rgba(15, 23, 42, 0.12);
color: var(--ethnic-flutter-text);
}
.ethnic-flutter-page,
.ethnic-flutter-page *,
.ethnic-flutter-page *::before,
.ethnic-flutter-page *::after {
box-sizing: border-box;
}
.ethnic-flutter-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-flutter-section + .ethnic-flutter-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-flutter-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-flutter-page p,
.ethnic-flutter-page li {
color: var(--ethnic-flutter-muted);
font-size: 16px;
line-height: 1.72;
}
.ethnic-flutter-kicker,
.ethnic-flutter-heading__eyebrow {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0 0 16px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.1);
border: 1px solid rgba(47, 107, 255, 0.12);
color: #2f6bff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.ethnic-flutter-kicker--light {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
.ethnic-flutter-heading {
max-width: 760px;
margin-bottom: clamp(26px, 4vw, 36px);
}
.ethnic-flutter-heading__title,
.ethnic-flutter-hero__title,
.ethnic-flutter-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-flutter-heading__title,
.ethnic-flutter-cta h2 {
color: var(--ethnic-flutter-text);
font-size: clamp(30px, 2.5vw, 44px);
line-height: 1.04;
}
.ethnic-flutter-heading__copy {
margin: 18px 0 0;
max-width: 64ch;
}
.ethnic-flutter-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-flutter-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 22px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ethnic-flutter-button:hover,
.ethnic-flutter-button:focus-visible {
transform: translateY(-2px);
outline: none;
}
.ethnic-flutter-button--primary {
background: var(--ethnic-flutter-lime);
border: 1px solid var(--ethnic-flutter-lime);
color: #0b1730 !important;
box-shadow: 0 18px 30px rgba(231, 255, 137, 0.18);
}
.ethnic-flutter-button--secondary {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--ethnic-flutter-text) !important;
}
.ethnic-flutter-section--hero {
padding-top: clamp(18px, 3vw, 32px);
}
.ethnic-flutter-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr);
gap: clamp(28px, 5vw, 56px);
align-items: center;
padding: clamp(38px, 6vw, 64px);
border-radius: 36px;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.2), transparent 28%),
radial-gradient(circle at bottom right, rgba(231, 255, 137, 0.12), transparent 18%),
linear-gradient(135deg, #0f172a 0%, #142543 46%, #163561 100%);
box-shadow: 0 34px 90px rgba(15, 23, 42, 0.16);
}
.ethnic-flutter-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 95%, rgba(255, 255, 255, 0.04) 95%),
linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.04) 95%);
background-size: 100% 58px, 58px 100%;
opacity: 0.18;
pointer-events: none;
}
.ethnic-flutter-hero__content,
.ethnic-flutter-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-flutter-hero__title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(42px, 5vw, 72px);
line-height: 0.96;
}
.ethnic-flutter-hero__copy {
max-width: 62ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.86) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.86);
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.72;
}
.ethnic-flutter-trust {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.ethnic-flutter-trust li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.ethnic-flutter-trust__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--ethnic-flutter-lime);
}
.ethnic-flutter-trust__icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-flutter-mockup {
position: relative;
display: grid;
place-items: center;
min-height: 420px;
}
.ethnic-flutter-mockup__phone {
width: min(320px, 100%);
border-radius: 36px;
padding: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 28px 60px rgba(3, 10, 25, 0.2);
}
.ethnic-flutter-mockup__screen {
border-radius: 26px;
padding: 18px;
min-height: 360px;
background:
linear-gradient(180deg, rgba(47, 107, 255, 0.16), rgba(255, 255, 255, 0.96)),
#ffffff;
display: grid;
gap: 16px;
}
.ethnic-flutter-mockup__pill {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
color: var(--ethnic-flutter-text);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ethnic-flutter-mockup__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ethnic-flutter-mockup__cards div {
padding: 12px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.ethnic-flutter-mockup__cards strong {
display: block;
color: var(--ethnic-flutter-text);
font-size: 14px;
}
.ethnic-flutter-mockup__cards span {
display: block;
margin-top: 6px;
color: var(--ethnic-flutter-muted);
font-size: 12px;
font-weight: 700;
}
.ethnic-flutter-mockup__list {
display: grid;
gap: 10px;
}
.ethnic-flutter-mockup__list span {
display: block;
height: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.1);
}
.ethnic-flutter-mockup__glow {
position: absolute;
inset: 12%;
background: radial-gradient(circle, rgba(47, 107, 255, 0.32), transparent 70%);
filter: blur(40px);
opacity: 0.6;
}
.ethnic-flutter-overview {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 28px 36px;
align-items: start;
}
.ethnic-flutter-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-content: start;
}
.ethnic-flutter-benefits,
.ethnic-flutter-ui {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ethnic-flutter-feature,
.ethnic-flutter-benefit,
.ethnic-flutter-ui__card {
padding: 24px;
border-radius: 24px;
border: 1px solid var(--ethnic-flutter-border);
background:
radial-gradient(circle at top right, rgba(47, 107, 255, 0.06), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
box-shadow: var(--ethnic-flutter-shadow);
}
.ethnic-flutter-feature {
min-height: 100%;
}
.ethnic-flutter-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(47, 107, 255, 0.18), rgba(255, 255, 255, 0.96));
border: 1px solid rgba(47, 107, 255, 0.16);
color: var(--ethnic-flutter-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ethnic-flutter-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-flutter-feature h3,
.ethnic-flutter-benefit h3,
.ethnic-flutter-ui__card h3,
.ethnic-flutter-case h3,
.ethnic-flutter-workflow h3 {
margin: 16px 0 0;
color: var(--ethnic-flutter-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(19px, 1.35vw, 24px);
line-height: 1.16;
letter-spacing: -0.04em;
text-wrap: balance;
}
.ethnic-flutter-feature p,
.ethnic-flutter-benefit p,
.ethnic-flutter-ui__card p {
margin: 10px 0 0;
}
.ethnic-flutter-fit ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.ethnic-flutter-fit li {
display: flex;
align-items: center;
gap: 10px;
color: var(--ethnic-flutter-text);
font-weight: 600;
}
.ethnic-flutter-fit li span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(47, 107, 255, 0.12);
color: var(--ethnic-flutter-accent);
}
.ethnic-flutter-fit li span svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-flutter-note {
margin-top: 14px;
font-size: 14px;
color: var(--ethnic-flutter-muted);
}
.ethnic-flutter-workflow {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
border-left: 2px solid rgba(47, 107, 255, 0.18);
padding-left: 24px;
}
.ethnic-flutter-workflow li {
position: relative;
padding: 6px 0 6px 16px;
}
.ethnic-flutter-workflow li::before {
content: "";
position: absolute;
left: -30px;
top: 12px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ethnic-flutter-accent);
box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.18);
}
.ethnic-flutter-speed {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.ethnic-flutter-speed__item {
padding: 16px;
border-radius: 18px;
border: 1px solid var(--ethnic-flutter-border);
background: rgba(47, 107, 255, 0.06);
font-weight: 600;
}
.ethnic-flutter-cases {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.ethnic-flutter-case {
padding: 24px;
border-radius: 26px;
border: 1px solid var(--ethnic-flutter-border);
background:
radial-gradient(circle at top right, rgba(47, 107, 255, 0.06), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
box-shadow: var(--ethnic-flutter-shadow);
}
.ethnic-flutter-case__tag {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
color: var(--ethnic-flutter-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ethnic-flutter-case p {
margin: 14px 0 0;
}
.ethnic-flutter-inline-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: var(--ethnic-flutter-accent);
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.ethnic-flutter-inline-link::after {
content: "→";
font-size: 16px;
}
.ethnic-flutter-section--cta {
margin-top: clamp(80px, 9vw, 120px);
}
.ethnic-flutter-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
padding: clamp(28px, 5vw, 48px);
border-radius: 32px;
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.2), transparent 28%),
radial-gradient(circle at bottom right, rgba(231, 255, 137, 0.18), transparent 18%),
linear-gradient(135deg, #0f172a 0%, #142543 46%, #173561 100%);
box-shadow: 0 34px 90px rgba(15, 23, 42, 0.16);
}
.ethnic-flutter-cta h2,
.ethnic-flutter-cta p {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-flutter-cta p {
max-width: 62ch;
margin: 16px 0 0;
}
@media (max-width: 1200px) {
.ethnic-flutter-overview {
grid-template-columns: 1fr;
}
.ethnic-flutter-feature-grid,
.ethnic-flutter-benefits,
.ethnic-flutter-ui {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-flutter-speed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.ethnic-flutter-hero {
grid-template-columns: 1fr;
}
.ethnic-flutter-hero__visual {
order: -1;
}
}
@media (max-width: 980px) {
.ethnic-flutter-cta {
grid-template-columns: 1fr;
}
.ethnic-flutter-cases {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.ethnic-flutter-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 16px) * 2)));
}
.ethnic-flutter-section + .ethnic-flutter-section {
margin-top: 56px;
}
.ethnic-flutter-hero {
padding: 26px 22px;
border-radius: 28px;
}
.ethnic-flutter-hero__title {
font-size: clamp(34px, 10vw, 48px);
}
.ethnic-flutter-heading__title,
.ethnic-flutter-cta h2 {
font-size: clamp(26px, 7.6vw, 34px);
}
.ethnic-flutter-actions,
.ethnic-flutter-actions--cta {
flex-direction: column;
align-items: stretch;
}
.ethnic-flutter-button {
width: 100%;
}
.ethnic-flutter-trust {
flex-direction: column;
align-items: flex-start;
}
.ethnic-flutter-feature-grid,
.ethnic-flutter-benefits,
.ethnic-flutter-ui {
grid-template-columns: 1fr;
}
.ethnic-flutter-speed {
grid-template-columns: 1fr;
}
.ethnic-flutter-feature,
.ethnic-flutter-benefit,
.ethnic-flutter-ui__card,
.ethnic-flutter-case,
.ethnic-flutter-cta {
padding-left: 22px;
padding-right: 22px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_flutter_page_body_class' ) ) {
function ethnic_flutter_page_body_class( $classes ) {
if ( ethnic_flutter_page_is_target() ) {
$classes[] = 'ethnic-flutter-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_flutter_page_body_class' );
}
if ( ! function_exists( 'ethnic_flutter_page_print_head_assets' ) ) {
function ethnic_flutter_page_print_head_assets() {
if ( ! ethnic_flutter_page_is_target() ) {
return;
}
?>
<style id="ethnic-flutter-page-inline-css" type="text/css">
<?php echo ethnic_flutter_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="Build fast, visually consistent cross-platform apps with our Flutter app development services. Launch efficiently, reduce duplicated effort, and create scalable mobile products." />
<?php
}
add_action( 'wp_head', 'ethnic_flutter_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_flutter_page_document_title' ) ) {
function ethnic_flutter_page_document_title( $title ) {
if ( ethnic_flutter_page_is_target() ) {
return 'Flutter App Development Services | Cross-Platform Mobile App Development';
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_flutter_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_flutter_page_replace_content' ) ) {
function ethnic_flutter_page_replace_content( $content ) {
if ( ! ethnic_flutter_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_flutter_page_render();
}
add_filter( 'the_content', 'ethnic_flutter_page_replace_content', 1000 );
}