File: /var/www/html/wp-content/mu-plugins/ethnic-web-app-development-page.php
<?php
/**
* Plugin Name: Ethnic Web App Development Page
* Description: Creates and renders the Web App Development sub-service page under App Development.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_web_app_page_parent_id' ) ) {
function ethnic_web_app_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_web_app_page_get_target_page' ) ) {
function ethnic_web_app_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/web-app-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'web-app-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_web_app_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_web_app_page_ensure_page' ) ) {
function ethnic_web_app_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_web_app_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Web App Development',
'post_name' => 'web-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/web-app-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Web 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( 'web-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_web_app_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_web_app_page_is_target' ) ) {
function ethnic_web_app_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_web_app_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_web_app_page_url' ) ) {
function ethnic_web_app_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_web_app_page_contact_url' ) ) {
function ethnic_web_app_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_web_app_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_web_app_page_case_studies_url' ) ) {
function ethnic_web_app_page_case_studies_url() {
return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_web_app_page_url( 'case-studies' );
}
}
if ( ! function_exists( 'ethnic_web_app_page_heading' ) ) {
function ethnic_web_app_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-web-app-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-web-app-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-web-app-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-web-app-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_web_app_page_icon' ) ) {
function ethnic_web_app_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'browser':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3" y="4.5" width="18" height="15" rx="2" />
<path d="M3 8.2h18" />
<path d="M7 6.3h1.2" />
<path d="M10 6.3h1.2" />
</svg>
<?php
break;
case 'pwa':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="5" y="4" width="14" height="16" rx="2.2" />
<path d="M8 8h8" />
<path d="M8 12h8" />
<path d="M10 16h4" />
</svg>
<?php
break;
case 'saas':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="6" width="16" height="12" rx="2" />
<path d="M7.5 10.2h9" />
<path d="M9 14h6" />
</svg>
<?php
break;
case 'dashboard':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 18.5h14" />
<rect x="6.2" y="11.5" width="2.7" height="7" rx="0.8" />
<rect x="10.7" y="8.5" width="2.7" height="10" rx="0.8" />
<rect x="15.2" y="5.5" width="2.7" height="13" rx="0.8" />
</svg>
<?php
break;
case 'automation':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="7" height="7" rx="2" />
<rect x="13" y="4" width="7" height="7" rx="2" />
<rect x="4" y="13" width="7" height="7" rx="2" />
<path d="M13 16h7" />
</svg>
<?php
break;
case 'architecture':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="6" height="6" rx="1.4" />
<rect x="14" y="4" width="6" height="6" rx="1.4" />
<rect x="9" y="14" width="6" height="6" rx="1.4" />
<path d="M10 7h4" />
<path d="M12 10v4" />
</svg>
<?php
break;
case 'support':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7.5 18.2a3 3 0 0 1-3-3v-3.4a7.5 7.5 0 1 1 15 0v3.4a3 3 0 0 1-3 3" />
<path d="M7.5 17.8v1.2A2 2 0 0 0 9.5 21h5" />
<rect x="17" y="10.8" width="2.5" height="5.8" rx="1.1" />
<rect x="4.5" y="10.8" width="2.5" height="5.8" rx="1.1" />
</svg>
<?php
break;
case 'framework':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="7" height="7" rx="2" />
<rect x="13" y="4" width="7" height="7" rx="2" />
<rect x="4" y="13" width="7" height="7" rx="2" />
<rect x="13" y="13" width="7" height="7" rx="2" />
</svg>
<?php
break;
case 'chart':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 18.5h14" />
<rect x="6.2" y="11.5" width="2.7" height="7" rx="0.8" />
<rect x="10.7" y="8.5" width="2.7" height="10" rx="0.8" />
<rect x="15.2" y="5.5" width="2.7" height="13" rx="0.8" />
</svg>
<?php
break;
case 'design':
?>
<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 '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_web_app_page_render' ) ) {
function ethnic_web_app_page_render() {
$hero_points = array(
'Custom business web applications',
'SaaS platforms and internal tools',
'Scalable architecture and modern UX',
);
$overview_features = array(
array(
'icon' => 'browser',
'title' => 'Custom Web Solutions',
'text' => 'Tailored web apps aligned to your workflows, users, and product strategy.',
),
array(
'icon' => 'architecture',
'title' => 'Scalable Product Architecture',
'text' => 'We design for performance, maintainability, and future growth.',
),
array(
'icon' => 'automation',
'title' => 'Business Workflow Automation',
'text' => 'Reduce manual work with automation and connected data flows.',
),
array(
'icon' => 'support',
'title' => 'Ongoing Enhancement & Support',
'text' => 'We support updates, improvements, and long-term product evolution.',
),
);
$pwa_highlights = array(
'App-like user experience',
'Fast performance',
'Mobile-first usability',
'Broad accessibility via browser',
);
$saas_features = array(
array(
'icon' => 'saas',
'title' => 'Multi-user architecture',
'text' => 'Secure roles, permissions, and multi-tenant structures.',
),
array(
'icon' => 'framework',
'title' => 'Subscription workflows',
'text' => 'Billing, upgrades, and lifecycle management.',
),
array(
'icon' => 'dashboard',
'title' => 'Admin & customer portals',
'text' => 'Self-serve dashboards for teams and customers.',
),
array(
'icon' => 'architecture',
'title' => 'Scalable product foundation',
'text' => 'Architecture built for long-term growth and feature expansion.',
),
);
$dashboard_items = array(
array(
'icon' => 'dashboard',
'title' => 'Reporting dashboards',
'text' => 'Business visibility and real-time reporting.',
),
array(
'icon' => 'browser',
'title' => 'Internal admin systems',
'text' => 'Back-office tools for operations teams.',
),
array(
'icon' => 'automation',
'title' => 'Workflow tools',
'text' => 'Automation to reduce manual steps.',
),
array(
'icon' => 'saas',
'title' => 'Operations portals',
'text' => 'Portals for staff, partners, or customers.',
),
array(
'icon' => 'framework',
'title' => 'CRM / ERP connected tools',
'text' => 'Integrations with existing business systems.',
),
array(
'icon' => 'chart',
'title' => 'Analytics interfaces',
'text' => 'Data views that power decision making.',
),
);
$framework_groups = array(
array(
'label' => 'Frontend',
'items' => array( 'React', 'Next.js', 'TypeScript', 'Tailwind' ),
),
array(
'label' => 'Backend',
'items' => array( 'Node.js', 'Laravel', 'PHP', '.NET' ),
),
array(
'label' => 'APIs',
'items' => array( 'REST API', 'GraphQL' ),
),
array(
'label' => 'Databases',
'items' => array( 'MySQL', 'PostgreSQL', 'MongoDB', 'Firebase' ),
),
array(
'label' => 'DevOps / Cloud',
'items' => array( 'AWS', 'Docker', 'CI/CD' ),
),
);
$ux_steps = array(
array(
'title' => 'Discovery & Product Understanding',
'text' => 'We align goals, users, and success metrics.',
),
array(
'title' => 'User Flow Mapping',
'text' => 'We map journeys and workflows for clarity.',
),
array(
'title' => 'Wireframing',
'text' => 'We define layout, structure, and interaction.',
),
array(
'title' => 'Interface Design',
'text' => 'We design modern, usable, conversion-aware UI.',
),
array(
'title' => 'Frontend Development',
'text' => 'We build responsive, accessible interfaces.',
),
array(
'title' => 'Feedback & Iteration',
'text' => 'We refine based on user and stakeholder input.',
),
);
$deployment_checks = array(
'Staging environment setup',
'Secure release workflow',
'Performance validation',
'Cloud deployment readiness',
'Ongoing monitoring',
'Post-launch support',
);
$case_studies = ethnic_shared_service_case_studies(
array(
array(
'industry' => 'SaaS',
'title' => 'Operational Web Platform Rebuild',
'summary' => 'Modernized a workflow-heavy web platform to improve visibility, usability, and long-term maintainability.',
'technologies' => array( 'Web Apps', 'Operations', 'Platform UX' ),
),
array(
'industry' => 'Retail',
'title' => 'Customer Portal Experience',
'summary' => 'Delivered a customer-facing portal with cleaner journeys, stronger account management, and conversion-friendly flows.',
'technologies' => array( 'Web Apps', 'Retail', 'Customer Portal' ),
),
array(
'industry' => 'Fintech',
'title' => 'Secure Dashboard and Onboarding Flow',
'summary' => 'Built a trusted onboarding and reporting experience for product teams serving finance-focused users.',
'technologies' => array( 'Web Apps', 'Fintech', 'Dashboards' ),
),
),
3
);
ob_start();
?>
<div class="ethnic-web-app-page" data-ethnic-web-app-page>
<section class="ethnic-web-app-section ethnic-web-app-section--hero">
<div class="ethnic-web-app-shell ethnic-web-app-hero">
<div class="ethnic-web-app-hero__content">
<p class="ethnic-web-app-kicker">Web App Development</p>
<h1 class="ethnic-web-app-hero__title">Web App Development</h1>
<p class="ethnic-web-app-hero__copy">We build custom web applications that are scalable, user-friendly, and designed for business growth. Our web app development services cover SaaS platforms, internal tools, dashboards, and progressive web apps with modern UX and reliable architecture.</p>
<div class="ethnic-web-app-actions">
<a class="ethnic-web-app-button ethnic-web-app-button--primary" href="<?php echo esc_url( ethnic_web_app_page_contact_url( array( 'intent' => 'consultation', 'service' => 'web-app-development' ) ) ); ?>">Book a Free Consultation</a>
<a class="ethnic-web-app-button ethnic-web-app-button--secondary" href="#web-app-case-studies">View Case Studies</a>
</div>
<ul class="ethnic-web-app-trust">
<?php foreach ( $hero_points as $point ) : ?>
<li>
<span class="ethnic-web-app-trust__icon" aria-hidden="true"><?php echo ethnic_web_app_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-web-app-hero__visual" aria-hidden="true">
<div class="ethnic-web-app-browser">
<div class="ethnic-web-app-browser__bar">
<span></span><span></span><span></span>
</div>
<div class="ethnic-web-app-browser__header">
<div>
<strong>Product Dashboard</strong>
<p>Active accounts</p>
</div>
<div class="ethnic-web-app-browser__metric">+31%</div>
</div>
<div class="ethnic-web-app-browser__grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="ethnic-web-app-browser__row">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-web-app-section" id="web-app-overview">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Service Overview', 'Custom web app development services for digital products, operations, and customer experiences.', 'We build web applications for startups, SMBs, and enterprises that need scalable, maintainable, and business-driven web platforms.' ); ?>
<div class="ethnic-web-app-overview">
<div class="ethnic-web-app-overview__copy">
<p>Our web app development services help teams launch everything from lightweight portals to complex SaaS platforms. We focus on usability, performance, and long-term maintainability so web apps remain reliable and adaptable.</p>
<p>Whether you need customer-facing products, internal workflow tools, automation platforms, or data dashboards, we deliver solutions that align with business outcomes.</p>
<p>Every engagement includes architecture planning, UX strategy, and scalable delivery so your web app can grow with your roadmap.</p>
</div>
<div class="ethnic-web-app-feature-grid">
<?php foreach ( $overview_features as $feature ) : ?>
<article class="ethnic-web-app-feature">
<span class="ethnic-web-app-icon" aria-hidden="true"><?php echo ethnic_web_app_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-web-app-section ethnic-web-app-section--soft" id="web-app-pwa">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Progressive Web Apps', 'PWAs combine web accessibility with app-like experiences.', 'Progressive web apps deliver fast, responsive, and installable experiences for commerce, booking, and engagement-driven products.' ); ?>
<div class="ethnic-web-app-pwa">
<div class="ethnic-web-app-pwa__copy">
<p>PWAs give users app-like experiences directly in the browser, making them ideal for businesses that want speed, reach, and mobile-first usability without native app store dependency.</p>
<p>They work well for commerce, service platforms, booking flows, and recurring engagement experiences.</p>
</div>
<ul class="ethnic-web-app-pwa__list">
<?php foreach ( $pwa_highlights as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</section>
<section class="ethnic-web-app-section" id="web-app-saas">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'SaaS Applications', 'Subscription-ready web applications built for long-term growth.', 'We build SaaS platforms with customer portals, admin tools, and scalable architecture that supports product evolution.' ); ?>
<div class="ethnic-web-app-saas">
<?php foreach ( $saas_features as $feature ) : ?>
<article class="ethnic-web-app-saas__card">
<span class="ethnic-web-app-icon" aria-hidden="true"><?php echo ethnic_web_app_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>
</section>
<section class="ethnic-web-app-section ethnic-web-app-section--soft" id="web-app-dashboards">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Dashboards and Internal Tools', 'Operational platforms and internal tools that improve productivity and visibility.', 'We build admin panels, automation tools, and dashboards that help teams move faster and make better decisions.' ); ?>
<div class="ethnic-web-app-dashboards">
<?php foreach ( $dashboard_items as $item ) : ?>
<article class="ethnic-web-app-dashboards__card">
<span class="ethnic-web-app-icon" aria-hidden="true"><?php echo ethnic_web_app_page_icon( $item['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $item['title'] ); ?></h3>
<p><?php echo esc_html( $item['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-web-app-section" id="web-app-frameworks">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Modern Frameworks', 'Technology choices aligned to business goals, scale, and integration needs.', 'We select frameworks based on product complexity, performance requirements, and long-term maintainability.' ); ?>
<div class="ethnic-web-app-frameworks">
<?php foreach ( $framework_groups as $group ) : ?>
<div class="ethnic-web-app-frameworks__row">
<p class="ethnic-web-app-frameworks__label"><?php echo esc_html( $group['label'] ); ?></p>
<div class="ethnic-web-app-frameworks__chips">
<?php foreach ( $group['items'] as $item ) : ?>
<span><?php echo esc_html( $item ); ?></span>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-web-app-section ethnic-web-app-section--soft" id="web-app-ux">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'UI/UX Process', 'Clear, usable interfaces shaped around user journeys and business outcomes.', 'We design web apps that are intuitive, efficient, and conversion-focused across every workflow.' ); ?>
<div class="ethnic-web-app-ux">
<?php foreach ( $ux_steps as $step ) : ?>
<article class="ethnic-web-app-ux__step">
<span class="ethnic-web-app-icon" aria-hidden="true"><?php echo ethnic_web_app_page_icon( 'design' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $step['title'] ); ?></h3>
<p><?php echo esc_html( $step['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-web-app-section" id="web-app-deployment">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Deployment Model', 'Reliable release workflows that keep web apps stable and secure.', 'We plan deployment with staging, QA, secure release workflows, and ongoing monitoring.' ); ?>
<div class="ethnic-web-app-deployment">
<div class="ethnic-web-app-deployment__copy">
<p>We prepare web apps for launch with secure deployment practices, performance validation, and scalable infrastructure planning. Our process ensures new releases are reliable and easy to maintain.</p>
<p>From staging to production, we handle release readiness, cloud configuration, and post-launch support.</p>
</div>
<div class="ethnic-web-app-deployment__list">
<h3>Deployment checklist</h3>
<ul>
<?php foreach ( $deployment_checks as $check ) : ?>
<li><span aria-hidden="true"><?php echo ethnic_web_app_page_icon( 'check' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span><?php echo esc_html( $check ); ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</section>
<?php if ( ! empty( $case_studies ) ) : ?>
<section class="ethnic-web-app-section" id="web-app-case-studies">
<div class="ethnic-web-app-shell">
<?php echo ethnic_web_app_page_heading( 'Case Studies', 'Web application deliveries shown in the same showcase format used across the site.', 'These previews highlight the kinds of SaaS platforms, internal tools, and customer-facing products we build for growth-focused teams.' ); ?>
<?php echo ethnic_shared_case_study_showcase_render( $case_studies ); ?>
</div>
</section>
<?php endif; ?>
<section class="ethnic-web-app-section ethnic-web-app-section--cta" id="web-app-cta">
<div class="ethnic-web-app-shell">
<div class="ethnic-web-app-cta">
<div class="ethnic-web-app-cta__copy">
<p class="ethnic-web-app-kicker ethnic-web-app-kicker--light">Ready to Talk</p>
<h2>Need a Custom Web App for Your Business?</h2>
<p>Discuss SaaS products, internal tools, dashboards, customer portals, or progressive web app requirements with our team.</p>
</div>
<div class="ethnic-web-app-actions ethnic-web-app-actions--cta">
<a class="ethnic-web-app-button ethnic-web-app-button--primary" href="<?php echo esc_url( ethnic_web_app_page_contact_url( array( 'intent' => 'consultation', 'service' => 'web-app-development' ) ) ); ?>">Talk to Our Team</a>
<a class="ethnic-web-app-button ethnic-web-app-button--secondary" href="<?php echo esc_url( ethnic_web_app_page_contact_url( array( 'intent' => 'quote', 'service' => 'web-app-development' ) ) ); ?>">Get a Free Quote</a>
</div>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_web_app_page_styles' ) ) {
function ethnic_web_app_page_styles() {
return <<<'CSS'
body.ethnic-web-app-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-web-app-target .fullwidth-content > .ethnic-web-app-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
.ethnic-web-app-page {
--ethnic-web-app-text: #0f172a;
--ethnic-web-app-muted: #5c6b84;
--ethnic-web-app-border: rgba(15, 23, 42, 0.08);
--ethnic-web-app-accent: #2f6bff;
--ethnic-web-app-lime: #e7ff89;
--ethnic-web-app-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
--ethnic-web-app-shadow-hover: 0 30px 80px rgba(15, 23, 42, 0.12);
color: var(--ethnic-web-app-text);
}
.ethnic-web-app-page,
.ethnic-web-app-page *,
.ethnic-web-app-page *::before,
.ethnic-web-app-page *::after {
box-sizing: border-box;
}
.ethnic-web-app-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-web-app-section + .ethnic-web-app-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-web-app-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-web-app-page p,
.ethnic-web-app-page li {
color: var(--ethnic-web-app-muted);
font-size: 16px;
line-height: 1.72;
}
.ethnic-web-app-kicker,
.ethnic-web-app-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-web-app-kicker--light {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
.ethnic-web-app-heading {
max-width: 760px;
margin-bottom: clamp(26px, 4vw, 36px);
}
.ethnic-web-app-heading__title,
.ethnic-web-app-hero__title,
.ethnic-web-app-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-web-app-heading__title,
.ethnic-web-app-cta h2 {
color: var(--ethnic-web-app-text);
font-size: clamp(30px, 2.5vw, 44px);
line-height: 1.04;
}
.ethnic-web-app-heading__copy {
margin: 18px 0 0;
max-width: 64ch;
}
.ethnic-web-app-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-web-app-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-web-app-button:hover,
.ethnic-web-app-button:focus-visible {
transform: translateY(-2px);
outline: none;
}
.ethnic-web-app-button--primary {
background: var(--ethnic-web-app-lime);
border: 1px solid var(--ethnic-web-app-lime);
color: #0b1730 !important;
box-shadow: 0 18px 30px rgba(231, 255, 137, 0.18);
}
.ethnic-web-app-button--secondary {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--ethnic-web-app-text) !important;
}
.ethnic-web-app-section--hero {
padding-top: clamp(18px, 3vw, 32px);
}
.ethnic-web-app-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-web-app-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-web-app-hero__content,
.ethnic-web-app-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-web-app-hero__title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(42px, 5vw, 72px);
line-height: 0.96;
}
.ethnic-web-app-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-web-app-trust {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.ethnic-web-app-trust li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.ethnic-web-app-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-web-app-lime);
}
.ethnic-web-app-trust__icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-web-app-browser {
display: grid;
gap: 16px;
padding: 20px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 28px 60px rgba(3, 10, 25, 0.2);
}
.ethnic-web-app-browser__bar {
display: flex;
gap: 6px;
}
.ethnic-web-app-browser__bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(47, 107, 255, 0.3);
}
.ethnic-web-app-browser__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ethnic-web-app-browser__header strong {
display: block;
color: var(--ethnic-web-app-text);
font-size: 16px;
}
.ethnic-web-app-browser__header p {
margin: 4px 0 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ethnic-web-app-browser__metric {
padding: 8px 12px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.12);
color: var(--ethnic-web-app-text);
font-weight: 800;
}
.ethnic-web-app-browser__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ethnic-web-app-browser__grid span {
display: block;
height: 72px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.06);
}
.ethnic-web-app-browser__row {
display: grid;
gap: 10px;
}
.ethnic-web-app-browser__row span {
display: block;
height: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.1);
}
.ethnic-web-app-overview {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 28px 36px;
align-items: start;
}
.ethnic-web-app-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-content: start;
}
.ethnic-web-app-saas,
.ethnic-web-app-dashboards,
.ethnic-web-app-ux {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ethnic-web-app-feature,
.ethnic-web-app-saas__card,
.ethnic-web-app-dashboards__card,
.ethnic-web-app-ux__step {
padding: 24px;
border-radius: 24px;
border: 1px solid var(--ethnic-web-app-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-web-app-shadow);
}
.ethnic-web-app-feature {
min-height: 100%;
}
.ethnic-web-app-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-web-app-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ethnic-web-app-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-web-app-feature h3,
.ethnic-web-app-saas__card h3,
.ethnic-web-app-dashboards__card h3,
.ethnic-web-app-ux__step h3,
.ethnic-web-app-pwa__list li,
.ethnic-web-app-deployment__list h3 {
margin: 16px 0 0;
color: var(--ethnic-web-app-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-web-app-feature p,
.ethnic-web-app-saas__card p,
.ethnic-web-app-dashboards__card p,
.ethnic-web-app-ux__step p {
margin: 10px 0 0;
}
.ethnic-web-app-pwa {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
gap: 24px;
align-items: start;
}
.ethnic-web-app-pwa__list {
margin: 0;
padding-left: 18px;
color: var(--ethnic-web-app-muted);
}
.ethnic-web-app-pwa__list li + li {
margin-top: 10px;
}
.ethnic-web-app-frameworks {
display: grid;
gap: 16px;
}
.ethnic-web-app-frameworks__row {
display: grid;
grid-template-columns: minmax(140px, 0.3fr) minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 18px 22px;
border-radius: 20px;
border: 1px solid var(--ethnic-web-app-border);
background: #ffffff;
box-shadow: var(--ethnic-web-app-shadow);
}
.ethnic-web-app-frameworks__label {
margin: 0;
color: var(--ethnic-web-app-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ethnic-web-app-frameworks__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-web-app-frameworks__chips span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: rgba(47, 107, 255, 0.08);
border: 1px solid rgba(47, 107, 255, 0.12);
color: var(--ethnic-web-app-text);
font-size: 13px;
font-weight: 700;
}
.ethnic-web-app-deployment {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
gap: 28px;
align-items: start;
}
.ethnic-web-app-deployment__list {
padding: 24px;
border-radius: 26px;
border: 1px solid var(--ethnic-web-app-border);
background: #ffffff;
box-shadow: var(--ethnic-web-app-shadow);
}
.ethnic-web-app-deployment__list ul {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.ethnic-web-app-deployment__list li {
display: flex;
align-items: center;
gap: 10px;
color: var(--ethnic-web-app-text);
font-size: 14px;
font-weight: 600;
}
.ethnic-web-app-deployment__list 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-web-app-accent);
}
.ethnic-web-app-deployment__list li span svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-web-app-section--cta {
margin-top: clamp(80px, 9vw, 120px);
}
.ethnic-web-app-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-web-app-cta h2,
.ethnic-web-app-cta p {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-web-app-cta p {
max-width: 62ch;
margin: 16px 0 0;
}
@media (max-width: 1200px) {
.ethnic-web-app-overview,
.ethnic-web-app-pwa,
.ethnic-web-app-deployment {
grid-template-columns: 1fr;
}
.ethnic-web-app-feature-grid,
.ethnic-web-app-saas,
.ethnic-web-app-dashboards,
.ethnic-web-app-ux {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.ethnic-web-app-hero {
grid-template-columns: 1fr;
}
.ethnic-web-app-hero__visual {
order: -1;
}
}
@media (max-width: 980px) {
.ethnic-web-app-cta {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.ethnic-web-app-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 16px) * 2)));
}
.ethnic-web-app-section + .ethnic-web-app-section {
margin-top: 56px;
}
.ethnic-web-app-hero {
padding: 26px 22px;
border-radius: 28px;
}
.ethnic-web-app-hero__title {
font-size: clamp(34px, 10vw, 48px);
}
.ethnic-web-app-heading__title,
.ethnic-web-app-cta h2 {
font-size: clamp(26px, 7.6vw, 34px);
}
.ethnic-web-app-actions,
.ethnic-web-app-actions--cta {
flex-direction: column;
align-items: stretch;
}
.ethnic-web-app-button {
width: 100%;
}
.ethnic-web-app-trust {
flex-direction: column;
align-items: flex-start;
}
.ethnic-web-app-feature-grid,
.ethnic-web-app-saas,
.ethnic-web-app-dashboards,
.ethnic-web-app-ux {
grid-template-columns: 1fr;
}
.ethnic-web-app-frameworks__row {
grid-template-columns: 1fr;
}
.ethnic-web-app-feature,
.ethnic-web-app-saas__card,
.ethnic-web-app-dashboards__card,
.ethnic-web-app-ux__step,
.ethnic-web-app-deployment__list,
.ethnic-web-app-cta {
padding-left: 22px;
padding-right: 22px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_web_app_page_body_class' ) ) {
function ethnic_web_app_page_body_class( $classes ) {
if ( ethnic_web_app_page_is_target() ) {
$classes[] = 'ethnic-web-app-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_web_app_page_body_class' );
}
if ( ! function_exists( 'ethnic_web_app_page_print_head_assets' ) ) {
function ethnic_web_app_page_print_head_assets() {
if ( ! ethnic_web_app_page_is_target() ) {
return;
}
?>
<style id="ethnic-web-app-page-inline-css" type="text/css">
<?php echo ethnic_web_app_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="Build scalable custom web applications with our web app development services, including SaaS platforms, progressive web apps, dashboards, and internal business tools." />
<?php
}
add_action( 'wp_head', 'ethnic_web_app_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_web_app_page_document_title' ) ) {
function ethnic_web_app_page_document_title( $title ) {
if ( ethnic_web_app_page_is_target() ) {
return 'Web App Development Services | SaaS, PWAs, Dashboards & Custom Web Applications';
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_web_app_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_web_app_page_replace_content' ) ) {
function ethnic_web_app_page_replace_content( $content ) {
if ( ! ethnic_web_app_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_web_app_page_render();
}
add_filter( 'the_content', 'ethnic_web_app_page_replace_content', 1000 );
}