MetatroncubeSoftwareSolutions/SocialBuddyMarketingWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

corrections updated

Browse Source
This commit is contained in:
Selvi 2026-01-12 18:07:17 +05:30
parent 41dfeb5e1c
commit b11ac845c3
16 changed files with 186 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/about/about.module.css
View File

@ -2,12 +2,13 @@
.aboutPage { .aboutPage {
background: var(--background); background: var(--background);
padding-top: 5rem;
} }
/* Hero Section */ /* Hero Section */
.hero { .hero {
background: var(--background-secondary); background: var(--background-secondary);
padding: 8rem 0 8rem; padding: 8rem 0;
position: relative; position: relative;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@ -413,7 +414,7 @@
background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%); background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%);
/* Primary Gradient Blue->Pink */ /* Primary Gradient Blue->Pink */
border-radius: 40px; border-radius: 40px;
padding: 4rem 4rem 0; padding: 3rem 3rem 0;
/* No bottom padding, content aligns to bottom */ /* No bottom padding, content aligns to bottom */
display: flex; display: flex;
flex-direction: column; flex-direction: column;

20
app/about/page.tsx
View File

@ -53,9 +53,11 @@ export default function AboutPage() {
<p className={styles.storyText}> <p className={styles.storyText}>
We set out to build a solution that puts you back in control. SocialBuddy isn't just a tool; it's your command center for digital growth. By combining powerful analytics, intuitive scheduling, and seamless collaboration into one unified platform, we empower brands to stop managing chaos and start driving real results. We set out to build a solution that puts you back in control. SocialBuddy isn't just a tool; it's your command center for digital growth. By combining powerful analytics, intuitive scheduling, and seamless collaboration into one unified platform, we empower brands to stop managing chaos and start driving real results.
</p> </p>
<button className={styles.storyBtn}> <Link href="/careers">
Discover Our Mission <button className={styles.storyBtn}>
</button> Discover Our Mission
</button>
</Link>
</div> </div>
</div> </div>
</div> </div>
@ -189,12 +191,16 @@ export default function AboutPage() {
<h2 className={styles.readyTitle}> <h2 className={styles.readyTitle}>
Ready to Transform Your <br /> Social Strategy? Ready to Transform Your <br /> Social Strategy?
</h2> </h2>
<p className={styles.readyText}style={{ color: "#ffffff" }}> <p className={styles.readyText} style={{ color: "#ffffff" }}>
Join thousands of brands using SocialBuddy to streamline their workflow, amplify their voice, and grow their meaningful connections. Join thousands of brands using SocialBuddy to streamline their workflow, amplify their voice, and grow their meaningful connections.
</p> </p>
<button className={styles.readyBtn}> <a
Get Started Today href="https://app.socialbuddy.co/signup"
</button> >
<button className={styles.readyBtn}>
Get Started Today
</button>
</a>
</div> </div>
<div className={styles.readyImageWrapper}> <div className={styles.readyImageWrapper}>
<div className={styles.phoneFrame}> <div className={styles.phoneFrame}>

26
app/careers/careers.module.css
View File

@ -2,13 +2,14 @@
.careersPage { .careersPage {
background: var(--background); background: var(--background);
padding-top: 5rem;
} }
/* Hero Section */ /* Hero Section */
.hero { .hero {
background: url('/hero-inner-bg.png') no-repeat center center; background: url('/hero-inner-bg.png') no-repeat center center;
background-size: cover; background-size: cover;
padding: 8rem 0 8rem; padding: 8rem 0;
/* Taller padding */ /* Taller padding */
position: relative; position: relative;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
@ -288,16 +289,17 @@
/* Hiring Process Visibility Fix: /* Hiring Process Visibility Fix:
Makes text white on dark image and black on white background during scroll Makes text white on dark image and black on white background during scroll
*/ */
@media (max-width: 899px){ @media (max-width: 899px) {
.processList h2,
.processList .subTitle, .processList h2,
.processContent h4, .processList .subTitle,
.processContent p { .processContent h4,
color: white !important; .processContent p {
mix-blend-mode: difference; color: white !important;
z-index: 10; /* mix-blend-mode: difference; */
position: relative; /* z-index: 10; */
} position: relative;
}
} }
@ -336,7 +338,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
padding-left: 2rem; /* padding-left: 2rem; */
/* Indent slightly if needed */ /* Indent slightly if needed */
} }

63
app/careers/page.tsx
View File

@ -8,8 +8,7 @@ import {
import styles from './careers.module.css'; import styles from './careers.module.css';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Careers - Join SocialBuddy', description: 'Join our team of social media experts, content creators, and strategists.',
description: 'Join our team and help shape the future of social media management.',
}; };
export default function CareersPage() { export default function CareersPage() {
@ -34,15 +33,18 @@ export default function CareersPage() {
<div className={styles.offerContainer}> <div className={styles.offerContainer}>
{/* Left Content */} {/* Left Content */}
<div className={styles.offerContent}> <div className={styles.offerContent}>
<span className={styles.subTitle}>Our Mission</span> <h2>Engineering Intelligent Automation</h2>
<h2>Building the Operating System for Social Growth</h2>
<p> <p>
At SocialBuddy, we're not just coding another tool. We're engineering the platform that empowers 10,000+ brands to find their voice in a noisy digital world. At SocialBuddy, we're building the future of social management. From intelligent automation rules that work 24/7 to secure encrypted login systems, we empower teams to manage multiple profiles with total confidence.
</p> </p>
<p> <p>
We tackle massive scale challenges with AI, machine learning, and intuitive design. If you're obsessed with solving real problems and want your work to have global impact, you belong here. Join us to build unify dashboards that oversee every interaction. We value "Security," "Speed," and "Smart Engagement." If you want to create tools that help brands boost their community presence instantly, you belong here.
</p> </p>
<button className="btn btn-primary">View Open Positions</button> <Link href="/about">
<button className="btn btn-primary">
View Open Positions
</button>
</Link>
</div> </div>
{/* Right Image Grid (3 Images) */} {/* Right Image Grid (3 Images) */}
@ -86,17 +88,17 @@ export default function CareersPage() {
<div className={styles.statItem}> <div className={styles.statItem}>
<div className={styles.statIconWrapper}><Users size={48} /></div> <div className={styles.statIconWrapper}><Users size={48} /></div>
<div className={styles.statNumber}>54</div> <div className={styles.statNumber}>54</div>
<div className={styles.statLabel}>Happy Team</div> <div className={styles.statLabel}>Data-Driven Experts</div>
</div> </div>
<div className={styles.statItem}> <div className={styles.statItem}>
<div className={styles.statIconWrapper}><Smile size={48} /></div> <div className={styles.statIconWrapper}><Smile size={48} /></div>
<div className={styles.statNumber}>340</div> <div className={styles.statNumber}>340</div>
<div className={styles.statLabel}>Completed Projects</div> <div className={styles.statLabel}>Campaigns Optimized</div>
</div> </div>
<div className={styles.statItem}> <div className={styles.statItem}>
<div className={styles.statIconWrapper}><MapPin size={48} /></div> <div className={styles.statIconWrapper}><MapPin size={48} /></div>
<div className={styles.statNumber}>15</div> <div className={styles.statNumber}>15</div>
<div className={styles.statLabel}>Countries</div> <div className={styles.statLabel}>Industries Served</div>
</div> </div>
<div className={styles.statItem}> <div className={styles.statItem}>
<div className={styles.statIconWrapper}><Award size={48} /></div> <div className={styles.statIconWrapper}><Award size={48} /></div>
@ -134,22 +136,22 @@ export default function CareersPage() {
<div className={styles.processItem}> <div className={styles.processItem}>
<div className={styles.processNumber}>01</div> <div className={styles.processNumber}>01</div>
<div className={styles.processContent}> <div className={styles.processContent}>
<h4>Provide details</h4> <h4>Share Your Expertise</h4>
<p>Submit your application with your resume and portfolio. Tell us about your journey.</p> <p>Submit your application highlighting your experience in social strategy, content execution, or client support.</p>
</div> </div>
</div> </div>
<div className={styles.processItem}> <div className={styles.processItem}>
<div className={styles.processNumber}>02</div> <div className={styles.processNumber}>02</div>
<div className={styles.processContent}> <div className={styles.processContent}>
<h4>Schedule Interview</h4> <h4>Alignment Call</h4>
<p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p> <p>We'll discuss how your skills align with our core values of data-led performance and efficient execution.</p>
</div> </div>
</div> </div>
<div className={styles.processItem}> <div className={styles.processItem}>
<div className={styles.processNumber}>03</div> <div className={styles.processNumber}>03</div>
<div className={styles.processContent}> <div className={styles.processContent}>
<h4>Get Hired</h4> <h4>Join the Mission</h4>
<p>Receive an offer and join our amazing team. Welcome aboard!</p> <p>Receive an offer and start helping global brands turn social activity into business wins.</p>
</div> </div>
</div> </div>
</div> </div>
@ -164,42 +166,47 @@ export default function CareersPage() {
{/* Left Content */} {/* Left Content */}
<div className={styles.benefitsContent}> <div className={styles.benefitsContent}>
<span className={styles.subTitle}>Why Choose Us?</span> <span className={styles.subTitle}>Why Choose Us?</span>
<h2>Accelerate Your Career <br /> with Purpose</h2> <h2>Work on Tools That Matter</h2>
<p className={styles.benefitsText}> <p className={styles.benefitsText}>
We believe in autonomy, mastery, and purpose. Whether you're a developer, designer, or strategist, we provide the environment, tools, and mentorship you need to do the best work of your life. We're not just a service—we're a technology company. Join our team to build Smart Replies, Comment Management systems, and Spam Control filters that keep online communities clean, active, and thriving.
</p> </p>
<button className="btn btn-primary btn-large">Explore Culture +</button> <Link href="/features">
<button className="btn btn-primary btn-large">
Explore Innovation
</button>
</Link>
</div> </div>
{/* Right Connected Cards */} {/* Right Connected Cards */}
<div className={styles.connectedCards}> <div className={styles.connectedCards}>
<div className={styles.connCard}> <div className={styles.connCard}>
<div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}> <div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
<Layout /> <Zap />
</div> </div>
<div className={styles.connContent}> <div className={styles.connContent}>
<h4>Future Technology</h4> <h4>Workflow Automation</h4>
<p>Work with the latest modern stack.</p> <p>Intelligent rules working 24/7.</p>
</div> </div>
</div> </div>
<div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}> <div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}>
<div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}> <div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}>
<MousePointerClick /> {/* Using View or Layout as placeholder for Dashboard/Login */}
<Layout />
</div> </div>
<div className={styles.connContent}> <div className={styles.connContent}>
<h4 style={{ color: 'white' }}>Drag & Drop Builder</h4> <h4 style={{ color: 'white' }}>Secure & Unified</h4>
<p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p> <p style={{ color: 'rgba(255,255,255,0.9)' }}>Encrypted login & single dashboard.</p>
</div> </div>
</div> </div>
<div className={styles.connCard}> <div className={styles.connCard}>
<div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}> <div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
<Gem /> <Smile />
</div> </div>
<div className={styles.connContent}> <div className={styles.connContent}>
<h4>Most Eco Friendly</h4> <h4>Smart Engagement</h4>
<p>Sustainable practices at core.</p> <p>Instant likes, replies, and spam control.</p>
</div> </div>
</div> </div>
</div> </div>

3
app/channels/[slug]/channel-page.module.css
View File

@ -3,6 +3,7 @@
animation: fadeIn 0.6s ease-out; animation: fadeIn 0.6s ease-out;
background-color: var(--background); background-color: var(--background);
color: var(--text-primary); color: var(--text-primary);
padding-top: 5rem;
} }
.container { .container {
@ -13,7 +14,7 @@
/* --- Hero Section (Ref: Inner Banner from About) --- */ /* --- Hero Section (Ref: Inner Banner from About) --- */
.hero { .hero {
padding: 8rem 0 8rem; padding: 8rem 0;
text-align: center; text-align: center;
background-image: url('/hero-inner-bg.png'); background-image: url('/hero-inner-bg.png');
/* Use same image as About */ /* Use same image as About */

2
app/channels/[slug]/page.tsx
View File

@ -111,7 +111,7 @@ export default async function ChannelPage(props: PageProps) {
</div> </div>
))} ))}
</div> </div>
<a href="#" className="btn btn-primary">Start Free Trial</a> <a href="https://app.socialbuddy.co/signup" className="btn btn-primary">Start Free Trial</a>
</div> </div>
</div> </div>
</div> </div>

