color corrections updated
This commit is contained in:
parent
f57dab317f
commit
6f87a43fb0
@ -241,7 +241,7 @@
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
/* Center of numbering */
|
||||
top: 170px;
|
||||
top: 220px;
|
||||
/* Start below the first number to avoid line going above */
|
||||
bottom: 55px;
|
||||
/* End before last number */
|
||||
@ -285,6 +285,22 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Hiring Process Visibility Fix:
|
||||
Makes text white on dark image and black on white background during scroll
|
||||
*/
|
||||
@media (max-width: 899px){
|
||||
.processList h2,
|
||||
.processList .subTitle,
|
||||
.processContent h4,
|
||||
.processContent p {
|
||||
color: white !important;
|
||||
mix-blend-mode: difference;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 4. Benefits / Ultimate Experience (Vertical Connected Cards) */
|
||||
.benefitsSection {
|
||||
|
||||
@ -99,15 +99,17 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
padding: 2rem;
|
||||
/* min-height: 400px; Reduced to decrease vertical space */
|
||||
/* padding: 2rem 0; */
|
||||
/* Reduced padding */
|
||||
}
|
||||
|
||||
.aboutMainImgWrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-width: 400px;
|
||||
/* Reduced from 500px */
|
||||
aspect-ratio: 1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
@ -120,7 +122,8 @@
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-width: 400px;
|
||||
/* Reduced to match wrapper */
|
||||
height: auto;
|
||||
/* Let it match aspect ratio via padding-bottom usually, but here using aspect-ratio property */
|
||||
aspect-ratio: 1;
|
||||
@ -190,7 +193,7 @@
|
||||
|
||||
/* --- Section 2: Benefits --- */
|
||||
.benefitsSection {
|
||||
padding: 6rem 0;
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
@ -311,7 +314,7 @@
|
||||
|
||||
/* --- Section 3: Testimonials (New Split Layout) --- */
|
||||
.testimonialSection {
|
||||
padding: 6rem 0;
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -677,6 +680,7 @@
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ctaFullBtn:hover {
|
||||
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
background: var(--text-primary);
|
||||
background: #2563eb;
|
||||
/* Dark background for icon box */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -186,7 +186,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--yellow);
|
||||
color: #fff;
|
||||
/* Yellow/Gold icon color */
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -235,7 +235,7 @@
|
||||
.formWrapper {
|
||||
background: #eef6f6;
|
||||
/* Light greenish-blue background as in image */
|
||||
padding: 3rem;
|
||||
/* padding: 3rem; */
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@ -299,7 +299,7 @@
|
||||
}
|
||||
|
||||
.submitBtn {
|
||||
background: var(--text-primary);
|
||||
background: #2563eb;
|
||||
/* Dark blue button */
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
|
||||
@ -301,7 +301,7 @@
|
||||
/* Right side: Slider Styles (Used by Client Component) */
|
||||
.testimonialSliderContainer {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
padding: 2rem 2rem 0;
|
||||
}
|
||||
|
||||
.testSliderContent {
|
||||
@ -450,6 +450,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- Section 5: FAQ --- */
|
||||
@ -571,6 +572,7 @@
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ctaFullBtn:hover {
|
||||
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
.ctaSection {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 4rem;
|
||||
|
||||
@ -27,11 +27,11 @@
|
||||
--background-secondary: #f8fafc;
|
||||
--bg-primary: #ffffff;
|
||||
--card-bg: #ffffff;
|
||||
--foreground: #0072b1;
|
||||
--foreground: #0f172a;
|
||||
--foreground-secondary: #475569;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #0072b1;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
|
||||
/* Borders */
|
||||
@ -265,7 +265,7 @@ section:nth-child(even) {
|
||||
|
||||
/* Ensure spacing consistency */
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
/* Default mobile padding */
|
||||
}
|
||||
|
||||
@ -288,7 +288,7 @@ section:nth-child(even) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
.faqContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
/* gap: 3rem; */
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
/* padding: 2rem 0; */
|
||||
}
|
||||
|
||||
.imageFrameWrapper {
|
||||
|
||||
@ -210,12 +210,21 @@
|
||||
.detailImageWrapper {
|
||||
max-width: 1000px;
|
||||
height: 400px;
|
||||
margin: 3rem auto;
|
||||
margin: 4rem auto;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detailImageWrapper {
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 2rem auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImageWrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -190,4 +190,85 @@
|
||||
|
||||
.standaloneBtn:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.floatIcon {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
left: 10%;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.icon4 {
|
||||
right: 5%;
|
||||
top: 8%;
|
||||
}
|
||||
|
||||
.icon5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon7 {
|
||||
left: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.icon8 {
|
||||
right: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.floatIcon {
|
||||
transform: scale(0.7);
|
||||
opacity: 0.6;
|
||||
/* Reduce visibility distraction */
|
||||
}
|
||||
|
||||
.ctaSection {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
/* Push all to edges */
|
||||
.icon1 {
|
||||
left: 2%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide intrusive top ones */
|
||||
.icon4 {
|
||||
right: 2%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.icon5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon6 {
|
||||
right: 2%;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.icon7 {
|
||||
left: 2%;
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.icon8 {
|
||||
right: 2%;
|
||||
bottom: 5%;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
overflow: hidden;
|
||||
@ -340,6 +340,8 @@
|
||||
@media (max-width: 767px) {
|
||||
.gridContainer {
|
||||
grid-template-columns: 1fr;
|
||||
padding-right: 0.5rem;
|
||||
/* Ensure right space */
|
||||
}
|
||||
|
||||
.columnCenter {
|
||||
@ -351,4 +353,11 @@
|
||||
.centralVisual {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.serviceItem {
|
||||
padding-right: 10px;
|
||||
/* Force internal spacing */
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
background: linear-gradient(135deg, #a855f7, #ec4899);
|
||||
/* Purple/Pink gradient per user image */
|
||||
color: white;
|
||||
padding: 6rem 0 3rem;
|
||||
padding: 4rem 0 3rem;
|
||||
/* Increase top padding */
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
@ -79,6 +79,7 @@
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@ -147,6 +148,7 @@
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badges {
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
|
||||
.badgeText {
|
||||
font-size: 0.9rem;
|
||||
color: #0072b1;
|
||||
color: #0f172a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #0072b1;
|
||||
color: #0f172a;
|
||||
/* Dark text */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@ -299,7 +299,7 @@
|
||||
|
||||
.cardText strong {
|
||||
font-size: 0.9rem;
|
||||
color: #0072b1;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.cardText span {
|
||||
@ -335,7 +335,7 @@
|
||||
.userCount {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #0072b1;
|
||||
color: #0f172a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -410,7 +410,7 @@
|
||||
|
||||
.msgText p {
|
||||
font-size: 0.85rem;
|
||||
color: #0072b1;
|
||||
color: #0f172a;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -271,4 +271,23 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.cardCapsule {
|
||||
padding-right: 4rem;
|
||||
/* Ensure text doesn't hit the absolute icon */
|
||||
}
|
||||
|
||||
.iconCircle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.iconCircle svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
@ -15,6 +15,11 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.navbar.mobileOpen {
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navContent {
|
||||
@ -125,7 +130,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.mobileMenuBtn {
|
||||
display: none;
|
||||
}
|
||||
@ -179,7 +184,7 @@
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.mobileMenu {
|
||||
display: none;
|
||||
}
|
||||
@ -205,6 +210,7 @@
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@ -251,4 +257,4 @@
|
||||
.dropdownItem:hover {
|
||||
background: var(--background-secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
@ -34,7 +34,7 @@ export default function Navbar() {
|
||||
]
|
||||
},
|
||||
{
|
||||
href: '/channels',
|
||||
href: '#',
|
||||
label: 'Channels',
|
||||
dropdown: [
|
||||
{ href: '/channels/facebook', label: 'Facebook' },
|
||||
@ -53,7 +53,7 @@ export default function Navbar() {
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''} ${isMobileMenuOpen ? styles.mobileOpen : ''}`}>
|
||||
<div className="container">
|
||||
<div className={styles.navContent}>
|
||||
{/* Logo */}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
/* Arc Container */
|
||||
.arcContainer {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
height: 470px;
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
@ -322,6 +322,10 @@
|
||||
left: auto;
|
||||
transform: none;
|
||||
margin: 2rem auto;
|
||||
max-width: 100%;
|
||||
/* Restrict width */
|
||||
padding: 0 1rem;
|
||||
/* Add internal breathing room */
|
||||
}
|
||||
|
||||
.moreServicesBtn {
|
||||
|
||||
@ -276,18 +276,59 @@
|
||||
.sliderContainer {
|
||||
padding: 0;
|
||||
mask-image: none;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
/* Restore hidden overflow for slider */
|
||||
}
|
||||
|
||||
.sliderTrack {
|
||||
/* On mobile, maybe snap scroll? */
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2rem;
|
||||
transform: none !important;
|
||||
/* Disable JS slide on mobile if preferring native scroll */
|
||||
/* Re-enable JS slider */
|
||||
/* overflow-x: auto; */
|
||||
/* transform: none !important; */
|
||||
}
|
||||
|
||||
.sliderCard {
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.layoutContainer {
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent container burst */
|
||||
}
|
||||
|
||||
.leftCard {
|
||||
padding: 2.5rem 1.5rem;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sliderTrack {
|
||||
/* Ensure track aligns well */
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sliderCard {
|
||||
flex: 0 0 260px;
|
||||
/* Slightly smaller card for small mobile */
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Stack stats one by one on mobile */
|
||||
.miniStats {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.statBadge {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -12,35 +12,35 @@ export default function Testimonials() {
|
||||
{
|
||||
name: 'Rahul Mehta',
|
||||
role: 'Growth Manager',
|
||||
reviewTitle:'Highly Impressive Results!',
|
||||
reviewTitle: 'Highly Impressive Results!',
|
||||
text: 'The performance insights are extremely clear. We can now adjust campaigns quickly and make confident marketing decisions.',
|
||||
image: '👩💼'
|
||||
},
|
||||
{
|
||||
name: 'Emily Carter',
|
||||
role: 'Content Strategist',
|
||||
reviewTitle:'Smooth and Reliable Platform!',
|
||||
reviewTitle: 'Smooth and Reliable Platform!',
|
||||
text: 'Managing posts feels effortless now. Planning content ahead of time has significantly improved our publishing consistency.',
|
||||
image: '👨💻'
|
||||
},
|
||||
{
|
||||
name: 'Arjun Nair',
|
||||
role: 'Digital Consultant',
|
||||
reviewTitle:'Excellent Tool for Teams!',
|
||||
reviewTitle: 'Excellent Tool for Teams!',
|
||||
text: 'Collaboration is seamless and approvals are faster. It has simplified how we handle multiple client accounts.',
|
||||
image: '👩🎨'
|
||||
},
|
||||
{
|
||||
name: 'Sophia Williams',
|
||||
role: 'Brand Manager',
|
||||
reviewTitle:'Well Designed and Effective!',
|
||||
reviewTitle: 'Well Designed and Effective!',
|
||||
text: 'The interface is clean and easy to navigate. Tracking engagement across platforms has never been this simple.',
|
||||
image: '👨💼'
|
||||
},
|
||||
{
|
||||
name: 'Daniel Rodrigues',
|
||||
role: ' Marketing Lead',
|
||||
reviewTitle:'Strong Value for Growth!',
|
||||
reviewTitle: 'Strong Value for Growth!',
|
||||
text: 'The reporting features save us hours every week. Insights are easy to understand and useful for strategy planning.',
|
||||
image: '👩🦰'
|
||||
},
|
||||
@ -63,8 +63,8 @@ export default function Testimonials() {
|
||||
if (isResetting) return;
|
||||
|
||||
setActiveIndex((prev) => {
|
||||
// If we are at the end of the original list (showing the first clone)
|
||||
// We animate TO the clone.
|
||||
// If already at totalOriginal, wait for reset effect
|
||||
if (prev >= totalOriginal) return prev;
|
||||
return prev + 1;
|
||||
});
|
||||
};
|
||||
@ -94,6 +94,7 @@ export default function Testimonials() {
|
||||
|
||||
const slideNext = () => {
|
||||
if (isResetting) return;
|
||||
if (activeIndex >= totalOriginal) return; // Wait for reset
|
||||
setActiveIndex(prev => prev + 1);
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user