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

20
app/about/page.tsx
View File

@ -53,9 +53,11 @@ export default function AboutPage() {
<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.
</p>
<button className={styles.storyBtn}>
Discover Our Mission
</button>
<Link href="/careers">
<button className={styles.storyBtn}>
Discover Our Mission
</button>
</Link>
</div>
</div>
</div>
@ -189,12 +191,16 @@ export default function AboutPage() {
<h2 className={styles.readyTitle}>
Ready to Transform Your <br /> Social Strategy?
</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.
</p>
<button className={styles.readyBtn}>
Get Started Today
</button>
<a
href="https://app.socialbuddy.co/signup"
>
<button className={styles.readyBtn}>
Get Started Today
</button>
</a>
</div>
<div className={styles.readyImageWrapper}>
<div className={styles.phoneFrame}>

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

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

63
app/careers/page.tsx
View File

@ -8,8 +8,7 @@ import {
import styles from './careers.module.css';
export const metadata: Metadata = {
title: 'Careers - Join SocialBuddy',
description: 'Join our team and help shape the future of social media management.',
description: 'Join our team of social media experts, content creators, and strategists.',
};
export default function CareersPage() {
@ -34,15 +33,18 @@ export default function CareersPage() {
<div className={styles.offerContainer}>
{/* Left Content */}
<div className={styles.offerContent}>
<span className={styles.subTitle}>Our Mission</span>
<h2>Building the Operating System for Social Growth</h2>
<h2>Engineering Intelligent Automation</h2>
<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>
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>
<button className="btn btn-primary">View Open Positions</button>
<Link href="/about">
<button className="btn btn-primary">
View Open Positions
</button>
</Link>
</div>
{/* Right Image Grid (3 Images) */}
@ -86,17 +88,17 @@ export default function CareersPage() {
<div className={styles.statItem}>
<div className={styles.statIconWrapper}><Users size={48} /></div>
<div className={styles.statNumber}>54</div>
<div className={styles.statLabel}>Happy Team</div>
<div className={styles.statLabel}>Data-Driven Experts</div>
</div>
<div className={styles.statItem}>
<div className={styles.statIconWrapper}><Smile size={48} /></div>
<div className={styles.statNumber}>340</div>
<div className={styles.statLabel}>Completed Projects</div>
<div className={styles.statLabel}>Campaigns Optimized</div>
</div>
<div className={styles.statItem}>
<div className={styles.statIconWrapper}><MapPin size={48} /></div>
<div className={styles.statNumber}>15</div>
<div className={styles.statLabel}>Countries</div>
<div className={styles.statLabel}>Industries Served</div>
</div>
<div className={styles.statItem}>
<div className={styles.statIconWrapper}><Award size={48} /></div>
@ -134,22 +136,22 @@ export default function CareersPage() {
<div className={styles.processItem}>
<div className={styles.processNumber}>01</div>
<div className={styles.processContent}>
<h4>Provide details</h4>
<p>Submit your application with your resume and portfolio. Tell us about your journey.</p>
<h4>Share Your Expertise</h4>
<p>Submit your application highlighting your experience in social strategy, content execution, or client support.</p>
</div>
</div>
<div className={styles.processItem}>
<div className={styles.processNumber}>02</div>
<div className={styles.processContent}>
<h4>Schedule Interview</h4>
<p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p>
<h4>Alignment Call</h4>
<p>We'll discuss how your skills align with our core values of data-led performance and efficient execution.</p>
</div>
</div>
<div className={styles.processItem}>
<div className={styles.processNumber}>03</div>
<div className={styles.processContent}>
<h4>Get Hired</h4>
<p>Receive an offer and join our amazing team. Welcome aboard!</p>
<h4>Join the Mission</h4>
<p>Receive an offer and start helping global brands turn social activity into business wins.</p>
</div>
</div>
</div>
@ -164,42 +166,47 @@ export default function CareersPage() {
{/* Left Content */}
<div className={styles.benefitsContent}>
<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}>
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>
<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>
{/* Right Connected Cards */}
<div className={styles.connectedCards}>
<div className={styles.connCard}>
<div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
<Layout />
<Zap />
</div>
<div className={styles.connContent}>
<h4>Future Technology</h4>
<p>Work with the latest modern stack.</p>
<h4>Workflow Automation</h4>
<p>Intelligent rules working 24/7.</p>
</div>
</div>
<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' }}>
<MousePointerClick />
{/* Using View or Layout as placeholder for Dashboard/Login */}
<Layout />
</div>
<div className={styles.connContent}>
<h4 style={{ color: 'white' }}>Drag & Drop Builder</h4>
<p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p>
<h4 style={{ color: 'white' }}>Secure & Unified</h4>
<p style={{ color: 'rgba(255,255,255,0.9)' }}>Encrypted login & single dashboard.</p>
</div>
</div>
<div className={styles.connCard}>
<div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
<Gem />
<Smile />
</div>
<div className={styles.connContent}>
<h4>Most Eco Friendly</h4>
<p>Sustainable practices at core.</p>
<h4>Smart Engagement</h4>
<p>Instant likes, replies, and spam control.</p>
</div>
</div>
</div>

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

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

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

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

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

@ -1,9 +1,10 @@
.contactPage {
min-height: 100vh;
padding-top: 5rem;
}
.hero {
padding: 8rem 0 4rem;
padding: 8rem 0;
text-align: center;
background-image: url('/hero-inner-bg.png');
/* Assuming this exists */
@ -80,7 +81,7 @@
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 2.5rem 2rem;
padding: 2.5rem 1rem;
text-align: center;
transition: all 0.3s ease;
text-decoration: none;
@ -116,6 +117,16 @@
font-size: 1rem;
color: var(--text-secondary);
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) */
@ -236,8 +247,25 @@
.formWrapper {
background: #eef6f6;
/* Light greenish-blue background as in image */
/* padding: 3rem; */
padding: 3rem;
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 {
@ -273,6 +301,8 @@
.input,
.textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid transparent;

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

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

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

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

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

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

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

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

15
components/Footer.module.css
View File

@ -95,12 +95,25 @@
gap: 2rem;
}
@media (min-width: 640px) {
@media (min-width: 480px) {
.linksGrid {
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 {
display: flex;
flex-direction: column;

18
components/SocialConnect.tsx
View File

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

4
components/Testimonials.module.css
View File

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

47
components/Testimonials.tsx
View File

@ -52,6 +52,46 @@ export default function Testimonials() {
const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)];
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(() => {
const interval = setInterval(() => {
handleNext();
@ -163,11 +203,14 @@ export default function Testimonials() {
</div>
{/* 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
className={styles.sliderTrack}
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)'
}}
>