3
app/channels/channels.module.css
View File

@ -2,11 +2,12 @@
.channelsPage { .channelsPage {
background: var(--background); background: var(--background);
padding-top: 5rem;
} }
/* 1. About/Intro Section (Ref Image 1) */ /* 1. About/Intro Section (Ref Image 1) */
.introSection { .introSection {
padding: 4rem 0; padding: 8rem 0;
background: white; background: white;
overflow: hidden; overflow: hidden;
} }

36
app/contact/contact.module.css
View File

@ -1,9 +1,10 @@
.contactPage { .contactPage {
min-height: 100vh; min-height: 100vh;
padding-top: 5rem;
} }
.hero { .hero {
padding: 8rem 0 4rem; padding: 8rem 0;
text-align: center; text-align: center;
background-image: url('/hero-inner-bg.png'); background-image: url('/hero-inner-bg.png');
/* Assuming this exists */ /* Assuming this exists */
@ -80,7 +81,7 @@
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 20px; border-radius: 20px;
padding: 2.5rem 2rem; padding: 2.5rem 1rem;
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
text-decoration: none; text-decoration: none;
@ -116,6 +117,16 @@
font-size: 1rem; font-size: 1rem;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
word-break: break-word;
/* Ensure long emails wrap */
overflow-wrap: anywhere;
}
@media (max-width: 480px) {
.contactCard {
padding: 2rem 1rem;
/* Reduce padding on mobile */
}
} }
/* Form Section (Get In Touch) */ /* Form Section (Get In Touch) */
@ -236,8 +247,25 @@
.formWrapper { .formWrapper {
background: #eef6f6; background: #eef6f6;
/* Light greenish-blue background as in image */ /* Light greenish-blue background as in image */
/* padding: 3rem; */ padding: 3rem;
border-radius: 20px; border-radius: 20px;
width: 100%;
box-sizing: border-box;
overflow: hidden;
/* Prevent child overflow */
}
@media (max-width: 768px) {
.formWrapper {
padding: 2rem;
}
}
@media (max-width: 480px) {
.formWrapper {
padding: 1.5rem 1rem;
/* Smaller padding on very small screens */
}
} }
.contactForm { .contactForm {
@ -273,6 +301,8 @@
.input, .input,
.textarea { .textarea {
width: 100%; width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;

5
app/features/[slug]/feature-page.module.css
View File

@ -3,6 +3,7 @@
animation: fadeIn 0.6s ease-out; animation: fadeIn 0.6s ease-out;
background-color: var(--background); background-color: var(--background);
color: var(--text-primary); color: var(--text-primary);
padding-top: 5rem;
} }
.container { .container {
@ -13,7 +14,7 @@
/* --- Hero Section (Ref: Inner Banner from About) --- */ /* --- Hero Section (Ref: Inner Banner from About) --- */
.hero { .hero {
padding: 8rem 0 8rem; padding: 8rem 0;
text-align: center; text-align: center;
background-image: url('/hero-inner-bg.png'); background-image: url('/hero-inner-bg.png');
/* Use same image as About */ /* Use same image as About */
@ -201,7 +202,7 @@
} }
} }
.benefitsContent {}
.benefitsGrid { .benefitsGrid {
display: grid; display: grid;

2
app/features/features.module.css
View File

@ -7,7 +7,7 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 8rem 0 8rem; padding: 8rem 0;
text-align: center; text-align: center;
color: white; color: white;
position: relative; position: relative;

2
app/pricing/pricing.module.css
View File

@ -3,7 +3,7 @@
} }
.hero { .hero {
padding: 8rem 0 8rem; padding: 8rem 0;
text-align: center; text-align: center;
background-image: url('/hero-inner-bg.png'); background-image: url('/hero-inner-bg.png');
background-size: cover; background-size: cover;

6
app/resources/resources.module.css
View File

@ -3,6 +3,7 @@
animation: fadeIn 0.6s ease-out; animation: fadeIn 0.6s ease-out;
background-color: #F8FAFC; background-color: #F8FAFC;
min-height: 100vh; min-height: 100vh;
padding-top: 5rem;
} }
.container { .container {
@ -13,7 +14,7 @@
/* --- Hero Section (Ref: Inner Banner) --- */ /* --- Hero Section (Ref: Inner Banner) --- */
.hero { .hero {
padding: 8rem 0 8rem; padding: 8rem 0;
text-align: center; text-align: center;
background-image: url('/hero-inner-bg.png'); background-image: url('/hero-inner-bg.png');
background-size: cover; background-size: cover;
@ -56,6 +57,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap;
padding: 0 1rem;
line-height: 1.5;
} }
.breadcrumbs a { .breadcrumbs a {

15
components/Footer.module.css
View File

@ -95,12 +95,25 @@
gap: 2rem; gap: 2rem;
} }
@media (min-width: 640px) { @media (min-width: 480px) {
.linksGrid { .linksGrid {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
@media (min-width: 1024px) {
.linksGrid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
@media (max-width: 768px) {
.linksGrid {
grid-template-columns: repeat(2, 1fr);
}
}
.linkColumn { .linkColumn {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

16
components/SocialConnect.tsx
View File

@ -1,5 +1,5 @@
'use client'; 'use client';
import Link from "next/link";
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import styles from './SocialConnect.module.css'; import styles from './SocialConnect.module.css';
@ -134,12 +134,14 @@ export default function SocialConnect() {
<p className={styles.cardDesc}> <p className={styles.cardDesc}>
{activePlatform.desc} {activePlatform.desc}
</p> </p>
<button <Link href="/about">
className={styles.readMoreBtn} <button
style={{ backgroundColor: activePlatform.color }} className={styles.readMoreBtn}
> style={{ backgroundColor: activePlatform.color }}
Read More >
</button> Read More
</button>
</Link>
</div> </div>
{/* <div className={styles.moreServicesBtn}> {/* <div className={styles.moreServicesBtn}>

4
components/Testimonials.module.css
View File

@ -143,6 +143,8 @@
/* Extra left padding to compensate overlap */ /* Extra left padding to compensate overlap */
/* Mask/gradient to fade out right side? Optional. */ /* Mask/gradient to fade out right side? Optional. */
mask-image: linear-gradient(to right, black 80%, transparent 100%); mask-image: linear-gradient(to right, black 80%, transparent 100%);
max-width: 768px;
box-sizing: content-box;
} }
.sliderTrack { .sliderTrack {
@ -286,6 +288,8 @@
mask-image: none; mask-image: none;
overflow: hidden; overflow: hidden;
/* Restore hidden overflow for slider */ /* Restore hidden overflow for slider */
max-width: none;
margin: 0 auto;
} }
.sliderTrack { .sliderTrack {

47
components/Testimonials.tsx
View File

@ -52,6 +52,46 @@ export default function Testimonials() {
const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)]; const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)];
const totalOriginal = testimonials.length; const totalOriginal = testimonials.length;
const [cardWidth, setCardWidth] = useState(352);
const [containerMaxWidth, setContainerMaxWidth] = useState<number | string>('100%');
useEffect(() => {
const handleResize = () => {
const width = window.innerWidth;
if (width <= 480) {
// Mobile: Card 260, Gap 16. Container Padding 32 (layout)
setCardWidth(276); // Stride
const available = width - 32;
const stride = 276;
const gap = 16;
const count = Math.max(1, Math.floor((available + gap) / stride));
setContainerMaxWidth(count * stride - gap);
} else if (width <= 1024) {
// Tablet: Card 280, Gap 32. Container Padding 32
setCardWidth(312); // Stride
const available = width - 32;
const stride = 312;
const gap = 32;
const count = Math.max(1, Math.floor((available + gap) / stride));
setContainerMaxWidth(count * stride - gap);
} else {
// Desktop: Force 2 cards exactly per user request.
// Card 320, Gap 32.
// 2 Cards = 320*2 + 32 = 672.
// Plus padding-left: 6rem (96px) defined in CSS for desktop layout.
setCardWidth(352); // Stride
setContainerMaxWidth(768); // 672 + 96
}
};
// Initial call
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
handleNext(); handleNext();
@ -163,11 +203,14 @@ export default function Testimonials() {
</div> </div>
{/* Right Side Slider - Lower Z-Index, moves behind Left Card */} {/* Right Side Slider - Lower Z-Index, moves behind Left Card */}
<div className={styles.sliderContainer}> <div
className={styles.sliderContainer}
style={{ width: containerMaxWidth, maxWidth: '100%' }} // Use width to force size, maxWidth for safety
>
<div <div
className={styles.sliderTrack} className={styles.sliderTrack}
style={{ style={{
transform: `translateX(calc(-${activeIndex * 352}px))`, transform: `translateX(calc(-${activeIndex * cardWidth}px))`,
transition: isResetting ? 'none' : 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)' transition: isResetting ? 'none' : 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)'
}} }}
> >