File: /var/www/html/wp-content/mu-plugins/ethnic-react-native-app-development-page.php
<?php
/**
* Plugin Name: Ethnic React Native App Development Page
* Description: Creates and renders the React Native App Development sub-service page under App Development.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_react_native_page_parent_id' ) ) {
function ethnic_react_native_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_react_native_page_get_target_page' ) ) {
function ethnic_react_native_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/react-native-app-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'react-native-app-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_react_native_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_react_native_page_ensure_page' ) ) {
function ethnic_react_native_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_react_native_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'React Native App Development',
'post_name' => 'react-native-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/react-native-app-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'React Native 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( 'react-native-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_react_native_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_react_native_page_is_target' ) ) {
function ethnic_react_native_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_react_native_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_react_native_page_url' ) ) {
function ethnic_react_native_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_react_native_page_contact_url' ) ) {
function ethnic_react_native_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_react_native_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_react_native_page_heading' ) ) {
function ethnic_react_native_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-react-native-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-react-native-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-react-native-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-react-native-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_react_native_page_icon' ) ) {
function ethnic_react_native_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'react':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<ellipse cx="12" cy="12" rx="8.2" ry="3.2" />
<ellipse cx="12" cy="12" rx="8.2" ry="3.2" transform="rotate(60 12 12)" />
<ellipse cx="12" cy="12" rx="8.2" ry="3.2" transform="rotate(-60 12 12)" />
<circle cx="12" cy="12" r="1.5" />
</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 '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 'mvp':
?>
<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 'commerce':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 8.2h14l-1.2 8.3H6.2L5 8.2z" />
<path d="M8 8.2V6.5A2.3 2.3 0 0 1 10.3 4h3.4A2.3 2.3 0 0 1 16 6.5v1.7" />
</svg>
<?php
break;
case 'booking':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="5" width="16" height="14" rx="2" />
<path d="M8 3.8v2.4" />
<path d="M16 3.8v2.4" />
<path d="M4 9.5h16" />
</svg>
<?php
break;
case 'marketplace':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4 7.5h16l-1.4 8.3H7.2L5.8 7.5z" />
<circle cx="9" cy="18.2" r="1.2" />
<circle cx="16" cy="18.2" r="1.2" />
</svg>
<?php
break;
case 'internal':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="4" width="16" height="16" rx="2.5" />
<path d="M8 8h8" />
<path d="M8 12h4" />
<path d="M8 16h6" />
</svg>
<?php
break;
case 'loyalty':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 5l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z" />
</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_react_native_page_render' ) ) {
function ethnic_react_native_page_render() {
$hero_points = array(
'Cross-platform app development',
'Faster launch for iOS and Android',
'Scalable mobile product delivery',
);
$overview_features = array(
array(
'icon' => 'layers',
'title' => 'Shared Codebase Efficiency',
'text' => 'One codebase supports iOS and Android while keeping experiences consistent.',
),
array(
'icon' => 'rocket',
'title' => 'Faster Product Launch',
'text' => 'Move from idea to release faster with shared development workflows.',
),
array(
'icon' => 'react',
'title' => 'Cross-Platform Consistency',
'text' => 'Deliver a unified UX across devices with React Native components.',
),
array(
'icon' => 'speed',
'title' => 'Scalable Mobile Development',
'text' => 'We plan for performance, maintainability, and long-term growth.',
),
);
$use_cases = array(
array(
'icon' => 'mvp',
'title' => 'MVP app launches',
'text' => 'Validate ideas quickly with cross-platform delivery.',
),
array(
'icon' => 'rocket',
'title' => 'Startup mobile products',
'text' => 'Launch faster without duplicating iOS and Android teams.',
),
array(
'icon' => 'layers',
'title' => 'Customer-facing business apps',
'text' => 'Provide consistent mobile experiences across platforms.',
),
array(
'icon' => 'booking',
'title' => 'Service booking apps',
'text' => 'Support scheduling, confirmations, and on-demand services.',
),
array(
'icon' => 'commerce',
'title' => 'eCommerce mobile apps',
'text' => 'Drive conversion and engagement with mobile commerce experiences.',
),
array(
'icon' => 'internal',
'title' => 'Internal business apps',
'text' => 'Enable teams with mobile workflow tools.',
),
array(
'icon' => 'marketplace',
'title' => 'Marketplace apps',
'text' => 'Multi-sided platforms for vendors and customers.',
),
array(
'icon' => 'loyalty',
'title' => 'Loyalty or engagement apps',
'text' => 'Retain users with engagement and reward features.',
),
);
$suitable_items = array(
'Multi-platform launch goals',
'MVP or startup timelines',
'Cost-conscious product planning',
'Ongoing feature iteration',
'Consistent cross-platform experience',
);
$speed_highlights = array(
'Faster launch cycles',
'Shared development workflow',
'Efficient product iteration',
'Lower duplication of effort',
);
$integration_groups = array(
array(
'title' => 'APIs & Backend Systems',
'items' => array( 'REST APIs', 'GraphQL', 'Custom backends' ),
),
array(
'title' => 'Payments & Transactions',
'items' => array( 'Payment gateways', 'In-app purchases', 'Subscriptions' ),
),
array(
'title' => 'Notifications & Messaging',
'items' => array( 'Push notifications', 'Email/SMS', 'In-app messaging' ),
),
array(
'title' => 'Analytics & Tracking',
'items' => array( 'User analytics', 'Event tracking', 'Performance monitoring' ),
),
array(
'title' => 'Business Software Integrations',
'items' => array( 'CRM/ERP', 'Support tools', 'Data sync services' ),
),
);
$maintenance_items = array(
'Ongoing bug fixes',
'Feature enhancements',
'Performance improvements',
'Version compatibility updates',
'Release support',
);
ob_start();
?>
<div class="ethnic-react-native-page" data-ethnic-react-native-page>
<section class="ethnic-react-native-section ethnic-react-native-section--hero">
<div class="ethnic-react-native-shell ethnic-react-native-hero">
<div class="ethnic-react-native-hero__content">
<p class="ethnic-react-native-kicker">React Native App Development</p>
<h1 class="ethnic-react-native-hero__title">React Native App Development</h1>
<p class="ethnic-react-native-hero__copy">Build high-quality cross-platform mobile apps with faster development cycles and efficient product delivery. Our React Native app development services help teams launch iOS and Android apps faster while keeping performance, UX, and scalability in focus.</p>
<div class="ethnic-react-native-actions">
<a class="ethnic-react-native-button ethnic-react-native-button--primary" href="<?php echo esc_url( ethnic_react_native_page_contact_url( array( 'intent' => 'consultation', 'service' => 'react-native-app-development' ) ) ); ?>">Book a Free Consultation</a>
<a class="ethnic-react-native-button ethnic-react-native-button--secondary" href="<?php echo esc_url( ethnic_react_native_page_contact_url( array( 'intent' => 'team', 'service' => 'react-native-app-development' ) ) ); ?>">Talk to Our Team</a>
</div>
<ul class="ethnic-react-native-trust">
<?php foreach ( $hero_points as $point ) : ?>
<li>
<span class="ethnic-react-native-trust__icon" aria-hidden="true"><?php echo ethnic_react_native_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-react-native-hero__visual" aria-hidden="true">
<div class="ethnic-react-native-mockup">
<div class="ethnic-react-native-mockup__phone">
<div class="ethnic-react-native-mockup__screen">
<div class="ethnic-react-native-mockup__pill">React Native</div>
<div class="ethnic-react-native-mockup__stats">
<div>
<strong>2x</strong>
<span>Faster release</span>
</div>
<div>
<strong>1</strong>
<span>Codebase</span>
</div>
</div>
<div class="ethnic-react-native-mockup__list">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="ethnic-react-native-mockup__code"></div>
</div>
</div>
</div>
</section>
<section class="ethnic-react-native-section" id="rn-overview">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'Service Overview', 'React Native app development services built for speed, consistency, and scalable delivery.', 'We build cross-platform apps using a shared codebase to reduce development effort across iOS and Android while maintaining strong UX.' ); ?>
<div class="ethnic-react-native-overview">
<div class="ethnic-react-native-overview__copy">
<p>React Native helps teams launch mobile products faster with a single codebase and unified product direction. It is well-suited for startups, MVPs, growth-stage products, and business apps that need speed and cost-efficiency.</p>
<p>We balance speed, cost-efficiency, and user experience while supporting planning, launch, and post-release improvements.</p>
<p>Our React Native app development company services include architecture planning, performance tuning, integration support, and scalable delivery.</p>
</div>
<div class="ethnic-react-native-feature-grid">
<?php foreach ( $overview_features as $feature ) : ?>
<article class="ethnic-react-native-feature">
<span class="ethnic-react-native-icon" aria-hidden="true"><?php echo ethnic_react_native_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-react-native-section ethnic-react-native-section--soft" id="rn-use-cases">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'React Native Use Cases', 'React Native is a strong fit for fast, scalable cross-platform delivery.', 'We use React Native when products need speed, shared delivery, and consistent UX across iOS and Android.' ); ?>
<div class="ethnic-react-native-cases">
<?php foreach ( $use_cases as $case ) : ?>
<article class="ethnic-react-native-case">
<span class="ethnic-react-native-icon" aria-hidden="true"><?php echo ethnic_react_native_page_icon( $case['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $case['title'] ); ?></h3>
<p><?php echo esc_html( $case['text'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-react-native-section" id="rn-suitable">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'When It Is Suitable', 'React Native works best when speed, cross-platform delivery, and iteration matter.', 'The right framework depends on product complexity, integrations, and user expectations. We help teams choose the best fit.' ); ?>
<div class="ethnic-react-native-suitable">
<ul>
<?php foreach ( $suitable_items as $item ) : ?>
<li><span aria-hidden="true"><?php echo ethnic_react_native_page_icon( 'check' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
<p class="ethnic-react-native-note">Framework choice should be based on business goals, product complexity, integrations, and user expectations.</p>
</div>
</div>
</section>
<section class="ethnic-react-native-section ethnic-react-native-section--soft" id="rn-speed">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'Speed-to-Market Positioning', 'React Native helps teams launch faster without sacrificing product quality.', 'Shared development effort reduces time to initial release and improves iteration speed for early-stage and growth products.' ); ?>
<div class="ethnic-react-native-speed">
<div class="ethnic-react-native-speed__copy">
<p>React Native enables faster delivery through a shared codebase and a unified product direction across platforms. It is especially valuable for teams that need to validate ideas quickly and iterate based on user feedback.</p>
<p>We focus on realistic delivery timelines, strong engineering discipline, and measurable product outcomes.</p>
</div>
<ul class="ethnic-react-native-speed__list">
<?php foreach ( $speed_highlights as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</section>
<section class="ethnic-react-native-section" id="rn-integrations">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'Integration Capabilities', 'React Native apps connect to the systems that power your business.', 'We integrate APIs, payments, authentication, analytics, and core business tools to deliver a complete product experience.' ); ?>
<div class="ethnic-react-native-integrations">
<?php foreach ( $integration_groups as $group ) : ?>
<article class="ethnic-react-native-integration">
<span class="ethnic-react-native-icon" aria-hidden="true"><?php echo ethnic_react_native_page_icon( 'integration' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<h3><?php echo esc_html( $group['title'] ); ?></h3>
<ul>
<?php foreach ( $group['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-react-native-section ethnic-react-native-section--soft" id="rn-maintenance">
<div class="ethnic-react-native-shell">
<?php echo ethnic_react_native_page_heading( 'Maintenance and Updates', 'Ongoing support for React Native apps after launch.', 'We support bug fixing, feature enhancements, OS compatibility updates, and performance optimization over time.' ); ?>
<div class="ethnic-react-native-maintenance">
<?php foreach ( $maintenance_items as $item ) : ?>
<div class="ethnic-react-native-maintenance__item">
<span aria-hidden="true"><?php echo ethnic_react_native_page_icon( 'maintenance' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
<p><?php echo esc_html( $item ); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-react-native-section ethnic-react-native-section--cta" id="rn-cta">
<div class="ethnic-react-native-shell">
<div class="ethnic-react-native-cta">
<div class="ethnic-react-native-cta__copy">
<p class="ethnic-react-native-kicker ethnic-react-native-kicker--light">Ready to Talk</p>
<h2>Need a Faster Way to Launch a Mobile App?</h2>
<p>Discuss React Native app ideas, MVP launches, cross-platform requirements, or modernization plans with our team.</p>
</div>
<div class="ethnic-react-native-actions ethnic-react-native-actions--cta">
<a class="ethnic-react-native-button ethnic-react-native-button--primary" href="<?php echo esc_url( ethnic_react_native_page_contact_url( array( 'intent' => 'consultation', 'service' => 'react-native-app-development' ) ) ); ?>">Talk to Our Team</a>
<a class="ethnic-react-native-button ethnic-react-native-button--secondary" href="<?php echo esc_url( ethnic_react_native_page_contact_url( array( 'intent' => 'quote', 'service' => 'react-native-app-development' ) ) ); ?>">Get a Free Quote</a>
</div>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_react_native_page_styles' ) ) {
function ethnic_react_native_page_styles() {
return <<<'CSS'
body.ethnic-react-native-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-react-native-target .fullwidth-content > .ethnic-react-native-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
.ethnic-react-native-page {
--ethnic-react-native-text: #0f172a;
--ethnic-react-native-muted: #5c6b84;
--ethnic-react-native-border: rgba(15, 23, 42, 0.08);
--ethnic-react-native-accent: #2f6bff;
--ethnic-react-native-lime: #e7ff89;
--ethnic-react-native-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
--ethnic-react-native-shadow-hover: 0 30px 80px rgba(15, 23, 42, 0.12);
color: var(--ethnic-react-native-text);
}
.ethnic-react-native-page,
.ethnic-react-native-page *,
.ethnic-react-native-page *::before,
.ethnic-react-native-page *::after {
box-sizing: border-box;
}
.ethnic-react-native-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-react-native-section + .ethnic-react-native-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-react-native-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-react-native-page p,
.ethnic-react-native-page li {
color: var(--ethnic-react-native-muted);
font-size: 16px;
line-height: 1.72;
}
.ethnic-react-native-kicker,
.ethnic-react-native-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-react-native-kicker--light {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
.ethnic-react-native-heading {
max-width: 760px;
margin-bottom: clamp(26px, 4vw, 36px);
}
.ethnic-react-native-heading__title,
.ethnic-react-native-hero__title,
.ethnic-react-native-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-react-native-heading__title,
.ethnic-react-native-cta h2 {
color: var(--ethnic-react-native-text);
font-size: clamp(30px, 2.5vw, 44px);
line-height: 1.04;
}
.ethnic-react-native-heading__copy {
margin: 18px 0 0;
max-width: 64ch;
}
.ethnic-react-native-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-react-native-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-react-native-button:hover,
.ethnic-react-native-button:focus-visible {
transform: translateY(-2px);
outline: none;
}
.ethnic-react-native-button--primary {
background: var(--ethnic-react-native-lime);
border: 1px solid var(--ethnic-react-native-lime);
color: #0b1730 !important;
box-shadow: 0 18px 30px rgba(231, 255, 137, 0.18);
}
.ethnic-react-native-button--secondary {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--ethnic-react-native-text) !important;
}
.ethnic-react-native-section--hero {
padding-top: clamp(18px, 3vw, 32px);
}
.ethnic-react-native-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-react-native-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-react-native-hero__content,
.ethnic-react-native-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-react-native-hero__title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(42px, 5vw, 72px);
line-height: 0.96;
}
.ethnic-react-native-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-react-native-trust {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.ethnic-react-native-trust li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.ethnic-react-native-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-react-native-lime);
}
.ethnic-react-native-trust__icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-react-native-mockup {
position: relative;
display: grid;
place-items: center;
min-height: 420px;
}
.ethnic-react-native-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-react-native-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-react-native-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-react-native-text);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ethnic-react-native-mockup__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ethnic-react-native-mockup__stats div {
padding: 12px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.ethnic-react-native-mockup__stats strong {
display: block;
color: var(--ethnic-react-native-text);
font-size: 18px;
}
.ethnic-react-native-mockup__stats span {
display: block;
margin-top: 6px;
color: var(--ethnic-react-native-muted);
font-size: 12px;
font-weight: 700;
}
.ethnic-react-native-mockup__list {
display: grid;
gap: 10px;
}
.ethnic-react-native-mockup__list span {
display: block;
height: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.1);
}
.ethnic-react-native-mockup__code {
position: absolute;
right: 0;
top: 10%;
width: 160px;
height: 200px;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(47, 107, 255, 0.16), rgba(255, 255, 255, 0.9));
box-shadow: 0 18px 40px rgba(3, 10, 25, 0.12);
}
.ethnic-react-native-overview {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 28px 36px;
align-items: start;
}
.ethnic-react-native-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-content: start;
}
.ethnic-react-native-cases,
.ethnic-react-native-integrations {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ethnic-react-native-feature,
.ethnic-react-native-case,
.ethnic-react-native-integration {
padding: 24px;
border-radius: 24px;
border: 1px solid var(--ethnic-react-native-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-react-native-shadow);
}
.ethnic-react-native-feature {
min-height: 100%;
}
.ethnic-react-native-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-react-native-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ethnic-react-native-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-react-native-feature h3,
.ethnic-react-native-case h3,
.ethnic-react-native-integration h3 {
margin: 16px 0 0;
color: var(--ethnic-react-native-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-react-native-feature p,
.ethnic-react-native-case p,
.ethnic-react-native-integration ul {
margin: 10px 0 0;
}
.ethnic-react-native-suitable ul,
.ethnic-react-native-speed__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.ethnic-react-native-suitable li {
display: flex;
align-items: center;
gap: 10px;
color: var(--ethnic-react-native-text);
font-weight: 600;
}
.ethnic-react-native-suitable 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-react-native-accent);
}
.ethnic-react-native-suitable li span svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-react-native-note {
margin-top: 14px;
font-size: 14px;
color: var(--ethnic-react-native-muted);
}
.ethnic-react-native-speed {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
gap: 28px;
align-items: start;
}
.ethnic-react-native-speed__list li {
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(47, 107, 255, 0.12);
background: rgba(47, 107, 255, 0.06);
}
.ethnic-react-native-integrations ul {
padding-left: 18px;
color: var(--ethnic-react-native-muted);
}
.ethnic-react-native-maintenance {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.ethnic-react-native-maintenance__item {
padding: 16px;
border-radius: 18px;
border: 1px solid var(--ethnic-react-native-border);
background: #ffffff;
box-shadow: var(--ethnic-react-native-shadow);
display: grid;
gap: 10px;
}
.ethnic-react-native-maintenance__item span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(47, 107, 255, 0.12);
color: var(--ethnic-react-native-accent);
}
.ethnic-react-native-section--cta {
margin-top: clamp(80px, 9vw, 120px);
}
.ethnic-react-native-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-react-native-cta h2,
.ethnic-react-native-cta p {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-react-native-cta p {
max-width: 62ch;
margin: 16px 0 0;
}
@media (max-width: 1200px) {
.ethnic-react-native-overview,
.ethnic-react-native-speed {
grid-template-columns: 1fr;
}
.ethnic-react-native-feature-grid,
.ethnic-react-native-cases,
.ethnic-react-native-integrations {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-react-native-maintenance {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.ethnic-react-native-hero {
grid-template-columns: 1fr;
}
.ethnic-react-native-hero__visual {
order: -1;
}
}
@media (max-width: 980px) {
.ethnic-react-native-cta {
grid-template-columns: 1fr;
}
.ethnic-react-native-maintenance {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.ethnic-react-native-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 16px) * 2)));
}
.ethnic-react-native-section + .ethnic-react-native-section {
margin-top: 56px;
}
.ethnic-react-native-hero {
padding: 26px 22px;
border-radius: 28px;
}
.ethnic-react-native-hero__title {
font-size: clamp(34px, 10vw, 48px);
}
.ethnic-react-native-heading__title,
.ethnic-react-native-cta h2 {
font-size: clamp(26px, 7.6vw, 34px);
}
.ethnic-react-native-actions,
.ethnic-react-native-actions--cta {
flex-direction: column;
align-items: stretch;
}
.ethnic-react-native-button {
width: 100%;
}
.ethnic-react-native-trust {
flex-direction: column;
align-items: flex-start;
}
.ethnic-react-native-feature-grid,
.ethnic-react-native-cases,
.ethnic-react-native-integrations {
grid-template-columns: 1fr;
}
.ethnic-react-native-maintenance {
grid-template-columns: 1fr;
}
.ethnic-react-native-feature,
.ethnic-react-native-case,
.ethnic-react-native-integration,
.ethnic-react-native-cta {
padding-left: 22px;
padding-right: 22px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_react_native_page_body_class' ) ) {
function ethnic_react_native_page_body_class( $classes ) {
if ( ethnic_react_native_page_is_target() ) {
$classes[] = 'ethnic-react-native-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_react_native_page_body_class' );
}
if ( ! function_exists( 'ethnic_react_native_page_print_head_assets' ) ) {
function ethnic_react_native_page_print_head_assets() {
if ( ! ethnic_react_native_page_is_target() ) {
return;
}
?>
<style id="ethnic-react-native-page-inline-css" type="text/css">
<?php echo ethnic_react_native_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="Build high-quality cross-platform mobile apps with our React Native app development services. Launch faster, reduce duplicated effort, and scale your mobile product with confidence." />
<?php
}
add_action( 'wp_head', 'ethnic_react_native_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_react_native_page_document_title' ) ) {
function ethnic_react_native_page_document_title( $title ) {
if ( ethnic_react_native_page_is_target() ) {
return 'React Native App Development Services | Cross-Platform Mobile App Development';
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_react_native_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_react_native_page_replace_content' ) ) {
function ethnic_react_native_page_replace_content( $content ) {
if ( ! ethnic_react_native_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_react_native_page_render();
}
add_filter( 'the_content', 'ethnic_react_native_page_replace_content', 1000 );
}