Skip to content

M
makura-2025
Commit 449e4a85 by Arjun Jhukal
Options

updated the new service detail and section at home page

parent a3ac940f
Showing with 710 additions and 53 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/img/milestone.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/script.js
......@@ -25,6 +25,7 @@
/** GLOBAL SCROLL INTO VIEW CONTROLLER START HERE*/
$(function () {
$(".makura-new a[data-target]").on("click", function (e) {
console.log("clicked data target");
e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass("active");
const currentActive = $(this).data("target");
......@@ -207,4 +208,59 @@
});
});
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */
/** CASE STUDY DETAIL */
$(function () {
// Handle click on TOC items
$(".case-study-general .category-list a[data-target]").on("click", function (e) {
e.preventDefault();
// Update active class on TOC items
$(this).parent("li").addClass("active").siblings("li").removeClass("active");
// Scroll to the target section
var currentActive = $(this).data("target");
document.getElementById(currentActive)?.scrollIntoView({
behavior: "smooth",
});
});
function handleTocActiveOnScroll(offset = 100) {
let currentId = null;
// Check all h2 elements with IDs in the content area
$(".case-study-general-content h2[id]").each(function () {
const elementTop = $(this).offset().top;
const scrollPosition = $(window).scrollTop() + offset;
if (elementTop <= scrollPosition) {
currentId = $(this).attr("id");
}
});
// Update active TOC item if a section is in view
if (currentId) {
$(".case-study-general .category-list li").removeClass("active");
$(`.case-study-general .category-list a[data-target="${currentId}"]`)
.parent("li")
.addClass("active");
}
}
// Handle scroll events
$(window).on("load scroll", function () {
handleTocActiveOnScroll();
});
});
$(function () {
// Wrap tables inside .table-responsive
$(".case-study-general-content table").each(function () {
const $table = $(this);
if (!$table.parent().hasClass("table-responsive")) {
$table.wrap('<div class="table-responsive"></div>');
}
});
})
})(jQuery);
blocks/portfolio-banner.php
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
<?php if(is_page("case-study-single")):?>
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new case-study-banner">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-7 title-wrapper">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div>
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
<div class="col-lg-4 col-xl-3">
<div class="banner-counter">
<div class="counter-item">
<h2><span class="counter" data-reach="78">78</span>%</h2>
<p>increased in organic traffic</p>
</div>
<div class="counter-item">
<h2><span class="counter" data-reach="80">80</span>+</h2>
<p>keywords ranked under top 20 globally</p>
</div>
<div class="counter-item">
<h2><span class="counter" data-reach="96">96</span>%</h2>
<p>reduction on bounce rate</p>
</div>
</div>
</div>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
<div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
</div>
</section>
<?php else:?>
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
<div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div>
<?php
</div>
<?php
$sof_title = get_field('sof_title')?:'Scope of Work';
if ($scope = get_field('scope_of_work')): ?>
<div class="scope-work-wrapper">
<?php if (!empty($sof_title)): ?><span class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?>
<ul class="list-unstyled">
<?php echo $scope; ?>
</ul>
<div class="scope-work-wrapper">
<?php if (!empty($sof_title)): ?><span
class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?>
<ul class="list-unstyled">
<?php echo $scope; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
</section>
\ No newline at end of file
</section>
<?php endif;?>
\ No newline at end of file
blocks/welcome-banner.php
<?php if (get_field('enable_welcome_banner_section')) : ?>
<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
</div>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>"
class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a>
</div>
<div class="review-block d-flex">
<div class="review">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/banner-image-01.png" alt=""
class="img-fluid">
</div>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a>
<div class="review">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/banner-image-02.png" alt=""
class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<?php
</div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<?php
$image = get_field('banner_image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if ($image) {
echo wp_get_attachment_image($image, $size);
} ?>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
dev/sass/pages/_milestone.scss 0 → 100644
.milestone {
padding: 64px 0;
background: #F9F8F4;
.section-title {
max-width: 962px;
img {
max-width: 64px;
margin-right: 24px;
}
}
.row {
--bs-gutter-y: 16px;
}
}
.milestone-card {
background-color: var(--white);
.milestone-card-content {
padding: 32px 40px 24px;
}
img.milestone-logo {
margin-bottom: 24px;
}
span.over-title {
display: block;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: $primary;
margin-bottom: 12px;
}
h3 {
margin-bottom: 12px;
}
a {
font-weight: 600;
font-size: 18px;
line-height: 28px;
letter-spacing: -0.5px;
color: $primary;
margin-top: 12px;
display: block;
}
}
\ No newline at end of file
dev/sass/pages/case-study/_case-study-banner.scss 0 → 100644
.case-study-banner {
.banner-counter {
.counter-item {
padding: 16px 24px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.1);
* {
color: var(--white);
}
h2 {
margin-bottom: 4px;
}
&:not(:last-child) {
margin-bottom: 8px;
}
}
}
}
\ No newline at end of file
dev/sass/pages/case-study/_case-study-general.scss 0 → 100644
.case-study-general {
margin-bottom: 64px;
.case-study-general-aside,
.case-study-general-content {
padding-top: 64px;
}
.case-study-general-aside {
ul {
li {
a {
font-size: 14px;
line-height: 24px;
letter-spacing: 0px;
color: #58595A !important;
&::after {
content: "";
display: inline-block;
width: 10px;
height: 6px;
background: url(../img/angle-down.svg) no-repeat center/contain;
transform: rotate(-90deg);
opacity: 0;
transition: all 0.3s ease-in-out;
}
}
&.active,
&:hover {
a {
color: #121526 !important;
&::after {
transform: translateX(10px) rotate(-90deg);
opacity: 1;
}
}
}
}
}
}
.case-study-general-content {
h2 {
margin-bottom: 16px;
&:not(:first-child) {
margin-top: 48px;
}
}
p,
ul,
ol,
img,
figure {
+p,
+ul,
+ol,
+img,
+figure {
margin-top: 16px;
}
}
ul,
ol {
li {
color: $grey;
+li {
margin-top: 12px;
}
}
}
a {
color: $primary;
}
ul {
li {
padding-left: 24px;
position: relative;
&::after {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 8px;
height: 8px;
background-color: $primary;
transform: rotate(45deg);
}
}
}
ol {
padding-left: 24px;
li {
list-style-type: decimal;
}
}
table {
margin-top: 24px;
width: 100%;
min-width: 856px;
tr {
td {
padding: 12px 40px;
}
&:first-child {
td {
background-color: $primary;
color: var(--white);
font-size: 14px;
line-height: 140%;
font-weight: 700;
}
}
&:nth-child(odd):not(:first-child) {
td {
background-color: rgba(18, 21, 38, 0.1);
}
}
}
}
figure,
img {
border-radius: 12px;
overflow: hidden;
}
}
}
@media (min-width:992px) {
.case-study-general {
margin-bottom: 96px;
.case-study-general-aside,
.case-study-general-content {
padding-top: 96px;
}
.case-study-general-aside {
position: sticky;
top: 0;
}
.case-study-general-content {
padding-left: 24px;
border-left: 1px solid rgba(0, 0, 0, 0.1);
h2 {
&:not(:first-child) {
margin-top: 72px;
}
}
}
}
}
\ No newline at end of file
dev/sass/style.scss
......@@ -8,6 +8,10 @@ $theme-colors: (
"red": #f71d24
);
:root {
--white: #fff;
}
//colors
// $primary: #121526;
$primary: #005aff;
......@@ -17,6 +21,7 @@ $primary-second: #005aff;
$grey: #58595a;
$red: #f71d24;
//fonts
$body-font: "Sora", sans-serif;
......@@ -62,3 +67,6 @@ $body-font: "Sora", sans-serif;
@import "pages/master-portfolio/sticky-tab";
@import "pages/master-portfolio/block-gallery";
@import "pages/master-portfolio/moment-gallery";
@import "pages/case-study/case-study-banner";
@import "pages/case-study/case-study-general";
@import "pages/milestone";
\ No newline at end of file
page-templates/case-study-detail.php 0 → 100644
<?php
/**
* Template Name: Case Study Sinlge
*/
get_header();
the_content();
?>
<section class="case-study-general makura-new">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xl-3">
<aside class="case-study-general-aside toc">
<div class="toc-title d-lg-none">
<h6>Table of Content</h6>
</div>
<div class="category-list">
<ul>
<li class="active">
<a href="#" data-target="background">Background</a>
</li>
<li>
<a href="#" data-target="seo">Background</a>
</li>
</ul>
</div>
</aside>
</div>
<div class="col-lg-8 col-xl-9">
<div class="case-study-general-content">
<h2 id="background">Background</h2>
<p>Lambda Payments specializes in financial technology, enriching the way people and businesses pay
and are paid and improving the safety of their money and other valuable assets. Lambda Payments
provides end-to-end Fintech products and solutions to enterprises, banks, and financial
institutions. Combining a team of battle-hardened industry experts with avant-garde technology,
we provide an all-encompassing suite of solutions fitted for the unique needs of our clients.
Dedicated to the pursuit of excellence, focused on user-centric design, they strive to enable
technology to make lives better for all.</p>
<h2 id="seo">SEO Achievements</h2>
<p>Lambda Payments provides end-to-end Fintech products and solutions to enterprises, banks, and
financial institutions.</p>
<ol>
<li>Improved Keyword Rankings
</li>
<li>Increased Traffic</li>
<li> Enhanced User Engagement</li>
<li> Built Industry Authority</li>
</ol>
<table>
<tbody>
<tr>
<td>Metric</td>
<td>Initial Value (Jan 2024)</td>
<td>Final Value (Jan 2025)</td>
<td>Growth</td>
</tr>
<tr>
<td>Authority Score</td>
<td>Authority Score</td>
<td>Authority Score</td>
<td>Authority Score</td>
</tr>
<tr>
<td>Authority Score</td>
<td>Authority Score</td>
<td>Authority Score</td>
<td>Authority Score</td>
</tr>
</tbody>
</table>
<h2>Performance Metrics Graph</h2>
<p>Combining a team of battle-hardened industry experts with avant-garde technology, we provide an
all-encompassing suite of solutions fitted for the unique needs of our clients. Dedicated to the
pursuit of excellence, focused on user-centric design, they strive to enable technology to make
lives better for all.</p>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid">
<figure>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid">
</figure>
<h2>Traffic Growth</h2>
<p>In addition to keyword improvements, organic traffic has steadily grown:</p>
<ul>
<li>Organic Traffic: Traffic grew by 78%, from 1,730 visitors to 3,075 in January 2024</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<?php
get_template_part("/template-parts/home/milestone",null);
get_footer();
?>
\ No newline at end of file
template-parts/home/milestone.php 0 → 100644
<section class="milestone makura-new">
<div class="container">
<div class="section-title">
<h2>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone-title.svg?>" alt="">
Recognition & Milestones
</h2>
<p>Our work has been recognized for pushing creative boundaries and delivering real impact. These milestones
reflect our passion for design and the trust our clients place in us.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid ">
</div>
</div>
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid">
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment