home page contents and channels new structure updated
This commit is contained in:
parent
5853fc54fd
commit
f57dab317f
@ -515,7 +515,7 @@
|
||||
top: 20%;
|
||||
right: -40px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
|
||||
@ -96,31 +96,37 @@
|
||||
|
||||
.aboutImages {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.aboutMainImgWrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
height: 85%;
|
||||
z-index: 1;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.aboutSubImgWrapper {
|
||||
.aboutImageFrame {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 55%;
|
||||
height: 50%;
|
||||
z-index: 2;
|
||||
border: 8px solid #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
/* Let it match aspect ratio via padding-bottom usually, but here using aspect-ratio property */
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 24px;
|
||||
transform: translate(-50%, -50%) translate(-24px, 24px);
|
||||
}
|
||||
|
||||
.aboutContent {
|
||||
@ -184,191 +190,291 @@
|
||||
|
||||
/* --- Section 2: Benefits --- */
|
||||
.benefitsSection {
|
||||
padding: 4rem 0;
|
||||
padding: 6rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.benefitsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
.benefitsHeader {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.benefitsContainer {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
.sectionDescriptionCentered {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefitsContent {}
|
||||
|
||||
.benefitsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (min-width: 768px) {
|
||||
.benefitsGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.benefitCard {
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
/* Space for the circle */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.benefitCard:hover {
|
||||
background: var(--primary);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.benefitCard:hover * {
|
||||
color: #fff !important;
|
||||
/* Card Theme Colors */
|
||||
.benefitCard:nth-child(1) {
|
||||
--card-theme: var(--primary);
|
||||
}
|
||||
|
||||
.benefitIcon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
transition: color 0.3s ease;
|
||||
.benefitCard:nth-child(2) {
|
||||
--card-theme: var(--secondary);
|
||||
}
|
||||
|
||||
.benefitCard:nth-child(3) {
|
||||
--card-theme: var(--dark-blue);
|
||||
}
|
||||
|
||||
.benefitCard:nth-child(4) {
|
||||
--card-theme: var(--accent);
|
||||
}
|
||||
|
||||
.benefitNumber {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--card-theme);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
z-index: 10;
|
||||
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
|
||||
border: 4px solid var(--background-secondary);
|
||||
/* Matches bg to look like cutout */
|
||||
}
|
||||
|
||||
.benefitCardContent {
|
||||
background: #fff;
|
||||
padding: 2rem 2rem 2rem 3.5rem;
|
||||
/* Extra padding left for circle */
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Decorative Accent on Right */
|
||||
.benefitCardContent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 15%;
|
||||
bottom: 15%;
|
||||
width: 6px;
|
||||
background: var(--card-theme);
|
||||
border-radius: 4px 0 0 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.benefitCardTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.benefitCardDesc {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.3s ease;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- Section 3: Testimonial (Update: Left Images Grid, Right Slider) --- */
|
||||
/* --- Section 3: Testimonials (New Split Layout) --- */
|
||||
.testimonialSection {
|
||||
padding: 4rem 0;
|
||||
padding: 6rem 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonialGrid {
|
||||
.testimonialCenteredHeader {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.channelTestimonialContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.testimonialGrid {
|
||||
.channelTestimonialContainer {
|
||||
grid-template-columns: 0.8fr 1.2fr;
|
||||
/* Images < Slider */
|
||||
}
|
||||
}
|
||||
|
||||
/* Left side: 2 Image Grid */
|
||||
.testimonialImages {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
/* Left Side: Large Image */
|
||||
.sliderLeftImage {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.testImgWrapper {
|
||||
border-radius: 12px;
|
||||
.sliderImageWrapper {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.testImgWrapper:nth-child(2) {
|
||||
margin-top: 3rem;
|
||||
/* Stagger effect */
|
||||
.sliderMainImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Right side: Slider Styles (Used by Client Component) */
|
||||
.testimonialSliderContainer {
|
||||
/* Right Side: Content Box */
|
||||
.sliderRightContent {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.testimonialCard {
|
||||
background: var(--gradient-primary);
|
||||
/* Pink/Blue Gradient as "Our theme color" */
|
||||
border-radius: 24px;
|
||||
padding: 3rem;
|
||||
color: #fff;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testSliderContent {
|
||||
min-height: 300px;
|
||||
/* Subtle background accent for the card if needed, currently gradient is enough */
|
||||
|
||||
.testCardHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.quoteIcon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.testStars {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.testQuoteFade {
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
|
||||
.testQuoteText {
|
||||
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.95;
|
||||
font-style: italic;
|
||||
min-height: 100px;
|
||||
/* Prevent height jump */
|
||||
}
|
||||
|
||||
.testAuthorBlock {
|
||||
.testAuthorRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.testAuthorAvatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
.testAuthorAvatarWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.testSmallAvatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.testAuthorInfo h4 {
|
||||
.testAuthorInfoWhite h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.testAuthorInfo span {
|
||||
.testAuthorInfoWhite span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sliderDots {
|
||||
/* Slider Controls */
|
||||
.sliderDotsWhite {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #E2E8F0;
|
||||
.dotWhite {
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
background: var(--primary);
|
||||
.activeDotWhite {
|
||||
background: #fff;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.fadeIn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.fadeInText {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.fadeOutText {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -3,7 +3,8 @@ import { notFound } from 'next/navigation';
|
||||
import styles from './channel-page.module.css';
|
||||
import SafeImage from '@/components/SafeImage';
|
||||
import Link from 'next/link';
|
||||
import TestimonialSlider from '@/components/TestimonialSlider';
|
||||
import ChannelTestimonialSlider from '@/components/ChannelTestimonialSlider';
|
||||
import ChannelFAQ from '@/components/ChannelFAQ';
|
||||
import {
|
||||
Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
|
||||
Palette, Layout, Smartphone, Zap, PenTool, Repeat,
|
||||
@ -86,6 +87,7 @@ export default async function ChannelPage(props: PageProps) {
|
||||
<div className={styles.container}>
|
||||
<div className={styles.aboutGrid}>
|
||||
<div className={styles.aboutImages}>
|
||||
<div className={styles.aboutImageFrame}></div>
|
||||
<div className={styles.aboutMainImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.about.mainImage}
|
||||
@ -94,14 +96,6 @@ export default async function ChannelPage(props: PageProps) {
|
||||
fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.aboutSubImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.about.subImage}
|
||||
alt={`${channel.title} Sub Feature`}
|
||||
className={styles.img}
|
||||
fallbackSrc={`https://placehold.co/400x400/png?text=${encodeURIComponent(channel.title)}+Sub`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.aboutContent}>
|
||||
<span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
|
||||
@ -127,27 +121,25 @@ export default async function ChannelPage(props: PageProps) {
|
||||
{/* 3. Benefits / Why Choose */}
|
||||
<section className={styles.benefitsSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.benefitsContainer}>
|
||||
<div className={styles.benefitsContent}>
|
||||
<span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
|
||||
<h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
|
||||
<p className={styles.aboutDescription}>
|
||||
We've built specific tools to help you succeed on {channel.title}.
|
||||
Stop guessing and start growing with data-driven insights.
|
||||
</p>
|
||||
<a href="#" className="btn btn-primary">See All Features</a>
|
||||
</div>
|
||||
<div className={styles.benefitsGrid}>
|
||||
{channel.benefits.slice(0, 4).map((benefit, index) => (
|
||||
<div key={index} className={styles.benefitCard}>
|
||||
<div className={styles.benefitIcon}>
|
||||
{getIcon(benefit.icon)}
|
||||
</div>
|
||||
<div className={styles.benefitsHeader}>
|
||||
<span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
|
||||
<h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
|
||||
<p className={styles.sectionDescriptionCentered}>
|
||||
We've built specific tools to help you succeed on {channel.title}.
|
||||
Stop guessing and start growing with data-driven insights.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.benefitsGrid}>
|
||||
{channel.benefits.slice(0, 4).map((benefit, index) => (
|
||||
<div key={index} className={styles.benefitCard}>
|
||||
<div className={styles.benefitNumber}>0{index + 1}</div>
|
||||
<div className={styles.benefitCardContent}>
|
||||
<h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
|
||||
<p className={styles.benefitCardDesc}>{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -156,68 +148,18 @@ export default async function ChannelPage(props: PageProps) {
|
||||
{channel.testimonials && channel.testimonials.length > 0 && (
|
||||
<section className={styles.testimonialSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.testimonialGrid}>
|
||||
<div className={styles.testimonialImages}>
|
||||
<div className={styles.testImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.heroImage}
|
||||
alt="Happy Customer"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.testImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.about.mainImage}
|
||||
alt="Community"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=Customer+2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.testimonialSliderWrapper}>
|
||||
<span className={styles.sectionSubtitle}>Testimonials</span>
|
||||
<h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
|
||||
<TestimonialSlider testimonials={channel.testimonials} />
|
||||
</div>
|
||||
<div className={styles.testimonialCenteredHeader}>
|
||||
<span className={styles.sectionSubtitle}>Testimonials</span>
|
||||
<h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
|
||||
</div>
|
||||
<ChannelTestimonialSlider testimonials={channel.testimonials} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 5. FAQ */}
|
||||
{channel.faqs && channel.faqs.length > 0 && (
|
||||
<section className={styles.faqSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.faqGrid}>
|
||||
<div className={styles.faqContent}>
|
||||
<span className={styles.sectionSubtitle}>FAQ</span>
|
||||
<h2 className={styles.sectionTitle}>Frequently Asked Questions about {channel.title}</h2>
|
||||
<div className={styles.accordion}>
|
||||
{channel.faqs.map((faq, index) => (
|
||||
<details key={index} className={styles.accordionItem}>
|
||||
<summary className={styles.accordionTrigger}>
|
||||
{faq.question}
|
||||
<span className={styles.accordionIcon}>+</span>
|
||||
</summary>
|
||||
<div className={styles.accordionContentOpen}>
|
||||
<p style={{ paddingBottom: '1.5rem', color: 'var(--text-secondary)' }}>{faq.answer}</p>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.faqImageWrapper}>
|
||||
<SafeImage
|
||||
src="/images/faq-illustration.png"
|
||||
alt="FAQ Illustration"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/600x600/png?text=FAQ+Support"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ChannelFAQ faqs={channel.faqs} channelTitle={channel.title} />
|
||||
)}
|
||||
|
||||
{/* 6. CTA (Full Width Floating) */}
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 0 8rem;
|
||||
padding: 8rem 0 4rem;
|
||||
text-align: center;
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
/* Assuming this exists */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -60,22 +61,34 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Contact Info Cards (Top Section) */
|
||||
.contactGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* Force 3 columns */
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
/* margin-bottom: 4rem; */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contactGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.contactCard {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
padding: 2.5rem 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contactCard:hover {
|
||||
@ -85,8 +98,11 @@
|
||||
}
|
||||
|
||||
.cardIcon {
|
||||
font-size: 3rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
@ -98,167 +114,219 @@
|
||||
|
||||
.cardValue {
|
||||
font-size: 1rem;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Form Section (Get In Touch) */
|
||||
.formSection {
|
||||
background: var(--bg-primary);
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@media (max-width: 992px) {
|
||||
.formContainer {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.formInfo {
|
||||
/* Left Side: Get In Touch Info */
|
||||
.getInTouchInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
font-size: clamp(2rem, 4vw, 2.5rem);
|
||||
.sectionTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
/* Dark text */
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.formDescription {
|
||||
font-size: 1.125rem;
|
||||
.sectionDesc {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
.infoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.infoGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.benefit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
.iconBox {
|
||||
background: var(--text-primary);
|
||||
/* Dark background for icon box */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.socialTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.socialIcons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.socialIcon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.socialIcon:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 20px rgba(236, 72, 153, 0.2);
|
||||
}
|
||||
|
||||
.form {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
color: var(--yellow);
|
||||
/* Yellow/Gold icon color */
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.infoValue {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.socialRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.socialLabel {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.socialIconsRow {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.socialIconsRow a {
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.socialIconsRow a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Right Side: Form Wrapper */
|
||||
.formWrapper {
|
||||
background: #eef6f6;
|
||||
/* Light greenish-blue background as in image */
|
||||
padding: 3rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.contactForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.formRow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
background: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.select:focus,
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
|
||||
box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
|
||||
}
|
||||
|
||||
.input::placeholder,
|
||||
.textarea::placeholder {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
.submitBtn {
|
||||
background: var(--text-primary);
|
||||
/* Dark blue button */
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
transition: background 0.3s;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
button:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
.submitBtn:hover {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
/* Map Section */
|
||||
.mapSection {
|
||||
/* margin-top: 4rem; */
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Quick Links - kept from original if needed, but maybe not */
|
||||
.quickLinks {
|
||||
padding: 4rem 0;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), rgba(59, 130, 246, 0.03));
|
||||
@ -305,10 +373,4 @@ button:hover .arrow {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.form {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import { Phone, Mail, MapPin, Instagram, Facebook, Twitter, Youtube } from 'lucide-react';
|
||||
import styles from './contact.module.css';
|
||||
|
||||
export default function ContactPage() {
|
||||
@ -11,6 +12,7 @@ export default function ContactPage() {
|
||||
company: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
phone: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
@ -27,30 +29,24 @@ export default function ContactPage() {
|
||||
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||
};
|
||||
|
||||
const contactInfo = [
|
||||
const contactInfoCards = [
|
||||
{
|
||||
icon: '📧',
|
||||
icon: <MapPin size={32} />,
|
||||
title: 'Address',
|
||||
value: 'London Eye, London',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
icon: <Mail size={32} />,
|
||||
title: 'Email',
|
||||
value: 'support@socialbuddy.com',
|
||||
link: 'mailto:support@socialbuddy.com',
|
||||
value: 'mail@nursee.com',
|
||||
link: 'mailto:mail@nursee.com',
|
||||
},
|
||||
{
|
||||
icon: '💬',
|
||||
title: 'Live Chat',
|
||||
value: 'Available 24/7',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
icon: <Phone size={32} />,
|
||||
title: 'Phone',
|
||||
value: '+1 (555) 123-4567',
|
||||
link: 'tel:+15551234567',
|
||||
},
|
||||
{
|
||||
icon: '📍',
|
||||
title: 'Office',
|
||||
value: 'San Francisco, CA',
|
||||
link: '#',
|
||||
value: '(+081) 5678 1234',
|
||||
link: 'tel:+08156781234',
|
||||
},
|
||||
];
|
||||
|
||||
@ -72,7 +68,7 @@ export default function ContactPage() {
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.contactGrid}>
|
||||
{contactInfo.map((info, index) => (
|
||||
{contactInfoCards.map((info, index) => (
|
||||
<a key={index} href={info.link} className={styles.contactCard}>
|
||||
<div className={styles.cardIcon}>{info.icon}</div>
|
||||
<h3 className={styles.cardTitle}>{info.title}</h3>
|
||||
@ -87,134 +83,137 @@ export default function ContactPage() {
|
||||
<section className={`section ${styles.formSection}`}>
|
||||
<div className="container">
|
||||
<div className={styles.formContainer}>
|
||||
<div className={styles.formInfo}>
|
||||
<h2 className={styles.formTitle}>Send Us a Message</h2>
|
||||
<p className={styles.formDescription}>
|
||||
Fill out the form and our team will get back to you within 24 hours.
|
||||
{/* Left Side: Get In Touch Info */}
|
||||
<div className={styles.getInTouchInfo}>
|
||||
<h2 className={styles.sectionTitle}>Get In Touch</h2>
|
||||
<p className={styles.sectionDesc}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
|
||||
</p>
|
||||
|
||||
<div className={styles.benefits}>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Quick response time</span>
|
||||
<div className={styles.infoGrid}>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.iconBox}><Phone size={20} /></div>
|
||||
<div>
|
||||
<h4 className={styles.infoLabel}>Phone</h4>
|
||||
<p className={styles.infoValue}>(+081) 5678 1234</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Expert support team</span>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.iconBox}><Mail size={20} /></div>
|
||||
<div>
|
||||
<h4 className={styles.infoLabel}>Email</h4>
|
||||
<p className={styles.infoValue}>mail@nursee.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.benefit}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Personalized solutions</span>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.iconBox}><MapPin size={20} /></div>
|
||||
<div>
|
||||
<h4 className={styles.infoLabel}>Address</h4>
|
||||
<p className={styles.infoValue}>London Eye, London</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.iconBox}><Instagram size={20} /></div>
|
||||
<div>
|
||||
<h4 className={styles.infoLabel}>Instagram</h4>
|
||||
<p className={styles.infoValue}>nursee.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.socialLinks}>
|
||||
<h3 className={styles.socialTitle}>Follow Us</h3>
|
||||
<div className={styles.socialIcons}>
|
||||
<a href="#" className={styles.socialIcon}>🐦</a>
|
||||
<a href="#" className={styles.socialIcon}>📘</a>
|
||||
<a href="#" className={styles.socialIcon}>📷</a>
|
||||
<a href="#" className={styles.socialIcon}>💼</a>
|
||||
<div className={styles.socialRow}>
|
||||
<span className={styles.socialLabel}>Social Media</span>
|
||||
<div className={styles.socialIconsRow}>
|
||||
<a href="#"><Facebook size={20} /></a>
|
||||
<a href="#"><Twitter size={20} /></a>
|
||||
<a href="#"><Youtube size={20} /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className={styles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="name" className={styles.label}>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="John Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{/* Right Side: Form */}
|
||||
<div className={styles.formWrapper}>
|
||||
<form className={styles.contactForm} onSubmit={handleSubmit}>
|
||||
<div className={styles.formRow}>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="email" className={styles.label}>Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="name" className={styles.label}>Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="email" className={styles.label}>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="phone" className={styles.label}>Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone" // Note: Added phone to state if not present, need to handle
|
||||
placeholder="Phone"
|
||||
className={styles.input}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="company" className={styles.label}>
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
placeholder="Your Company"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="message" className={styles.label}>Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={styles.textarea}
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="subject" className={styles.label}>
|
||||
Subject *
|
||||
</label>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
className={styles.select}
|
||||
required
|
||||
>
|
||||
<option value="">Select a subject</option>
|
||||
<option value="general">General Inquiry</option>
|
||||
<option value="support">Technical Support</option>
|
||||
<option value="sales">Sales Question</option>
|
||||
<option value="partnership">Partnership</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="message" className={styles.label}>
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={styles.textarea}
|
||||
placeholder="Tell us how we can help you..."
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary btn-large">
|
||||
Send Message
|
||||
<span className={styles.arrow}>→</span>
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" className={styles.submitBtn}>
|
||||
SUBMIT BUTTON
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Map Section */}
|
||||
<section className={styles.mapSection}>
|
||||
<div className="container" style={{ maxWidth: '100%', padding: 0 }}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.546465492652!2d-0.1216834237199462!3d51.503189710986916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2slastminute.com%20London%20Eye!5e0!3m2!1sen!2suk!4v1709999999999!5m2!1sen!2suk"
|
||||
width="100%"
|
||||
height="400"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Quick Links */}
|
||||
<section className={styles.quickLinks}>
|
||||
{/* <section className={styles.quickLinks}>
|
||||
<div className="container">
|
||||
<h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
|
||||
<div className={styles.linksGrid}>
|
||||
@ -236,7 +235,7 @@ export default function ContactPage() {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -27,11 +27,11 @@
|
||||
--background-secondary: #f8fafc;
|
||||
--bg-primary: #ffffff;
|
||||
--card-bg: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--foreground: #0072b1;
|
||||
--foreground-secondary: #475569;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #0f172a;
|
||||
--text-primary: #0072b1;
|
||||
--text-secondary: #475569;
|
||||
|
||||
/* Borders */
|
||||
|
||||
@ -40,17 +40,17 @@ const AboutSection = () => {
|
||||
<div className={`${styles.textContent} animate-slide-left`}>
|
||||
{/* Subtitle */}
|
||||
<div className={styles.subTitle}>
|
||||
About Company
|
||||
ABOUT SOCIAL BUDDY
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className={styles.title}>
|
||||
We Are The Best <span className="gradient-text">Social Media</span> Marketing Agency
|
||||
A Smarter Way to Grow Your <span className="gradient-text">Social Presence</span>
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className={styles.description}>
|
||||
Elevate your brand with our data-driven social media strategies. We combine creativity with analytics to deliver campaigns that resonate with your audience and drive measurable results.
|
||||
Social Buddy is a performance-focused social media marketing team helping businesses manage, optimize, and grow their presence across digital platforms. We work with brands that want clarity, consistency, and measurable progress from their social efforts.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
@ -60,8 +60,8 @@ const AboutSection = () => {
|
||||
<Users size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Trusted Partner</h4>
|
||||
<p>Over a decade of experience helping brands grow their online presence with verified strategies.</p>
|
||||
<h4>Strategic Partnership</h4>
|
||||
<p>We collaborate closely with brands to understand their audience, objectives, and challenges—then translate those insights into practical social execution plans.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -70,8 +70,8 @@ const AboutSection = () => {
|
||||
<Layout size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Fastpace Platform</h4>
|
||||
<p>Rapid deployment of campaigns across all major social platforms to catch trends instantly.</p>
|
||||
<h4>Efficient Campaign Execution</h4>
|
||||
<p>Our workflows enable quick rollout of content and campaigns across major social networks while maintaining alignment with brand goals.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -80,8 +80,8 @@ const AboutSection = () => {
|
||||
<ShieldCheck size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Tested Reliability</h4>
|
||||
<p>Consistent results and transparent reporting you can count on, backed by data.</p>
|
||||
<h4>Data-Led Performance Tracking</h4>
|
||||
<p>Every activity is supported by clear metrics and transparent reporting, allowing brands to evaluate outcomes and refine decisions with confidence.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -89,7 +89,7 @@ const AboutSection = () => {
|
||||
{/* CTA Button */}
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Link href="/about" className="btn btn-primary btn-large">
|
||||
Discover More <ArrowRight size={20} />
|
||||
Explore Our Approach <ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
position: relative;
|
||||
padding: 4rem 2rem;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
background: #0072b1;
|
||||
/* Dark fallback */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -46,10 +46,10 @@ export default function CTA() {
|
||||
|
||||
<div className={styles.contentContainer}>
|
||||
<h2 className={styles.title}>
|
||||
Your social media <br /> workspace
|
||||
One Place to Manage Your <br /> Social Presence
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Share consistently without the chaos
|
||||
Publish clearly. Stay organized. Scale.
|
||||
</p>
|
||||
|
||||
<Link href="https://app.socialbuddy.co/signup" className={styles.standaloneBtn}>
|
||||
|
||||
136
components/ChannelFAQ.module.css
Normal file
136
components/ChannelFAQ.module.css
Normal file
@ -0,0 +1,136 @@
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Content */
|
||||
.headerContent {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
/* Light Primary Pink */
|
||||
color: var(--primary);
|
||||
border-radius: 50px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Right Content: Accordion */
|
||||
.accordionList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cardOpen {
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cardOpen .iconWrapper {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.contentInner {
|
||||
padding: 0 2rem 2rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
91
components/ChannelFAQ.tsx
Normal file
91
components/ChannelFAQ.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import styles from "./ChannelFAQ.module.css";
|
||||
import { MessageCircle, ChevronDown } from "lucide-react";
|
||||
|
||||
interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
interface ChannelFAQProps {
|
||||
faqs: FAQItem[];
|
||||
channelTitle: string;
|
||||
}
|
||||
|
||||
export default function ChannelFAQ({ faqs, channelTitle }: ChannelFAQProps) {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0); // First item open by default
|
||||
|
||||
const toggleFAQ = (index: number) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.grid}>
|
||||
{/* Left Side: Static Content */}
|
||||
<div className={styles.headerContent}>
|
||||
<div className={styles.pill}>
|
||||
<MessageCircle size={16} />
|
||||
<span>Frequently Asked Questions</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Frequently asked <span className={styles.highlight}>questions</span>
|
||||
</h2>
|
||||
<p className={styles.description}>
|
||||
Got questions about how SocialBuddy works with {channelTitle}?
|
||||
We've got answers. If you need more help, our support team is just a click away.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Accordion List */}
|
||||
<div className={styles.accordionList}>
|
||||
{faqs.map((faq, index) => (
|
||||
<FAQItemCard
|
||||
key={index}
|
||||
item={faq}
|
||||
isOpen={openIndex === index}
|
||||
onClick={() => toggleFAQ(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Sub-component for individual item to handle height animation cleanly
|
||||
function FAQItemCard({ item, isOpen, onClick }: { item: FAQItem, isOpen: boolean, onClick: () => void }) {
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const [height, setHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && contentRef.current) {
|
||||
setHeight(contentRef.current.scrollHeight);
|
||||
} else {
|
||||
setHeight(0);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className={`${styles.card} ${isOpen ? styles.cardOpen : ''}`}>
|
||||
<button className={styles.trigger} onClick={onClick} aria-expanded={isOpen}>
|
||||
<span className={styles.question}>{item.question}</span>
|
||||
<div className={styles.iconWrapper}>
|
||||
<ChevronDown size={18} />
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
className={styles.content}
|
||||
style={{ height: `${height}px` }}
|
||||
>
|
||||
<div ref={contentRef} className={styles.contentInner}>
|
||||
{item.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
components/ChannelTestimonialSlider.tsx
Normal file
104
components/ChannelTestimonialSlider.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import styles from "@/app/channels/[slug]/channel-page.module.css";
|
||||
import SafeImage from "./SafeImage";
|
||||
import { Star, Quote } from "lucide-react";
|
||||
|
||||
interface Testimonial {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
rating: number;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export default function ChannelTestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
handleNext();
|
||||
}, 5000); // 5 seconds per slide
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
const handleNext = () => {
|
||||
setIsAnimating(true);
|
||||
setTimeout(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % testimonials.length);
|
||||
setIsAnimating(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const current = testimonials[currentIndex];
|
||||
|
||||
return (
|
||||
<div className={styles.channelTestimonialContainer}>
|
||||
{/* Left Side: Large Image */}
|
||||
<div className={`${styles.sliderLeftImage} ${isAnimating ? styles.fadeOut : styles.fadeIn}`}>
|
||||
<div className={styles.sliderImageWrapper}>
|
||||
<SafeImage
|
||||
src={current.image}
|
||||
alt={current.author}
|
||||
className={styles.sliderMainImage}
|
||||
fallbackSrc={`https://placehold.co/600x600/png?text=${encodeURIComponent(current.author)}`}
|
||||
/>
|
||||
{/* "Trusted Clients" Pill could go here, but user said "bottom img that no need"?
|
||||
I'll add a simple name tag overlay if needed, but sticking to clean image first.
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Content Box */}
|
||||
<div className={styles.sliderRightContent}>
|
||||
<div className={styles.testimonialCard}>
|
||||
<div className={styles.testCardHeader}>
|
||||
<Quote size={40} className={styles.quoteIcon} />
|
||||
<div className={styles.testStars}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
fill={i < current.rating ? "#fff" : "none"}
|
||||
stroke={i < current.rating ? "#fff" : "rgba(255,255,255,0.4)"}
|
||||
size={20}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<blockquote className={`${styles.testQuoteText} ${isAnimating ? styles.fadeOutText : styles.fadeInText}`}>
|
||||
"{current.quote}"
|
||||
</blockquote>
|
||||
|
||||
<div className={`${styles.testAuthorRow} ${isAnimating ? styles.fadeOutText : styles.fadeInText}`}>
|
||||
<div className={styles.testAuthorAvatarWrapper}>
|
||||
<SafeImage
|
||||
src={current.image}
|
||||
alt={current.author}
|
||||
className={styles.testSmallAvatar}
|
||||
fallbackSrc={`https://placehold.co/100x100/png?text=${current.author.charAt(0)}`}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.testAuthorInfoWhite}>
|
||||
<h4>{current.author}</h4>
|
||||
<span>{current.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.sliderDotsWhite}>
|
||||
{testimonials.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className={`${styles.dotWhite} ${idx === currentIndex ? styles.activeDotWhite : ""}`}
|
||||
onClick={() => setCurrentIndex(idx)}
|
||||
aria-label={`Go to slide ${idx + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -7,10 +7,10 @@ export default function CoreServices() {
|
||||
<section className={styles.section}>
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.subTitle}>Our Services</div>
|
||||
<h2 className={styles.title}>All-in-One <span className="gradient-text">Social Management</span></h2>
|
||||
<div className={styles.subTitle}>OUR SOLUTIONS</div>
|
||||
<h2 className={styles.title}>One Platform to Run <br />Every <span className="gradient-text">Social Activity</span></h2>
|
||||
<p className={styles.subtitle}>
|
||||
Everything you need to dominate social media, conveniently organized in one powerful platform.
|
||||
Social Buddy brings planning, publishing, monitoring, and performance tracking together in a single workspace. Instead of juggling multiple tools, teams can manage daily social operations efficiently while staying focused on growth and engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -22,8 +22,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>📊</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Unified Dashboard</h3>
|
||||
<p>Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.</p>
|
||||
<h3>Central Control Panel</h3>
|
||||
<p>Oversee multiple social profiles from one streamlined interface, making it easier to publish updates, monitor activity, and stay organized across platforms.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,8 +32,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>⚡</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Smart Scheduling</h3>
|
||||
<p>AI-powered timing suggestions to automatically post when your audience is most active.</p>
|
||||
<h3>Intelligent Posting Automation</h3>
|
||||
<p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,8 +42,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>📅</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Visual Calendar</h3>
|
||||
<p>Drag-and-drop content calendar to plan and visualize your strategy months in advance.</p>
|
||||
<h3>Interactive Planning View</h3>
|
||||
<p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,8 +82,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>📈</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Analytics & Reports</h3>
|
||||
<p>Deep dive into performance metrics with automated, white-labeled reports for clients.</p>
|
||||
<h3>Performance Insights & Exports</h3>
|
||||
<p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -92,8 +92,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>👥</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Team Collaboration</h3>
|
||||
<p>Built-in approval workflows and role-based access for seamless team coordination.</p>
|
||||
<h3>Team-Based Workflows</h3>
|
||||
<p>Coordinate seamlessly with internal teams or clients using structured review processes and permission-based access.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -102,8 +102,8 @@ export default function CoreServices() {
|
||||
<span className={styles.icon}>💬</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Social Inbox</h3>
|
||||
<p>Never miss a comment or DM. innovative unified inbox to reply to all interactions.</p>
|
||||
<h3>Unified Message Center</h3>
|
||||
<p>Handle comments, mentions, and private messages from different platforms in one response hub - so no interaction goes unnoticed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -131,7 +131,7 @@ export default function FAQ() {
|
||||
<div className={styles.leftColumn}>
|
||||
<span className={styles.label}>FAQ</span>
|
||||
<h2 className={styles.heading}>
|
||||
Everything You <span className="gradient-text">Need to Know</span>
|
||||
A Platform You Can Rely On <span className="gradient-text">for Growth</span>
|
||||
</h2>
|
||||
|
||||
<div className={styles.featureList}>
|
||||
|
||||
@ -78,14 +78,14 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
|
||||
.badgeText {
|
||||
font-size: 0.9rem;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
/* Dark text */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@ -299,7 +299,7 @@
|
||||
|
||||
.cardText strong {
|
||||
font-size: 0.9rem;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
}
|
||||
|
||||
.cardText span {
|
||||
@ -335,7 +335,7 @@
|
||||
.userCount {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -410,7 +410,7 @@
|
||||
|
||||
.msgText p {
|
||||
font-size: 0.85rem;
|
||||
color: #0f172a;
|
||||
color: #0072b1;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -11,29 +11,32 @@ export default function Hero() {
|
||||
const slides = [
|
||||
{
|
||||
id: 1,
|
||||
badge: 'New Feature',
|
||||
badgeText: 'AI-Powered Scheduling is here',
|
||||
title: 'Find your social media success.',
|
||||
subtitle: 'Your dream engagement is waiting for you. Manage all your accounts in one place.',
|
||||
ctaPrimary: 'Get Started',
|
||||
badge: 'INSIGHTS',
|
||||
badgeText: 'Smarter decisions powered by data',
|
||||
title: 'Understand what works and amplify your impact.',
|
||||
subtitle: 'Monitor interactions, audience behavior, and campaign outcomes through a unified insights panel designed to guide better marketing moves.',
|
||||
ctaPrimary: 'View Insights',
|
||||
trustedBy:'Chosen by teams across industries',
|
||||
image: '/hero-slide-1.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
badge: 'Analytics',
|
||||
badgeText: 'Deep insights for growth',
|
||||
title: 'Analyze performance & boost reach.',
|
||||
subtitle: 'Track every click, like, and share with our advanced analytics dashboard.',
|
||||
ctaPrimary: 'Explore Analytics',
|
||||
badge: 'CONTROL',
|
||||
badgeText: 'One dashboard, total clarity',
|
||||
title: 'Take charge of every social channel effortlessly.',
|
||||
subtitle: 'Coordinate publishing, conversations, and performance tracking across platforms without switching tools or losing momentum.',
|
||||
ctaPrimary: 'Access the Dashboard',
|
||||
trustedBy:'Supporting brands, creators, and agencies globally',
|
||||
image: '/hero-slide-2.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
badge: 'Community',
|
||||
badgeText: 'Join 10,000+ Creators',
|
||||
title: 'Connect with your audience instantly.',
|
||||
subtitle: 'Real-time engagement tools to keep your community active and growing.',
|
||||
ctaPrimary: 'Join Community',
|
||||
badge: 'OPTIMIZATION',
|
||||
badgeText: 'Designed for consistent growth',
|
||||
title: 'Turn social activity into measurable business wins.',
|
||||
subtitle: 'Leverage intelligent reports and audience insights to refine your strategy, improve visibility, and scale engagement with confidence.',
|
||||
ctaPrimary: 'Start Your Journey',
|
||||
trustedBy:'Built for fast-moving marketing teams',
|
||||
image: '/hero-slide-3.png'
|
||||
},
|
||||
];
|
||||
@ -101,7 +104,7 @@ export default function Hero() {
|
||||
</div>
|
||||
|
||||
<div className={styles.trustedBy}>
|
||||
<p>We are Trusted by:</p>
|
||||
<p>{slide.trustedBy}</p>
|
||||
<div className={styles.trustedIcons}>
|
||||
<div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div> {/* Google */}
|
||||
<div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div> {/* Behance */}
|
||||
|
||||
@ -28,26 +28,26 @@ export default function HowItWorks() {
|
||||
const steps = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Trends and Technologies',
|
||||
description: 'Leverage emerging tools to foster innovation and collaboration.',
|
||||
title: 'Discovery Session',
|
||||
description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
|
||||
icon: <TrendingUp />,
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Data Analysis and Analytics',
|
||||
description: 'Deploy insights to improve decision making and drive traffic.',
|
||||
title: 'Planning & Direction',
|
||||
description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
|
||||
icon: <BarChart3 />,
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Your Target Audience',
|
||||
description: 'Understand Your Target Audience and their shopping behavior.',
|
||||
title: 'Execution Phase',
|
||||
description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
|
||||
icon: <Users />,
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Social Media Engagement',
|
||||
description: 'Create valuable, shareable content for increased engagement.',
|
||||
title: 'Outcome & Optimization',
|
||||
description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
|
||||
icon: <Heart />,
|
||||
},
|
||||
];
|
||||
@ -58,7 +58,7 @@ export default function HowItWorks() {
|
||||
<div className={styles.header}>
|
||||
<span className={styles.subTitle}>Our Work Process</span>
|
||||
<h2 className={styles.title}>
|
||||
How We <span className="gradient-text">Drive Results</span>
|
||||
A Clear, Structured <br /> Path to <span className="gradient-text">Social Growth</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
@ -279,7 +279,7 @@
|
||||
}
|
||||
|
||||
.signupBtn:hover {
|
||||
background: #0f172a;
|
||||
background: #0072b1;
|
||||
/* Keep dark hover or update? Let's keep dark fallback for hover state */
|
||||
padding-right: 2.2rem;
|
||||
/* Animate slightly */
|
||||
|
||||
@ -57,10 +57,10 @@ export default function Pricing() {
|
||||
<div className={styles.header}>
|
||||
<div className={styles.subTitle}>Pricing</div>
|
||||
<h2 className={styles.title}>
|
||||
Simple, <span className="gradient-text">Transparent Pricing</span>
|
||||
Clear Plans with <span className="gradient-text"><br />No Hidden Costs</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Choose the perfect plan for your needs. All plans include a 7-day free trial.
|
||||
Select a package that fits your goals. Every option comes with a risk-free 7-day trial so you can explore confidently.
|
||||
</p>
|
||||
|
||||
<div className={styles.toggle}>
|
||||
@ -110,7 +110,7 @@ export default function Pricing() {
|
||||
</div>
|
||||
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
|
||||
Sign up <span className={styles.btnArrow}>▶</span>
|
||||
Get Started <span className={styles.btnArrow}>▶</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,7 +119,7 @@ export default function Pricing() {
|
||||
|
||||
<div className={styles.guarantee}>
|
||||
<p>
|
||||
<strong>Try risk-free. Cancel anytime.</strong>
|
||||
<strong>Start confidently and stop anytime.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -101,13 +101,9 @@ export default function SocialConnect() {
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.subTitle}>Our Services</div>
|
||||
<h2 className={styles.title}>
|
||||
Always we offer the best services for success!
|
||||
</h2>
|
||||
<h2 className={styles.title}><span className="gradient-text">Proven Solutions </span>That Drive <br /> Real Outcomes</h2>
|
||||
<p className={styles.description}>
|
||||
New analytic tools can help manufacturers in labor-intensive sectors boost
|
||||
productivity and earnings by double-digit on It is a secure and simple
|
||||
ondemand. the total percentages.
|
||||
Modern social platforms demand more than visibility - they require consistency, relevance, and measurable progress. Our service framework is built to help brands strengthen engagement, improve efficiency, and scale results using structured execution and data-backed decisions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -136,9 +132,7 @@ export default function SocialConnect() {
|
||||
</div>
|
||||
<h3 className={styles.cardTitle}>{activePlatform.label}</h3>
|
||||
<p className={styles.cardDesc}>
|
||||
{activePlatform.desc}
|
||||
<br />
|
||||
<span className={styles.brandName}>Prysm Quarterly</span> has been defining...
|
||||
{activePlatform.desc}
|
||||
</p>
|
||||
<button
|
||||
className={styles.readMoreBtn}
|
||||
|
||||
@ -80,7 +80,7 @@ export default function StatsCounter() {
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.users : 0}k+
|
||||
</div>
|
||||
<p className={styles.label}>Active Users</p>
|
||||
<p className={styles.label}>Growing Community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ export default function StatsCounter() {
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? '2' : '0'}M+
|
||||
</div>
|
||||
<p className={styles.label}>Posts Scheduled</p>
|
||||
<p className={styles.label}>Content Published</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -108,7 +108,7 @@ export default function StatsCounter() {
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.satisfaction : 0}%
|
||||
</div>
|
||||
<p className={styles.label}>Client Satisfaction</p>
|
||||
<p className={styles.label}>Customer Approval</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,47 +10,40 @@ export default function Testimonials() {
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: 'Sarah Johnson',
|
||||
role: 'Marketing Director',
|
||||
company: 'TechFlow Inc.',
|
||||
text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers.',
|
||||
name: 'Rahul Mehta',
|
||||
role: 'Growth Manager',
|
||||
reviewTitle:'Highly Impressive Results!',
|
||||
text: 'The performance insights are extremely clear. We can now adjust campaigns quickly and make confident marketing decisions.',
|
||||
image: '👩💼'
|
||||
},
|
||||
{
|
||||
name: 'Michael Chen',
|
||||
role: 'Content Creator',
|
||||
company: 'Digital Nomad',
|
||||
text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful.',
|
||||
name: 'Emily Carter',
|
||||
role: 'Content Strategist',
|
||||
reviewTitle:'Smooth and Reliable Platform!',
|
||||
text: 'Managing posts feels effortless now. Planning content ahead of time has significantly improved our publishing consistency.',
|
||||
image: '👨💻'
|
||||
},
|
||||
{
|
||||
name: 'Emily Rodriguez',
|
||||
role: 'Social Media Manager',
|
||||
company: 'BrandBoost Agency',
|
||||
text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features have streamlined our process.',
|
||||
name: 'Arjun Nair',
|
||||
role: 'Digital Consultant',
|
||||
reviewTitle:'Excellent Tool for Teams!',
|
||||
text: 'Collaboration is seamless and approvals are faster. It has simplified how we handle multiple client accounts.',
|
||||
image: '👩🎨'
|
||||
},
|
||||
{
|
||||
name: 'David Park',
|
||||
role: 'CEO',
|
||||
company: 'StartupHub',
|
||||
text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy.',
|
||||
name: 'Sophia Williams',
|
||||
role: 'Brand Manager',
|
||||
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: 'Lisa Thompson',
|
||||
role: 'Influencer',
|
||||
company: 'Lifestyle & Travel',
|
||||
text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance.',
|
||||
name: 'Daniel Rodrigues',
|
||||
role: ' Marketing Lead',
|
||||
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: '👩🦰'
|
||||
},
|
||||
{
|
||||
name: 'James Wilson',
|
||||
role: 'E-commerce Manager',
|
||||
company: 'ShopSmart',
|
||||
text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing.',
|
||||
image: '👨🏫'
|
||||
}
|
||||
];
|
||||
|
||||
// Clone the first few items to create the infinite illusion
|
||||
@ -128,12 +121,10 @@ export default function Testimonials() {
|
||||
<div className={styles.leftCard}>
|
||||
<div className={styles.cardContent}>
|
||||
<h2 className={styles.cardTitle}>
|
||||
Discover your <br />
|
||||
entrepreneurial potential
|
||||
Unlock Your Growth Opportunities
|
||||
</h2>
|
||||
<p className={styles.cardDescription}>
|
||||
Join countless marketers and influencers who have transformed their social media presence with SocialBuddy.
|
||||
Success is just a click away.
|
||||
Connect with a global community of marketers and creators who have elevated their digital presence using Social Buddy. Real progress, real outcomes - getting started takes only a moment.
|
||||
</p>
|
||||
|
||||
<div className={styles.miniStats}>
|
||||
@ -141,20 +132,20 @@ export default function Testimonials() {
|
||||
<span className={styles.statIcon}>👥</span>
|
||||
<div>
|
||||
<strong>10,000+</strong>
|
||||
<span>Happy Users</span>
|
||||
<span>Active Members</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statBadge}>
|
||||
<span className={styles.statIcon}>⭐</span>
|
||||
<div>
|
||||
<strong>4.9/5</strong>
|
||||
<span>Ratings</span>
|
||||
<span>User Satisfaction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className={styles.readMoreBtn}>
|
||||
Read Success Stories
|
||||
View Customer Stories
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -174,11 +165,11 @@ export default function Testimonials() {
|
||||
<div className={styles.userImage}>{t.image}</div>
|
||||
<div className={styles.userInfo}>
|
||||
<h4>{t.name}</h4>
|
||||
<span className={styles.userCompany}>{t.company}</span>
|
||||
<span className={styles.userCompany}>{t.role}</span>
|
||||
</div>
|
||||
<div className={styles.rating}>⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<h5 className={styles.reviewTitle}>Amazing Experience!</h5>
|
||||
<h5 className={styles.reviewTitle}>{t.reviewTitle}</h5>
|
||||
<p className={styles.reviewText}>{t.text}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user