Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 593793fb05 | |||
| 29f8f1d69e | |||
| a329ad3fd9 | |||
|
13c9d23fd4 | ||
| b11ac845c3 | |||
|
|
41dfeb5e1c | ||
| 1761f073bf | |||
| a9e01f5d4f | |||
| 8332e5764d | |||
|
|
70871d179f | ||
| 602c342757 | |||
| 6f87a43fb0 | |||
| f57dab317f | |||
| 5853fc54fd |
@ -1,337 +1,584 @@
|
||||
/* About Page Styles */
|
||||
|
||||
.aboutPage {
|
||||
min-height: 100vh;
|
||||
background: var(--background);
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/images/about/aboutpage-banner.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 8rem 0 8rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
/* -webkit-text-fill-color: transparent; */
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
.breadcrumb {
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 1. Story Section (Image 3 Style) */
|
||||
.storySection {
|
||||
padding: 4rem 0;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.storyGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.storyImageContainer {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
/* Space for frame */
|
||||
}
|
||||
|
||||
/* The decorative frame behind the image */
|
||||
.storyFrame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 3px solid #ec4899;
|
||||
/* Primary Pink */
|
||||
border-radius: 20px;
|
||||
transform: rotate(-3deg);
|
||||
z-index: 0;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.storyImageWrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
transform: rotate(2deg);
|
||||
/* Counter tilt */
|
||||
}
|
||||
|
||||
.storyImg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.storyContent {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.storyTitle {
|
||||
color: #ec4899;
|
||||
/* Pink Title */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.storyHeading {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.storyText {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.storyBtn {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.39);
|
||||
}
|
||||
|
||||
.storyBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.23);
|
||||
background: #db2777;
|
||||
}
|
||||
|
||||
|
||||
/* 2. Why Choose Us (Image 1 Style) */
|
||||
.whyChooseSection {
|
||||
padding: 4rem 0 4rem;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.whyHeader {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cardsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2.5rem 1.5rem;
|
||||
border-radius: 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.cardIconWrapper {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Card Variants */
|
||||
/* Purple */
|
||||
.cardPurple {
|
||||
background: #F3E8FF;
|
||||
border-color: #E9D5FF;
|
||||
}
|
||||
|
||||
.cardPurple .cardIconWrapper {
|
||||
color: #9333EA;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.cardOrange {
|
||||
background: #FFEDD5;
|
||||
/* Peach/Orange */
|
||||
border-color: #FED7AA;
|
||||
}
|
||||
|
||||
.cardOrange .cardIconWrapper {
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
.cardPink {
|
||||
background: #FCE7F3;
|
||||
border-color: #FBCFE8;
|
||||
}
|
||||
|
||||
.cardPink .cardIconWrapper {
|
||||
color: #EC4899;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.cardGreen {
|
||||
background: #DCFCE7;
|
||||
border-color: #BBF7D0;
|
||||
}
|
||||
|
||||
.cardGreen .cardIconWrapper {
|
||||
color: #16A34A;
|
||||
/* Updated green for better contrast on light bg, slightly darker than accent */
|
||||
}
|
||||
|
||||
|
||||
/* 3. Feature Set Section (Image 2 Style) */
|
||||
.featureSetSection {
|
||||
padding: 4rem 0;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featureSetGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.featureSetTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.2;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.featureList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.featureListItem {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.featureListIcon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
background: var(--background-secondary);
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.featureListText h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.featureListText p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Mockup Side */
|
||||
.mockupWrapper {
|
||||
position: relative;
|
||||
background: #F8FAFC;
|
||||
/* Subtle bg blob? */
|
||||
border-radius: 40px;
|
||||
padding: 2rem;
|
||||
/* Center the image */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mockupWrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at center, #F1F5F9 0%, transparent 70%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mockupImg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.floatCard {
|
||||
position: absolute;
|
||||
background: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floatCard1 {
|
||||
top: 10%;
|
||||
right: 5%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.floatCard2 {
|
||||
bottom: 15%;
|
||||
right: 10%;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.floatCard span {
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.floatCard small {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.floatCard strong {
|
||||
color: var(--primary);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 900px) {
|
||||
.storyGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.cardsGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.featureSetGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.storyImage {
|
||||
order: 2;
|
||||
/* 4. Ready CTA Section (Image Bottom Style) */
|
||||
.readySection {
|
||||
padding: 4rem 0 4rem;
|
||||
/* Padding bottom mainly, card has internal padding */
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.storyImage {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.imagePlaceholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.placeholderIcon {
|
||||
font-size: 8rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.storyContent {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.storyContent {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.storyText {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.storyText:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.valuesSection {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), rgba(59, 130, 246, 0.03));
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.valuesGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.valueCard {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.valueCard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.valueIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.valueTitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.valueDescription {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, var(--primary), var(--secondary));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.timeline::before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.timelineItem {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.timelineItem {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.timelineItem:nth-child(even) {
|
||||
margin-left: auto;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.timelineIcon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timelineContent {
|
||||
flex: 1;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.timelineYear {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.timelineEvent {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.teamSection {
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.teamGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.teamCard {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.teamCard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.memberImage {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.memberName {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.memberRole {
|
||||
font-size: 1rem;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.memberBio {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ctaSection {
|
||||
padding: 6rem 0;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
}
|
||||
|
||||
.ctaContent {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
.readyCard {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%);
|
||||
/* Primary Gradient Blue->Pink */
|
||||
border-radius: 40px;
|
||||
padding: 3rem 3rem 0;
|
||||
/* No bottom padding, content aligns to bottom */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.ctaButtons {
|
||||
.readyContent {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.readyTitle {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.whiteGradientText {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.readyText {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.readyBtn {
|
||||
background: white;
|
||||
color: #ec4899;
|
||||
/* Pink text */
|
||||
border: none;
|
||||
padding: 1rem 2.5rem;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.readyBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.readyImageWrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: -50px;
|
||||
/* Let it bleed out slightly if we want, or just sit at bottom */
|
||||
}
|
||||
|
||||
/* Phone Mockup */
|
||||
.phoneFrame {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
transform: rotate(-10deg) translateX(-20px);
|
||||
/* Tilted left like ref */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.phoneFrame:hover {
|
||||
transform: rotate(0deg) translateX(0);
|
||||
}
|
||||
|
||||
.phoneScreen {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 30px;
|
||||
border: 8px solid #1e293b;
|
||||
/* Dark Frame */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
/* Fallback */
|
||||
}
|
||||
|
||||
.phoneOverlayCard {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: -40px;
|
||||
background: white;
|
||||
color: #0072b1;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
animation: float 5s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.overlayItem {
|
||||
font-size: 0.85rem;
|
||||
background: #f1f5f9;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Desktop Layout */
|
||||
@media (min-width: 900px) {
|
||||
.readyCard {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 4rem 4rem 4rem 6rem;
|
||||
/* Left padding for image space */
|
||||
overflow: visible;
|
||||
/* Allow image to pop out if needed */
|
||||
/* Space for pop out */
|
||||
}
|
||||
|
||||
.readyContent {
|
||||
max-width: 50%;
|
||||
text-align: left;
|
||||
order: 2;
|
||||
/* Text on right */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.readyText {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.readyImageWrapper {
|
||||
order: 1;
|
||||
/* Image on left */
|
||||
width: 40%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.phoneFrame {
|
||||
width: 280px;
|
||||
transform: rotate(-12deg) translateY(20px) scale(1.1);
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { ShieldCheck, Users, Zap, Award, CheckCircle2 } from 'lucide-react';
|
||||
import styles from './about.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -7,194 +10,216 @@ export const metadata: Metadata = {
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
const team = [
|
||||
{
|
||||
name: 'Alex Johnson',
|
||||
role: 'CEO & Founder',
|
||||
image: '👨💼',
|
||||
bio: '10+ years in social media marketing',
|
||||
},
|
||||
{
|
||||
name: 'Sarah Williams',
|
||||
role: 'CTO',
|
||||
image: '👩💻',
|
||||
bio: 'Former lead engineer at major tech companies',
|
||||
},
|
||||
{
|
||||
name: 'Michael Chen',
|
||||
role: 'Head of Product',
|
||||
image: '👨🎨',
|
||||
bio: 'Product design expert with a passion for UX',
|
||||
},
|
||||
{
|
||||
name: 'Emily Rodriguez',
|
||||
role: 'Head of Customer Success',
|
||||
image: '👩💼',
|
||||
bio: 'Dedicated to making customers successful',
|
||||
},
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: '🎯',
|
||||
title: 'Customer First',
|
||||
description: 'Everything we do is centered around making our customers successful.',
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
title: 'Innovation',
|
||||
description: 'We constantly push boundaries to deliver cutting-edge solutions.',
|
||||
},
|
||||
{
|
||||
icon: '🤝',
|
||||
title: 'Collaboration',
|
||||
description: 'We believe in the power of teamwork and community.',
|
||||
},
|
||||
{
|
||||
icon: '💡',
|
||||
title: 'Simplicity',
|
||||
description: 'Complex problems deserve simple, elegant solutions.',
|
||||
},
|
||||
];
|
||||
|
||||
const milestones = [
|
||||
{ year: '2020', event: 'SocialBuddy founded', icon: '🎉' },
|
||||
{ year: '2021', event: '1,000 users milestone', icon: '🎯' },
|
||||
{ year: '2022', event: 'Series A funding', icon: '💰' },
|
||||
{ year: '2023', event: '10,000+ active users', icon: '🚀' },
|
||||
{ year: '2024', event: 'AI features launched', icon: '🤖' },
|
||||
{ year: '2025', event: 'Global expansion', icon: '🌍' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.aboutPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
About <span className="gradient-text">SocialBuddy</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
We're on a mission to empower businesses and creators to build meaningful connections
|
||||
through social media—without the complexity.
|
||||
</p>
|
||||
<h1 className={styles.heroTitle}>About Us</h1>
|
||||
<div className={styles.breadcrumb}>
|
||||
<a href="/">Home</a> / <span className={styles.breadcrumbActive}>About</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="section">
|
||||
{/* 1. Our Story Section (Reference Image 3) */}
|
||||
<section className={styles.storySection}>
|
||||
<div className="container">
|
||||
<div className={styles.storyGrid}>
|
||||
<div className={styles.storyImage}>
|
||||
<div className={styles.imagePlaceholder}>
|
||||
<span className={styles.placeholderIcon}>📖</span>
|
||||
{/* Left Image with Frame */}
|
||||
<div className={styles.storyImageContainer}>
|
||||
<div className={styles.storyFrame}></div>
|
||||
<div className={styles.storyImageWrapper}>
|
||||
<Image
|
||||
src="/images/about/our-story.webp"
|
||||
alt="Our Team Story"
|
||||
width={600}
|
||||
height={700}
|
||||
className={styles.storyImg}
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content */}
|
||||
<div className={styles.storyContent}>
|
||||
<h2 className={styles.sectionTitle}>Our Story</h2>
|
||||
<h2 className={styles.storyTitle}>OUR STORY</h2>
|
||||
<h3 className={styles.storyHeading}>Bring clarity to social media chaos.</h3>
|
||||
<p className={styles.storyText}>
|
||||
SocialBuddy was born out of frustration. Our founders spent years managing social media
|
||||
for multiple businesses and experienced firsthand the chaos of juggling multiple platforms,
|
||||
tools, and spreadsheets.
|
||||
SocialBuddy started with a simple observation: social media management had become too complicated. Between juggling multiple platforms, analyzing disconnected data, and trying to keep up with ever-changing algorithms, marketers were losing time and focus.
|
||||
</p>
|
||||
<p className={styles.storyText}>
|
||||
We knew there had to be a better way. So in 2020, we set out to build the social media
|
||||
management platform we wished existed—one that's powerful yet simple, comprehensive yet
|
||||
intuitive, and accessible to businesses of all sizes.
|
||||
</p>
|
||||
<p className={styles.storyText}>
|
||||
Today, SocialBuddy serves over 10,000 businesses and creators worldwide, helping them
|
||||
save time, increase engagement, and grow their online presence.
|
||||
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>
|
||||
<Link href="/careers">
|
||||
<button className={styles.storyBtn}>
|
||||
Discover Our Mission
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className={`section ${styles.valuesSection}`}>
|
||||
{/* 2. Why Choose Us Section (Reference Image 1) */}
|
||||
<section className={styles.whyChooseSection}>
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Our Values</h2>
|
||||
<div className={styles.whyHeader}>
|
||||
<h2 className={styles.sectionTitle}>Why choose us?</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
The principles that guide everything we do
|
||||
We provide comprehensive solutions tailored to your unique needs, helping you achieve your goals faster.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.valuesGrid}>
|
||||
{values.map((value, index) => (
|
||||
<div key={index} className={styles.valueCard}>
|
||||
<div className={styles.valueIcon}>{value.icon}</div>
|
||||
<h3 className={styles.valueTitle}>{value.title}</h3>
|
||||
<p className={styles.valueDescription}>{value.description}</p>
|
||||
|
||||
<div className={styles.cardsGrid}>
|
||||
{/* Card 1: Purple */}
|
||||
<div className={`${styles.card} ${styles.cardPurple}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Image src="/images/about/marketers.png" alt="Built by Marketers" width={32} height={32} />
|
||||
</div>
|
||||
))}
|
||||
<h3>Built by Marketers</h3>
|
||||
<p>We understand the daily grind. Every feature is designed to solve real workflow challenges and save you hours every week.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Orange */}
|
||||
<div className={`${styles.card} ${styles.cardOrange}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Image src="/images/about/success.png" alt="Data-Driven Success" width={32} height={32} />
|
||||
</div>
|
||||
<h3>Data-Driven Success</h3>
|
||||
<p>Move beyond guesswork. Our advanced analytics give you the hard numbers you need to prove ROI and refine your strategy.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Pink */}
|
||||
<div className={`${styles.card} ${styles.cardPink}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Image src="/images/about/power.png" alt="Enterprise Power" width={32} height={32} />
|
||||
</div>
|
||||
<h3>Enterprise Power</h3>
|
||||
<p>Access the same robust tools used by top global agencies, priced perfectly for growing businesses and ambitious creators.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Green */}
|
||||
<div className={`${styles.card} ${styles.cardGreen}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Image src="/images/about/secure.png" alt="Secure & Reliable" width={32} height={32} />
|
||||
</div>
|
||||
<h3>Secure & Reliable</h3>
|
||||
<p>Your brand's safety is non-negotiable. We prioritize expert-level security and 99.9% uptime reliability.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<section className="section">
|
||||
{/* 3. Features Loop Section (Reference Image 2) */}
|
||||
<section className={styles.featureSetSection}>
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Our Journey</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
Key milestones in our growth story
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.timeline}>
|
||||
{milestones.map((milestone, index) => (
|
||||
<div key={index} className={styles.timelineItem}>
|
||||
<div className={styles.timelineIcon}>{milestone.icon}</div>
|
||||
<div className={styles.timelineContent}>
|
||||
<div className={styles.timelineYear}>{milestone.year}</div>
|
||||
<div className={styles.timelineEvent}>{milestone.event}</div>
|
||||
<div className={styles.featureSetGrid}>
|
||||
{/* Left Content */}
|
||||
<div className={styles.featureSetContent}>
|
||||
<h2 className={styles.featureSetTitle}>
|
||||
Comprehensive <span className="gradient-text">Feature Set</span> <br />
|
||||
of a Social Manager App
|
||||
</h2>
|
||||
|
||||
<div className={styles.featureList}>
|
||||
<div className={styles.featureListItem}>
|
||||
<div className={styles.featureListIcon}>
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div className={styles.featureListText}>
|
||||
<h4>Seamless Synchronization</h4>
|
||||
<p>Your work follows you. Switch effortlessly between desktop and mobile without missing a beat.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.featureListItem}>
|
||||
<div className={styles.featureListIcon}>
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div className={styles.featureListText}>
|
||||
<h4>Collaborative Workflows</h4>
|
||||
<p>Keep your team aligned. Share assets, leave notes, and approve content directly within your calendar.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.featureListItem}>
|
||||
<div className={styles.featureListIcon}>
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div className={styles.featureListText}>
|
||||
<h4>Live Performance Tracking</h4>
|
||||
<p>Watch your campaigns perform in real-time and pivot instantly to maximize your engagement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className={`section ${styles.teamSection}`}>
|
||||
<div className="container">
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2 className={styles.sectionTitle}>Meet Our Team</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
The passionate people behind SocialBuddy
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.teamGrid}>
|
||||
{team.map((member, index) => (
|
||||
<div key={index} className={styles.teamCard}>
|
||||
<div className={styles.memberImage}>{member.image}</div>
|
||||
<h3 className={styles.memberName}>{member.name}</h3>
|
||||
<div className={styles.memberRole}>{member.role}</div>
|
||||
<p className={styles.memberBio}>{member.bio}</p>
|
||||
{/* Right Image/Mockup */}
|
||||
<div className={styles.featureSetImage}>
|
||||
{/* Mockup Container */}
|
||||
<div className={styles.mockupWrapper}>
|
||||
<Image
|
||||
src="/images/about/comprehensive.webp"
|
||||
alt="Feature Dashboard"
|
||||
width={600}
|
||||
height={400}
|
||||
className={styles.mockupImg}
|
||||
/>
|
||||
{/* Floating Cards simulating the ref image */}
|
||||
{/* <div className={`${styles.floatCard} ${styles.floatCard1}`}>
|
||||
<span>Create Task</span>
|
||||
<small>17 August, 2023</small>
|
||||
</div>
|
||||
<div className={`${styles.floatCard} ${styles.floatCard2}`}>
|
||||
<span>Total Working Hours</span>
|
||||
<strong>44:32:00</strong>
|
||||
</div> */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={styles.ctaSection}>
|
||||
{/* 4. Ready CTA Section (Reference Image Bottom) */}
|
||||
<section className={styles.readySection}>
|
||||
<div className="container">
|
||||
<div className={styles.ctaContent}>
|
||||
<h2 className={styles.ctaTitle}>Join Us on Our Journey</h2>
|
||||
<p className={styles.ctaSubtitle}>
|
||||
Be part of the future of social media management
|
||||
</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
||||
Start Free Trial
|
||||
</a>
|
||||
<a href="/contact" className="btn btn-secondary btn-large">
|
||||
Contact Us
|
||||
<div className={styles.readyCard}>
|
||||
<div className={styles.readyContent}>
|
||||
<h2 className={styles.readyTitle}>
|
||||
Ready to Transform Your <br /> Social Strategy?
|
||||
</h2>
|
||||
<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>
|
||||
<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}>
|
||||
<Image
|
||||
src="/images/about/ready-img.webp"
|
||||
alt="SocialBuddy App"
|
||||
width={300}
|
||||
height={600}
|
||||
className={styles.phoneScreen}
|
||||
objectFit="cover"
|
||||
/>
|
||||
{/* Floating Overlay Card inside section */}
|
||||
{/* <div className={styles.phoneOverlayCard}>
|
||||
<span>Task List</span>
|
||||
<div className={styles.overlayItem}>✅ Social Audit</div>
|
||||
<div className={styles.overlayItem}>✅ Content Plan</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,222 +0,0 @@
|
||||
.blogPage {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 6rem 0 4rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.categoriesSection {
|
||||
padding: 2rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.categoryBtn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--background);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.categoryBtn:hover,
|
||||
.categoryBtn.active {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.blogGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blogGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.blogGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.blogCard {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blogCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.cardImage {
|
||||
height: 200px;
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.imageIcon {
|
||||
font-size: 5rem;
|
||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cardMeta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.cardTitle a {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.cardTitle a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cardExcerpt {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cardFooter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--background-secondary);
|
||||
}
|
||||
|
||||
.readTime {
|
||||
color: var(--foreground-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.readMore {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.readMore:hover {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 5rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.newsletterContent {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.newsletterTitle {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletterSubtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.newsletterForm {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.newsletterInput {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
padding: 1rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.newsletterForm .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,153 +0,0 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import styles from './blog.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Blog - SocialBuddy',
|
||||
description: 'Latest news, tips, and insights about social media management, marketing strategies, and platform updates.',
|
||||
};
|
||||
|
||||
export default function BlogPage() {
|
||||
const blogPosts = [
|
||||
{
|
||||
title: '10 Social Media Trends to Watch in 2025',
|
||||
excerpt: 'Stay ahead of the curve with these emerging social media trends that will shape the digital landscape.',
|
||||
category: 'Trends',
|
||||
date: 'Dec 8, 2025',
|
||||
readTime: '5 min read',
|
||||
image: '📈',
|
||||
slug: '10-social-media-trends-2025',
|
||||
},
|
||||
{
|
||||
title: 'How to Create a Content Calendar That Works',
|
||||
excerpt: 'Learn the best practices for planning and organizing your social media content effectively.',
|
||||
category: 'Strategy',
|
||||
date: 'Dec 5, 2025',
|
||||
readTime: '8 min read',
|
||||
image: '📅',
|
||||
slug: 'content-calendar-guide',
|
||||
},
|
||||
{
|
||||
title: 'Mastering Instagram Reels for Business Growth',
|
||||
excerpt: 'Discover how to leverage Instagram Reels to increase engagement and reach new audiences.',
|
||||
category: 'Tutorial',
|
||||
date: 'Dec 1, 2025',
|
||||
readTime: '6 min read',
|
||||
image: '🎬',
|
||||
slug: 'instagram-reels-guide',
|
||||
},
|
||||
{
|
||||
title: 'The Ultimate Guide to Social Media Analytics',
|
||||
excerpt: 'Understand the metrics that matter and how to use data to improve your social media performance.',
|
||||
category: 'Analytics',
|
||||
date: 'Nov 28, 2025',
|
||||
readTime: '10 min read',
|
||||
image: '📊',
|
||||
slug: 'social-media-analytics-guide',
|
||||
},
|
||||
{
|
||||
title: 'AI-Powered Content Creation: Tips and Tools',
|
||||
excerpt: 'Explore how artificial intelligence is transforming content creation and how you can use it effectively.',
|
||||
category: 'Technology',
|
||||
date: 'Nov 25, 2025',
|
||||
readTime: '7 min read',
|
||||
image: '🤖',
|
||||
slug: 'ai-content-creation',
|
||||
},
|
||||
{
|
||||
title: 'Building a Strong Brand Voice on Social Media',
|
||||
excerpt: 'Learn how to develop and maintain a consistent brand voice across all your social platforms.',
|
||||
category: 'Branding',
|
||||
date: 'Nov 20, 2025',
|
||||
readTime: '6 min read',
|
||||
image: '🎯',
|
||||
slug: 'brand-voice-guide',
|
||||
},
|
||||
];
|
||||
|
||||
const categories = ['All', 'Trends', 'Strategy', 'Tutorial', 'Analytics', 'Technology', 'Branding'];
|
||||
|
||||
return (
|
||||
<div className={styles.blogPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
SocialBuddy <span className="gradient-text">Blog</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Insights, tips, and strategies to help you succeed in social media marketing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories */}
|
||||
<section className={styles.categoriesSection}>
|
||||
<div className="container">
|
||||
<div className={styles.categories}>
|
||||
{categories.map((category, idx) => (
|
||||
<button key={idx} className={`${styles.categoryBtn} ${idx === 0 ? styles.active : ''}`}>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.blogGrid}>
|
||||
{blogPosts.map((post, idx) => (
|
||||
<article key={idx} className={styles.blogCard}>
|
||||
<div className={styles.cardImage}>
|
||||
<span className={styles.imageIcon}>{post.image}</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.cardMeta}>
|
||||
<span className={styles.category}>{post.category}</span>
|
||||
<span className={styles.date}>{post.date}</span>
|
||||
</div>
|
||||
<h2 className={styles.cardTitle}>
|
||||
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
|
||||
</h2>
|
||||
<p className={styles.cardExcerpt}>{post.excerpt}</p>
|
||||
<div className={styles.cardFooter}>
|
||||
<span className={styles.readTime}>⏱️ {post.readTime}</span>
|
||||
<Link href={`/blog/${post.slug}`} className={styles.readMore}>
|
||||
Read More →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<section className={styles.newsletter}>
|
||||
<div className="container">
|
||||
<div className={styles.newsletterContent}>
|
||||
<h2 className={styles.newsletterTitle}>Stay Updated</h2>
|
||||
<p className={styles.newsletterSubtitle}>
|
||||
Get the latest social media tips and SocialBuddy updates delivered to your inbox
|
||||
</p>
|
||||
<form className={styles.newsletterForm}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className={styles.newsletterInput}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
417
app/careers/careers.module.css
Normal file
417
app/careers/careers.module.css
Normal file
@ -0,0 +1,417 @@
|
||||
/* Careers Page Styles */
|
||||
|
||||
.careersPage {
|
||||
background: var(--background);
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: url('/images/careers/careers-banner.webp') no-repeat center center;
|
||||
background-size: cover;
|
||||
padding: 8rem 0;
|
||||
/* Taller padding */
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
color: white;
|
||||
/* Text white on BG */
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
/* Dark Overlay */
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #0072b1;
|
||||
/* Dark Blue */
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1.1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 1. What We Offer (Left Content, Right 3 Images) */
|
||||
.offerSection {
|
||||
padding: 4rem 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.offerContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.offerContent {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.offerContent h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.offerContent p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.offerImageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 200px);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gridImg {
|
||||
border-radius: 20px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img1 {
|
||||
grid-row: 1 / 3;
|
||||
/* Tall image on left */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img2 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.img3 {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
|
||||
/* 2. Stats Section (BG Image + Overlay) */
|
||||
.statsSection {
|
||||
background: url('/images/careers/bg.webp') no-repeat center center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
/* Parallax effect */
|
||||
padding: 4rem 0;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.statsSection::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(37, 99, 235, 0.85);
|
||||
/* Blue Overlay */
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statIconWrapper {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #f9cd35;
|
||||
/* Yellow Icon */
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.9;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
/* 3. Hiring Process (Timeline) */
|
||||
.hiringSection {
|
||||
padding: 4rem 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hiringGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Hiring Image Left */
|
||||
.hiringImageWrapper {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.hiringImg {
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Hiring Process Content Right */
|
||||
.processList {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.processList::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
/* Center of numbering */
|
||||
top: 220px;
|
||||
/* Start below the first number to avoid line going above */
|
||||
bottom: 55px;
|
||||
/* End before last number */
|
||||
width: 2px;
|
||||
background: #e2e8f0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.processItem {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.processNumber {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: white;
|
||||
color: #2563eb;
|
||||
border: 2px solid #2563eb;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.processContent h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.processContent p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Hiring Process Visibility Fix:
|
||||
Makes text white on dark image and black on white background during scroll
|
||||
*/
|
||||
@media (max-width: 899px) {
|
||||
|
||||
.processList h2,
|
||||
.processList .subTitle,
|
||||
.processContent h4,
|
||||
.processContent p {
|
||||
color: white !important;
|
||||
/* mix-blend-mode: difference; */
|
||||
/* z-index: 10; */
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 4. Benefits / Ultimate Experience (Vertical Connected Cards) */
|
||||
.benefitsSection {
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.benefitsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.benefitsContent h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.benefitsText {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Right Side: Connected Cards */
|
||||
.connectedCards {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
/* padding-left: 2rem; */
|
||||
/* Indent slightly if needed */
|
||||
}
|
||||
|
||||
/* Dotted Line connecting the cards - REMOVED per request */
|
||||
/* .connectedCards::before { } */
|
||||
|
||||
.connCard {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: white;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
/* Flat style */
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.connCard:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.connIcon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: #0072b1;
|
||||
flex-shrink: 0;
|
||||
border: 4px solid white;
|
||||
/* Gap for line */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.connContent h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.connContent p {
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 900px) {
|
||||
.offerContainer {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.hiringGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.benefitsGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
218
app/careers/page.tsx
Normal file
218
app/careers/page.tsx
Normal file
@ -0,0 +1,218 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Users, Smile, MapPin, Award,
|
||||
Zap, Briefcase, Clock, Coffee, Layout, MousePointerClick, Gem
|
||||
} from 'lucide-react';
|
||||
import styles from './careers.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
description: 'Join our team of social media experts, content creators, and strategists.',
|
||||
};
|
||||
|
||||
export default function CareersPage() {
|
||||
return (
|
||||
<div className={styles.careersPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>Careers</h1>
|
||||
|
||||
<div className={styles.breadcrumb}>
|
||||
<Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Careers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 1. What We Offer (Left Content, Right 3 Images) */}
|
||||
<section className={styles.offerSection}>
|
||||
<div className="container">
|
||||
<div className={styles.offerContainer}>
|
||||
{/* Left Content */}
|
||||
<div className={styles.offerContent}>
|
||||
<h2>Engineering Intelligent Automation</h2>
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
<Link href="/about">
|
||||
<button className="btn btn-primary">
|
||||
View Open Positions
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right Image Grid (3 Images) */}
|
||||
<div className={styles.offerImageGrid}>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img1}`}>
|
||||
<Image
|
||||
src="/images/careers/left.webp"
|
||||
alt="Team Collaboration"
|
||||
width={400}
|
||||
height={500}
|
||||
className={styles.gridImg}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img2}`}>
|
||||
<Image
|
||||
src="/images/careers/top.webp"
|
||||
alt="Our Workspace"
|
||||
width={300}
|
||||
height={200}
|
||||
className={styles.gridImg}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img3}`}>
|
||||
<Image
|
||||
src="/images/careers/bottom.webp"
|
||||
alt="Meeting"
|
||||
width={300}
|
||||
height={200}
|
||||
className={styles.gridImg}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Stats Section (BG + Overlay) */}
|
||||
<section className={styles.statsSection}>
|
||||
<div className="container">
|
||||
<div className={styles.statsGrid}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}><Users size={48} /></div>
|
||||
<div className={styles.statNumber}>54</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}>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}>Industries Served</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}><Award size={48} /></div>
|
||||
<div className={styles.statNumber}>25</div>
|
||||
<div className={styles.statLabel}>Awards Won</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Hiring Process (Timeline) */}
|
||||
<section className={styles.hiringSection}>
|
||||
<div className="container">
|
||||
<div className={styles.hiringGrid}>
|
||||
{/* Left: Image */}
|
||||
<div className={styles.hiringImageWrapper}>
|
||||
<Image
|
||||
src="/images/careers/hiring.webp"
|
||||
alt="Hiring Process"
|
||||
width={500}
|
||||
height={600}
|
||||
className={styles.hiringImg}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right: Solutions List */}
|
||||
<div className={styles.processList}>
|
||||
<div>
|
||||
<span className={styles.subTitle}>Our Solutions Centre</span>
|
||||
<h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
|
||||
Comprehensive Platform Solutions
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>01</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Intelligent Posting Automation</h4>
|
||||
<p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>02</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Interactive Planning View</h4>
|
||||
<p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>03</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Performance Insights & Exports</h4>
|
||||
<p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Ultimate Experience (Dotted Cards) */}
|
||||
<section className={styles.benefitsSection}>
|
||||
<div className="container">
|
||||
<div className={styles.benefitsGrid}>
|
||||
{/* Left Content */}
|
||||
<div className={styles.benefitsContent}>
|
||||
<span className={styles.subTitle}>Why Choose Us?</span>
|
||||
<h2>Work on Tools That Matter</h2>
|
||||
<p className={styles.benefitsText}>
|
||||
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>
|
||||
<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' }}>
|
||||
<Zap />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<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' }}>
|
||||
{/* Using View or Layout as placeholder for Dashboard/Login */}
|
||||
<Layout />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<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' }}>
|
||||
<Smile />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<h4>Smart Engagement</h4>
|
||||
<p>Instant likes, replies, and spam control.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
762
app/channels/[slug]/channel-page.module.css
Normal file
762
app/channels/[slug]/channel-page.module.css
Normal file
@ -0,0 +1,762 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: var(--background);
|
||||
color: var(--text-primary);
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner from About) --- */
|
||||
.hero {
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
background-image: url('/images/inner-banner/channel-banner.webp');
|
||||
/* Use same image as About */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
/* Overlay for text readability */
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumbs span {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumbs .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* --- Section 1: About (Icons) --- */
|
||||
.aboutSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.aboutGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aboutGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutImages {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* min-height: 400px; Reduced to decrease vertical space */
|
||||
/* padding: 2rem 0; */
|
||||
/* Reduced padding */
|
||||
}
|
||||
|
||||
.aboutMainImgWrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
/* Reduced from 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);
|
||||
}
|
||||
|
||||
.aboutImageFrame {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
/* Reduced to match wrapper */
|
||||
height: auto;
|
||||
/* Let it match aspect ratio via padding-bottom usually, but here using aspect-ratio property */
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 24px;
|
||||
transform: translate(-50%, -50%) translate(-24px, 24px);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.aboutImageFrame {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutContent {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aboutDescription {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.7;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.aboutPoints {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.aboutPoints {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutPointItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.aboutPointIcon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.aboutPointText {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* --- Section 2: Benefits --- */
|
||||
.benefitsSection {
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.benefitsHeader {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.sectionDescriptionCentered {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefitsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.benefitsGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.benefitCard {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
/* Space for the circle */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.benefitCard:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* Card Theme Colors */
|
||||
.benefitCard:nth-child(1) {
|
||||
--card-theme: var(--primary);
|
||||
}
|
||||
|
||||
.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.75rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.benefitCardDesc {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- Section 3: Testimonials (New Split Layout) --- */
|
||||
.testimonialSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonialCenteredHeader {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.channelTestimonialContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
align-items: stretch;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.channelTestimonialContainer {
|
||||
grid-template-columns: 0.8fr 1.2fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Side: Large Image */
|
||||
.sliderLeftImage {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sliderImageWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* aspect-ratio removed for stretch */
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.sliderMainImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Right Side: Content Box */
|
||||
.sliderRightContent {
|
||||
width: 100%;
|
||||
height: 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;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Subtle background accent for the card if needed, currently gradient is enough */
|
||||
|
||||
.testCardHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.quoteIcon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.testStars {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.testQuoteText {
|
||||
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.95;
|
||||
font-style: italic;
|
||||
min-height: 100px;
|
||||
/* Prevent height jump */
|
||||
}
|
||||
|
||||
.testAuthorRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.testAuthorInfoWhite h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.testAuthorInfoWhite span {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Slider Controls */
|
||||
.sliderDotsWhite {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.dotWhite {
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.activeDotWhite {
|
||||
background: #fff;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.fadeIn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.fadeInText {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.fadeOutText {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/* --- Section 4: Blogs --- */
|
||||
.resourcesSection {
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.blogGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blogGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.blogCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.blogCard:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.blogImageWrapper {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blogImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.blogContent {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.blogCategory {
|
||||
color: var(--primary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blogTitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.blogExcerpt {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-clamp: 2;
|
||||
}
|
||||
|
||||
.readMoreLink {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* --- Section 5: FAQ --- */
|
||||
.faqSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.faqGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.faqGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.faqImageWrapper {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordionItem {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.accordionTrigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 0;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.accordionContentOpen {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.accordionIcon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
/* --- Section 6: CTA (Full Width Floating) --- */
|
||||
/* --- Section 6: CTA (Full Width Floating) --- */
|
||||
.ctaFullWidth {
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
background-color: #F8FAFC;
|
||||
/* Light fallback */
|
||||
background-image: url('/images/cta-bg-light.png');
|
||||
/* User requested image */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ctaContentCentered {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 700px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.ctaFullTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctaFullText {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.ctaFullBtn {
|
||||
background: var(--primary);
|
||||
/* Primary purple/blue */
|
||||
color: white;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ctaFullBtn:hover {
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
background: var(--primary-dark, #5b21b6);
|
||||
}
|
||||
|
||||
/* Floating Elements */
|
||||
.floatElem {
|
||||
position: absolute;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
left: 5%;
|
||||
top: 20%;
|
||||
width: 150px;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
right: 5%;
|
||||
bottom: 20%;
|
||||
width: 180px;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
200
app/channels/[slug]/page.tsx
Normal file
200
app/channels/[slug]/page.tsx
Normal file
@ -0,0 +1,200 @@
|
||||
import { channels } from '@/data/channels';
|
||||
import { notFound } from 'next/navigation';
|
||||
import styles from './channel-page.module.css';
|
||||
import SafeImage from '@/components/SafeImage';
|
||||
import Link from 'next/link';
|
||||
import ChannelTestimonialSlider from '@/components/ChannelTestimonialSlider';
|
||||
import ChannelFAQ from '@/components/ChannelFAQ';
|
||||
import {
|
||||
Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
|
||||
Palette, Layout, Smartphone, Zap, PenTool, Repeat,
|
||||
CheckCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
// Define Props interface
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return channels.map((channel) => ({
|
||||
slug: channel.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata(props: PageProps) {
|
||||
const params = await props.params;
|
||||
const channel = channels.find((c) => c.slug === params.slug);
|
||||
if (!channel) return { title: 'Channel Not Found' };
|
||||
|
||||
return {
|
||||
title: `${channel.title} Management Tool - SocialBuddy`,
|
||||
description: channel.description,
|
||||
};
|
||||
}
|
||||
|
||||
// Icon mapping helper
|
||||
const getIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case 'Calendar': return <Calendar />;
|
||||
case 'Eye': return <Eye />;
|
||||
case 'BarChart': return <BarChart />;
|
||||
case 'Trophy': return <Trophy />;
|
||||
case 'Inbox': return <Inbox />;
|
||||
case 'ShieldCheck': return <ShieldCheck />;
|
||||
case 'Palette': return <Palette />;
|
||||
case 'Layout': return <Layout />;
|
||||
case 'Smartphone': return <Smartphone />;
|
||||
case 'Zap': return <Zap />;
|
||||
case 'PenTool': return <PenTool />;
|
||||
case 'Repeat': return <Repeat />;
|
||||
case 'CheckCircle': return <CheckCircle />;
|
||||
default: return <CheckCircle />;
|
||||
}
|
||||
};
|
||||
|
||||
export default async function ChannelPage(props: PageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
// Ensure params exists
|
||||
if (!params?.slug) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const channel = channels.find((c) => c.slug === params.slug);
|
||||
|
||||
if (!channel) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
{/* 1. Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>{channel.title}</h1>
|
||||
<div className={styles.breadcrumbs}>
|
||||
<Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> <span className={styles.breadcrumbActive}>{channel.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. About Section */}
|
||||
{channel.about && (
|
||||
<section className={styles.aboutSection}>
|
||||
<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}
|
||||
alt={`${channel.title} Main Feature`}
|
||||
className={styles.img}
|
||||
fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.aboutContent}>
|
||||
<span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
|
||||
<h2 className={styles.sectionTitle}>{channel.about.title}</h2>
|
||||
<p className={styles.aboutDescription}>{channel.about.description}</p>
|
||||
<div className={styles.aboutPoints}>
|
||||
{channel.about.bulletPoints.map((point, i) => (
|
||||
<div key={i} className={styles.aboutPointItem}>
|
||||
<span className={styles.aboutPointIcon}>
|
||||
{getIcon(point.icon)}
|
||||
</span>
|
||||
<span className={styles.aboutPointText}>{point.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">Start Free Trial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 3. Benefits / Why Choose */}
|
||||
<section className={styles.benefitsSection}>
|
||||
<div className={styles.container}>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* 4. Testimonials */}
|
||||
{channel.testimonials && channel.testimonials.length > 0 && (
|
||||
<section className={styles.testimonialSection}>
|
||||
<div className={styles.container}>
|
||||
<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}
|
||||
staticImage={channel.testimonialStaticImage}
|
||||
/>
|
||||
<div style={{ textAlign: 'center', marginTop: '3rem' }}>
|
||||
<a href="#" className="btn btn-primary">
|
||||
Review us on Google
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 5. FAQ */}
|
||||
{channel.faqs && channel.faqs.length > 0 && (
|
||||
<ChannelFAQ faqs={channel.faqs} channelTitle={channel.title} />
|
||||
)}
|
||||
|
||||
{/* 6. CTA (Full Width Floating) */}
|
||||
<section className={styles.ctaFullWidth}>
|
||||
<SafeImage
|
||||
src="/images/channels/instagram/left.webp"
|
||||
alt=""
|
||||
className={`${styles.floatElem} ${styles.floatLeft}`}
|
||||
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
||||
/>
|
||||
<SafeImage
|
||||
src="/images/channels/instagram/right.webp"
|
||||
alt=""
|
||||
className={`${styles.floatElem} ${styles.floatRight}`}
|
||||
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
||||
/>
|
||||
|
||||
<div className={styles.ctaContentCentered}>
|
||||
<h2 className={styles.ctaFullTitle}>Ready to Master {channel.title}?</h2>
|
||||
<p className={styles.ctaFullText}>
|
||||
Join thousands of marketers who are growing their {channel.title} presence with SocialBuddy.
|
||||
</p>
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.ctaFullBtn}>
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
284
app/channels/channels.module.css
Normal file
284
app/channels/channels.module.css
Normal file
@ -0,0 +1,284 @@
|
||||
/* Channels Page Styles */
|
||||
|
||||
.channelsPage {
|
||||
background: var(--background);
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
/* 1. About/Intro Section (Ref Image 1) */
|
||||
.introSection {
|
||||
padding: 8rem 0;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.introContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Left Image Structure */
|
||||
.introImageWrapper {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.introFrame {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
width: 90%;
|
||||
height: 95%;
|
||||
border: 4px solid #ec4899;
|
||||
/* Pink Border */
|
||||
border-radius: 20px;
|
||||
z-index: 0;
|
||||
transform: none;
|
||||
/* Reset rotation */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.introImgContainer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
transform: translate(20px, -20px);
|
||||
/* Move image up-right relative to frame */
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.introImg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Right Content */
|
||||
.introContent h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--gradient-primary);
|
||||
/* reusing variable or hardcoded gradient */
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.introContent p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.learnMoreBtn {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.learnMoreBtn:hover {
|
||||
background: #1d4ed8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
/* 2. Process/Learning Section (Ref Image 2 - Grid of 4) */
|
||||
.processSection {
|
||||
padding: 4rem 0;
|
||||
background: #F8FAFC;
|
||||
/* Light gray bg */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.processHeader {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.processHeader h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.processGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.processCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.processIcon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2563eb;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.processCard h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.processCard p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* 3. Testimonial Section (Left Slider, Right Image) */
|
||||
.testimonialSection {
|
||||
padding: 4rem 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.testimonialGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Right Image */
|
||||
.testimonialImageWrapper {
|
||||
position: relative;
|
||||
order: -1;
|
||||
/* Mobile first: image top? Or default to bottom. Lets check desktop media query */
|
||||
}
|
||||
|
||||
.testimonialImg {
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Left Content Slider */
|
||||
.testimonialContent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 3rem;
|
||||
/* Space for dots */
|
||||
}
|
||||
|
||||
.testimonialSlide {
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.testimonialSlide.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quoteIcon {
|
||||
font-size: 3rem;
|
||||
color: #ec4899;
|
||||
opacity: 0.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.quoteText {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.author h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.author p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.dots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #cbd5e1;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: #2563eb;
|
||||
width: 24px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 900px) {
|
||||
.introContainer {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.processGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.testimonialGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.testimonialImageWrapper {
|
||||
order: -1;
|
||||
/* Image on Left */
|
||||
}
|
||||
}
|
||||
163
app/channels/page.tsx
Normal file
163
app/channels/page.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
Globe, Layers, Zap, BarChart, CheckCircle2,
|
||||
ArrowRight, MessageSquare, Heart
|
||||
} from 'lucide-react';
|
||||
import Pricing from '@/components/Pricing';
|
||||
import FAQ from '@/components/FAQ';
|
||||
import styles from './channels.module.css';
|
||||
|
||||
export default function ChannelsPage() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "SocialBuddy revolutionized how we handle our multi-channel strategy. It's simply brilliant.",
|
||||
author: "Sarah Jenkins",
|
||||
role: "Marketing Director, TechFlow"
|
||||
},
|
||||
{
|
||||
quote: "The analytics across all channels provided insights we never had before. Highly recommended.",
|
||||
author: "Mike Ross",
|
||||
role: "CEO, Pearson Specter"
|
||||
},
|
||||
{
|
||||
quote: "Managing 5 different platforms used to be a nightmare. Now it's our competitive advantage.",
|
||||
author: "Jessica Pearson",
|
||||
role: "Managing Partner, PSB"
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % testimonials.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, [testimonials.length]);
|
||||
|
||||
return (
|
||||
<div className={styles.channelsPage}>
|
||||
|
||||
{/* 1. About/Intro Section (Ref Image 1: Left Image Frame, Right Content) */}
|
||||
<section className={styles.introSection}>
|
||||
<div className="container">
|
||||
<div className={styles.introContainer}>
|
||||
{/* Left Image with Frame */}
|
||||
<div className={styles.introImageWrapper}>
|
||||
<div className={styles.introFrame}></div>
|
||||
<div className={styles.introImgContainer}>
|
||||
<Image
|
||||
src="/images/about/team-meeting.png"
|
||||
alt="Channel Management"
|
||||
width={450}
|
||||
height={550}
|
||||
className={styles.introImg}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content */}
|
||||
<div className={styles.introContent}>
|
||||
<h2>Master Every Channel with <br /> Precision</h2>
|
||||
<p>
|
||||
Whether it's the professional network of LinkedIn, the visual appeal of Instagram, or the fast-paced world of Twitter, SocialBuddy optimizes your presence everywhere.
|
||||
</p>
|
||||
<p>
|
||||
Our unified platform ensures your brand voice remains consistent while adapting to the unique nuances of each platform. Connect, engage, and grow without the chaos.
|
||||
</p>
|
||||
<button className={styles.learnMoreBtn}>Start Connecting</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Process/Learning Section (Ref Image 2: Grid of 4 Icons) */}
|
||||
<section className={styles.processSection}>
|
||||
<div className="container">
|
||||
<div className={styles.processHeader}>
|
||||
<h2>Learning Your Channels</h2>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>
|
||||
Understand the core pillars of effective multi-channel management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.processGrid}>
|
||||
<div className={styles.processCard}>
|
||||
<div className={styles.processIcon}><Globe /></div>
|
||||
<h3>Global Reach</h3>
|
||||
<p>Expand your audience across borders with localized content strategies.</p>
|
||||
</div>
|
||||
<div className={styles.processCard}>
|
||||
<div className={styles.processIcon}><Layers /></div>
|
||||
<h3>Content Sync</h3>
|
||||
<p>Seamlessly synchronize posts while customizing for each platform's format.</p>
|
||||
</div>
|
||||
<div className={styles.processCard}>
|
||||
<div className={styles.processIcon}><Zap /></div>
|
||||
<h3>Fast Execution</h3>
|
||||
<p>Schedule and deploy campaigns in minutes, not hours.</p>
|
||||
</div>
|
||||
<div className={styles.processCard}>
|
||||
<div className={styles.processIcon}><BarChart /></div>
|
||||
<h3>Deep Analytics</h3>
|
||||
<p>Get granular data on performance for every single channel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Testimonial Section (Left Slider, Right Image) */}
|
||||
<section className={styles.testimonialSection}>
|
||||
<div className="container">
|
||||
<div className={styles.testimonialGrid}>
|
||||
{/* Left Content Slider */}
|
||||
<div className={styles.testimonialContent}>
|
||||
{testimonials.map((t, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.testimonialSlide} ${index === currentSlide ? styles.active : ''}`}
|
||||
>
|
||||
<div className={styles.quoteIcon}>❝</div>
|
||||
<p className={styles.quoteText}>{t.quote}</p>
|
||||
<div className={styles.author}>
|
||||
<h4>{t.author}</h4>
|
||||
<p>{t.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Dots */}
|
||||
<div className={styles.dots}>
|
||||
{testimonials.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.dot} ${index === currentSlide ? styles.active : ''}`}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Image */}
|
||||
<div className={styles.testimonialImageWrapper}>
|
||||
<Image
|
||||
src="/hero-slide-3.png"
|
||||
alt="Success Story"
|
||||
width={500}
|
||||
height={400}
|
||||
className={styles.testimonialImg}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reused Components */}
|
||||
<Pricing />
|
||||
<FAQ />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,16 @@
|
||||
.contactPage {
|
||||
min-height: 100vh;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
background-image: url('/images/contact/contact-banner.webp');
|
||||
/* Assuming this exists */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -17,7 +22,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
@ -28,34 +33,68 @@
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
.breadcrumb {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 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 1rem;
|
||||
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 {
|
||||
@ -65,8 +104,11 @@
|
||||
}
|
||||
|
||||
.cardIcon {
|
||||
font-size: 3rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
@ -78,167 +120,249 @@
|
||||
|
||||
.cardValue {
|
||||
font-size: 1rem;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
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) */
|
||||
.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: #2563eb;
|
||||
/* 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: #fff;
|
||||
/* 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;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
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;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
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: #2563eb;
|
||||
/* 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));
|
||||
@ -286,9 +410,3 @@ button:hover .arrow {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.form {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
@ -1,56 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import { Phone, Mail, MapPin, Instagram, Facebook, Twitter, Youtube } from 'lucide-react';
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
import axios from "axios";
|
||||
import styles from './contact.module.css';
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
company: string;
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
subject?: string;
|
||||
message?: string;
|
||||
company?: string;
|
||||
captcha?: string;
|
||||
}
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: '',
|
||||
email: '',
|
||||
company: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
phone: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const [formErrors, setFormErrors] = useState<FormErrors>({});
|
||||
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||
const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({
|
||||
show: false,
|
||||
type: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log('Form submitted:', formData);
|
||||
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||
const handleCaptchaChange = (token: string | null) => {
|
||||
setCaptchaToken(token);
|
||||
};
|
||||
|
||||
const contactInfo = [
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const errors: FormErrors = {};
|
||||
if (!formData.name.trim()) errors.name = "Name is required.";
|
||||
if (!formData.phone.trim()) errors.phone = "Phone number is required.";
|
||||
if (!formData.email.trim()) errors.email = "Email is required.";
|
||||
if (!formData.subject.trim()) errors.subject = "Subject is required.";
|
||||
if (!formData.message.trim()) errors.message = "Message is required.";
|
||||
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||
|
||||
setFormErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const emailData = {
|
||||
...formData,
|
||||
message: `
|
||||
<b>Name:</b> ${formData.name}<br />
|
||||
<b>Phone:</b> ${formData.phone}<br />
|
||||
<b>Email:</b> ${formData.email}<br />
|
||||
<b>Subject:</b> ${formData.subject}<br /><br />
|
||||
<b>Message:</b><br />${formData.message}
|
||||
`,
|
||||
to: "info@metatroncubesolutions.com",
|
||||
senderName: "SocialBuddy Contact Form",
|
||||
recaptchaToken: captchaToken,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
setAlert({
|
||||
show: true,
|
||||
type: "success",
|
||||
message: res?.data?.message || "Message sent successfully!",
|
||||
});
|
||||
|
||||
setFormData({ name: "", phone: "", email: "", subject: "", message: "", company: "" });
|
||||
setCaptchaToken(null);
|
||||
setFormErrors({});
|
||||
} catch {
|
||||
setAlert({
|
||||
show: true,
|
||||
type: "danger",
|
||||
message: "Failed to send message. Please try again later.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (alert.show) {
|
||||
const timer = setTimeout(() => {
|
||||
setAlert(prev => ({ ...prev, show: false }));
|
||||
}, 5000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [alert.show]);
|
||||
|
||||
const contactInfoCards = [
|
||||
{
|
||||
icon: '📧',
|
||||
title: 'Email',
|
||||
value: 'support@socialbuddy.com',
|
||||
link: 'mailto:support@socialbuddy.com',
|
||||
},
|
||||
{
|
||||
icon: '💬',
|
||||
title: 'Live Chat',
|
||||
value: 'Available 24/7',
|
||||
icon: <MapPin size={32} />,
|
||||
title: 'Address',
|
||||
value: 'Waterloo, Ontario Canada',
|
||||
link: '#',
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
title: 'Phone',
|
||||
value: '+1 (555) 123-4567',
|
||||
link: 'tel:+15551234567',
|
||||
icon: <Mail size={32} />,
|
||||
title: 'Email Us',
|
||||
value: 'info@metatroncubesolutions.com',
|
||||
link: 'mailto:info@metatroncubesolutions.com',
|
||||
},
|
||||
{
|
||||
icon: '📍',
|
||||
title: 'Office',
|
||||
value: 'San Francisco, CA',
|
||||
link: '#',
|
||||
icon: <Phone size={32} />,
|
||||
title: 'Call Us',
|
||||
value: '+1-647-679-7651',
|
||||
link: 'tel:+1-647-679-7651',
|
||||
},
|
||||
];
|
||||
|
||||
@ -60,13 +142,10 @@ export default function ContactPage() {
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
Get in <span className="gradient-text">Touch</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Have a question or need help? We're here for you 24/7.
|
||||
Reach out and let's start a conversation.
|
||||
</p>
|
||||
<h1 className={styles.heroTitle}>Contact Us</h1>
|
||||
<div className={styles.breadcrumb}>
|
||||
<a href="/">Home</a> / <span className={styles.breadcrumbActive}>Contact</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -75,7 +154,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>
|
||||
@ -90,134 +169,167 @@ 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}>Let's Start a Conversation</h2>
|
||||
<p className={styles.sectionDesc}>
|
||||
Have questions about SocialBuddy, pricing, or enterprise solutions? Our team is here to help you streamline social media management, improve performance, and grow your online presence with confidence.
|
||||
</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}>+1-647-679-7651</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}>info@metatroncubesolutions.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}>Waterloo, Ontario Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.iconBox}><Instagram size={20} /></div>
|
||||
<div>
|
||||
<h4 className={styles.infoLabel}>Follow Us</h4>
|
||||
<p className={styles.infoValue}>@socialbuddy</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}>
|
||||
{alert.show && (
|
||||
<div className={`p-4 mb-4 text-sm rounded-lg ${alert.type === "success" ? "text-green-800 bg-green-50" : "text-red-800 bg-red-50"}`} role="alert">
|
||||
{alert.message}
|
||||
</div>
|
||||
)}
|
||||
<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}
|
||||
/>
|
||||
{formErrors.email && <small className="text-red-500 text-xs mt-1">{formErrors.email}</small>}
|
||||
</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}
|
||||
/>
|
||||
{formErrors.name && <small className="text-red-500 text-xs mt-1">{formErrors.name}</small>}
|
||||
</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"
|
||||
placeholder="Phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
{formErrors.phone && <small className="text-red-500 text-xs mt-1">{formErrors.phone}</small>}
|
||||
</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="subject" className={styles.label}>Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="Subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
className={styles.input}
|
||||
/>
|
||||
{formErrors.subject && <small className="text-red-500 text-xs mt-1">{formErrors.subject}</small>}
|
||||
</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"
|
||||
placeholder="Message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className={styles.textarea}
|
||||
rows={5}
|
||||
/>
|
||||
{formErrors.message && <small className="text-red-500 text-xs mt-1">{formErrors.message}</small>}
|
||||
</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>
|
||||
<div className={`${styles.formGroup} mb-4`}>
|
||||
<ReCAPTCHA
|
||||
sitekey="6Lea8ZYrAAAAAHaghaLjDx_K084IFATZby7Rzqhl"
|
||||
onChange={handleCaptchaChange}
|
||||
/>
|
||||
{formErrors.captcha && <small className="text-red-500 text-xs mt-1">{formErrors.captcha}</small>}
|
||||
</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 Now
|
||||
</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!1d28887.718190017203!2d-80.66773369999999!3d43.5408812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf1565ffe672b%3A0x5037b28c7231d90!2sWaterloo%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sus!4v1704902842021"
|
||||
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}>
|
||||
@ -239,7 +351,7 @@ export default function ContactPage() {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,176 +0,0 @@
|
||||
.docsPage {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 6rem 0 4rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
flex: 1;
|
||||
padding: 1rem 1.5rem;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
padding: 1rem 2rem;
|
||||
background: var(--gradient-primary);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.searchButton:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.docsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.docsGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.docsGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.docCategory {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.docCategory:hover {
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.categoryHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--background-secondary);
|
||||
}
|
||||
|
||||
.categoryIcon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.categoryTitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.docsList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.docLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
color: var(--foreground-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.docLink:hover {
|
||||
background: var(--background-secondary);
|
||||
color: var(--primary);
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.docIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: auto;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.docLink:hover .arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.helpSection {
|
||||
background: var(--background-secondary);
|
||||
padding: 5rem 0;
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.helpContent {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.helpTitle {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.helpSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--foreground-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.helpButtons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -1,144 +0,0 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import styles from './docs.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Documentation - SocialBuddy',
|
||||
description: 'Complete documentation and guides for using SocialBuddy. Learn how to manage your social media effectively.',
|
||||
};
|
||||
|
||||
export default function DocsPage() {
|
||||
const docCategories = [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
icon: '🚀',
|
||||
docs: [
|
||||
{ title: 'Quick Start Guide', href: '/docs/quick-start' },
|
||||
{ title: 'Account Setup', href: '/docs/account-setup' },
|
||||
{ title: 'Connecting Social Accounts', href: '/docs/connecting-accounts' },
|
||||
{ title: 'Dashboard Overview', href: '/docs/dashboard' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Content Management',
|
||||
icon: '📝',
|
||||
docs: [
|
||||
{ title: 'Creating Posts', href: '/docs/creating-posts' },
|
||||
{ title: 'Scheduling Content', href: '/docs/scheduling' },
|
||||
{ title: 'Content Calendar', href: '/docs/calendar' },
|
||||
{ title: 'Media Library', href: '/docs/media-library' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Analytics',
|
||||
icon: '📊',
|
||||
docs: [
|
||||
{ title: 'Understanding Analytics', href: '/docs/analytics' },
|
||||
{ title: 'Custom Reports', href: '/docs/reports' },
|
||||
{ title: 'Competitor Analysis', href: '/docs/competitor-analysis' },
|
||||
{ title: 'Export Data', href: '/docs/export-data' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Team Collaboration',
|
||||
icon: '👥',
|
||||
docs: [
|
||||
{ title: 'Inviting Team Members', href: '/docs/team-members' },
|
||||
{ title: 'Roles & Permissions', href: '/docs/roles' },
|
||||
{ title: 'Approval Workflows', href: '/docs/workflows' },
|
||||
{ title: 'Team Activity Log', href: '/docs/activity-log' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API & Integrations',
|
||||
icon: '🔌',
|
||||
docs: [
|
||||
{ title: 'API Documentation', href: '/docs/api' },
|
||||
{ title: 'Webhooks', href: '/docs/webhooks' },
|
||||
{ title: 'Third-Party Integrations', href: '/docs/integrations' },
|
||||
{ title: 'Developer Resources', href: '/docs/developers' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Account & Billing',
|
||||
icon: '💳',
|
||||
docs: [
|
||||
{ title: 'Managing Your Account', href: '/docs/account' },
|
||||
{ title: 'Billing & Payments', href: '/docs/billing' },
|
||||
{ title: 'Upgrading Plans', href: '/docs/upgrading' },
|
||||
{ title: 'Security Settings', href: '/docs/security' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.docsPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
<span className="gradient-text">Documentation</span> & Guides
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Everything you need to know about using SocialBuddy effectively
|
||||
</p>
|
||||
<div className={styles.searchBox}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search documentation..."
|
||||
className={styles.searchInput}
|
||||
/>
|
||||
<button className={styles.searchButton}>🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Documentation Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.docsGrid}>
|
||||
{docCategories.map((category, idx) => (
|
||||
<div key={idx} className={styles.docCategory}>
|
||||
<div className={styles.categoryHeader}>
|
||||
<span className={styles.categoryIcon}>{category.icon}</span>
|
||||
<h2 className={styles.categoryTitle}>{category.title}</h2>
|
||||
</div>
|
||||
<div className={styles.docsList}>
|
||||
{category.docs.map((doc, index) => (
|
||||
<Link key={index} href={doc.href} className={styles.docLink}>
|
||||
<span className={styles.docIcon}>📄</span>
|
||||
<span>{doc.title}</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Help Section */}
|
||||
<section className={styles.helpSection}>
|
||||
<div className="container">
|
||||
<div className={styles.helpContent}>
|
||||
<h2 className={styles.helpTitle}>Need More Help?</h2>
|
||||
<p className={styles.helpSubtitle}>
|
||||
Can't find what you're looking for? Our support team is here to help.
|
||||
</p>
|
||||
<div className={styles.helpButtons}>
|
||||
<a href="/contact" className="btn btn-primary">
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="/community" className="btn btn-secondary">
|
||||
Join Community
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
636
app/features/[slug]/feature-page.module.css
Normal file
636
app/features/[slug]/feature-page.module.css
Normal file
@ -0,0 +1,636 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: var(--background);
|
||||
color: var(--text-primary);
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner from About) --- */
|
||||
.hero {
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
/* Use same image as About */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
/* Overlay for text readability */
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.breadcrumbs span {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Section 1: About (Icons) --- */
|
||||
.aboutSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.aboutGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aboutGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutImages {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.aboutMainImgWrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
height: 85%;
|
||||
z-index: 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aboutSubImgWrapper {
|
||||
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);
|
||||
}
|
||||
|
||||
.aboutContent {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aboutDescription {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.7;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.aboutPoints {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.aboutPoints {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutPointItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.aboutPointIcon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.aboutPointText {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* --- Section 2: Benefits --- */
|
||||
.benefitsSection {
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.benefitsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.benefitsContainer {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.benefitsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.benefitsGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.benefitCard:hover {
|
||||
background: var(--primary);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.benefitCard:hover * {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.benefitIcon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.benefitCardTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.benefitCardDesc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- Section 3: Testimonial (Update: Left Images Grid, Right Slider) --- */
|
||||
.testimonialSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonialGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.testimonialGrid {
|
||||
grid-template-columns: 0.8fr 1.2fr;
|
||||
/* Images < Slider */
|
||||
}
|
||||
}
|
||||
|
||||
/* Left side: 2 Image Grid */
|
||||
.testimonialImages {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.testImgWrapper {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.testImgWrapper:nth-child(2) {
|
||||
margin-top: 3rem;
|
||||
/* Stagger effect */
|
||||
}
|
||||
|
||||
/* Right side: Slider Styles (Used by Client Component) */
|
||||
.testimonialSliderContainer {
|
||||
position: relative;
|
||||
padding: 2rem 2rem 0;
|
||||
}
|
||||
|
||||
.testSliderContent {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.testStars {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.testQuoteFade {
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.testAuthorBlock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.testAuthorAvatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.testAuthorInfo h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.testAuthorInfo span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sliderDots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #E2E8F0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
/* --- Section 4: Blogs --- */
|
||||
.resourcesSection {
|
||||
padding: 4rem 0;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
.blogGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blogGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.blogCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.blogCard:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.blogImageWrapper {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blogImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.blogContent {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.blogCategory {
|
||||
color: var(--primary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blogTitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.blogExcerpt {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-clamp: 2;
|
||||
}
|
||||
|
||||
.readMoreLink {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- Section 5: FAQ --- */
|
||||
.faqSection {
|
||||
padding: 4rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.faqGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.faqGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.faqImageWrapper {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordionItem {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.accordionTrigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 0;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.accordionContentOpen {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.accordionIcon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
/* --- Section 6: CTA (Full Width Floating) --- */
|
||||
/* --- Section 6: CTA (Full Width Floating) --- */
|
||||
.ctaFullWidth {
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
background-color: #F8FAFC;
|
||||
/* Light fallback */
|
||||
background-image: url('/images/cta-bg-light.png');
|
||||
/* User requested image */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ctaContentCentered {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 700px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.ctaFullTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctaFullText {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.ctaFullBtn {
|
||||
background: var(--primary);
|
||||
/* Primary purple/blue */
|
||||
color: white;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ctaFullBtn:hover {
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
background: var(--primary-dark, #5b21b6);
|
||||
}
|
||||
|
||||
/* Floating Elements */
|
||||
.floatElem {
|
||||
position: absolute;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
left: 5%;
|
||||
top: 20%;
|
||||
width: 150px;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
right: 5%;
|
||||
bottom: 20%;
|
||||
width: 180px;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
285
app/features/[slug]/page.tsx
Normal file
285
app/features/[slug]/page.tsx
Normal file
@ -0,0 +1,285 @@
|
||||
import { features } from '@/data/features';
|
||||
import { resources } from '@/data/resources';
|
||||
import { notFound } from 'next/navigation';
|
||||
import styles from './feature-page.module.css';
|
||||
import SafeImage from '@/components/SafeImage';
|
||||
import Link from 'next/link';
|
||||
import TestimonialSlider from '@/components/TestimonialSlider';
|
||||
import {
|
||||
Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
|
||||
Palette, Layout, Smartphone, Zap, PenTool, Repeat,
|
||||
CheckCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
// Define Props interface
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return features.map((feature) => ({
|
||||
slug: feature.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata(props: PageProps) {
|
||||
const params = await props.params;
|
||||
const feature = features.find((f) => f.slug === params.slug);
|
||||
if (!feature) return { title: 'Feature Not Found' };
|
||||
|
||||
return {
|
||||
title: `${feature.title} - SocialBuddy`,
|
||||
description: feature.description,
|
||||
};
|
||||
}
|
||||
|
||||
// Icon mapping helper
|
||||
const getIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case 'Calendar': return <Calendar />;
|
||||
case 'Eye': return <Eye />;
|
||||
case 'BarChart': return <BarChart />;
|
||||
case 'Trophy': return <Trophy />;
|
||||
case 'Inbox': return <Inbox />;
|
||||
case 'ShieldCheck': return <ShieldCheck />;
|
||||
case 'Palette': return <Palette />;
|
||||
case 'Layout': return <Layout />;
|
||||
case 'Smartphone': return <Smartphone />;
|
||||
case 'Zap': return <Zap />;
|
||||
case 'PenTool': return <PenTool />;
|
||||
case 'Repeat': return <Repeat />;
|
||||
default: return <CheckCircle />;
|
||||
}
|
||||
};
|
||||
|
||||
export default async function FeaturePage(props: PageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
// Ensure params exists
|
||||
if (!params?.slug) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const feature = features.find((f) => f.slug === params.slug);
|
||||
|
||||
if (!feature) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Filter resources
|
||||
const featureResources = resources.filter(b => b.featureSlug === feature.slug).slice(0, 3);
|
||||
const displayResources = featureResources.length > 0 ? featureResources : resources.slice(0, 3);
|
||||
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
{/* 1. Hero Section (Banner Style, Center Title + Breadcrumbs) */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>{feature.title}</h1>
|
||||
<div className={styles.breadcrumbs}>
|
||||
<Link href="/">Home</Link> <span>/</span> <Link href="/features">Features</Link> <span>/</span> {feature.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. About Section (Icons) */}
|
||||
{feature.about && (
|
||||
<section className={styles.aboutSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.aboutGrid}>
|
||||
<div className={styles.aboutImages}>
|
||||
<div className={styles.aboutMainImgWrapper}>
|
||||
<SafeImage
|
||||
src={feature.about.mainImage}
|
||||
alt="Main Feature"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/600x800/png?text=About+Main"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.aboutSubImgWrapper}>
|
||||
<SafeImage
|
||||
src={feature.about.subImage}
|
||||
alt="Sub Feature"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=About+Sub"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.aboutContent}>
|
||||
<span className={styles.sectionSubtitle}>{feature.about.subTitle}</span>
|
||||
<h2 className={styles.sectionTitle}>{feature.about.title}</h2>
|
||||
<p className={styles.aboutDescription}>{feature.about.description}</p>
|
||||
<div className={styles.aboutPoints}>
|
||||
{feature.about.bulletPoints.map((point, i) => (
|
||||
<div key={i} className={styles.aboutPointItem}>
|
||||
<span className={styles.aboutPointIcon}>
|
||||
{getIcon(point.icon)}
|
||||
</span>
|
||||
<span className={styles.aboutPointText}>{point.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<a href="#" className="btn btn-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 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 Choose Us</span>
|
||||
<h2 className={styles.sectionTitle}>Custom Solutions for Your Social Growth</h2>
|
||||
<p className={styles.aboutDescription}>
|
||||
Everything you need to succeed on social media, all in one platform.
|
||||
We provide the tools to help you scale effectively.
|
||||
</p>
|
||||
<a href="#" className="btn btn-primary">Video Showcase</a>
|
||||
</div>
|
||||
<div className={styles.benefitsGrid}>
|
||||
{feature.benefits.slice(0, 4).map((benefit, index) => (
|
||||
<div key={index} className={styles.benefitCard}>
|
||||
<div className={styles.benefitIcon}>{benefit.icon}</div>
|
||||
<h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
|
||||
<p className={styles.benefitCardDesc}>{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Testimonials (Left: 2 Images, Right: Slider) */}
|
||||
{feature.testimonials && feature.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={feature.heroImage}
|
||||
alt="Happy Customer"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.testImgWrapper}>
|
||||
<SafeImage
|
||||
src={feature.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}>Trusted by Thousands</h2>
|
||||
<TestimonialSlider testimonials={feature.testimonials} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 5. Resources / Blogs */}
|
||||
<section className={styles.resourcesSection}>
|
||||
<div className={styles.container}>
|
||||
<div style={{ textAlign: 'center', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<span className={styles.sectionSubtitle}>Resources</span>
|
||||
<h2 className={styles.sectionTitle}>Latest Insights for {feature.title}</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.blogGrid}>
|
||||
{displayResources.map((resource) => (
|
||||
<div key={resource.id} className={styles.blogCard}>
|
||||
<div className={styles.blogImageWrapper}>
|
||||
<SafeImage
|
||||
src={resource.image}
|
||||
alt={resource.title}
|
||||
className={styles.blogImage}
|
||||
fallbackSrc={`https://placehold.co/600x400/png?text=${encodeURIComponent(resource.category)}`}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.blogContent}>
|
||||
<span className={styles.blogCategory}>{resource.category}</span>
|
||||
<h3 className={styles.blogTitle}>{resource.title}</h3>
|
||||
<p className={styles.blogExcerpt}>{resource.excerpt}</p>
|
||||
<Link href={`/resources/${resource.slug}`} className={styles.readMoreLink}>
|
||||
Read Article →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. FAQ */}
|
||||
{feature.faqs && feature.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</h2>
|
||||
<div className={styles.accordion}>
|
||||
{feature.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>
|
||||
)}
|
||||
|
||||
{/* 7. CTA (Full Width Floating) */}
|
||||
<section className={styles.ctaFullWidth}>
|
||||
<SafeImage
|
||||
src="/images/shape-left.png"
|
||||
alt=""
|
||||
className={`${styles.floatElem} ${styles.floatLeft}`}
|
||||
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
||||
/>
|
||||
<SafeImage
|
||||
src="/images/shape-right.png"
|
||||
alt=""
|
||||
className={`${styles.floatElem} ${styles.floatRight}`}
|
||||
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
||||
/>
|
||||
|
||||
<div className={styles.ctaContentCentered}>
|
||||
<h2 className={styles.ctaFullTitle}>Ready to Grow Your Social Presence?</h2>
|
||||
<p className={styles.ctaFullText}>
|
||||
Join thousands of marketers who are already using SocialBuddy to streamline their workflow.
|
||||
</p>
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.ctaFullBtn}>
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -3,33 +3,275 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 6rem 0 4rem;
|
||||
background-image: url('/images/inner-banner/features-banner.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
line-height: 1.6;
|
||||
.breadcrumb {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.categorySection {
|
||||
margin-bottom: 5rem;
|
||||
.breadcrumb a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Why Choose Us Section */
|
||||
.whySection {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.whyGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.whyGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.whyGrid {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: var(--secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 1px;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.whyTitle {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
color: var(--foreground);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.whyDescription {
|
||||
color: var(--foreground-secondary);
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefitsRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.benefitsRow {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.benefitItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.benefitIconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
/* Blue tint */
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.benefitIcon {
|
||||
color: var(--secondary);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.benefitText h3 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.benefitText p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--foreground-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contactRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.contactRow {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.profileMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.profileImage,
|
||||
.avatarPlaceholder {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.profileName {
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profileRole {
|
||||
font-size: 0.875rem;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.contactInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.phoneIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--secondary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contactLabel {
|
||||
font-size: 0.75rem;
|
||||
color: var(--foreground-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contactNumber {
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.whyImageWrapper {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.imageBackgroundShape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
|
||||
/* Purple to Blue */
|
||||
border-radius: 200px 200px 0 0;
|
||||
/* Semi-arch shape */
|
||||
z-index: 0;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.mainImageContainer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.mainImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* .categorySection {
|
||||
margin-bottom: 5rem;
|
||||
} */
|
||||
|
||||
.categoryHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -96,10 +338,10 @@
|
||||
|
||||
.ctaSection {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 4rem;
|
||||
/* margin-top: 4rem; */
|
||||
}
|
||||
|
||||
.ctaContent {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Image from 'next/image';
|
||||
import { CheckCircle2, TrendingUp, Shield, Phone } from 'lucide-react';
|
||||
import styles from './features.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -9,86 +11,38 @@ export const metadata: Metadata = {
|
||||
export default function FeaturesPage() {
|
||||
const detailedFeatures = [
|
||||
{
|
||||
category: 'Content Management',
|
||||
icon: '📝',
|
||||
category: 'Core Features',
|
||||
// icon: '⚡',
|
||||
features: [
|
||||
{
|
||||
title: 'Visual Content Calendar',
|
||||
description: 'Plan and organize your content with an intuitive drag-and-drop calendar interface.',
|
||||
icon: '📅',
|
||||
title: 'Workflow Automation',
|
||||
description: 'Streamline your social interactions with intelligent automation rules that work 24/7.',
|
||||
icon: '/images/features/automation.webp',
|
||||
},
|
||||
{
|
||||
title: 'Bulk Upload & Scheduling',
|
||||
description: 'Upload and schedule hundreds of posts at once with CSV import functionality.',
|
||||
icon: '⬆️',
|
||||
title: 'Secure Account Login',
|
||||
description: 'Connect and manage multiple social profiles securely with our encrypted login system.',
|
||||
icon: '/images/features/secure.webp',
|
||||
},
|
||||
{
|
||||
title: 'Content Library',
|
||||
description: 'Store and organize your media assets in a centralized, searchable library.',
|
||||
icon: '📚',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Analytics & Insights',
|
||||
icon: '📊',
|
||||
features: [
|
||||
{
|
||||
title: 'Real-Time Analytics',
|
||||
description: 'Monitor your performance with live data updates and comprehensive metrics.',
|
||||
icon: '📈',
|
||||
title: 'Comment Management',
|
||||
description: 'Organize and oversee all user interactions from a single, unified dashboard.',
|
||||
icon: '/images/features/comment.webp',
|
||||
},
|
||||
{
|
||||
title: 'Competitor Analysis',
|
||||
description: 'Track and compare your performance against competitors in your industry.',
|
||||
icon: '🎯',
|
||||
title: 'Quick Engagement',
|
||||
description: 'Boost your community presence by liking user comments instantly from the dashboard.',
|
||||
icon: '/images/features/quick.webp',
|
||||
},
|
||||
{
|
||||
title: 'Custom Reports',
|
||||
description: 'Generate beautiful, white-labeled reports for clients and stakeholders.',
|
||||
icon: '📄',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Engagement Tools',
|
||||
icon: '💬',
|
||||
features: [
|
||||
{
|
||||
title: 'Unified Inbox',
|
||||
description: 'Manage all your messages, comments, and mentions from one centralized inbox.',
|
||||
icon: '📥',
|
||||
title: 'Smart Replies',
|
||||
description: 'Respond efficiently to your audience using saved templates and quick-reply tools.',
|
||||
icon: '/images/features/smart.webp',
|
||||
},
|
||||
{
|
||||
title: 'Auto-Responses',
|
||||
description: 'Set up automated responses for common questions and inquiries.',
|
||||
icon: '🤖',
|
||||
},
|
||||
{
|
||||
title: 'Sentiment Analysis',
|
||||
description: 'Understand audience sentiment with AI-powered emotion detection.',
|
||||
icon: '😊',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Team Collaboration',
|
||||
icon: '👥',
|
||||
features: [
|
||||
{
|
||||
title: 'Role-Based Access',
|
||||
description: 'Control permissions with customizable roles for team members.',
|
||||
icon: '🔐',
|
||||
},
|
||||
{
|
||||
title: 'Approval Workflows',
|
||||
description: 'Set up multi-level approval processes for content review.',
|
||||
icon: '✅',
|
||||
},
|
||||
{
|
||||
title: 'Team Activity Log',
|
||||
description: 'Track all team actions with a comprehensive audit trail.',
|
||||
icon: '📋',
|
||||
title: 'Spam Control',
|
||||
description: 'Keep your comment sections clean by easily deleting unwanted or inappropriate content.',
|
||||
icon: '/images/features/spam.webp',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -100,12 +54,82 @@ export default function FeaturesPage() {
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
Powerful Features for <span className="gradient-text">Modern Teams</span>
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Everything you need to manage, analyze, and grow your social media presence—all in one platform.
|
||||
</p>
|
||||
<h1 className={styles.heroTitle}>Features</h1>
|
||||
<div className={styles.breadcrumb}>
|
||||
<a href="/">Home</a> / <span>Features</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us Section */}
|
||||
<section className={styles.whySection}>
|
||||
<div className="container">
|
||||
<div className={styles.whyGrid}>
|
||||
<div className={styles.whyContent}>
|
||||
<span className={styles.tagline}>WHY CHOOSE US</span>
|
||||
<h2 className={styles.whyTitle}>Why Choose SocialBuddy</h2>
|
||||
<p className={styles.whyDescription}>
|
||||
We provide comprehensive social media solutions that help you automate workflows,
|
||||
secure your accounts, and grow your digital presence authentically.
|
||||
</p>
|
||||
|
||||
<div className={styles.benefitsRow}>
|
||||
<div className={styles.benefitItem}>
|
||||
<div className={styles.benefitIconWrapper}>
|
||||
<TrendingUp className={styles.benefitIcon} />
|
||||
</div>
|
||||
<div className={styles.benefitText}>
|
||||
<h3>Business Growth</h3>
|
||||
<p>Accelerate your reach</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.benefitItem}>
|
||||
<div className={styles.benefitIconWrapper}>
|
||||
<Shield className={styles.benefitIcon} />
|
||||
</div>
|
||||
<div className={styles.benefitText}>
|
||||
<h3>Secure Access</h3>
|
||||
<p>Encrypted login system</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.benefitsRow}>
|
||||
<div className={styles.benefitItem}>
|
||||
<div className={styles.benefitIconWrapper}>
|
||||
<CheckCircle2 className={styles.benefitIcon} />
|
||||
</div>
|
||||
<div className={styles.benefitText}>
|
||||
<h3>Knowledgeable</h3>
|
||||
<p>Expert team support</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.benefitItem}>
|
||||
<div className={styles.benefitIconWrapper}>
|
||||
<Phone className={styles.benefitIcon} />
|
||||
</div>
|
||||
<div className={styles.benefitText}>
|
||||
<h3>24/7 Support</h3>
|
||||
<p>Always here to help</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.whyImageWrapper}>
|
||||
<div className={styles.imageBackgroundShape}></div>
|
||||
<div className={styles.mainImageContainer}>
|
||||
<Image
|
||||
src="/images/features/features.webp"
|
||||
alt="SocialBuddy Features"
|
||||
width={600}
|
||||
height={700}
|
||||
className={styles.mainImage}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -116,13 +140,15 @@ export default function FeaturesPage() {
|
||||
{detailedFeatures.map((category, idx) => (
|
||||
<div key={idx} className={styles.categorySection}>
|
||||
<div className={styles.categoryHeader}>
|
||||
<span className={styles.categoryIcon}>{category.icon}</span>
|
||||
<span className={styles.categoryIcon}></span>
|
||||
<h2 className={styles.categoryTitle}>{category.category}</h2>
|
||||
</div>
|
||||
<div className={styles.featuresGrid}>
|
||||
{category.features.map((feature, index) => (
|
||||
<div key={index} className={styles.featureCard}>
|
||||
<div className={styles.featureIcon}>{feature.icon}</div>
|
||||
<div className={styles.featureIcon}>
|
||||
<Image src={feature.icon} alt={feature.title} width={40} height={40} />
|
||||
</div>
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDescription}>{feature.description}</p>
|
||||
</div>
|
||||
|
||||
@ -3,15 +3,24 @@
|
||||
|
||||
|
||||
:root {
|
||||
/* Color Palette - Pink Primary, Blue Secondary */
|
||||
/* Color Palette - Updated per user request */
|
||||
--primary: #ec4899;
|
||||
/* Pink */
|
||||
--primary-dark: #db2777;
|
||||
--primary-light: #f472b6;
|
||||
--secondary: #3b82f6;
|
||||
--secondary-dark: #2563eb;
|
||||
--secondary-light: #60a5fa;
|
||||
--accent: #14b8a6;
|
||||
--accent-dark: #0d9488;
|
||||
|
||||
--secondary: #2563eb;
|
||||
/* Blue (Requested #2563eb) */
|
||||
--secondary-dark: #1255d8;
|
||||
/* Blue (Requested #1255d8) */
|
||||
|
||||
--accent: #6cb655;
|
||||
/* Green (Requested #6cb655) */
|
||||
--accent-dark: #5a9646;
|
||||
|
||||
--dark-blue: #0072b1;
|
||||
/* Dark Blue (Requested #0072b1) */
|
||||
--yellow: #f9cd35;
|
||||
/* Yellow (Requested #f9cd35) */
|
||||
|
||||
/* Backgrounds */
|
||||
--background: #ffffff;
|
||||
@ -28,11 +37,19 @@
|
||||
/* Borders */
|
||||
--border-color: #e2e8f0;
|
||||
|
||||
/* Gradients - Pink to Blue Theme */
|
||||
--gradient-primary: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%);
|
||||
--gradient-secondary: linear-gradient(135deg, #f472b6 0%, #60a5fa 100%);
|
||||
--gradient-accent: linear-gradient(135deg, #db2777 0%, #2563eb 100%);
|
||||
--gradient-hero: linear-gradient(135deg, #ec4899 0%, #db2777 30%, #3b82f6 70%, #2563eb 100%);
|
||||
/* Gradients - Linear Theme using new palette */
|
||||
/* Blue (#2563eb) to Pink (#ec4899) */
|
||||
--gradient-primary: linear-gradient(to right, #2563eb 0%, #ec4899 100%);
|
||||
|
||||
/* Yellow (#f9cd35) to Roman? No, let's keep consistency. Maybe Yellow to Pink?
|
||||
User didn't specify gradient composition, just colors.
|
||||
Retaining generic gradients but updating hexes. */
|
||||
--gradient-secondary: radial-gradient(circle, #2563eb 0%, #ec4899 100%);
|
||||
|
||||
/* Dark Blue (#0072b1) to Green (#6cb655) for accent gradient if needed */
|
||||
--gradient-accent: linear-gradient(135deg, #0072b1 0%, #6cb655 100%);
|
||||
|
||||
--gradient-hero: radial-gradient(circle, #2563eb 0%, #ec4899 100%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
@ -61,19 +78,7 @@
|
||||
--font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0f172a;
|
||||
--background-secondary: #1e293b;
|
||||
--bg-primary: #0f172a;
|
||||
--card-bg: #1e293b;
|
||||
--foreground: #f1f5f9;
|
||||
--foreground-secondary: #cbd5e1;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--border-color: #334155;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@ -241,34 +246,39 @@ body {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
/* Alternating Section Backgrounds */
|
||||
section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Alternating Section Backgrounds */
|
||||
section:nth-child(odd) {
|
||||
background: linear-gradient(180deg,
|
||||
var(--background) 0%,
|
||||
rgba(236, 72, 153, 0.02) 50%,
|
||||
var(--background) 100%);
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
section:nth-child(even) {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(59, 130, 246, 0.02) 0%,
|
||||
rgba(168, 85, 247, 0.02) 50%,
|
||||
rgba(59, 130, 246, 0.02) 100%);
|
||||
background-color: #ffffff;
|
||||
/* Slate 100 - Distinct contrast */
|
||||
border-top: 1px solid var(--border-color);
|
||||
/* border-bottom: 1px solid var(--border-color); */
|
||||
}
|
||||
|
||||
/* Ensure spacing consistency */
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
/* Default mobile padding */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section {
|
||||
padding: 6rem 0;
|
||||
padding: 4rem 0;
|
||||
/* Standardized large spacing per user request */
|
||||
}
|
||||
}
|
||||
|
||||
@ -278,7 +288,7 @@ section:nth-child(even) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@ -2,8 +2,13 @@ import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import ScrollToTop from "@/components/ScrollToTop";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://socialbuddy-marketing.metatronnest.com"),
|
||||
alternates: {
|
||||
canonical: "./",
|
||||
},
|
||||
title: "SocialBuddy - Manage All Your Social Media in One Place",
|
||||
description: "Empowering businesses and creators to schedule posts, analyze performance, engage with audiences, and grow their social presence with powerful tools and analytics.",
|
||||
keywords: ["social media management", "social media scheduler", "social media analytics", "content calendar", "social media tools"],
|
||||
@ -47,6 +52,7 @@ export default function RootLayout({
|
||||
<body>
|
||||
<Navbar />
|
||||
{children}
|
||||
<ScrollToTop />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
import Hero from '@/components/Hero';
|
||||
import AboutSection from '@/components/AboutSection';
|
||||
import Features from '@/components/Features';
|
||||
import SocialConnect from '@/components/SocialConnect';
|
||||
import HowItWorks from '@/components/HowItWorks';
|
||||
import Testimonials from '@/components/Testimonials';
|
||||
import StatsCounter from '@/components/StatsCounter';
|
||||
import Pricing from '@/components/Pricing';
|
||||
import FAQ from '@/components/FAQ';
|
||||
import CTA from '@/components/CTA';
|
||||
|
||||
import WhyChooseUs from '@/components/WhyChooseUs';
|
||||
import CoreServices from '@/components/CoreServices';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Hero />
|
||||
<Features />
|
||||
<AboutSection />
|
||||
<CoreServices />
|
||||
<SocialConnect />
|
||||
<HowItWorks />
|
||||
<Testimonials />
|
||||
<StatsCounter />
|
||||
<Pricing />
|
||||
<FAQ />
|
||||
<CTA />
|
||||
|
||||
@ -1,59 +1,107 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Pricing from '@/components/Pricing';
|
||||
import styles from './pricing.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Pricing - SocialBuddy',
|
||||
description: 'Choose the perfect plan for your social media management needs. Free, Pro, and Premium plans available with 14-day free trial.',
|
||||
};
|
||||
|
||||
export default function PricingPage() {
|
||||
const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0);
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: 'Can I change my plan later?',
|
||||
answer: "Absolutely. You can upgrade or downgrade your plan at any time directly from your dashboard. Upgrades take effect immediately (perfect for scaling teams), while downgrades apply at the start of the next billing cycle."
|
||||
},
|
||||
{
|
||||
question: 'What payment methods do you accept?',
|
||||
answer: 'We securely process all major credit cards (Visa, MasterCard, Amex) via Stripe. For Enterprise accounts, we also offer invoice-based billing and bank transfers.'
|
||||
},
|
||||
{
|
||||
question: 'Does the 7-day free trial limit features?',
|
||||
answer: 'Not at all. You get full access to every feature in your chosen plan (including Premium Analytics and Team Tools) so you can experience the real power of SocialBuddy before committing.'
|
||||
},
|
||||
{
|
||||
question: 'Is there a long-term contract?',
|
||||
answer: 'No. Our monthly plans are pay-as-you-go, and you can cancel anytime. If you choose an annual plan to save 20%, you are committed for the year but pay a lower effective monthly rate.'
|
||||
},
|
||||
{
|
||||
question: 'Do you offer discounts for non-profits?',
|
||||
answer: 'Yes! We love supporting organizations that do good. Registered non-profits and educational institutions are eligible for a special lifetime discount. Contact our support team for details.'
|
||||
},
|
||||
{
|
||||
question: 'What happens to my data if I cancel?',
|
||||
answer: 'We believe your data belongs to you. If you cancel, we keep your account dormant for 60 days in case you change your mind. You can also export all your reports and content calendars before you go.'
|
||||
}
|
||||
];
|
||||
|
||||
const toggleFaq = (index: number) => {
|
||||
setOpenFaqIndex(openFaqIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.pricingPage}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>Pricing</h1>
|
||||
<div className={styles.breadcrumb}>
|
||||
<a href="/">Home</a> / <span className={styles.breadcrumbActive}>Pricing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Pricing />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className={styles.faqHeader}>
|
||||
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
||||
</div>
|
||||
<div className={styles.faqGrid}>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Can I change plans later?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges.
|
||||
</p>
|
||||
<div className={styles.faqContainer}>
|
||||
<div className={styles.faqDecorativeSection}>
|
||||
<div className={styles.imageFrameWrapper}>
|
||||
{/* Diagonal Background Lines */}
|
||||
<div className={styles.diagonalLines}>
|
||||
<div className={styles.diagonalLinePink}></div>
|
||||
<div className={styles.diagonalLineBlue}></div>
|
||||
</div>
|
||||
|
||||
{/* Image with Decorative Borders */}
|
||||
<div className={styles.imageFrame}>
|
||||
<div className={styles.frameBorderTopLeft}></div>
|
||||
<div className={styles.frameBorderBottomRight}></div>
|
||||
<img
|
||||
src="/images/pricing/pricing.webp"
|
||||
alt="Social media management workspace"
|
||||
className={styles.frameImage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>What payment methods do you accept?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Is there a free trial?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! All paid plans come with a 14-day free trial. No credit card required to start.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Can I cancel anytime?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>Do you offer discounts for nonprofits?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.faqItem}>
|
||||
<h3 className={styles.faqQuestion}>What happens to my data if I cancel?</h3>
|
||||
<p className={styles.faqAnswer}>
|
||||
Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.
|
||||
</p>
|
||||
<div className={styles.faqContent}>
|
||||
<div className={styles.faqHeader}>
|
||||
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
||||
</div>
|
||||
<div className={styles.faqList}>
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className={styles.faqItem}>
|
||||
<button
|
||||
className={styles.faqQuestion}
|
||||
onClick={() => toggleFaq(index)}
|
||||
aria-expanded={openFaqIndex === index}
|
||||
>
|
||||
<span>{faq.question}</span>
|
||||
<span className={`${styles.faqIcon} ${openFaqIndex === index ? styles.faqIconOpen : ''}`}>
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
<div className={`${styles.faqAnswer} ${openFaqIndex === index ? styles.faqAnswerOpen : ''}`}>
|
||||
<p>{faq.answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,52 +2,370 @@
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.faqHeader {
|
||||
.hero {
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
background-image: url('/images/inner-banner/pricing-banner.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* FAQ Section */
|
||||
.faqContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
/* gap: 3rem; */
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.faqContainer {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.faqDecorativeSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* padding: 2rem 0; */
|
||||
}
|
||||
|
||||
.imageFrameWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Diagonal Background Lines */
|
||||
.diagonalLines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.diagonalLinePink {
|
||||
position: absolute;
|
||||
width: 150%;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.6));
|
||||
top: 30%;
|
||||
left: -25%;
|
||||
transform: rotate(-45deg);
|
||||
animation: floatLine 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.diagonalLineBlue {
|
||||
position: absolute;
|
||||
width: 150%;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, rgba(37, 99, 235, 0.3), rgba(37, 99, 235, 0.6));
|
||||
bottom: 30%;
|
||||
right: -25%;
|
||||
transform: rotate(45deg);
|
||||
animation: floatLine 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes floatLine {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-45deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-45deg) translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Image Frame with Borders */
|
||||
.imageFrame {
|
||||
position: relative;
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
z-index: 2;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.frameImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Decorative Borders */
|
||||
.frameBorderTopLeft {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-top: 4px solid #ec4899;
|
||||
border-left: 4px solid #ec4899;
|
||||
border-radius: 20px 0 0 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.frameBorderBottomRight {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
right: -15px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-bottom: 4px solid #2563eb;
|
||||
border-right: 4px solid #2563eb;
|
||||
border-radius: 0 0 20px 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.faqContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.faqHeader {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
font-size: 2.5rem;
|
||||
color: var(--foreground);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.faqGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.faqGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.faqList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
font-size: 1.25rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqQuestion:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.faqIcon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: var(--primary);
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.faqIconOpen {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.faqAnswerOpen {
|
||||
max-height: 500px;
|
||||
padding: 0 1.5rem 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.faqAnswer p {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1023px) {
|
||||
.imageFrameWrapper {
|
||||
max-width: 400px;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft,
|
||||
.frameBorderBottomRight {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft {
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.frameBorderBottomRight {
|
||||
bottom: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faqTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.faqAnswer p {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.faqAnswerOpen {
|
||||
padding: 0 1.25rem 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.faqIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Adjust decorative frame for mobile */
|
||||
.imageFrameWrapper {
|
||||
max-width: 350px;
|
||||
aspect-ratio: 4/5;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.imageFrame {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft,
|
||||
.frameBorderBottomRight {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft {
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.frameBorderBottomRight {
|
||||
bottom: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.diagonalLinePink,
|
||||
.diagonalLineBlue {
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.imageFrameWrapper {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft,
|
||||
.frameBorderBottomRight {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.frameBorderTopLeft {
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.frameBorderBottomRight {
|
||||
bottom: -8px;
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
87
app/resources/[slug]/page.tsx
Normal file
87
app/resources/[slug]/page.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { resources } from '@/data/resources';
|
||||
import { notFound } from 'next/navigation';
|
||||
import SafeImage from '@/components/SafeImage';
|
||||
import styles from '../resources.module.css';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return resources.map((resource) => ({
|
||||
slug: resource.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata(props: PageProps) {
|
||||
const params = await props.params;
|
||||
const resource = resources.find((r) => r.slug === params.slug);
|
||||
if (!resource) return { title: 'Resource Not Found' };
|
||||
|
||||
return {
|
||||
title: `${resource.title} - SocialBuddy Resources`,
|
||||
description: resource.excerpt,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ResourceDetailPage(props: PageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
if (!params?.slug) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const resource = resources.find((r) => r.slug === params.slug);
|
||||
|
||||
if (!resource) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<article className={styles.detailPage}>
|
||||
{/* Standardized Hero/Banner Section */}
|
||||
<section
|
||||
className={styles.hero}
|
||||
style={resource.bannerImage ? { backgroundImage: `url('${resource.bannerImage}')` } : undefined}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>{resource.title}</h1>
|
||||
<div className={styles.breadcrumbs}>
|
||||
<Link href="/">Home</Link> <span>/</span> <Link href="/resources">Resources</Link> <span>/</span> <span className={styles.breadcrumbActive}>{resource.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Image */}
|
||||
<div className={styles.container}>
|
||||
<div className={styles.detailImageWrapper}>
|
||||
<SafeImage
|
||||
src={resource.bigImage}
|
||||
alt={resource.title}
|
||||
className={styles.image}
|
||||
fallbackSrc={`https://placehold.co/1200x600/png?text=${encodeURIComponent(resource.title)}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Body */}
|
||||
{/* Content Body */}
|
||||
<div className={styles.container}>
|
||||
<div
|
||||
className={styles.detailContent}
|
||||
dangerouslySetInnerHTML={{ __html: resource.content }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Back to Resources */}
|
||||
<div style={{ textAlign: 'center', paddingBottom: '4rem' }}>
|
||||
<Link href="/resources" className="btn btn-primary">
|
||||
View All Resources
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
49
app/resources/page.tsx
Normal file
49
app/resources/page.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import Link from 'next/link';
|
||||
import SafeImage from '@/components/SafeImage';
|
||||
import styles from './resources.module.css';
|
||||
import { resources } from '@/data/resources';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Resources - SocialBuddy',
|
||||
description: 'Guides, tips, and strategies to master social media marketing.',
|
||||
};
|
||||
|
||||
export default function ResourcesPage() {
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
{/* Standardized Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>Resources</h1>
|
||||
<div className={styles.breadcrumbs}>
|
||||
<Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Resources</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className={styles.container}>
|
||||
<div className={styles.grid}>
|
||||
{resources.map((resource) => (
|
||||
<Link key={resource.id} href={`/resources/${resource.slug}`} className={styles.card}>
|
||||
<div className={styles.imageWrapper}>
|
||||
<SafeImage
|
||||
src={resource.image}
|
||||
alt={resource.title}
|
||||
className={styles.image}
|
||||
fallbackSrc={`https://placehold.co/600x400/png?text=${encodeURIComponent(resource.category)}`}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<span className={styles.category}>{resource.category}</span>
|
||||
<h2 className={styles.title}>{resource.title}</h2>
|
||||
<p className={styles.excerpt}>{resource.excerpt}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
295
app/resources/resources.module.css
Normal file
295
app/resources/resources.module.css
Normal file
@ -0,0 +1,295 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: #F8FAFC;
|
||||
min-height: 100vh;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner) --- */
|
||||
.hero {
|
||||
padding: 8rem 0;
|
||||
text-align: center;
|
||||
background-image: url('/images/inner-banner/resources-banner.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.breadcrumbs a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumbs a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.breadcrumbs span {
|
||||
color: #fff;
|
||||
padding: 0 0.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.breadcrumbs .breadcrumbActive {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
/* --- Grid & Cards --- */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
/* Ensure no underline on card */
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.card:hover .image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
color: #94A3B8;
|
||||
border-top: 1px solid #F1F5F9;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Detail Page Styles */
|
||||
.detailPage {
|
||||
background: white;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
/* Moved Title to Hero, so this header is deprecated/removed in new design,
|
||||
but keeping a simplified version just in case of fallback usage
|
||||
*/
|
||||
.detailHeaderDeprecated {
|
||||
text-align: center;
|
||||
padding: 4rem 1.5rem 0;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.detailImageWrapper {
|
||||
max-width: 1000px;
|
||||
height: 400px;
|
||||
margin: 4rem auto 1rem;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detailImageWrapper {
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 4rem auto 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImageWrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detailContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
/* padding: 0 1.5rem 1rem; */
|
||||
/* Adjusted padding */
|
||||
line-height: 1.8;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Ensure no unwanted underlines in content unless links */
|
||||
.detailContent h2,
|
||||
.detailContent h3,
|
||||
.detailContent p,
|
||||
.detailContent li {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detailContent a {
|
||||
text-decoration: underline;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.detailContent h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.detailContent h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.detailContent p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detailContent ul {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.detailContent li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
304
components/AboutSection.module.css
Normal file
304
components/AboutSection.module.css
Normal file
@ -0,0 +1,304 @@
|
||||
.section {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
/* Changed from hidden to visible to avoid clipping badge/shadows */
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--background);
|
||||
/* Ensure z-index management if sections overlap, but usually safe default */
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.contentWrapper {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* Equal width as requested "equaly show the image and content" */
|
||||
gap: 2rem;
|
||||
/* Reduced from 4rem */
|
||||
}
|
||||
}
|
||||
|
||||
/* Image Composition */
|
||||
.imageGrid {
|
||||
position: relative;
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mainImageWrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 75%;
|
||||
height: 85%;
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.secondaryImageWrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 55%;
|
||||
height: 50%;
|
||||
border-radius: var(--radius-2xl);
|
||||
border: 10px solid var(--background);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.7s ease;
|
||||
}
|
||||
|
||||
.mainImageWrapper:hover .image,
|
||||
.secondaryImageWrapper:hover .image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
left: 45%;
|
||||
transform: translate(-50%, 50%);
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: #a855f7;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
|
||||
border-radius: 50%;
|
||||
border: 8px solid var(--background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
z-index: 3;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.badgeNumber {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badgeText {
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
opacity: 0.9;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Text Side */
|
||||
.textContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* gap: 1rem; */
|
||||
/* Reduced from var(--spacing-md) */
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #0072b1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subTitleIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.subTitleIcon::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 3.5vw, 3rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.featuresList {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
/* Reduced from 2rem */
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.featureItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
color: #0072b1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featureItem:nth-child(2) .iconWrapper {
|
||||
background: #f1f5f9;
|
||||
/* Darker blue-100 for better visibility */
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.featureItem:nth-child(3) .iconWrapper {
|
||||
background: #f1f5f9;
|
||||
/* Darker pink-100 for better visibility */
|
||||
color: #1255d8;
|
||||
}
|
||||
|
||||
.featureContent h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.featureContent p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button Wrapper */
|
||||
.buttonWrapper {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Counters Section */
|
||||
.countersSection {
|
||||
margin-top: 5rem;
|
||||
padding-top: 3rem;
|
||||
/* Added some top padding/border maybe */
|
||||
border-top: 1px solid var(--border-color);
|
||||
/* Added border to separate explicitly */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.countersSection {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.imageGrid {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.counterItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
/* Distribute space */
|
||||
}
|
||||
|
||||
/* Add separator lines between counters on Desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.counterItem:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 50px;
|
||||
width: 1px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.counterNumber {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Plus sign color pop */
|
||||
.counterNumber::after {
|
||||
content: '+';
|
||||
color: var(--primary);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.counterLabel {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, 50%) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-50%, 50%) translateY(-10px);
|
||||
}
|
||||
}
|
||||
119
components/AboutSection.tsx
Normal file
119
components/AboutSection.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import styles from './AboutSection.module.css';
|
||||
|
||||
const AboutSection = () => {
|
||||
return (
|
||||
<section className={styles.section} id="about">
|
||||
<div className={styles.container}>
|
||||
<div className={styles.contentWrapper}>
|
||||
{/* Left Side - Image Composition */}
|
||||
<div className={`${styles.imageGrid} animate-slide-right`}>
|
||||
{/* Main Large Image (Top Right) */}
|
||||
<div className={styles.mainImageWrapper}>
|
||||
<Image
|
||||
src="/images/home/about-big-img.webp"
|
||||
alt="Business Professional"
|
||||
width={500}
|
||||
height={600}
|
||||
className={styles.image}
|
||||
/>
|
||||
</div>
|
||||
{/* Secondary Small Image (Bottom Left) */}
|
||||
<div className={styles.secondaryImageWrapper}>
|
||||
<Image
|
||||
src="/images/home/about-small-img.webp"
|
||||
alt="Team working"
|
||||
width={400}
|
||||
height={400}
|
||||
className={styles.image}
|
||||
/>
|
||||
</div>
|
||||
{/* Badge removed as requested */}
|
||||
</div>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className={`${styles.textContent} animate-slide-left`}>
|
||||
{/* Subtitle */}
|
||||
<div className={styles.subTitle}>
|
||||
ABOUT SOCIAL BUDDY
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className={styles.title}>
|
||||
A Smarter Way to Grow Your <span className="gradient-text">Social Presence</span>
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className={styles.description}>
|
||||
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 */}
|
||||
<ul className={styles.featuresList}>
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/strategic.webp"
|
||||
alt="Strategic Partnership"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<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>
|
||||
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/efficient.webp"
|
||||
alt="Efficient Campaign Execution"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<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>
|
||||
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/data.webp"
|
||||
alt="Data-Led Performance Tracking"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<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>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Link href="/about" className="btn btn-primary btn-large">
|
||||
Explore Our Approach <ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Counters Section Removed as requested */}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutSection;
|
||||
@ -1,238 +1,274 @@
|
||||
.ctaSection {
|
||||
padding: 6rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ctaCard {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 32px;
|
||||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(236, 72, 153, 0.3);
|
||||
background: #0072b1;
|
||||
/* Dark fallback */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 600px;
|
||||
color: white;
|
||||
/* Switch text to white */
|
||||
}
|
||||
|
||||
.background {
|
||||
/* Background Image */
|
||||
.gridBackground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('/images/home/one-place.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.circle1,
|
||||
.circle2,
|
||||
.circle3 {
|
||||
/* Floating Icons Container */
|
||||
.floatingIconsContainer {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
.floatIcon {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
/* Soft shadow */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -50px;
|
||||
/* Icon Positioning imitating scatter */
|
||||
.icon1 {
|
||||
top: 15%;
|
||||
left: 10%;
|
||||
animation-delay: 2s;
|
||||
animation-delay: 0s;
|
||||
color: #FF4500;
|
||||
filter: blur(1px);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.circle3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 50%;
|
||||
left: -50px;
|
||||
animation-delay: 4s;
|
||||
/* Reddit-ish */
|
||||
.icon2 {
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
animation-delay: 1s;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
/* YouTube */
|
||||
.icon3 {
|
||||
top: 10%;
|
||||
left: 30%;
|
||||
animation-delay: 2s;
|
||||
color: #000000;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* X */
|
||||
.icon4 {
|
||||
top: 12%;
|
||||
right: 20%;
|
||||
animation-delay: 3s;
|
||||
color: #1DA1F2;
|
||||
}
|
||||
|
||||
/* Twitter/Blue */
|
||||
|
||||
.icon5 {
|
||||
top: 50%;
|
||||
left: 15%;
|
||||
animation-delay: 1.5s;
|
||||
color: #0077B5;
|
||||
}
|
||||
|
||||
/* LinkedIn */
|
||||
.icon6 {
|
||||
top: 30%;
|
||||
right: 5%;
|
||||
animation-delay: 0.5s;
|
||||
color: #E60023;
|
||||
}
|
||||
|
||||
/* Pinterest */
|
||||
.icon7 {
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 2.5s;
|
||||
color: #E4405F;
|
||||
filter: blur(2px);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* Insta-ish heart */
|
||||
.icon8 {
|
||||
bottom: 25%;
|
||||
right: 15%;
|
||||
animation-delay: 3.5s;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Thread/Spiral */
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) scale(1.1);
|
||||
transform: translateY(-15px) rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
/* Content */
|
||||
.contentContainer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
|
||||
/* Updated for dark bg */
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.7;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
/* Updated for dark bg */
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
/* Standalone CTA Button */
|
||||
.standaloneBtn {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: white;
|
||||
color: var(--primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
border: none;
|
||||
padding: 1rem 2.5rem;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.buttons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryBtn {
|
||||
background: white !important;
|
||||
color: var(--primary) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.primaryBtn:hover {
|
||||
.standaloneBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.secondaryBtn {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
color: white !important;
|
||||
border: 2px solid white !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.secondaryBtn:hover {
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
box-shadow: 0 10px 20px -5px rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.primaryBtn:hover .arrow {
|
||||
.standaloneBtn:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.trustBadges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.trustBadge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: white;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badgeIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ctaCard {
|
||||
padding: 5rem 3rem;
|
||||
@media (max-width: 1024px) {
|
||||
.floatIcon {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
.icon3 {
|
||||
left: 10%;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.icon4 {
|
||||
right: 5%;
|
||||
top: 8%;
|
||||
}
|
||||
|
||||
.icon5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon7 {
|
||||
left: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.icon8 {
|
||||
right: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.ctaCard {
|
||||
padding: 6rem 4rem;
|
||||
@media (max-width: 768px) {
|
||||
.floatIcon {
|
||||
transform: scale(0.7);
|
||||
opacity: 0.6;
|
||||
/* Reduce visibility distraction */
|
||||
}
|
||||
|
||||
.ctaSection {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
/* Push all to edges */
|
||||
.icon1 {
|
||||
left: 2%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide intrusive top ones */
|
||||
.icon4 {
|
||||
right: 2%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.icon5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon6 {
|
||||
right: 2%;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.icon7 {
|
||||
left: 2%;
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.icon8 {
|
||||
right: 2%;
|
||||
bottom: 5%;
|
||||
}
|
||||
}
|
||||
@ -1,77 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import styles from './CTA.module.css';
|
||||
|
||||
export default function CTA() {
|
||||
return (
|
||||
<section className={styles.ctaSection}>
|
||||
<div className="container">
|
||||
<div className={styles.ctaCard}>
|
||||
<div className={styles.background}>
|
||||
<div className={styles.circle1}></div>
|
||||
<div className={styles.circle2}></div>
|
||||
<div className={styles.circle3}></div>
|
||||
</div>
|
||||
<div className={styles.gridBackground}></div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.badge}>
|
||||
<span>🚀</span>
|
||||
<span>Get Started Today</span>
|
||||
</div>
|
||||
|
||||
<h2 className={styles.title}>
|
||||
Ready to Transform Your <span className={styles.highlight}>Social Media</span> Strategy?
|
||||
</h2>
|
||||
|
||||
<p className={styles.subtitle}>
|
||||
Join thousands of businesses and creators who are already using SocialBuddy to grow their online presence.
|
||||
Start your free trial today—no credit card required.
|
||||
</p>
|
||||
|
||||
<div className={styles.features}>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>14-day free trial</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>Cancel anytime</span>
|
||||
</div>
|
||||
<div className={styles.feature}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span>24/7 customer support</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.buttons}>
|
||||
<a href="https://app.socialbuddy.co/signup" className={`btn btn-primary btn-large ${styles.primaryBtn}`}>
|
||||
Start Free Trial
|
||||
<span className={styles.arrow}>→</span>
|
||||
</a>
|
||||
<Link href="/pricing" className={`btn btn-secondary btn-large ${styles.secondaryBtn}`}>
|
||||
View Pricing
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.trustBadges}>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>🔒</span>
|
||||
<span>Secure & Encrypted</span>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>⭐</span>
|
||||
<span>4.9/5 Rating</span>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<span className={styles.badgeIcon}>👥</span>
|
||||
<span>10,000+ Users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Floating Icons */}
|
||||
<div className={styles.floatingIconsContainer}>
|
||||
{/* Top Left */}
|
||||
<div className={`${styles.floatIcon} ${styles.icon1}`}>
|
||||
<span>📣</span>
|
||||
</div>
|
||||
<div className={`${styles.floatIcon} ${styles.icon2}`}>
|
||||
<span>▶️</span>
|
||||
</div>
|
||||
|
||||
{/* Top/Mid */}
|
||||
<div className={`${styles.floatIcon} ${styles.icon3}`}>
|
||||
<span>𝕏</span>
|
||||
</div>
|
||||
<div className={`${styles.floatIcon} ${styles.icon4}`}>
|
||||
<span>🦋</span> {/* Bluesky/Twitter-like */}
|
||||
</div>
|
||||
|
||||
{/* Left/Right Scatter */}
|
||||
<div className={`${styles.floatIcon} ${styles.icon5}`}>
|
||||
<span>💼</span>
|
||||
</div>
|
||||
<div className={`${styles.floatIcon} ${styles.icon6}`}>
|
||||
<span>📌</span>
|
||||
</div>
|
||||
|
||||
{/* Bottom Scatter */}
|
||||
<div className={`${styles.floatIcon} ${styles.icon7}`}>
|
||||
<span>❤️</span>
|
||||
</div>
|
||||
<div className={`${styles.floatIcon} ${styles.icon8}`}>
|
||||
<span>🌀</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.contentContainer}>
|
||||
<h2 className={styles.title}>
|
||||
One Place to Manage Your <br /> Social Presence
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Publish clearly. Stay organized. Scale.
|
||||
</p>
|
||||
|
||||
<Link href="https://app.socialbuddy.co/signup" className={styles.standaloneBtn}>
|
||||
Get started for free <span className={styles.arrow}>→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
115
components/ChannelTestimonialSlider.tsx
Normal file
115
components/ChannelTestimonialSlider.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
"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, staticImage }: { testimonials: Testimonial[], staticImage?: string }) {
|
||||
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];
|
||||
|
||||
// Determine what image to show on the left
|
||||
// If staticImage is provided, use it always.
|
||||
// If not, use the current testimonial's image.
|
||||
const leftImageSrc = staticImage || current.image;
|
||||
|
||||
// Only animate the left image if it is changing (i.e., no staticImage)
|
||||
const leftImageClass = staticImage
|
||||
? styles.sliderLeftImage
|
||||
: `${styles.sliderLeftImage} ${isAnimating ? styles.fadeOut : styles.fadeIn}`;
|
||||
|
||||
return (
|
||||
<div className={styles.channelTestimonialContainer}>
|
||||
{/* Left Side: Large Image */}
|
||||
<div className={leftImageClass}>
|
||||
<div className={styles.sliderImageWrapper}>
|
||||
<SafeImage
|
||||
src={leftImageSrc}
|
||||
alt={staticImage ? "Testimonial" : 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
|
||||
key={currentIndex}
|
||||
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>
|
||||
);
|
||||
}
|
||||
211
components/CoreServices.module.css
Normal file
211
components/CoreServices.module.css
Normal file
@ -0,0 +1,211 @@
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #0072b1;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--foreground);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--foreground-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.gridContainer {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Service Item Styling */
|
||||
.serviceItem {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.serviceItem:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
background: var(--card-bg, rgba(255, 255, 255, 0.05));
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.serviceItem:hover .iconWrapper {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--foreground);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.serviceItem:hover .content h3 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Central Image Styles */
|
||||
.columnCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.centralVisual {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 203px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.centerImage {
|
||||
width: 203px;
|
||||
height: 256px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Layout (1024px+) */
|
||||
@media (min-width: 1024px) {
|
||||
.gridContainer {
|
||||
grid-template-columns: 1fr 350px 1fr;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.columnLeft {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.columnLeft .serviceItem {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (768px - 1023px) */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.gridContainer {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.columnCenter {
|
||||
grid-column: span 2;
|
||||
order: -1;
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile (below 768px) */
|
||||
@media (max-width: 767px) {
|
||||
.gridContainer {
|
||||
grid-template-columns: 1fr;
|
||||
padding-right: 0.5rem;
|
||||
/* Ensure right space */
|
||||
}
|
||||
|
||||
.columnCenter {
|
||||
order: -1;
|
||||
/* Image first on mobile */
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.centralVisual {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.serviceItem {
|
||||
padding-right: 10px;
|
||||
/* Force internal spacing */
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
131
components/CoreServices.tsx
Normal file
131
components/CoreServices.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import styles from './CoreServices.module.css';
|
||||
|
||||
export default function CoreServices() {
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<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}>
|
||||
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>
|
||||
|
||||
<div className={styles.gridContainer}>
|
||||
{/* Left Column */}
|
||||
<div className={styles.columnLeft}>
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/control-panel.webp"
|
||||
alt="Central Control Panel"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<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>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/automation.webp"
|
||||
alt="Intelligent Posting Automation"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<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>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/planning.webp"
|
||||
alt="Interactive Planning View"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<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>
|
||||
|
||||
{/* Center Column - Image */}
|
||||
<div className={styles.columnCenter}>
|
||||
<div className={styles.centralVisual}>
|
||||
<Image
|
||||
src="/images/home/our-solutions-centre-main.webp"
|
||||
alt="Our Solutions Centre"
|
||||
width={203}
|
||||
height={256}
|
||||
className={styles.centerImage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className={styles.columnRight}>
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/insights.webp"
|
||||
alt="Performance Insights"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<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>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/team.webp"
|
||||
alt="Team-Based Workflows"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Team-Based Workflows</h3>
|
||||
<p>Coordinate seamlessly with internal teams or clients using structured review processes and permission-based access.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Image
|
||||
src="/images/home/message.webp"
|
||||
alt="Unified Message Center"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,203 +1,281 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border: 1px solid rgba(236, 72, 153, 0.2);
|
||||
border-radius: 50px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
.leftColumn {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
.featureList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.contactLink:hover {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.faqContainer {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
.featureItem {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 4px 20px rgba(236, 72, 153, 0.1);
|
||||
.featureItem:hover {
|
||||
background-color: #F8FAFC;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.faqItem.open {
|
||||
border-color: var(--primary);
|
||||
.featureItem.active {
|
||||
background-color: white;
|
||||
border-color: #E2E8F0;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
width: 100%;
|
||||
.iconWrapper {
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqQuestion:hover {
|
||||
background: rgba(236, 72, 153, 0.05);
|
||||
/* Icon Styles - Default opacity for non-active? Or just keep colorful */
|
||||
.iconWrapper.orange {
|
||||
background: linear-gradient(135deg, #f9cd35, #f9cd35);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 69, 0.2);
|
||||
}
|
||||
|
||||
.questionText {
|
||||
.iconWrapper.red {
|
||||
background: linear-gradient(135deg, #ec4899, #ec4899);
|
||||
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
|
||||
}
|
||||
|
||||
.iconWrapper.blue {
|
||||
background: linear-gradient(135deg, #1255d8, #1255d8);
|
||||
box-shadow: 0 4px 12px rgba(41, 121, 255, 0.2);
|
||||
}
|
||||
|
||||
.featureItem:hover .iconWrapper {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.activeIcon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.iconImage {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.featureContent h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin-bottom: 0.25rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--primary);
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
.featureItem.active .featureContent h4 {
|
||||
color: #EC4899;
|
||||
/* Highlight active title */
|
||||
}
|
||||
|
||||
.faqItem.open .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.faqItem.open .faqAnswer {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.answerContent {
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.answerContent p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
.featureContent p {
|
||||
color: #6B7280;
|
||||
line-height: 1.4;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ctaBox {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.supportSection {
|
||||
margin-top: 2rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.ctaBox::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
|
||||
animation: rotate 20s linear infinite;
|
||||
.supportText {
|
||||
color: #6B7280;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.contactBtn {
|
||||
background: linear-gradient(135deg, #4F46E5, #EC4899);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.contactBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px -1px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
/* Right Column */
|
||||
.faqList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
min-height: 500px;
|
||||
/* Prevent large layout shifts */
|
||||
}
|
||||
|
||||
.mobileCategoryTitle {
|
||||
display: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #F3F4F6;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
animation: fadeInRight 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.faqButton {
|
||||
width: 100%;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
justify-content: space-between;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.ctaButtons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.question {
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
color: #EC4899;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.faqItem[data-state="open"] .chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.answer {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-out;
|
||||
}
|
||||
|
||||
.faqItem[data-state="open"] .answer {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.answerContent {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.answerInner {
|
||||
padding: 0 1.25rem 1.25rem;
|
||||
color: #6B7280;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid {
|
||||
grid-template-columns: 0.8fr 1.2fr;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ctaBox {
|
||||
padding: 4rem 3rem;
|
||||
@media (max-width: 1023px) {
|
||||
.featureItem.active {
|
||||
transform: translateX(0);
|
||||
background-color: #F0F9FF;
|
||||
/* Highlight slightly differently on mobile/tablet */
|
||||
}
|
||||
|
||||
.questionText {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.answerContent p {
|
||||
font-size: 1.0625rem;
|
||||
.mobileCategoryTitle {
|
||||
display: block;
|
||||
/* Show title above questions on mobile */
|
||||
}
|
||||
}
|
||||
@ -1,115 +1,204 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import styles from './FAQ.module.css';
|
||||
|
||||
interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
interface FAQCategory {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
colorClass: string;
|
||||
faqs: FAQItem[];
|
||||
}
|
||||
|
||||
export default function FAQ() {
|
||||
const [activeCategoryIndex, setActiveCategoryIndex] = useState(0);
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
const faqs = [
|
||||
const categories: FAQCategory[] = [
|
||||
{
|
||||
question: 'What social media platforms does SocialBuddy support?',
|
||||
answer: 'SocialBuddy supports all major social media platforms including Facebook, Instagram, Twitter (X), LinkedIn, Pinterest, TikTok, YouTube, and more. You can manage unlimited accounts across all these platforms from a single dashboard.',
|
||||
id: 'scheduling',
|
||||
title: 'Convenient Scheduling',
|
||||
description: 'Easily plan and schedule your content across all platforms.',
|
||||
icon: '/images/home/schedule.webp',
|
||||
colorClass: 'orange',
|
||||
faqs: [
|
||||
{
|
||||
question: 'How does the unified calendar streamline my workflow?',
|
||||
answer: 'Our drag-and-drop calendar gives you a bird\'s-eye view of your entire strategy. Schedule posts for Facebook, Instagram, LinkedIn, X, and Pinterest simultaneously, or tweak them individually for platform-specific engagement—all from one screen.'
|
||||
},
|
||||
{
|
||||
question: 'Can I truly set it and forget it with bulk scheduling?',
|
||||
answer: 'Absolutely. Upload months of content in minutes via CSV. Our system automatically maps your columns to captions, dates, and media, allowing you to fill your queue without manual entry fatigue.'
|
||||
},
|
||||
{
|
||||
question: 'Does SocialBuddy help me beat the algorithm?',
|
||||
answer: 'Yes. Our "Smart Schedule" feature analyzes your specific audience behavior to recommend the exact minute you should post for maximum visibility, taking the guesswork out of engagement.'
|
||||
},
|
||||
{
|
||||
question: 'Is there a limit on how much I can plan ahead?',
|
||||
answer: 'We believe in limitless growth. Pro and Agency plans offer unlimited scheduled posts, so you can plan your Q4 campaigns in Q1 if you want to. Starter plans include a generous 50-post monthly cap.'
|
||||
},
|
||||
{
|
||||
question: 'Will my posts look right on every device?',
|
||||
answer: 'No more "link in bio" broken texts. Our Pixel-Perfect Preview shows you exactly how your content will render on mobile and desktop feeds before you hit publish, ensuring your brand always looks polished.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
question: 'Can I try SocialBuddy before committing to a paid plan?',
|
||||
answer: 'Absolutely! We offer a 14-day free trial for all our paid plans. No credit card is required to start your trial. You can explore all features and see how SocialBuddy fits your needs before making any commitment.',
|
||||
id: 'ai',
|
||||
title: 'Best AI Content Team',
|
||||
description: 'Leverage advanced AI to generate captions and ideas instantly.',
|
||||
icon: '/images/home/content-team.webp',
|
||||
colorClass: 'red',
|
||||
faqs: [
|
||||
{
|
||||
question: 'Will the AI sound like a robot?',
|
||||
answer: 'Not on our watch. Our "Brand Persona" engine allows you to define your unique voice—whether it\'s professional, witty, or empathetic. The AI generates content that sounds indistinguishable from your best copywriter.'
|
||||
},
|
||||
{
|
||||
question: 'Can it help me come up with content ideas?',
|
||||
answer: 'Writer\'s block is cured. Simply type a broad topic like "Monday Motivation" or "Product Launch," and our AI will generate 10+ engaging hooks, captions, and script ideas instantly.'
|
||||
},
|
||||
{
|
||||
question: 'Does it optimize for SEO and discovery?',
|
||||
answer: 'Yes. The AI suggests trending, high-impact hashtags relevant to your specific image and caption, increasing the likelihood of your content appearing in Explore feeds and search results.'
|
||||
},
|
||||
{
|
||||
question: 'Is the content plagiarism-free?',
|
||||
answer: '100%. Our model generates unique output every single time based on your specific inputs. You own the copyright to everything created within the platform.'
|
||||
},
|
||||
{
|
||||
question: 'Can I rewrite existing content with AI?',
|
||||
answer: 'Absolutely. Use the "Remix" feature to turn a single blog post into a week\'s worth of Tweets, LinkedIn posts, and Instagram captions with one click.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
question: 'How does the AI content assistant work?',
|
||||
answer: 'Our AI content assistant uses advanced machine learning to analyze your brand voice, industry trends, and audience preferences. It can generate engaging captions, suggest relevant hashtags, recommend optimal posting times, and even help you create content ideas based on trending topics.',
|
||||
},
|
||||
{
|
||||
question: 'Is my data secure with SocialBuddy?',
|
||||
answer: 'Security is our top priority. We use bank-level encryption (256-bit SSL) to protect your data. All social media connections are made through official OAuth protocols, and we never store your social media passwords. We\'re also GDPR and SOC 2 compliant.',
|
||||
},
|
||||
{
|
||||
question: 'Can I manage multiple team members and clients?',
|
||||
answer: 'Yes! SocialBuddy offers robust team collaboration features including role-based access control, approval workflows, client management, and activity logs. You can invite unlimited team members on our Pro and Premium plans.',
|
||||
},
|
||||
{
|
||||
question: 'What kind of analytics and reporting does SocialBuddy provide?',
|
||||
answer: 'SocialBuddy provides comprehensive analytics including engagement rates, follower growth, reach, impressions, best performing content, audience demographics, and competitor analysis. You can generate custom white-labeled reports and export data in various formats.',
|
||||
},
|
||||
{
|
||||
question: 'Can I schedule posts in advance?',
|
||||
answer: 'Yes! You can schedule posts days, weeks, or even months in advance. Our smart scheduling feature uses AI to recommend the best times to post based on when your audience is most active. You can also use our bulk upload feature to schedule hundreds of posts at once.',
|
||||
},
|
||||
{
|
||||
question: 'What happens if I exceed my plan limits?',
|
||||
answer: 'If you approach your plan limits, we\'ll notify you in advance. You can easily upgrade to a higher plan at any time. If you temporarily exceed limits, we won\'t interrupt your service - we\'ll just let you know it\'s time to upgrade.',
|
||||
},
|
||||
id: 'growth',
|
||||
title: 'Guaranteed Satisfaction',
|
||||
description: 'Experience significant growth in engagement and reach.',
|
||||
icon: '/images/home/satisfaction.webp',
|
||||
colorClass: 'blue',
|
||||
faqs: [
|
||||
{
|
||||
question: 'How quickly will I see results?',
|
||||
answer: 'While consistency takes time, our users typically report a 40% increase in engagement within the first 30 days of using our Smart Scheduling and AI tools to optimize their strategy.'
|
||||
},
|
||||
{
|
||||
question: 'Is my data safe with SocialBuddy?',
|
||||
answer: 'We treat your data like a bank vault. We utilize 256-bit AES encryption and adhere to strict SOC2 compliance standards. We rely exclusively on official social media APIs, keeping your accounts 100% compliant and secure.'
|
||||
},
|
||||
{
|
||||
question: 'What if I need to cancel?',
|
||||
answer: 'We believe you should stay because you love the product, not because you\'re trapped. Cancel your monthly subscription instantly from your dashboard—no phone calls, no guilt trips.'
|
||||
},
|
||||
{
|
||||
question: 'Can I collaborate with my team?',
|
||||
answer: 'Collaboration is built-in. Assign roles (Admin, Editor, Viewer) to your team members and clients. Set up approval workflows so no post goes live without a manager\'s sign-off.'
|
||||
},
|
||||
{
|
||||
question: 'Do you offer support if I get stuck?',
|
||||
answer: 'We pride ourselves on human support. Our team of social media experts is available 24/7 via live chat. No bots, just real people helping you grow.'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const currentCategory = categories[activeCategoryIndex];
|
||||
|
||||
const toggleFAQ = (index: number) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="section" id="faq">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>❓</span>
|
||||
<span>FAQ</span>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Frequently Asked <span className="gradient-text">Questions</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Everything you need to know about SocialBuddy. Can't find the answer you're looking for?
|
||||
<a href="/contact" className={styles.contactLink}> Contact our support team</a>.
|
||||
</p>
|
||||
</div>
|
||||
const handleCategoryClick = (index: number) => {
|
||||
setActiveCategoryIndex(index);
|
||||
setOpenIndex(0); // Reset to first item open or closed when switching? Let's open first item.
|
||||
};
|
||||
|
||||
<div className={styles.faqContainer}>
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className={`${styles.faqItem} ${openIndex === index ? styles.open : ''}`}>
|
||||
<button
|
||||
className={styles.faqQuestion}
|
||||
onClick={() => toggleFAQ(index)}
|
||||
aria-expanded={openIndex === index}
|
||||
>
|
||||
<span className={styles.questionText}>{faq.question}</span>
|
||||
<span className={styles.icon}>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 9L12 15L18 9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
return (
|
||||
<section className={styles.section} id="faq">
|
||||
<div className={styles.container}>
|
||||
<div className={styles.grid}>
|
||||
{/* Left Column: Interactive Categories */}
|
||||
<div className={styles.leftColumn}>
|
||||
<span className={styles.label}>FAQ</span>
|
||||
<h2 className={styles.heading}>
|
||||
A Platform You Can Rely On <span className="gradient-text">for Growth</span>
|
||||
</h2>
|
||||
|
||||
<div className={styles.featureList}>
|
||||
{categories.map((category, index) => (
|
||||
<div
|
||||
key={category.id}
|
||||
className={`${styles.featureItem} ${activeCategoryIndex === index ? styles.active : ''}`}
|
||||
onClick={() => handleCategoryClick(index)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className={`${styles.iconWrapper} ${styles[category.colorClass]} ${activeCategoryIndex === index ? styles.activeIcon : ''}`}>
|
||||
<Image
|
||||
src={category.icon}
|
||||
alt={category.title}
|
||||
width={31}
|
||||
height={31}
|
||||
className={styles.iconImage}
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className={styles.faqAnswer}>
|
||||
<div className={styles.answerContent}>
|
||||
<p>{faq.answer}</p>
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>{category.title}</h4>
|
||||
<p>{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.supportSection}>
|
||||
<p className={styles.supportText}>Still have questions?</p>
|
||||
<a href="/contact" className={styles.contactBtn}>
|
||||
Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dynamic FAQs */}
|
||||
<div className={styles.faqList}>
|
||||
<h3 className={styles.mobileCategoryTitle}>{currentCategory.title} FAQs</h3>
|
||||
{currentCategory.faqs.map((faq, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={styles.faqItem}
|
||||
data-state={openIndex === index ? 'open' : 'closed'}
|
||||
>
|
||||
<button
|
||||
className={styles.faqButton}
|
||||
onClick={() => toggleFAQ(index)}
|
||||
aria-expanded={openIndex === index}
|
||||
>
|
||||
<span className={styles.question}>{faq.question}</span>
|
||||
<ChevronDown
|
||||
className={styles.chevron}
|
||||
size={20}
|
||||
strokeWidth={2.5}
|
||||
/>
|
||||
</button>
|
||||
<div className={styles.answer}>
|
||||
<div className={styles.answerContent}>
|
||||
<div className={styles.answerInner}>
|
||||
{faq.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.ctaBox}>
|
||||
<h3 className={styles.ctaTitle}>Still have questions?</h3>
|
||||
<p className={styles.ctaText}>
|
||||
Our friendly support team is here to help you 24/7
|
||||
</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<a href="/contact" className="btn btn-primary">
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="/docs" className="btn btn-secondary">
|
||||
View Documentation
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,18 @@
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
background: linear-gradient(to right, #2563eb 0%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -15,12 +27,14 @@
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@ -29,96 +43,172 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
.contentWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.featuresGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.featuresGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: var(--radius-xl);
|
||||
/* Accordion Styles */
|
||||
.accordion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover .iconWrapper {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover .icon {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.learnMore {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.learnMore:hover {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
.accordionItem {
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordionItem:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.accordionItem.active {
|
||||
background: var(--card-bg, rgba(255, 255, 255, 0.05));
|
||||
border-color: var(--border-color);
|
||||
box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.accordionItem::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--primary);
|
||||
transform: scaleY(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.learnMore:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
.accordionItem.active::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.itemHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
color: var(--foreground);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.accordionItem.active .iconWrapper {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 15px var(--primary);
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
margin: 0;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.accordionItem.active .itemTitle {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding-left: calc(50px + 1.25rem);
|
||||
/* Align with text */
|
||||
}
|
||||
|
||||
.accordionItem.active .itemContent {
|
||||
grid-template-rows: 1fr;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.contentInner {
|
||||
overflow: hidden;
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Image Column */
|
||||
.desktopImageWrapper {
|
||||
display: none;
|
||||
/* Hidden by default on mobile */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.mobileImageWrapper {
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.mobileImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.contentWrapper {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.desktopImageWrapper {
|
||||
display: block;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.mobileImageWrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.imageOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1,42 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import styles from './Features.module.css';
|
||||
|
||||
export default function Features() {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '📅',
|
||||
title: 'Smart Scheduling',
|
||||
description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions.',
|
||||
description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions to maximize your reach and engagement.',
|
||||
color: '#667eea',
|
||||
image: '/features/scheduling.png'
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Advanced Analytics',
|
||||
description: 'Track performance metrics, engagement rates, and audience insights in real-time.',
|
||||
description: 'Track performance metrics, engagement rates, and audience insights in real-time with comprehensive interactive dashboards.',
|
||||
color: '#ec4899',
|
||||
image: '/features/analytics.png'
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI Content Assistant',
|
||||
description: 'Generate engaging captions and hashtags with our AI-powered content tools.',
|
||||
description: 'Generate engaging captions, hashtags, and creative content ideas instantly with our advanced AI-powered writing tools.',
|
||||
color: '#14b8a6',
|
||||
image: '/features/ai.png'
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Collaboration',
|
||||
description: 'Work seamlessly with your team with role-based access and approval workflows.',
|
||||
description: 'Work seamlessly with your team using role-based access, approval workflows, and shared content calendars.',
|
||||
color: '#f59e0b',
|
||||
image: '/features/platforms.png'
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Multi-Platform Support',
|
||||
description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from one dashboard.',
|
||||
description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from a single, unified dashboard without switching tabs.',
|
||||
color: '#8b5cf6',
|
||||
image: '/features/platforms.png'
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
title: 'Real-Time Notifications',
|
||||
description: 'Stay updated with instant alerts for mentions, comments, and engagement.',
|
||||
description: 'Stay on top of your community with instant alerts for new mentions, comments, and engagement opportunities.',
|
||||
color: '#ef4444',
|
||||
image: '/features/ai.png'
|
||||
},
|
||||
];
|
||||
|
||||
@ -44,37 +56,74 @@ export default function Features() {
|
||||
<section className="section" id="features">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>✨</span>
|
||||
<span>Features</span>
|
||||
</div>
|
||||
<div className={styles.subTitle}>Features</div>
|
||||
<h2 className={styles.title}>
|
||||
Everything You Need to <span className="gradient-text">Succeed</span>
|
||||
Everything You Need to Succeed
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Powerful tools designed to streamline your social media management and boost your online presence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.featuresGrid}>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={styles.featureCard}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div className={styles.iconWrapper} style={{ background: `${feature.color}20` }}>
|
||||
<span className={styles.icon} style={{ filter: `drop-shadow(0 0 10px ${feature.color})` }}>
|
||||
{feature.icon}
|
||||
</span>
|
||||
<div className={styles.contentWrapper}>
|
||||
{/* Left Column: Image Preview */}
|
||||
<div className={styles.desktopImageWrapper}>
|
||||
{features.map((feature, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={feature.image}
|
||||
alt={feature.title}
|
||||
fill
|
||||
className={styles.featureImage}
|
||||
style={{
|
||||
opacity: index === activeIndex ? 1 : 0,
|
||||
zIndex: index === activeIndex ? 10 : 0,
|
||||
transform: index === activeIndex ? 'scale(1)' : 'scale(1.05)',
|
||||
}}
|
||||
priority={index === 0}
|
||||
/>
|
||||
))}
|
||||
<div className={styles.imageOverlay} />
|
||||
</div>
|
||||
|
||||
{/* Right Column: Accordion */}
|
||||
<div className={styles.accordion}>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.accordionItem} ${index === activeIndex ? styles.active : ''}`}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
>
|
||||
<div className={styles.itemHeader}>
|
||||
<div className={styles.iconWrapper} style={{
|
||||
color: index === activeIndex ? 'white' : feature.color,
|
||||
backgroundColor: index === activeIndex ? feature.color : `${feature.color}15`
|
||||
}}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className={styles.itemTitle} style={{
|
||||
color: index === activeIndex ? feature.color : undefined
|
||||
}}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.contentInner}>
|
||||
<div className={styles.mobileImageWrapper}>
|
||||
<Image
|
||||
src={feature.image}
|
||||
alt={feature.title}
|
||||
width={600}
|
||||
height={400}
|
||||
className={styles.mobileImage}
|
||||
/>
|
||||
</div>
|
||||
{feature.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDescription}>{feature.description}</p>
|
||||
<div className={styles.learnMore}>
|
||||
Learn more <span className={styles.arrow}>→</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #a855f7, #ec4899);
|
||||
/* Purple/Pink gradient per user image */
|
||||
color: white;
|
||||
padding: 4rem 0 2rem;
|
||||
margin-top: 6rem;
|
||||
padding: 4rem 0 3rem;
|
||||
/* Increase top padding */
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
@ -77,6 +79,7 @@
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@ -92,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;
|
||||
@ -130,7 +146,8 @@
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
/* Centered */
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
@ -144,6 +161,7 @@
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badges {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import Link from 'next/link';
|
||||
import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react';
|
||||
import styles from './Footer.module.css';
|
||||
|
||||
export default function Footer() {
|
||||
@ -6,14 +7,14 @@ export default function Footer() {
|
||||
|
||||
const footerLinks = {
|
||||
product: [
|
||||
{ label: 'Features', href: '/features' },
|
||||
{ label: 'Features', href: '#' },
|
||||
{ label: 'Pricing', href: '/pricing' },
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API', href: '/docs/api' },
|
||||
{ label: 'Documentation', href: '#' },
|
||||
{ label: 'API', href: '#' },
|
||||
],
|
||||
company: [
|
||||
{ label: 'About Us', href: '/about' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Blog', href: '/resources' },
|
||||
{ label: 'Careers', href: '/careers' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
@ -32,11 +33,11 @@ export default function Footer() {
|
||||
};
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: '𝕏', href: 'https://twitter.com', label: 'Twitter' },
|
||||
{ icon: '📘', href: 'https://facebook.com', label: 'Facebook' },
|
||||
{ icon: '📷', href: 'https://instagram.com', label: 'Instagram' },
|
||||
{ icon: '💼', href: 'https://linkedin.com', label: 'LinkedIn' },
|
||||
{ icon: '📺', href: 'https://youtube.com', label: 'YouTube' },
|
||||
{ icon: <Twitter size={20} />, href: 'https://twitter.com', label: 'Twitter' },
|
||||
{ icon: <Facebook size={20} />, href: 'https://facebook.com', label: 'Facebook' },
|
||||
{ icon: <Instagram size={20} />, href: 'https://instagram.com', label: 'Instagram' },
|
||||
{ icon: <Linkedin size={20} />, href: 'https://linkedin.com', label: 'LinkedIn' },
|
||||
{ icon: <Youtube size={20} />, href: 'https://youtube.com', label: 'YouTube' },
|
||||
];
|
||||
|
||||
return (
|
||||
@ -46,11 +47,11 @@ export default function Footer() {
|
||||
{/* Brand Section */}
|
||||
<div className={styles.brandSection}>
|
||||
<Link href="/" className={styles.logo}>
|
||||
<span className={styles.logoIcon}>🚀</span>
|
||||
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
||||
<img src="/logo.png" alt="SocialBuddy Logo" style={{ height: '45px', width: 'auto' }} />
|
||||
<span className={styles.logoText}></span>
|
||||
</Link>
|
||||
<p className={styles.brandDescription}>
|
||||
Empowering businesses to manage their social media presence with powerful tools and analytics.
|
||||
Empowering brands to streamline social media management, drive engagement, and grow with powerful tools and analytics.
|
||||
</p>
|
||||
<div className={styles.socialLinks}>
|
||||
{socialLinks.map((social) => (
|
||||
@ -108,16 +109,21 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
{/* Bottom Bar */}
|
||||
<div className={styles.bottomBar}>
|
||||
<p className={styles.copyright}>
|
||||
© {currentYear} SocialBuddy. All rights reserved.
|
||||
© Copyright {currentYear} SocialBuddy | Powered by{' '}
|
||||
<a
|
||||
href="https://metatroncubesolutions.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.poweredLink}
|
||||
>
|
||||
MetatronCube
|
||||
</a>{' '}
|
||||
All Rights Reserved
|
||||
</p>
|
||||
<div className={styles.badges}>
|
||||
<span className={styles.badge}>🔒 Secure</span>
|
||||
<span className={styles.badge}>⚡ Fast</span>
|
||||
<span className={styles.badge}>🌍 Global</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,262 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import styles from './Hero.module.css';
|
||||
|
||||
export default function Hero() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [typedText, setTypedText] = useState('');
|
||||
const [cursorTrail, setCursorTrail] = useState<Array<{ x: number; y: number; id: number }>>([]);
|
||||
const [stats, setStats] = useState({ users: 0, posts: 0, rating: 0 });
|
||||
|
||||
const fullText = 'Manage All Your Social Media in One Place';
|
||||
const slides = [
|
||||
{
|
||||
id: 1,
|
||||
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: '/images/home/banner-1.webp'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
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: '/images/home/banner-2.webp'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
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: '/images/home/banner-3.webp'
|
||||
},
|
||||
];
|
||||
|
||||
// Typing animation
|
||||
// Typing effect for the title of the current slide
|
||||
useEffect(() => {
|
||||
let index = 0;
|
||||
const text = slides[currentSlide].title;
|
||||
setTypedText('');
|
||||
let i = 0;
|
||||
const timer = setInterval(() => {
|
||||
if (index <= fullText.length) {
|
||||
setTypedText(fullText.slice(0, index));
|
||||
index++;
|
||||
if (i < text.length) {
|
||||
setTypedText((prev) => text.slice(0, i + 1));
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
}, [currentSlide]);
|
||||
|
||||
// Stats counter animation
|
||||
// Auto-slide
|
||||
useEffect(() => {
|
||||
const duration = 2000;
|
||||
const steps = 60;
|
||||
const interval = duration / steps;
|
||||
let step = 0;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
step++;
|
||||
const progress = step / steps;
|
||||
setStats({
|
||||
users: Math.floor(10000 * progress),
|
||||
posts: Math.floor(1000000 * progress),
|
||||
rating: Math.min(4.9, 4.9 * progress),
|
||||
});
|
||||
|
||||
if (step >= steps) clearInterval(timer);
|
||||
}, interval);
|
||||
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
|
||||
// Enhanced particle system - Cleaner & Performance Optimized
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const particles: Array<{
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
color: string;
|
||||
opacity: number;
|
||||
}> = [];
|
||||
|
||||
// Reduced particle count for a cleaner look
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const colors = [
|
||||
'rgba(236, 72, 153, 0.4)', // Pink
|
||||
'rgba(59, 130, 246, 0.4)', // Blue
|
||||
'rgba(255, 255, 255, 0.1)', // White
|
||||
];
|
||||
particles.push({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
size: Math.random() * 2 + 1, // Smaller particles
|
||||
speedX: Math.random() * 0.5 - 0.25, // Slower movement
|
||||
speedY: Math.random() * 0.5 - 0.25,
|
||||
color: colors[Math.floor(Math.random() * colors.length)],
|
||||
opacity: Math.random() * 0.5 + 0.1,
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (!ctx || !canvas) return;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw connections - very subtle
|
||||
particles.forEach((particle, i) => {
|
||||
particles.slice(i + 1).forEach((otherParticle) => {
|
||||
const dx = particle.x - otherParticle.x;
|
||||
const dy = particle.y - otherParticle.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = `rgba(255, 255, 255, ${0.05 * (1 - distance / 100)})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.moveTo(particle.x, particle.y);
|
||||
ctx.lineTo(otherParticle.x, otherParticle.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Draw particles
|
||||
particles.forEach((particle) => {
|
||||
ctx.globalAlpha = particle.opacity;
|
||||
ctx.fillStyle = particle.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Update position
|
||||
particle.x += particle.speedX;
|
||||
particle.y += particle.speedY;
|
||||
|
||||
if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
|
||||
if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
const handleResize = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
const slide = slides[currentSlide];
|
||||
|
||||
return (
|
||||
<section className={styles.hero} ref={heroRef}>
|
||||
<canvas ref={canvasRef} className={styles.canvas} />
|
||||
<section className={styles.heroSection}>
|
||||
<div className={styles.heroBackground}>
|
||||
{/* Abstract Circles/Shapes like reference */}
|
||||
<div className={styles.circleBg1}></div>
|
||||
<div className={styles.circleBg2}></div>
|
||||
</div>
|
||||
|
||||
{/* Floating gradient orbs */}
|
||||
<div className={styles.gradientOrb1} />
|
||||
<div className={styles.gradientOrb2} />
|
||||
<div className={styles.gradientOrb3} />
|
||||
|
||||
{/* Morphing shapes */}
|
||||
<div className={styles.morphingShape1}></div>
|
||||
<div className={styles.morphingShape2}></div>
|
||||
|
||||
<div className="container">
|
||||
<div className={styles.heroContent}>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.badge}>
|
||||
<span className={styles.badgeIcon}>✨</span>
|
||||
<span>Scale your Social Media Presence</span>
|
||||
<span className={styles.badgePulse}></span>
|
||||
<div className={`container ${styles.container}`}>
|
||||
<div className={styles.contentWrapper}>
|
||||
{/* Left Content */}
|
||||
<div className={styles.leftContent}>
|
||||
<div className={`${styles.badge} animate-fade-in`}>
|
||||
<span className={styles.badgeLabel}>{slide.badge}</span>
|
||||
<span className={styles.badgeText}>{slide.badgeText}</span>
|
||||
</div>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
<span className={styles.typingText}>
|
||||
{typedText}
|
||||
<span className={styles.cursor}>|</span>
|
||||
</span>
|
||||
{typedText}<span className={styles.cursor}>|</span>
|
||||
</h1>
|
||||
|
||||
<p className={`${styles.subtitle} animate-fade-in`}>
|
||||
Empower your brand with intelligent scheduling, deep analytics, and real-time engagement tools.
|
||||
{slide.subtitle}
|
||||
</p>
|
||||
|
||||
<div className={`${styles.ctaButtons} animate-fade-in`}>
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.primaryCta}>
|
||||
<span>Start Free Trial</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
<span className={styles.buttonGlow}></span>
|
||||
</a>
|
||||
<Link href="/demo" className={styles.secondaryCta}>
|
||||
<span className={styles.playIcon}>▶</span>
|
||||
<span>Watch Demo</span>
|
||||
</Link>
|
||||
{/* Search-like CTA Bar like Reference */}
|
||||
<div className={`${styles.searchBarCta} animate-fade-in`}>
|
||||
<div className={styles.inputGroup}>
|
||||
<span className={styles.searchIcon}>✉️</span>
|
||||
<input type="email" placeholder="Enter your email address" className={styles.searchInput} />
|
||||
</div>
|
||||
<button className={styles.searchBtn}>
|
||||
{slide.ctaPrimary}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.trustBadges}>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{stats.rating.toFixed(1)}/5</div>
|
||||
<div className={styles.trustLabel}>Rating</div>
|
||||
{/* <div className={styles.trustedBy}>
|
||||
<p>{slide.trustedBy}</p>
|
||||
<div className={styles.trustedIcons}>
|
||||
<div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div>
|
||||
<div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div>
|
||||
<div className={styles.trustIcon} style={{ color: '#E4405F' }}>📷</div>
|
||||
<div className={styles.trustIcon} style={{ color: '#00A4EF' }}>⊞</div>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{(stats.users / 1000).toFixed(0)}K+</div>
|
||||
<div className={styles.trustLabel}>Active Users</div>
|
||||
</div>
|
||||
<div className={styles.trustBadge}>
|
||||
<div className={styles.trustValue}>{(stats.posts / 1000000).toFixed(1)}M+</div>
|
||||
<div className={styles.trustLabel}>Posts Scheduled</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className={styles.imageContent}>
|
||||
<div className={styles.dashboardPreview}>
|
||||
{/* Floating social media icons */}
|
||||
<div className={`${styles.floatingIcon} ${styles.icon1}`}>
|
||||
<span>📱</span>
|
||||
</div>
|
||||
<div className={`${styles.floatingIcon} ${styles.icon2}`}>
|
||||
<span>📊</span>
|
||||
</div>
|
||||
<div className={`${styles.floatingIcon} ${styles.icon3}`}>
|
||||
<span>💬</span>
|
||||
{/* Right Content - Image & Floating Cards */}
|
||||
<div className={styles.rightContent}>
|
||||
<div className={styles.imageContainer}>
|
||||
<div className={styles.mainImageCircle}>
|
||||
{/* Using dynamic image from slide data */}
|
||||
<img
|
||||
key={slide.id}
|
||||
src={slide.image}
|
||||
alt={slide.title}
|
||||
className={`${styles.heroImage} animate-fade-in`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.previewHeader}>
|
||||
<div className={styles.previewDots}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
{/* Floating Card 1: Congrats */}
|
||||
<div className={`${styles.floatCard} ${styles.cardCongrats}`}>
|
||||
<div className={styles.cardIcon}>📩</div>
|
||||
<div className={styles.cardText}>
|
||||
<strong>Congrats!</strong>
|
||||
<span>You have got an Email</span>
|
||||
</div>
|
||||
<div className={styles.previewTitle}>SocialBuddy Dashboard</div>
|
||||
<div className={styles.checkIcon}>✓</div>
|
||||
</div>
|
||||
<div className={styles.previewBody}>
|
||||
<div className={`${styles.previewCard} ${styles.analyticsCard}`}>
|
||||
<div className={styles.cardHeader}>
|
||||
<span>📊</span>
|
||||
<span>Analytics Overview</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.chartBar}></div>
|
||||
<div className={styles.chartBar}></div>
|
||||
<div className={styles.chartBar}></div>
|
||||
</div>
|
||||
|
||||
{/* Floating Card 2: Jobholder / Users */}
|
||||
<div className={`${styles.floatCard} ${styles.cardUsers}`}>
|
||||
<div className={styles.userCount}>10k+ <span className={styles.userLabel}>Active Users</span></div>
|
||||
<div className={styles.userAvatars}>
|
||||
<span className={styles.avatar}>👩</span>
|
||||
<span className={styles.avatar}>👨</span>
|
||||
<span className={styles.avatar}>🧑</span>
|
||||
<span className={styles.addBtn}>+</span>
|
||||
</div>
|
||||
<div className={`${styles.previewCard} ${styles.scheduleCard}`}>
|
||||
<div className={styles.cardHeader}>
|
||||
<span>📅</span>
|
||||
<span>Upcoming Posts</span>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.scheduleItem}></div>
|
||||
<div className={styles.scheduleItem}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Card 3: Small Message */}
|
||||
<div className={`${styles.floatCard} ${styles.cardMessage}`}>
|
||||
<div className={styles.msgAvatar}>👱♀️</div>
|
||||
<div className={styles.msgText}>
|
||||
<span>Hi,</span>
|
||||
<p>I am looking for...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced scroll indicator */}
|
||||
<div className={styles.scrollIndicator}>
|
||||
<div className={styles.mouse}>
|
||||
<div className={styles.mouseWheel}></div>
|
||||
{/* Slider Indicators */}
|
||||
<div className={styles.sliderDots}>
|
||||
{slides.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className={`${styles.dot} ${currentSlide === idx ? styles.activeDot : ''}`}
|
||||
onClick={() => setCurrentSlide(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span>Scroll</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,233 +1,293 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
overflow: hidden;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border: 1px solid rgba(236, 72, 153, 0.2);
|
||||
border-radius: 50px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
.subTitle {
|
||||
background: transparent;
|
||||
-webkit-background-clip: unset;
|
||||
-webkit-text-fill-color: unset;
|
||||
background-clip: unset;
|
||||
color: #0072b1;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.stepsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
.timeline {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stepsContainer {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.stepsContainer {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.step.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.stepNumber {
|
||||
/* The vertical connecting line (simplified snake for responsiveness) */
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
/* Aligns with circle center */
|
||||
width: 4px;
|
||||
background: #e2e8f0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.stepItem {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.stepItem.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* ZigZag indent for desktop */
|
||||
@media (min-width: 768px) {
|
||||
|
||||
/* Create the snake effect by alternating margins/padding isn't robust for the straight cards shown.
|
||||
The image creates a visual snake with the connectors, but the cards look aligned.
|
||||
We will keep cards aligned for readability and use the connector styling to suggest the flow.
|
||||
*/
|
||||
.timeline::before {
|
||||
background: radial-gradient(circle at center, var(--secondary) 0%, transparent 100%);
|
||||
width: 2px;
|
||||
opacity: 0.3;
|
||||
left: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Circle Number Wrapper */
|
||||
.numberWrapper {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: var(--background);
|
||||
border: 8px solid var(--background);
|
||||
/* Gap for connection */
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.stepContent {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 2rem 1.5rem;
|
||||
/* The colored ring and number */
|
||||
.numberCircle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stepContent::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.stepContent:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.stepContent:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stepIcon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* The connecting curve element */
|
||||
.connectorCurve {
|
||||
display: none;
|
||||
/* Hidden on mobile */
|
||||
}
|
||||
|
||||
/* Card Capsule */
|
||||
.cardCapsule {
|
||||
flex: 1;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
/* Pill shape */
|
||||
padding: 1.5rem 3rem 1.5rem 2rem;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cardCapsule:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
/* Colored accent bar on the left of capsule */
|
||||
.cardCapsule::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.textContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #0072b1;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stepDescription {
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.iconCircle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.iconCircle svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific S-Curve Connector Logic to match image better */
|
||||
/* We will simulate the "snake" by adjusting the timeline line or adding curves between items */
|
||||
/* For robust responsive design, sticking to a straight cleaner line is safer, but let's try to add the "orange connector" look between circles */
|
||||
|
||||
.connector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.connector {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -2rem;
|
||||
transform: translateY(-50%);
|
||||
width: 2rem;
|
||||
color: var(--primary);
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step:last-child .connector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ctaBox {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 24px;
|
||||
padding: 3rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ctaBox::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ctaBox {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
padding: 3rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ctaContent {
|
||||
position: relative;
|
||||
left: 48px;
|
||||
/* Center of 100px circle approx */
|
||||
top: 100px;
|
||||
/* Bottom of circle */
|
||||
width: 4px;
|
||||
height: 3rem;
|
||||
/* Gap between items */
|
||||
background: var(--primary);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.stepItem {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.numberWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.numberCircle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.cardCapsule {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.iconCircle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.iconCircle svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.cardCapsule {
|
||||
padding-right: 4rem;
|
||||
/* Ensure text doesn't hit the absolute icon */
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
.iconCircle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.ctaBox a:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
.iconCircle svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import styles from './HowItWorks.module.css';
|
||||
|
||||
@ -18,7 +19,7 @@ export default function HowItWorks() {
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
const steps = sectionRef.current?.querySelectorAll(`.${styles.step}`);
|
||||
const steps = sectionRef.current?.querySelectorAll(`.${styles.stepItem}`);
|
||||
steps?.forEach((step) => observer.observe(step));
|
||||
|
||||
return () => observer.disconnect();
|
||||
@ -27,84 +28,73 @@ export default function HowItWorks() {
|
||||
const steps = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Connect Your Accounts',
|
||||
description: 'Link all your social media accounts in seconds with our secure OAuth integration.',
|
||||
icon: '🔗',
|
||||
color: '#667eea',
|
||||
title: 'Discovery Session',
|
||||
description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
|
||||
icon: '/images/home/discovery.webp',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Create & Schedule Content',
|
||||
description: 'Design beautiful posts with our editor and schedule them at optimal times using AI suggestions.',
|
||||
icon: '✍️',
|
||||
color: '#ec4899',
|
||||
title: 'Planning & Direction',
|
||||
description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
|
||||
icon: '/images/home/plan.webp',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Engage Your Audience',
|
||||
description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.',
|
||||
icon: '💬',
|
||||
color: '#14b8a6',
|
||||
title: 'Execution Phase',
|
||||
description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
|
||||
icon: '/images/home/execution.webp',
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Analyze & Optimize',
|
||||
description: 'Track performance metrics and get actionable insights to improve your social media strategy.',
|
||||
icon: '📈',
|
||||
color: '#f59e0b',
|
||||
title: 'Outcome & Optimization',
|
||||
description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
|
||||
icon: '/images/home/outcome.webp',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="section" id="how-it-works" ref={sectionRef}>
|
||||
<div className="container">
|
||||
<section className={styles.section} id="how-it-works" ref={sectionRef}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>🚀</span>
|
||||
<span>How It Works</span>
|
||||
</div>
|
||||
<span className={styles.subTitle}>Our Work Process</span>
|
||||
<h2 className={styles.title}>
|
||||
Get Started in <span className="gradient-text">4 Simple Steps</span>
|
||||
A Clear, Structured <br /> Path to <span className="gradient-text">Social Growth</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
From setup to success, we've made it incredibly easy to manage your social media presence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.stepsContainer}>
|
||||
<div className={styles.timeline}>
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className={styles.step}>
|
||||
<div className={styles.stepNumber} style={{ background: `${step.color}20`, color: step.color }}>
|
||||
{step.number}
|
||||
</div>
|
||||
<div className={styles.stepContent}>
|
||||
<div className={styles.stepIcon} style={{ background: `${step.color}15` }}>
|
||||
<span style={{ filter: `drop-shadow(0 0 10px ${step.color})` }}>{step.icon}</span>
|
||||
<div key={index} className={styles.stepItem}>
|
||||
{/* Number Circle Left */}
|
||||
<div className={styles.numberWrapper}>
|
||||
<div className={styles.numberCircle}>
|
||||
{step.number}
|
||||
</div>
|
||||
<h3 className={styles.stepTitle}>{step.title}</h3>
|
||||
<p className={styles.stepDescription}>{step.description}</p>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div className={styles.connector}>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
|
||||
{/* Content Capsule */}
|
||||
<div className={styles.cardCapsule}>
|
||||
<div className={styles.textContent}>
|
||||
<h3 className={styles.stepTitle}>{step.title}</h3>
|
||||
<p className={styles.stepDescription}>{step.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.iconCircle}>
|
||||
<Image
|
||||
src={step.icon}
|
||||
alt={step.title}
|
||||
width={31}
|
||||
height={31}
|
||||
className={styles.iconImage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Manual connecting line logic for visual flow if needed
|
||||
(CSS pseudo-element ::before handles main vertical line)
|
||||
*/}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.ctaBox}>
|
||||
<div className={styles.ctaContent}>
|
||||
<h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
|
||||
<p className={styles.ctaText}>Start your 14-day free trial today. No credit card required.</p>
|
||||
</div>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
|
||||
Get Started Free
|
||||
<span className={styles.arrow}>→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -4,23 +4,28 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent;
|
||||
background: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navbar.scrolled {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
.navbar.mobileOpen {
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow-md);
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -59,7 +64,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.navLinks {
|
||||
display: flex;
|
||||
}
|
||||
@ -129,7 +134,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.mobileMenuBtn {
|
||||
display: none;
|
||||
}
|
||||
@ -179,17 +184,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 2rem 0;
|
||||
padding: 2rem 0 4rem;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.mobileMenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileNavLink {
|
||||
display: block;
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
@ -209,3 +215,51 @@
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dropdownMenu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
padding: 1rem;
|
||||
min-width: 220px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.navItem:hover .dropdownMenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.dropdownItem {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--foreground-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdownItem:hover {
|
||||
background: var(--background-secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
@ -5,91 +5,171 @@ import { useState, useEffect } from 'react';
|
||||
import styles from './Navbar.module.css';
|
||||
|
||||
export default function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isMobileFeaturesOpen, setIsMobileFeaturesOpen] = useState(false);
|
||||
const [isMobileChannelsOpen, setIsMobileChannelsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
handleScroll();
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{ href: '/features', label: 'Features' },
|
||||
{ href: '/pricing', label: 'Pricing' },
|
||||
{ href: '/about', label: 'About' },
|
||||
{ href: '/docs', label: 'Docs' },
|
||||
{ href: '/blog', label: 'Blog' },
|
||||
{ href: '/contact', label: 'Contact' },
|
||||
];
|
||||
useEffect(() => {
|
||||
if (isMobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
}, [isMobileMenuOpen]);
|
||||
|
||||
return (
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
|
||||
<div className="container">
|
||||
<div className={styles.navContent}>
|
||||
{/* Logo */}
|
||||
<Link href="/" className={styles.logo}>
|
||||
<span className={styles.logoIcon}>🚀</span>
|
||||
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
||||
</Link>
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{
|
||||
href: '/features',
|
||||
label: 'Features',
|
||||
// dropdown: [
|
||||
// { href: '/features/publish', label: 'Publishing' },
|
||||
// { href: '/features/analyze', label: 'Analytics' },
|
||||
// { href: '/features/engage', label: 'Engagement' },
|
||||
// { href: '/features/create', label: 'Create' },
|
||||
// { href: '/features/start-page', label: 'Start Page' },
|
||||
// { href: '/features/ai-assistant', label: 'AI Assistant' },
|
||||
// ]
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
label: 'Channels',
|
||||
dropdown: [
|
||||
// { href: '/channels/facebook', label: 'Facebook' },
|
||||
{ href: '/channels/instagram', label: 'Instagram' },
|
||||
// { href: '/channels/youtube', label: 'YouTube' },
|
||||
// { href: '/channels/linkedin', label: 'LinkedIn' },
|
||||
// { href: '/channels/twitter', label: 'Twitter (X)' },
|
||||
// { href: '/channels/tiktok', label: 'TikTok' },
|
||||
// { href: '/channels/pinterest', label: 'Pinterest' },
|
||||
]
|
||||
},
|
||||
{ href: '/pricing', label: 'Pricing' },
|
||||
// { href: '/about', label: 'About' },
|
||||
// { href: '/careers', label: 'Careers' },
|
||||
{ href: '/resources', label: 'Resources' },
|
||||
// { href: '/contact', label: 'Contact' },
|
||||
];
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className={styles.navLinks}>
|
||||
{navLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href} className={styles.navLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
return (
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''} ${isMobileMenuOpen ? styles.mobileOpen : ''}`}>
|
||||
<div className="container">
|
||||
<div className={styles.navContent}>
|
||||
{/* Logo */}
|
||||
<Link href="/" className={styles.logo}>
|
||||
<img src="/logo.png" alt="SocialBuddy Logo" style={{ height: '45px', width: 'auto' }} />
|
||||
<span className={styles.logoText}><span className="gradient-text"></span></span>
|
||||
</Link>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className={styles.navActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
{/* Desktop Navigation */}
|
||||
<div className={styles.navLinks}>
|
||||
{navLinks.map((link) => (
|
||||
<div key={link.label} className={styles.navItem}>
|
||||
<Link href={link.href} className={styles.navLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
{link.dropdown && (
|
||||
<div className={styles.dropdownMenu}>
|
||||
{link.dropdown.map((subLink) => (
|
||||
<Link key={subLink.href} href={subLink.href} className={styles.dropdownItem}>
|
||||
{subLink.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className={styles.mobileMenuBtn}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
|
||||
</button>
|
||||
</div>
|
||||
{/* CTA Buttons */}
|
||||
<div className={styles.navActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className={styles.mobileMenu}>
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={styles.mobileNavLink}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className={styles.mobileActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className={styles.mobileMenuBtn}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className={styles.mobileMenu}>
|
||||
{navLinks.map((link) => (
|
||||
<div key={link.label}>
|
||||
{link.dropdown ? (
|
||||
<>
|
||||
<div
|
||||
className={styles.mobileNavLink}
|
||||
onClick={() => {
|
||||
if (link.label === 'Features') setIsMobileFeaturesOpen(!isMobileFeaturesOpen);
|
||||
if (link.label === 'Channels') setIsMobileChannelsOpen(!isMobileChannelsOpen);
|
||||
}}
|
||||
style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
{link.label}
|
||||
<span>
|
||||
{(link.label === 'Features' && isMobileFeaturesOpen) || (link.label === 'Channels' && isMobileChannelsOpen) ? '−' : '+'}
|
||||
</span>
|
||||
</div>
|
||||
{((link.label === 'Features' && isMobileFeaturesOpen) || (link.label === 'Channels' && isMobileChannelsOpen)) && (
|
||||
<div style={{ marginLeft: '1rem', borderLeft: '1px solid var(--border-color)', display: 'flex', flexDirection: 'column' }}>
|
||||
{link.dropdown.map((subLink) => (
|
||||
<Link
|
||||
key={subLink.href}
|
||||
href={subLink.href}
|
||||
className={styles.mobileNavLink}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
style={{ borderBottom: 'none', paddingLeft: '1rem', fontSize: '0.95rem' }}
|
||||
>
|
||||
{subLink.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
href={link.href}
|
||||
className={styles.mobileNavLink}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className={styles.mobileActions}>
|
||||
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
||||
Login
|
||||
</a>
|
||||
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,19 @@
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
background: transparent;
|
||||
-webkit-background-clip: unset;
|
||||
-webkit-text-fill-color: unset;
|
||||
background-clip: unset;
|
||||
color: #0072b1;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -43,7 +56,7 @@
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background: var(--background-secondary);
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
cursor: pointer;
|
||||
@ -87,148 +100,201 @@
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 900px) {
|
||||
.pricingGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.pricingCard {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: 2.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
border-radius: 30px;
|
||||
/* More rounded */
|
||||
padding: 2.5rem 2rem 1.5rem;
|
||||
/* Less padding bottom to accommodate footer */
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid var(--border-color);
|
||||
position: relative;
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
/* For clipping */
|
||||
min-height: 500px;
|
||||
/* Variants defined below */
|
||||
}
|
||||
|
||||
.pricingCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.pricingCard.popular {
|
||||
border-color: var(--primary);
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
|
||||
/* Gradients */
|
||||
/* Card 1: Blue (#1255d8) / Pink (#ec4899) */
|
||||
.cardVariant1 {
|
||||
background: linear-gradient(135deg, #ec4899 0%, #1255d8 100%);
|
||||
}
|
||||
|
||||
.pricingCard.popular:hover {
|
||||
box-shadow: var(--shadow-xl), var(--shadow-glow);
|
||||
/* Card 2: Yellow (#f9cd35) / Pink (#ec4899) */
|
||||
.cardVariant2 {
|
||||
background: linear-gradient(135deg, #f9cd35 0%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.popularBadge {
|
||||
/* Card 3: Blue (#1255d8) / Green (#6cb655) */
|
||||
.cardVariant3 {
|
||||
background: linear-gradient(135deg, #1255d8 0%, #6cb655 100%);
|
||||
}
|
||||
|
||||
/* Decorative circles in background */
|
||||
.pricingCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-md);
|
||||
top: -50px;
|
||||
right: -50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pricingCard::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.planHeader {
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.planName {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.planDescription {
|
||||
color: var(--foreground-secondary);
|
||||
margin-top: 6px;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.priceSection {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-display);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.period {
|
||||
font-size: 1rem;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.billedAnnually {
|
||||
font-size: 0.85rem;
|
||||
color: var(--foreground-secondary);
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: var(--foreground-secondary);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
/* Simple tick */
|
||||
}
|
||||
|
||||
/* Footer Section */
|
||||
.cardFooter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-top: auto;
|
||||
/* To handle the button cutout loop, we might need absolute positioning for button */
|
||||
position: relative;
|
||||
padding-top: 1rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.priceInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.priceAmount {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 5px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.period {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
margin-top: 5px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Button Styling - Specific "inset" look */
|
||||
.signupBtn {
|
||||
/* We want it flush with bottom right corner */
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
/* Bleed into padding area */
|
||||
right: -2rem;
|
||||
/* Bleed to edge */
|
||||
|
||||
background: #0072b1;
|
||||
/* Updated to requested Dark Blue #0072b1 */
|
||||
color: white;
|
||||
padding: 0.8rem 2rem 1.2rem 1.5rem;
|
||||
/* Extra padding bottom right */
|
||||
border-top-left-radius: 30px;
|
||||
/* The cutout shape */
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.signupBtn:hover {
|
||||
background: #0072b1;
|
||||
/* Keep dark hover or update? Let's keep dark fallback for hover state */
|
||||
padding-right: 2.2rem;
|
||||
/* Animate slightly */
|
||||
}
|
||||
|
||||
.btnArrow {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.guarantee {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
padding-bottom: 1px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.guarantee strong {
|
||||
color: var(--primary);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -9,51 +9,44 @@ export default function Pricing() {
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Free',
|
||||
description: 'Perfect for individuals getting started',
|
||||
price: { monthly: 0, annual: 0 },
|
||||
name: 'Basic Buddy',
|
||||
description: 'Perfect for individual creators.',
|
||||
price: { monthly: 10, annual: 100 },
|
||||
features: [
|
||||
'1 social media account',
|
||||
'10 scheduled posts per month',
|
||||
'Basic analytics',
|
||||
'Email support',
|
||||
'Mobile app access',
|
||||
'1 Social Profiles',
|
||||
'Basic Analytics',
|
||||
'Content Scheduling',
|
||||
'Standard Support',
|
||||
],
|
||||
cta: 'Get Started',
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
description: 'Ideal for growing businesses',
|
||||
price: { monthly: 29, annual: 290 },
|
||||
name: 'Standard Buddy',
|
||||
description: 'For growing businesses and influencers.',
|
||||
price: { monthly: 50, annual: 500 },
|
||||
features: [
|
||||
'5 social media accounts',
|
||||
'Unlimited scheduled posts',
|
||||
'Advanced analytics & reports',
|
||||
'Priority email support',
|
||||
'Team collaboration (3 members)',
|
||||
'AI content assistant',
|
||||
'Custom branding',
|
||||
'10 Social Profiles',
|
||||
'Advanced Analytics',
|
||||
'AI Content Generation',
|
||||
'Priority Support',
|
||||
'Team Collaboration (up to 3)',
|
||||
],
|
||||
cta: 'Start Free Trial',
|
||||
cta: 'Get Started',
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: 'Premium',
|
||||
description: 'For agencies and enterprises',
|
||||
price: { monthly: 99, annual: 990 },
|
||||
name: 'Premium Buddy',
|
||||
description: 'Ultimate solution for agencies.',
|
||||
price: { monthly: 150, annual: 1500 },
|
||||
features: [
|
||||
'Unlimited social media accounts',
|
||||
'Unlimited scheduled posts',
|
||||
'Enterprise analytics & insights',
|
||||
'24/7 priority support',
|
||||
'Unlimited team members',
|
||||
'Advanced AI features',
|
||||
'White-label solutions',
|
||||
'API access',
|
||||
'Dedicated account manager',
|
||||
'25 Social Profiles',
|
||||
'White Label Reports',
|
||||
'Dedicated Account Manager',
|
||||
'API Access',
|
||||
'Unlimited Team Members',
|
||||
],
|
||||
cta: 'Contact Sales',
|
||||
cta: 'Get Started',
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
@ -62,15 +55,12 @@ export default function Pricing() {
|
||||
<section className="section" id="pricing">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>💎</span>
|
||||
<span>Pricing</span>
|
||||
</div>
|
||||
<div className={styles.subTitle}>Pricing</div>
|
||||
<h2 className={styles.title}>
|
||||
Simple, <span className="gradient-text">Transparent</span> Pricing
|
||||
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 14-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}>
|
||||
@ -83,8 +73,8 @@ export default function Pricing() {
|
||||
<span className={`${styles.toggleSlider} ${isAnnual ? styles.annual : ''}`}></span>
|
||||
</button>
|
||||
<span className={isAnnual ? styles.active : ''}>
|
||||
Annual
|
||||
<span className={styles.saveBadge}>Save 17%</span>
|
||||
Yearly
|
||||
<span className={styles.saveBadge}>Save 20%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,31 +83,14 @@ export default function Pricing() {
|
||||
{plans.map((plan, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.pricingCard} ${plan.popular ? styles.popular : ''}`}
|
||||
className={`${styles.pricingCard} ${styles[`cardVariant${index + 1}`]}`}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{plan.popular && <div className={styles.popularBadge}>Most Popular</div>}
|
||||
|
||||
<div className={styles.planHeader}>
|
||||
<h3 className={styles.planName}>{plan.name}</h3>
|
||||
<p className={styles.planDescription}>{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.priceSection}>
|
||||
<div className={styles.price}>
|
||||
<span className={styles.currency}>$</span>
|
||||
<span className={styles.amount}>
|
||||
{isAnnual ? Math.floor(plan.price.annual / 12) : plan.price.monthly}
|
||||
</span>
|
||||
<span className={styles.period}>/mo</span>
|
||||
</div>
|
||||
{isAnnual && plan.price.annual > 0 && (
|
||||
<p className={styles.billedAnnually}>
|
||||
Billed ${plan.price.annual} annually
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.features}>
|
||||
{plan.features.map((feature, idx) => (
|
||||
<div key={idx} className={styles.feature}>
|
||||
@ -127,19 +100,26 @@ export default function Pricing() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://app.socialbuddy.co/signup"
|
||||
className={`btn ${plan.popular ? 'btn-primary' : 'btn-secondary'} ${styles.ctaButton}`}
|
||||
>
|
||||
{plan.cta}
|
||||
</a>
|
||||
<div className={styles.cardFooter}>
|
||||
<div className={styles.priceInfo}>
|
||||
<div className={styles.priceAmount}>
|
||||
<span className={styles.currency}>$</span>
|
||||
{isAnnual ? Math.floor(plan.price.annual) : plan.price.monthly}
|
||||
</div>
|
||||
<div className={styles.period}>per {isAnnual ? 'year' : 'month'}</div>
|
||||
</div>
|
||||
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
|
||||
Get Started <span className={styles.btnArrow}>▶</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.guarantee}>
|
||||
<p>
|
||||
<strong>💯 30-Day Money-Back Guarantee</strong> - Try risk-free. Cancel anytime.
|
||||
<strong>Start confidently and stop anytime.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
26
components/SafeImage.tsx
Normal file
26
components/SafeImage.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface SafeImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
||||
fallbackSrc?: string;
|
||||
}
|
||||
|
||||
export default function SafeImage({ src, alt, fallbackSrc, ...props }: SafeImageProps) {
|
||||
const [imgSrc, setImgSrc] = useState(src);
|
||||
|
||||
const handleError = () => {
|
||||
if (imgSrc !== fallbackSrc && fallbackSrc) {
|
||||
setImgSrc(fallbackSrc);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt={alt}
|
||||
onError={handleError}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
45
components/ScrollToTop.module.css
Normal file
45
components/ScrollToTop.module.css
Normal file
@ -0,0 +1,45 @@
|
||||
.scrollToTop {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.scrollToTop.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scrollToTop:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl), 0 0 20px rgba(236, 72, 153, 0.5);
|
||||
}
|
||||
|
||||
.scrollToTop:active {
|
||||
transform: translateY(0) scale(0.9);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.scrollToTop {
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
39
components/ScrollToTop.tsx
Normal file
39
components/ScrollToTop.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ArrowUp } from 'lucide-react';
|
||||
import styles from './ScrollToTop.module.css';
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const toggleVisibility = () => {
|
||||
if (window.scrollY > 300) {
|
||||
setIsVisible(true);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', toggleVisibility);
|
||||
return () => window.removeEventListener('scroll', toggleVisibility);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${styles.scrollToTop} ${isVisible ? styles.visible : ''}`}
|
||||
onClick={scrollToTop}
|
||||
aria-label="Scroll to top"
|
||||
>
|
||||
<ArrowUp size={24} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,334 +1,155 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from 'react';
|
||||
import styles from './SocialConnect.module.css';
|
||||
|
||||
// SVG Icons (Reusing existing ones)
|
||||
const Icons = {
|
||||
TikTok: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.03 5.84-.08 8.76-.08 2.18-.73 4.3-2.12 5.92-1.61 1.95-4.54 2.69-6.9 1.77-2.36-.92-4.1-3.32-4.04-5.91.03-3.03 2.39-5.75 5.51-6.07 1.1-.11 2.22-.03 3.32.09v4.11c-.53-.16-1.09-.23-1.64-.17-1.14.07-2.19.8-2.62 1.86-.54 1.34.02 2.96 1.29 3.65 1.37.75 3.19.46 4.19-.83.67-.88.66-2 .66-3.08V.02z" />
|
||||
</svg>
|
||||
),
|
||||
WhatsApp: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
|
||||
</svg>
|
||||
),
|
||||
Discord: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1892.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.1023.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1569 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z" />
|
||||
</svg>
|
||||
),
|
||||
YouTube: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
),
|
||||
Instagram: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
|
||||
</svg>
|
||||
),
|
||||
Facebook: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
||||
</svg>
|
||||
),
|
||||
Pinterest: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.399.165-1.495-.69-2.433-2.868-2.433-4.624 0-3.761 2.748-7.229 7.951-7.229 4.173 0 7.41 2.967 7.41 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
|
||||
</svg>
|
||||
),
|
||||
Reddit: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 1.249-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" />
|
||||
</svg>
|
||||
),
|
||||
Dribbble: (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm9.856-13.468C21.996 9.873 22 9.213 22 9.213c-2.736-.626-5.419-.607-7.85-2.002.396-.921 1.139-2.477 1.574-3.52C18.646 5.176 20.662 7.697 21.856 10.532zM14.075 2.502c-.463 1.106-1.206 2.768-1.573 3.659-2.012-.676-4.665-1.127-7.906-.949C6.012 3.12 8.847 1.838 12 1.838c.706 0 1.398.067 2.075.164zM3.461 6.574c3.085-.205 5.8 0 8.019.864C9.577 10.74 8.71 14.545 8.525 15.42a10.086 10.086 0 0 1-5.69-3.793 10.155 10.155 0 0 1 .626-5.053zM2.201 13.91c.219-.011 2.392-.158 5.626-3.856.126.657 1.295 4.887 5.067 7.424-2.217 3.018-5.748 3.901-5.798 3.913A10.15 10.15 0 0 1 2.201 13.91zm12.399 7.915c.036-.008 3.552-.801 5.485-3.828 2.062-1.353 3.327-3.414 3.72-4.148-1.53.684-4.223 1.6-7.373 1.05-.386 2.257-1.159 5.867-1.832 6.926zm1.206-8.528c3.033.455 5.814-.408 7.373-1.077.014.288.021.578.021.87 0 .5-.038.995-.109 1.482-.416.37-1.637 1.439-4.212 1.583a15.77 15.77 0 0 1-3.073-2.858z" />
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
|
||||
const socialPlatforms = [
|
||||
{ name: 'Bluesky', icon: '🦋', color: '#0085ff', delay: 0, symbol: 'B' },
|
||||
{ name: 'Facebook', icon: 'f', color: '#1877f2', delay: 0.1, symbol: 'F' },
|
||||
{ name: 'Google', icon: 'G', color: '#4285f4', delay: 0.2, symbol: 'G' },
|
||||
{ name: 'Instagram', icon: '📷', color: '#e4405f', delay: 0.3, symbol: 'I' },
|
||||
{ name: 'LinkedIn', icon: 'in', color: '#0a66c2', delay: 0.4, symbol: 'L' },
|
||||
{ name: 'Mastodon', icon: '🐘', color: '#6364ff', delay: 0.5, symbol: 'M' },
|
||||
{ name: 'Pinterest', icon: 'P', color: '#e60023', delay: 0.6, symbol: 'P' },
|
||||
{ name: 'Threads', icon: '@', color: '#000000', delay: 0.7, symbol: 'T' },
|
||||
{ name: 'TikTok', icon: '♪', color: '#000000', delay: 0.8, symbol: 'TT' },
|
||||
{ name: 'X', icon: '𝕏', color: '#000000', delay: 0.9, symbol: 'X' },
|
||||
{ name: 'YouTube', icon: '▶', color: '#ff0000', delay: 1.0, symbol: 'Y' },
|
||||
{ name: 'TikTok', icon: Icons.TikTok, color: '#000000', label: 'Video Marketing', desc: 'Create viral video content that engages millions of users daily.' },
|
||||
{ name: 'WhatsApp', icon: Icons.WhatsApp, color: '#25D366', label: 'Direct Messaging', desc: 'Connect directly with customers through their preferred chat app.' },
|
||||
{ name: 'Discord', icon: Icons.Discord, color: '#5865F2', label: 'Community Building', desc: 'Build and manage thriving communities around your brand.' },
|
||||
{ name: 'YouTube', icon: Icons.YouTube, color: '#FF0000', label: 'Content Strategy', desc: 'Leverage long-form video content to build authority and SEO.' },
|
||||
{ name: 'Instagram', icon: Icons.Instagram, color: '#E4405F', label: 'Visual Branding', desc: 'Showcase your brand aesthetics clearly and effectively.' },
|
||||
{ name: 'Facebook', icon: Icons.Facebook, color: '#1877F2', label: 'Social Advertising', desc: 'Target specific demographics with precision ads.' },
|
||||
{ name: 'Pinterest', icon: Icons.Pinterest, color: '#BD081C', label: 'Visual Discovery', desc: 'Drive traffic through inspiring visual content and pins.' },
|
||||
{ name: 'Reddit', icon: Icons.Reddit, color: '#FF4500', label: 'Niche Engagement', desc: 'Engage with highly specific interest groups authenticaly.' },
|
||||
{ name: 'Dribbble', icon: Icons.Dribbble, color: '#EA4C89', label: 'Design Showcase', desc: 'Demonstrate design expertise to a creative audience.' },
|
||||
];
|
||||
|
||||
interface Particle {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
life: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function SocialConnect() {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const [selectedPlatforms, setSelectedPlatforms] = useState<number[]>([]);
|
||||
const [particles, setParticles] = useState<Particle[]>([]);
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
// 3D Tilt Effect on Mouse Move
|
||||
const handleMouseMove = (e: React.MouseEvent, index: number) => {
|
||||
const card = cardRefs.current[index];
|
||||
if (!card) return;
|
||||
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = ((y - centerY) / centerY) * -15;
|
||||
const rotateY = ((x - centerX) / centerX) * 15;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px) scale(1.05)`;
|
||||
};
|
||||
|
||||
const handleMouseLeave = (index: number) => {
|
||||
const card = cardRefs.current[index];
|
||||
if (card) {
|
||||
card.style.transform = '';
|
||||
}
|
||||
setHoveredIndex(null);
|
||||
};
|
||||
|
||||
// Particle Explosion on Click
|
||||
const createParticles = (e: React.MouseEvent, color: string) => {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const newParticles: Particle[] = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const angle = (Math.PI * 2 * i) / 12;
|
||||
newParticles.push({
|
||||
x,
|
||||
y,
|
||||
vx: Math.cos(angle) * (2 + Math.random() * 3),
|
||||
vy: Math.sin(angle) * (2 + Math.random() * 3),
|
||||
life: 1,
|
||||
color,
|
||||
});
|
||||
}
|
||||
setParticles(prev => [...prev, ...newParticles]);
|
||||
};
|
||||
|
||||
const handlePlatformClick = (index: number, e: React.MouseEvent) => {
|
||||
const isSelected = selectedPlatforms.includes(index);
|
||||
|
||||
setSelectedPlatforms(prev =>
|
||||
prev.includes(index)
|
||||
? prev.filter(i => i !== index)
|
||||
: [...prev, index]
|
||||
);
|
||||
|
||||
// Create particle explosion
|
||||
createParticles(e, socialPlatforms[index].color);
|
||||
};
|
||||
|
||||
// Animate particles
|
||||
useEffect(() => {
|
||||
if (particles.length === 0) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setParticles(prev =>
|
||||
prev
|
||||
.map(p => ({
|
||||
...p,
|
||||
x: p.x + p.vx,
|
||||
y: p.y + p.vy,
|
||||
vy: p.vy + 0.2, // gravity
|
||||
life: p.life - 0.02,
|
||||
}))
|
||||
.filter(p => p.life > 0)
|
||||
);
|
||||
}, 16);
|
||||
|
||||
setActiveIndex((prev) => (prev + 1) % socialPlatforms.length);
|
||||
}, 3000);
|
||||
return () => clearInterval(interval);
|
||||
}, [particles]);
|
||||
}, []);
|
||||
|
||||
// Magnetic cursor effect
|
||||
const handleContainerMouseMove = (e: React.MouseEvent) => {
|
||||
setMousePos({ x: e.clientX, y: e.clientY });
|
||||
const getSlot = (index: number) => {
|
||||
const length = socialPlatforms.length;
|
||||
let diff = (index - activeIndex) % length;
|
||||
if (diff < 0) diff += length;
|
||||
|
||||
// Slot Mapping:
|
||||
// diff 0 -> Center (3)
|
||||
// diff 1 -> Right Mid (4)
|
||||
// diff 2 -> Right Entry (5)
|
||||
// diff length-1 -> Left Mid (2)
|
||||
// diff length-2 -> Left Exit (1)
|
||||
|
||||
if (diff === 0) return 3;
|
||||
if (diff === 1) return 4;
|
||||
if (diff === 2) return 5;
|
||||
if (diff === length - 1) return 2;
|
||||
if (diff === length - 2) return 1;
|
||||
return 0; // Hidden
|
||||
};
|
||||
|
||||
const activePlatform = socialPlatforms[activeIndex];
|
||||
|
||||
return (
|
||||
<section className={styles.connectSection} onMouseMove={handleContainerMouseMove}>
|
||||
<div className="container">
|
||||
{/* Animated Background Elements */}
|
||||
<div className={styles.backgroundAnimation}>
|
||||
<div className={styles.floatingOrb1}></div>
|
||||
<div className={styles.floatingOrb2}></div>
|
||||
<div className={styles.floatingOrb3}></div>
|
||||
<div className={styles.gridPattern}></div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<section className={styles.carouselSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<span className={styles.badge}>
|
||||
<span className={styles.badgeIcon}>🔗</span>
|
||||
<span>One Platform, All Networks</span>
|
||||
<span className={styles.badgePulse}></span>
|
||||
</span>
|
||||
<h2 className={styles.title}>
|
||||
Connect Your <span className={styles.highlight}>Favorite Accounts</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Seamlessly integrate all your social media platforms in one place.
|
||||
Manage, schedule, and analyze everything from a single dashboard.
|
||||
<div className={styles.subTitle}>Our Services</div>
|
||||
<h2 className={styles.title}><span className="gradient-text">Proven Solutions </span>That Drive <br /> Real Outcomes</h2>
|
||||
<p className={styles.description}>
|
||||
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>
|
||||
|
||||
{/* Interactive Platform Grid */}
|
||||
<div className={styles.platformsContainer} ref={containerRef}>
|
||||
<div className={styles.connectText}>
|
||||
<div className={styles.connectIconWrapper}>
|
||||
<div className={styles.connectIcon}>🌐</div>
|
||||
<div className={styles.iconRings}>
|
||||
<div className={styles.ring}></div>
|
||||
<div className={styles.ring}></div>
|
||||
<div className={styles.ring}></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Connect your<br /><span className={styles.gradientText}>favorite accounts</span></h3>
|
||||
<p className={styles.connectSubtext}>Click to select platforms</p>
|
||||
</div>
|
||||
<div className={styles.arcContainer}>
|
||||
<div className={styles.dashedArc}></div>
|
||||
|
||||
<div className={styles.platformsGrid}>
|
||||
{socialPlatforms.map((platform, index) => (
|
||||
{socialPlatforms.map((platform, index) => {
|
||||
const slot = getSlot(index);
|
||||
return (
|
||||
<div
|
||||
key={platform.name}
|
||||
ref={el => { cardRefs.current[index] = el; }}
|
||||
className={`${styles.platformCard} ${selectedPlatforms.includes(index) ? styles.selected : ''
|
||||
} ${hoveredIndex === index ? styles.hovered : ''}`}
|
||||
style={{
|
||||
animationDelay: `${platform.delay}s`,
|
||||
'--platform-color': platform.color
|
||||
} as React.CSSProperties}
|
||||
onMouseEnter={() => setHoveredIndex(index)}
|
||||
onMouseMove={(e) => handleMouseMove(e, index)}
|
||||
onMouseLeave={() => handleMouseLeave(index)}
|
||||
onClick={(e) => handlePlatformClick(index, e)}
|
||||
className={`${styles.iconWrapper} ${styles[`slot${slot}`]}`}
|
||||
style={{ '--color': platform.color } as React.CSSProperties}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
>
|
||||
{/* 3D Card Inner */}
|
||||
<div className={styles.cardInner}>
|
||||
<div className={styles.cardFront}>
|
||||
<div className={styles.platformIcon}>
|
||||
<span className={styles.iconEmoji} style={{ color: platform.color }}>
|
||||
{platform.icon}
|
||||
</span>
|
||||
<div className={styles.platformName}>{platform.name}</div>
|
||||
{selectedPlatforms.includes(index) && (
|
||||
<div className={styles.checkmark}>
|
||||
<span>✓</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Animated border */}
|
||||
<div className={styles.animatedBorder}></div>
|
||||
|
||||
{/* Shine effect */}
|
||||
<div className={styles.shineEffect}></div>
|
||||
</div>
|
||||
<div className={styles.iconCircle}>
|
||||
{platform.icon}
|
||||
</div>
|
||||
|
||||
<div className={styles.platformRipple}></div>
|
||||
<div className={styles.platformGlow}></div>
|
||||
|
||||
{/* Connection dots */}
|
||||
{selectedPlatforms.includes(index) && (
|
||||
<div className={styles.connectionDots}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Particle System */}
|
||||
<div className={styles.particleContainer}>
|
||||
{particles.map((particle, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={styles.particle}
|
||||
style={{
|
||||
left: `${particle.x}px`,
|
||||
top: `${particle.y}px`,
|
||||
backgroundColor: particle.color,
|
||||
opacity: particle.life,
|
||||
transform: `scale(${particle.life})`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Stats Bar */}
|
||||
<div className={styles.statsBar}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>🎯</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
<div className={styles.centerCard}>
|
||||
<div className={styles.cardIcon} style={{ color: activePlatform.color }}>
|
||||
{activePlatform.icon}
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statNumber}>11+</div>
|
||||
<div className={styles.statLabel}>Platforms Supported</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>⚡</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={`${styles.statNumber} ${styles.animated}`}>
|
||||
{selectedPlatforms.length > 0 ? selectedPlatforms.length : '0'}
|
||||
</div>
|
||||
<div className={styles.statLabel}>Selected Networks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}>
|
||||
<div className={styles.statIcon}>🚀</div>
|
||||
<div className={styles.statIconGlow}></div>
|
||||
</div>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statNumber}>1-Click</div>
|
||||
<div className={styles.statLabel}>Easy Integration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced CTA Section */}
|
||||
<div className={styles.ctaSection}>
|
||||
<div className={styles.ctaBackground}>
|
||||
<div className={styles.ctaOrb1}></div>
|
||||
<div className={styles.ctaOrb2}></div>
|
||||
</div>
|
||||
<div className={styles.ctaContent}>
|
||||
<h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
|
||||
<p className={styles.ctaText}>
|
||||
Connect all your accounts now and start managing them from one powerful dashboard.
|
||||
<h3 className={styles.cardTitle}>{activePlatform.label}</h3>
|
||||
<p className={styles.cardDesc}>
|
||||
{activePlatform.desc}
|
||||
</p>
|
||||
<Link href="/about">
|
||||
<button
|
||||
className={styles.readMoreBtn}
|
||||
style={{ backgroundColor: activePlatform.color }}
|
||||
>
|
||||
Read More
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.ctaButtons}>
|
||||
<button className="btn btn-primary btn-large">
|
||||
Get Started Free
|
||||
<span className={styles.arrow}>→</span>
|
||||
</button>
|
||||
<button className="btn btn-secondary btn-large">
|
||||
View All Features
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Connection Lines Animation */}
|
||||
<svg className={styles.connectionLines} viewBox="0 0 1200 400" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#ec4899" stopOpacity="0.6" />
|
||||
<stop offset="50%" stopColor="#a855f7" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
className={styles.animatedPath}
|
||||
d="M 0 200 Q 300 100 600 200 T 1200 200"
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
filter="url(#glow)"
|
||||
/>
|
||||
<path
|
||||
className={styles.animatedPath}
|
||||
d="M 0 250 Q 300 350 600 250 T 1200 250"
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
filter="url(#glow)"
|
||||
style={{ animationDelay: '1s' }}
|
||||
/>
|
||||
</svg>
|
||||
{/* <div className={styles.moreServicesBtn}>
|
||||
<div className={styles.plusIcon}>+</div>
|
||||
<span>More Services</span>
|
||||
<span className={styles.arrowIcon}>↗</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
125
components/StatsCounter.module.css
Normal file
125
components/StatsCounter.module.css
Normal file
@ -0,0 +1,125 @@
|
||||
/* Section: Transparent/Clean */
|
||||
.statsSection {
|
||||
padding: 4rem 0 4rem;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* Grid Container for separate cards */
|
||||
.statsGrid {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 2rem;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.statsGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
/* Distinct gap for separate cards */
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Individual Card Styling */
|
||||
.statItem {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
padding: 2rem 1.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.statItem:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Floating Icon Wrapper */
|
||||
.iconWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
animation: floatIcon 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Icon Background Blob */
|
||||
.iconBg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border-radius: 16px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
font-size: 1.75rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Text Content */
|
||||
.textContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.numberWrapper {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: baseline;
|
||||
gap: 0.1ch;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@keyframes floatIcon {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
134
components/StatsCounter.tsx
Normal file
134
components/StatsCounter.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import styles from './StatsCounter.module.css';
|
||||
|
||||
export default function StatsCounter() {
|
||||
const [hasAnimated, setHasAnimated] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
// Stats State
|
||||
const [counts, setCounts] = useState({
|
||||
users: 0,
|
||||
posts: 0,
|
||||
satisfaction: 0
|
||||
});
|
||||
|
||||
const targets = {
|
||||
users: 15, // 15K+
|
||||
posts: 2, // 2M+
|
||||
satisfaction: 99 // 99%
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && !hasAnimated) {
|
||||
setHasAnimated(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [hasAnimated]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasAnimated) return;
|
||||
|
||||
const duration = 2000; // 2s
|
||||
const steps = 60;
|
||||
const intervalTime = duration / steps;
|
||||
|
||||
let currentStep = 0;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
currentStep++;
|
||||
const progress = Math.min(currentStep / steps, 1);
|
||||
|
||||
// Easing function for smooth count
|
||||
const easeOutQuart = (x: number) => 1 - Math.pow(1 - x, 4);
|
||||
const value = easeOutQuart(progress);
|
||||
|
||||
setCounts({
|
||||
users: Math.floor(targets.users * value),
|
||||
posts: Math.floor(targets.posts * value * 10) / 10, // Keep decimal for smaller numbers if needed, here integers roughly
|
||||
satisfaction: Math.floor(targets.satisfaction * value)
|
||||
});
|
||||
|
||||
if (currentStep >= steps) clearInterval(timer);
|
||||
}, intervalTime);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [hasAnimated]);
|
||||
|
||||
return (
|
||||
<section className={styles.statsSection} ref={sectionRef}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.statsGrid}>
|
||||
{/* Stat 1 */}
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.iconBg}></div>
|
||||
<Image
|
||||
src="/images/home/growing.webp"
|
||||
alt="Growing Community"
|
||||
width={38}
|
||||
height={44}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.users : 0}k+
|
||||
</div>
|
||||
<p className={styles.label}>Growing Community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 2 */}
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.iconBg}></div>
|
||||
<Image
|
||||
src="/images/home/content.webp"
|
||||
alt="Content Published"
|
||||
width={38}
|
||||
height={44}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? '2' : '0'}M+
|
||||
</div>
|
||||
<p className={styles.label}>Content Published</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 3 */}
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.iconBg}></div>
|
||||
<Image
|
||||
src="/images/home/approval.webp"
|
||||
alt="Customer Approval"
|
||||
width={38}
|
||||
height={44}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.satisfaction : 0}%
|
||||
</div>
|
||||
<p className={styles.label}>Customer Approval</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
69
components/TestimonialSlider.tsx
Normal file
69
components/TestimonialSlider.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import styles from "@/app/features/[slug]/feature-page.module.css";
|
||||
import SafeImage from "./SafeImage";
|
||||
import { Star } from "lucide-react";
|
||||
|
||||
interface Testimonial {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
rating: number;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export default function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % testimonials.length);
|
||||
}, 5000); // 5 seconds per slide
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
const current = testimonials[currentIndex];
|
||||
|
||||
return (
|
||||
<div className={styles.testimonialSliderContainer}>
|
||||
<div className={styles.testSliderContent}>
|
||||
<div className={styles.testStars}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
fill={i < current.rating ? "#FFB800" : "none"}
|
||||
stroke={i < current.rating ? "#FFB800" : "#CBD5E1"}
|
||||
size={20}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<blockquote className={styles.testQuoteFade}>
|
||||
"{current.quote}"
|
||||
</blockquote>
|
||||
<div className={styles.testAuthorBlock}>
|
||||
<SafeImage
|
||||
src={current.image}
|
||||
alt={current.author}
|
||||
className={styles.testAuthorAvatar}
|
||||
fallbackSrc={`https://placehold.co/100x100/png?text=${current.author.charAt(0)}`}
|
||||
/>
|
||||
<div className={styles.testAuthorInfo}>
|
||||
<h4>{current.author}</h4>
|
||||
<span>{current.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.sliderDots}>
|
||||
{testimonials.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className={`${styles.dot} ${idx === currentIndex ? styles.activeDot : ""}`}
|
||||
onClick={() => setCurrentIndex(idx)}
|
||||
aria-label={`Go to slide ${idx + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,224 +1,346 @@
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
.testimonialSection {
|
||||
padding: 4rem 0;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to right, #f9fafb 50%, #ffffff 50%);
|
||||
/* Subtle separation if needed */
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(59, 130, 246, 0.1));
|
||||
border: 1px solid rgba(236, 72, 153, 0.2);
|
||||
border-radius: 50px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
.layoutContainer {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonialSlider {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.testimonialTrack {
|
||||
display: flex;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.testimonialCard {
|
||||
min-width: 100%;
|
||||
padding: 3rem 2rem;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonialCard::before {
|
||||
content: '"';
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 2rem;
|
||||
font-size: 8rem;
|
||||
font-family: Georgia, serif;
|
||||
color: var(--primary);
|
||||
opacity: 0.1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.star {
|
||||
animation: twinkle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.star:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.star:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.star:nth-child(4) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.star:nth-child(5) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.testimonialText {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.8;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
padding: 0 2rem;
|
||||
gap: 0;
|
||||
/* No gap because we force overlap */
|
||||
}
|
||||
|
||||
.authorImage {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
/* LEFT SIDE CARD */
|
||||
.leftCard {
|
||||
flex: 0 0 450px;
|
||||
background: var(--primary);
|
||||
/* Assuming green/primary color */
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
border-radius: 32px;
|
||||
padding: 4rem 3rem;
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
/* Above slider */
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
/* Make it overlap the slider area */
|
||||
margin-right: -40px;
|
||||
overflow: hidden;
|
||||
/* For pattern */
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.authorInfo {
|
||||
flex: 1;
|
||||
/* Decorative pattern roughly matching image curves */
|
||||
.leftCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: -50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border: 30px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.authorName {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
.leftCard::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
right: -80px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
border: 30px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.authorRole {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
.cardContent {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dots {
|
||||
.cardTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 90%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.miniStats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
.statBadge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.statBadge strong {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.statBadge span {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.readMoreBtn {
|
||||
background: white;
|
||||
color: var(--primary);
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
background: var(--primary);
|
||||
opacity: 0.7;
|
||||
.readMoreBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.activeDot {
|
||||
background: var(--primary);
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
/* RIGHT SIDE SLIDER */
|
||||
.sliderContainer {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* Below Left Card */
|
||||
overflow: hidden;
|
||||
padding: 4rem 0 4rem 6rem;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
.sliderTrack {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 4rem;
|
||||
padding-top: 3rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
.sliderCard {
|
||||
flex: 0 0 320px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #edf2f7;
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
.sliderCard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
.cardHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.testimonialCard {
|
||||
padding: 4rem 3rem;
|
||||
.userImage {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f0f4f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.userInfo h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.userCompany {
|
||||
font-size: 0.85rem;
|
||||
color: #718096;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rating {
|
||||
font-size: 0.75rem;
|
||||
color: #fbbf24;
|
||||
/* yellow-400 */
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.reviewTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.reviewText {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: #4a5568;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* NAVIGATION */
|
||||
.sliderNav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
justify-content: flex-start;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #cbd5e0;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.navBtn:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
.cardBgPattern {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.layoutContainer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.testimonialText {
|
||||
font-size: 1.5rem;
|
||||
.leftCard {
|
||||
flex: none;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
padding: 0;
|
||||
mask-image: none;
|
||||
overflow: hidden;
|
||||
/* Restore hidden overflow for slider */
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sliderTrack {
|
||||
padding-bottom: 2rem;
|
||||
/* Re-enable JS slider */
|
||||
/* overflow-x: auto; */
|
||||
/* transform: none !important; */
|
||||
}
|
||||
|
||||
.sliderCard {
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.testimonialCard {
|
||||
padding: 5rem 6rem;
|
||||
@media (max-width: 480px) {
|
||||
.layoutContainer {
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent container burst */
|
||||
}
|
||||
|
||||
.leftCard {
|
||||
padding: 2.5rem 1.5rem;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sliderTrack {
|
||||
/* Ensure track aligns well */
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sliderCard {
|
||||
flex: 0 0 260px;
|
||||
/* Slightly smaller card for small mobile */
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Stack stats one by one on mobile */
|
||||
.miniStats {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.statBadge {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,137 +1,258 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import styles from './Testimonials.module.css';
|
||||
|
||||
export default function Testimonials() {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: 'Sarah Johnson',
|
||||
role: 'Marketing Director',
|
||||
company: 'TechFlow Inc.',
|
||||
image: '👩💼',
|
||||
rating: 5,
|
||||
text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers. We\'ve seen a 300% increase in engagement!',
|
||||
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: '/images/home/testimonial-1.webp'
|
||||
},
|
||||
{
|
||||
name: 'Michael Chen',
|
||||
role: 'Content Creator',
|
||||
company: 'Digital Nomad',
|
||||
image: '👨💻',
|
||||
rating: 5,
|
||||
text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful, and the unified inbox is a lifesaver.',
|
||||
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: '/images/home/testimonial-2.webp'
|
||||
},
|
||||
{
|
||||
name: 'Emily Rodriguez',
|
||||
role: 'Social Media Manager',
|
||||
company: 'BrandBoost Agency',
|
||||
image: '👩🎨',
|
||||
rating: 5,
|
||||
text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features and approval workflows have streamlined our entire process. Highly recommended!',
|
||||
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: '/images/home/testimonial-3.webp'
|
||||
},
|
||||
{
|
||||
name: 'David Park',
|
||||
role: 'CEO',
|
||||
company: 'StartupHub',
|
||||
image: '👨💼',
|
||||
rating: 5,
|
||||
text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy. ROI has improved significantly since switching to SocialBuddy.',
|
||||
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: '/images/home/testimonial-4.webp'
|
||||
},
|
||||
{
|
||||
name: 'Lisa Thompson',
|
||||
role: 'Influencer',
|
||||
company: 'Lifestyle & Travel',
|
||||
image: '👩🦰',
|
||||
rating: 5,
|
||||
text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance, and the best time to post feature ensures maximum reach. It\'s perfect for influencers!',
|
||||
},
|
||||
{
|
||||
name: 'James Wilson',
|
||||
role: 'E-commerce Manager',
|
||||
company: 'ShopSmart',
|
||||
image: '👨🏫',
|
||||
rating: 5,
|
||||
text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing for our product launches. Customer engagement has never been better!',
|
||||
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: '/images/home/testimonial-5.webp'
|
||||
},
|
||||
];
|
||||
|
||||
// Clone the first few items to create the infinite illusion
|
||||
// We need enough clones to fill the visible area. 4 is safe.
|
||||
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(() => {
|
||||
setActiveIndex((current) => (current + 1) % testimonials.length);
|
||||
}, 5000);
|
||||
handleNext();
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
}, [activeIndex, isResetting]); // Re-create interval if state changes to avoid stale closures, though functional update handles it.
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
setActiveIndex(index);
|
||||
const handleNext = () => {
|
||||
if (isResetting) return;
|
||||
|
||||
setActiveIndex((prev) => {
|
||||
// If already at totalOriginal, wait for reset effect
|
||||
if (prev >= totalOriginal) return prev;
|
||||
return prev + 1;
|
||||
});
|
||||
};
|
||||
|
||||
// Handle seamless reset
|
||||
useEffect(() => {
|
||||
if (activeIndex === totalOriginal) {
|
||||
// We have just slid TO the first cloned item (visually identical to index 0)
|
||||
// Wait for transition to finish, then snap back to real 0
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setIsResetting(true); // Disable transition
|
||||
setActiveIndex(0); // Jump to 0
|
||||
|
||||
// Re-enable transition after a brief moment to allow DOM update
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setIsResetting(false);
|
||||
});
|
||||
});
|
||||
}, 500); // Must match CSS transition duration
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
};
|
||||
}, [activeIndex, totalOriginal]);
|
||||
|
||||
const slideNext = () => {
|
||||
if (isResetting) return;
|
||||
if (activeIndex >= totalOriginal) return; // Wait for reset
|
||||
setActiveIndex(prev => prev + 1);
|
||||
};
|
||||
|
||||
const slidePrev = () => {
|
||||
if (isResetting) return;
|
||||
if (activeIndex === 0) {
|
||||
// Jump to end clone without transition, then slide back
|
||||
setIsResetting(true);
|
||||
setActiveIndex(totalOriginal);
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setIsResetting(false);
|
||||
setActiveIndex(totalOriginal - 1);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setActiveIndex(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="section" id="testimonials">
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.badge}>
|
||||
<span>⭐</span>
|
||||
<span>Testimonials</span>
|
||||
<section className={styles.testimonialSection} id="testimonials">
|
||||
<div className={styles.layoutContainer}>
|
||||
{/* Left Side Static Card - High Z-Index */}
|
||||
<div className={styles.leftCard}>
|
||||
<div className={styles.cardContent}>
|
||||
<h2 className={styles.cardTitle}>
|
||||
Unlock Your Growth Opportunities
|
||||
</h2>
|
||||
<p className={styles.cardDescription}>
|
||||
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}>
|
||||
<div className={styles.statBadge}>
|
||||
<Image
|
||||
src="/images/home/active-members.webp"
|
||||
alt="Unified Message Center"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
<div>
|
||||
<strong>10,000+</strong>
|
||||
<span>Active Members</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statBadge}>
|
||||
<Image
|
||||
src="/images/home/user-satisfaction.webp"
|
||||
alt="Unified Message Center"
|
||||
width={29}
|
||||
height={29}
|
||||
/>
|
||||
<div>
|
||||
<strong>4.9/5</strong>
|
||||
<span>User Satisfaction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className={styles.readMoreBtn}>
|
||||
View Customer Stories
|
||||
</button>
|
||||
</div>
|
||||
<h2 className={styles.title}>
|
||||
Loved by <span className="gradient-text">Thousands</span> of Users
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Don't just take our word for it. See what our customers have to say about SocialBuddy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.testimonialSlider}>
|
||||
<div className={styles.testimonialTrack} style={{ transform: `translateX(-${activeIndex * 100}%)` }}>
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className={styles.testimonialCard}>
|
||||
<div className={styles.stars}>
|
||||
{[...Array(testimonial.rating)].map((_, i) => (
|
||||
<span key={i} className={styles.star}>⭐</span>
|
||||
))}
|
||||
</div>
|
||||
<p className={styles.testimonialText}>"{testimonial.text}"</p>
|
||||
<div className={styles.author}>
|
||||
<div className={styles.authorImage}>{testimonial.image}</div>
|
||||
<div className={styles.authorInfo}>
|
||||
<div className={styles.authorName}>{testimonial.name}</div>
|
||||
<div className={styles.authorRole}>
|
||||
{testimonial.role} at {testimonial.company}
|
||||
</div>
|
||||
{/* Right Side Slider - Lower Z-Index, moves behind Left Card */}
|
||||
<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 * cardWidth}px))`,
|
||||
transition: isResetting ? 'none' : 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)'
|
||||
}}
|
||||
>
|
||||
{extendedTestimonials.map((t, i) => (
|
||||
<div key={i} className={styles.sliderCard}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className={styles.userImage}>
|
||||
<Image
|
||||
src={t.image}
|
||||
alt="User"
|
||||
width={42}
|
||||
height={48}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.userInfo}>
|
||||
<h4>{t.name}</h4>
|
||||
<span className={styles.userCompany}>{t.role}</span>
|
||||
<div className={styles.rating}>⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 className={styles.reviewTitle}>{t.reviewTitle}</h5>
|
||||
<p className={styles.reviewText}>{t.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.dots}>
|
||||
{testimonials.map((_, index) => (
|
||||
{/* Navigation Arrows */}
|
||||
<div className={styles.sliderNav}>
|
||||
<button
|
||||
key={index}
|
||||
className={`${styles.dot} ${index === activeIndex ? styles.activeDot : ''}`}
|
||||
onClick={() => handleDotClick(index)}
|
||||
aria-label={`Go to testimonial ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.stats}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>4.9/5</div>
|
||||
<div className={styles.statLabel}>Average Rating</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>10,000+</div>
|
||||
<div className={styles.statLabel}>Happy Customers</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statNumber}>98%</div>
|
||||
<div className={styles.statLabel}>Satisfaction Rate</div>
|
||||
className={styles.navBtn}
|
||||
onClick={slidePrev}
|
||||
aria-label="Previous testimonial"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
className={styles.navBtn}
|
||||
onClick={slideNext}
|
||||
aria-label="Next testimonial"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
322
components/WhyChooseUs.module.css
Normal file
322
components/WhyChooseUs.module.css
Normal file
@ -0,0 +1,322 @@
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 5rem;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #0072b1;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--foreground);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Bento Grid Layout */
|
||||
.bentoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.bentoItem {
|
||||
background: var(--card-bg, rgba(255, 255, 255, 0.5));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bentoItem:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
/* Very light gray for icon bg */
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bentoItem h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.bentoItem p {
|
||||
color: var(--foreground-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Desktop Grid Configuration */
|
||||
@media (min-width: 1024px) {
|
||||
.bentoGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 320px);
|
||||
/* Fixed height rows for bento look */
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.itemLarge {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Specific positioning if needed:
|
||||
Row 1: Large (AI) | Small (Community)
|
||||
Row 2: Small (Integrations) | Large (Analytics)
|
||||
*/
|
||||
.bentoItem:nth-child(2) {
|
||||
/* Community */
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.bentoItem:nth-child(3) {
|
||||
/* Integrations */
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.bentoItem:nth-child(4) {
|
||||
/* Analytics */
|
||||
grid-column: 2 / span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Grid */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.bentoGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.itemLarge {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Visuals Styling */
|
||||
|
||||
/* AI Visual */
|
||||
.visualAi {
|
||||
margin-top: 2rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.typingBox {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.typingDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.typingDot:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.typingDot:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.aiMessage {
|
||||
font-size: 0.875rem;
|
||||
color: var(--foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Community Visual */
|
||||
.visualCommunity {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatarStack {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
/* offset for negative margins */
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid white;
|
||||
background: #ccc;
|
||||
margin-left: -15px;
|
||||
/* Placeholder gradients */
|
||||
}
|
||||
|
||||
.avatar:nth-child(1) {
|
||||
background: #FFD700;
|
||||
}
|
||||
|
||||
.avatar:nth-child(2) {
|
||||
background: #FF6B6B;
|
||||
}
|
||||
|
||||
.avatar:nth-child(3) {
|
||||
background: #4ECDC4;
|
||||
}
|
||||
|
||||
|
||||
/* Integrations Visual */
|
||||
.visualIntegrations {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.logoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.miniLogo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
|
||||
/* Analytics Visual */
|
||||
.visualAnalytics {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
height: 60px;
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid var(--border-color);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.graphBar {
|
||||
width: 30px;
|
||||
background: linear-gradient(to top, var(--primary), var(--secondary));
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
|
||||
.graphBar:nth-child(1) {
|
||||
height: 40%;
|
||||
animation: grow 2s infinite alternate;
|
||||
}
|
||||
|
||||
.graphBar:nth-child(2) {
|
||||
height: 70%;
|
||||
animation: grow 2.5s infinite alternate;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.graphBar:nth-child(3) {
|
||||
height: 90%;
|
||||
animation: grow 1.8s infinite alternate;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
from {
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
}
|
||||
94
components/WhyChooseUs.tsx
Normal file
94
components/WhyChooseUs.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
'use client';
|
||||
|
||||
import styles from './WhyChooseUs.module.css';
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<div className="container">
|
||||
<div className={styles.header}>
|
||||
<div className={styles.subTitle}>Why Choose Us</div>
|
||||
<h2 className={styles.title}>Why <span className="gradient-text">SocialBuddy?</span></h2>
|
||||
<p className={styles.subtitle}>
|
||||
Don't just manage your social media—master it. Join thousands of creators and businesses who use SocialBuddy to grow faster.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.bentoGrid}>
|
||||
{/* Item 1: AI Assistant (Large) */}
|
||||
<div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.aiCard}`}>
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>✨</span>
|
||||
</div>
|
||||
<h3>The Ultimate AI Assistant</h3>
|
||||
<p>Generate captions, hashtags, and creative ideas in seconds with our context-aware AI.</p>
|
||||
</div>
|
||||
<div className={styles.visualAi}>
|
||||
<div className={styles.typingBox}>
|
||||
<span className={styles.typingDot}></span>
|
||||
<span className={styles.typingDot}></span>
|
||||
<span className={styles.typingDot}></span>
|
||||
</div>
|
||||
<div className={styles.aiMessage}>Content generated! 🚀</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item 2: Community (Small) */}
|
||||
<div className={styles.bentoItem}>
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>👥</span>
|
||||
</div>
|
||||
<h3>Trusted by 50K+</h3>
|
||||
<p>Join a community of serious creators.</p>
|
||||
</div>
|
||||
<div className={styles.visualCommunity}>
|
||||
<div className={styles.avatarStack}>
|
||||
<div className={styles.avatar}></div>
|
||||
<div className={styles.avatar}></div>
|
||||
<div className={styles.avatar}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item 3: Integrations (Small) */}
|
||||
<div className={styles.bentoItem}>
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>🔌</span>
|
||||
</div>
|
||||
<h3>Seamless Sync</h3>
|
||||
<p>Works with your favorite tools.</p>
|
||||
</div>
|
||||
<div className={styles.visualIntegrations}>
|
||||
<div className={styles.logoGrid}>
|
||||
<div className={styles.miniLogo}></div>
|
||||
<div className={styles.miniLogo}></div>
|
||||
<div className={styles.miniLogo}></div>
|
||||
<div className={styles.miniLogo}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item 4: Analytics (Large) */}
|
||||
<div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.analyticsCard}`}>
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>📈</span>
|
||||
</div>
|
||||
<h3>Data-Driven Insights</h3>
|
||||
<p>Make decisions based on real-time performance data, not guesswork. Track growth instantly.</p>
|
||||
</div>
|
||||
<div className={styles.visualAnalytics}>
|
||||
<div className={styles.graphBar}></div>
|
||||
<div className={styles.graphBar}></div>
|
||||
<div className={styles.graphBar}></div>
|
||||
<div className={styles.graphLine}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
329
data/channels.ts
Normal file
329
data/channels.ts
Normal file
@ -0,0 +1,329 @@
|
||||
|
||||
export interface ChannelDetail {
|
||||
title: string;
|
||||
text: string;
|
||||
image: string;
|
||||
reverse: boolean;
|
||||
}
|
||||
|
||||
export interface ChannelBenefit {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface ChannelAbout {
|
||||
title: string;
|
||||
description: string;
|
||||
subTitle: string;
|
||||
bulletPoints: { text: string; icon: string }[];
|
||||
mainImage: string;
|
||||
subImage: string;
|
||||
}
|
||||
|
||||
export interface ChannelTestimonial {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
rating: number; // 1-5
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface ChannelFAQ {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface Channel {
|
||||
slug: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
heroImage: string;
|
||||
description: string;
|
||||
about: ChannelAbout;
|
||||
benefits: ChannelBenefit[];
|
||||
testimonials: ChannelTestimonial[];
|
||||
testimonialStaticImage?: string;
|
||||
faqs: ChannelFAQ[];
|
||||
details: ChannelDetail[];
|
||||
}
|
||||
|
||||
export const channels: Channel[] = [
|
||||
{
|
||||
slug: 'facebook',
|
||||
title: 'Facebook',
|
||||
subtitle: 'Dominate Your Strategy on the World\'s Largest Social Network',
|
||||
heroImage: '/images/channels/facebook-hero.png',
|
||||
description: 'Maximize reach, engage communities, and drive conversions with SocialBuddy’s all-in-one Facebook management suite. Build meaningful connections at scale.',
|
||||
about: {
|
||||
title: 'Comprehensive Facebook Solutions for Modern Brands',
|
||||
subTitle: 'Scale & Succeed',
|
||||
description: 'Navigate the complexities of Facebook marketing with ease. Whether you manage a single page or a portfolio of brands, SocialBuddy streamlines your workflow. From scheduling collaborative posts to moderating diverse communities and analyzing ad ROI, we empower you to turn casual scrollers into loyal customers without the burnout.',
|
||||
bulletPoints: [
|
||||
{ text: 'Auto-Schedule Posts & Reels', icon: 'Calendar' },
|
||||
{ text: 'Unified Inbox & Moderation', icon: 'Inbox' },
|
||||
{ text: 'Deep Audience Analytics', icon: 'BarChart' },
|
||||
{ text: 'Competitor Benchmarking', icon: 'Trophy' }
|
||||
],
|
||||
mainImage: '/images/channels/facebook-about-main.jpg',
|
||||
subImage: '/images/channels/facebook-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Smart Post Scheduling', description: 'Optimize publish times with AI to ensure your content lands exactly when your audience is online.', icon: 'Zap' },
|
||||
{ title: 'Unified Community Management', description: 'Never miss a comment or message. Manage all interactions from a single, intuitive dashboard.', icon: 'Inbox' },
|
||||
{ title: 'Video & Reels Optimization', description: 'Upload, schedule, and analyze video content designed to capture attention in the feed.', icon: 'Smartphone' },
|
||||
{ title: 'ROI-Driven Analytics', description: 'Prove the value of your efforts with customizable reports that track engagement and conversions.', icon: 'BarChart' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "SocialBuddy’s unified inbox saved my team 15 hours a week. We no longer toggle between tabs to answer messages; it's all right there.", author: "Elena Rodriguez", role: "VP of Operations", rating: 5, image: "/images/testimonials/elena.jpg" },
|
||||
{ quote: "The bulk scheduling feature for our 20+ franchise locations is flawless. What used to take days now takes minutes.", author: "Marcus Thorn", role: "Agency Director", rating: 5, image: "/images/testimonials/marcus.jpg" },
|
||||
{ quote: "Finally, analytics that make sense. I can show my clients exactly how our campaigns are driving revenue, not just likes.", author: "Sarah Jenkins", role: "Digital Marketing Lead", rating: 5, image: "/images/testimonials/sarah-j.jpg" },
|
||||
{ quote: "Managing our community groups has never been easier. The auto-moderation tools keep our discussions healthy and spam-free.", author: "David Kim", role: "Community Manager", rating: 4, image: "/images/testimonials/david-k.jpg" },
|
||||
{ quote: "A must-have for any serious Facebook marketer. The interface is clean, fast, and reliable.", author: "Jessica Priest", role: "Small Business Owner", rating: 5, image: "/images/testimonials/jessica.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "Can I schedule Facebook Groups?", answer: "Yes, you can schedule posts to any Facebook Groups where you are an admin." },
|
||||
{ question: "Does it support Facebook Reels?", answer: "Absolutely! You can schedule and auto-publish Reels directly." },
|
||||
{ question: "Can I mention pages in posts?", answer: "Yes, user and page tagging is supported in the composer." },
|
||||
{ question: "How does the Unified Inbox work?", answer: "It aggregates comments, messages, and mentions from all your connected pages into a single stream." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'instagram',
|
||||
title: 'Instagram',
|
||||
subtitle: 'Transform Your Feed into a Visual Masterpiece',
|
||||
heroImage: '/images/channels/instagram-hero.png',
|
||||
description: 'Elevate your brand aesthetics, automate Stories and Reels, and grow your following with SocialBuddy’s powerful visual planning tools.',
|
||||
about: {
|
||||
title: 'The Ultimate Toolkit for Instagram Growth',
|
||||
subTitle: 'Design & Engage',
|
||||
description: 'Crafting a stunning Instagram presence requires more than just good photos. SocialBuddy provides the strategic edge you need—from visual grid planning and hashtag research to automated Story publishing and shoppable tags. Engage your audience authentically and watch your follower count soar.',
|
||||
bulletPoints: [
|
||||
{ text: 'Visual Grid Planner', icon: 'Layout' },
|
||||
{ text: 'Auto-Publish Reels & Stories', icon: 'Smartphone' },
|
||||
{ text: 'Hashtag Strategy', icon: 'Repeat' },
|
||||
{ text: 'Shoppable Integrations', icon: 'Trophy' }
|
||||
],
|
||||
mainImage: '/images/channels/instagram/channel.webp',
|
||||
subImage: '/images/channels/instagram-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Visual Grid Planner', description: 'Curate a cohesive brand aesthetic by dragging and dropping posts to preview your grid before publishing.', icon: 'Layout' },
|
||||
{ title: 'Story & Reels Scheduler', description: 'Maintain an active presence 24/7 by scheduling ephemeral and short-form video content in advance.', icon: 'Smartphone' },
|
||||
{ title: 'Strategic Hashtag Manager', description: 'Discover high-performing hashtags and save sets to maximize your content’s discoverability.', icon: 'ShieldCheck' },
|
||||
{ title: 'Engagement Analytics', description: 'Understand what resonates with deep dives into audience demographics, reach, and interaction rates.', icon: 'BarChart' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "The visual grid planner is a lifesaver. I can finally see exactly how my feed will look next week before I commit to posting.", author: "Chloe Vance", role: "Creative Director", rating: 5, image: "/images/channels/instagram/testimonial-1.webp" },
|
||||
{ quote: "Auto-publishing Reels without the 'push notification' dance? Yes, please. This feature alone is worth the subscription.", author: "Tyler O'Neil", role: "Content Creator", rating: 5, image: "/images/channels/instagram/testimonial-2.webp" },
|
||||
{ quote: "We’ve seen a 40% increase in engagement since we started using the hashtag recommendations. It really works.", author: "Priya Patel", role: "Social Strategist", rating: 5, image: "/images/channels/instagram/testimonial-3.webp" },
|
||||
{ quote: "My clients love the approval workflow. They can comment on the grid preview directly, which speeds up our sign-off process immensely.", author: "Jordan Lee", role: "Agency Founder", rating: 5, image: "/images/channels/instagram/testimonial-4.webp" },
|
||||
{ quote: "Seamless integration with our Shopify store. Tagging products in scheduled posts has streamlined our sales funnel.", author: "Morgan St. James", role: "E-commerce Manager", rating: 4, image: "/images/channels/instagram/testimonial-5.webp" }
|
||||
],
|
||||
testimonialStaticImage: '/images/channels/instagram/instagram.webp',
|
||||
faqs: [
|
||||
{ question: "Do you support Collaboration posts?", answer: "Currently, we support scheduling standard posts, carousels, and Reels. Collab posts must be done natively." },
|
||||
{ question: "Can I schedule the First Comment?", answer: "Yes, you can draft hashtags in your first comment to keep your caption clean." },
|
||||
{ question: "Is it safe for my account?", answer: "Yes, we use the official Instagram Graph API, so your account is 100% safe." },
|
||||
{ question: "Can I tag products?", answer: "Yes, product tagging is available for eligible accounts." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'linkedin',
|
||||
title: 'LinkedIn',
|
||||
subtitle: 'Build Your Professional Brand',
|
||||
heroImage: '/images/channels/linkedin-hero.png',
|
||||
description: 'Establish thought leadership and engage with your professional network on LinkedIn.',
|
||||
about: {
|
||||
title: 'Professional Growth & Networking',
|
||||
subTitle: 'Lead & Connect',
|
||||
description: 'Optimize your LinkedIn strategy for personal branding or company pages. Schedule articles, posts, and PDF carousels to engage your professional network effectively.',
|
||||
bulletPoints: [
|
||||
{ text: 'PDF Carousels', icon: 'Layout' },
|
||||
{ text: 'Company Page Management', icon: 'BarChart' },
|
||||
{ text: 'Detailed Analytics', icon: 'Zap' },
|
||||
{ text: 'Post Variations', icon: 'PenTool' }
|
||||
],
|
||||
mainImage: '/images/channels/linkedin-about-main.jpg',
|
||||
subImage: '/images/channels/linkedin-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'PDF Carousel Uploads', description: 'Schedule document posts (PDFs) which perform exceptionally well on LinkedIn.', icon: 'Layout' },
|
||||
{ title: 'Mention Companies', description: 'Tag other company pages in your posts to increase reach.', icon: 'Inbox' },
|
||||
{ title: 'Employee Advocacy', description: 'Make it easy for employees to reshare your company content.', icon: 'CheckCircle' },
|
||||
{ title: 'Targeting Options', description: 'Target specific audiences for your company page updates.', icon: 'ShieldCheck' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "Our LinkedIn engagement skyrocketed after we started using the PDF carousel scheduler.", author: "Brian K.", role: "B2B Marketer", rating: 5, image: "/images/testimonials/brian.jpg" },
|
||||
{ quote: "Super reliable tool for managing our corporate LinkedIn page.", author: "Diane S.", role: "Comms Director", rating: 5, image: "/images/testimonials/diane.jpg" },
|
||||
{ quote: "I schedule a week's worth of personal branding content in 30 minutes.", author: "Gary V.", role: "Entrepreneur", rating: 5, image: "/images/testimonials/gary.jpg" },
|
||||
{ quote: "Simple, clean interface. Does exactly what it says.", author: "Tom H.", role: "Consultant", rating: 4, image: "/images/testimonials/tomH.jpg" },
|
||||
{ quote: "The analytics reports are perfect for my monthly client meetings.", author: "Alice M.", role: "Social Manager", rating: 5, image: "/images/testimonials/alice.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "Can I post to personal profiles?", answer: "Yes, both personal profiles and Company Pages are supported." },
|
||||
{ question: "Can I schedule LinkedIn Articles?", answer: "Currently, we support short-form posts, images, videos, and documents." },
|
||||
{ question: "Does it support video?", answer: "Yes, you can upload and schedule native video to LinkedIn." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'twitter',
|
||||
title: 'Twitter (X)',
|
||||
subtitle: 'Join the Conversation in Real-Time',
|
||||
heroImage: '/images/channels/twitter-hero.png',
|
||||
description: 'Manage your Twitter presence with thread scheduling, social listening, and advanced analytics.',
|
||||
about: {
|
||||
title: 'Tweet Smarter, Not Harder',
|
||||
subTitle: 'Engage & Influence',
|
||||
description: 'Master the art of the tweet. Schedule entire threads, monitor keywords, and engage with trending conversations. SocialBuddy keeps you connected to what\'s happening now.',
|
||||
bulletPoints: [
|
||||
{ text: 'Thread Scheduling', icon: 'Repeat' },
|
||||
{ text: 'Social Listening', icon: 'Inbox' },
|
||||
{ text: 'Keyword Monitoring', icon: 'Eye' },
|
||||
{ text: 'Auto-Retweet', icon: 'Repeat' }
|
||||
],
|
||||
mainImage: '/images/channels/twitter-about-main.jpg',
|
||||
subImage: '/images/channels/twitter-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Thread Creator', description: 'Compose and schedule long threads easily with our dedicated thread maker.', icon: 'PenTool' },
|
||||
{ title: 'Asset Library', description: 'Save your best GIFs and images to use again and again.', icon: 'Layout' },
|
||||
{ title: 'Smart Queues', description: 'Automatically recycle your best performing evergreen content.', icon: 'Repeat' },
|
||||
{ title: 'Geo-Targeting', description: 'Add location tags to your tweets for local relevance.', icon: 'CheckCircle' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "The thread creator is the best I've used. So intuitive.", author: "Elon M.", role: "Tech Enthusiast", rating: 5, image: "/images/testimonials/elon.jpg" },
|
||||
{ quote: "Social listening features help us catch customer support issues instantly.", author: "Jenny P.", role: "Support Lead", rating: 5, image: "/images/testimonials/jenny.jpg" },
|
||||
{ quote: "I've grown my following by 50% just by being more consistent with SocialBuddy.", author: "Tim C.", role: "Influencer", rating: 5, image: "/images/testimonials/tim.jpg" },
|
||||
{ quote: "Great for managing multiple handles without logging in and out.", author: "Rob S.", role: "Agency Owner", rating: 4, image: "/images/testimonials/rob.jpg" },
|
||||
{ quote: "Love the dark mode interface!", author: "Anna K.", role: "Developer", rating: 5, image: "/images/testimonials/anna.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "Can I schedule threads?", answer: "Yes! Our thread composer makes it easy to write and schedule long threads." },
|
||||
{ question: "Is there a limit to tweet length?", answer: "We support the standard 280 characters, plus long-form if you have Premium." },
|
||||
{ question: "Can I manage DMs?", answer: "Yes, DMs are integrated into the unified Social Inbox." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'tiktok',
|
||||
title: 'TikTok',
|
||||
subtitle: 'Trend on TikTok',
|
||||
heroImage: '/images/channels/tiktok-hero.png',
|
||||
description: 'Plan, schedule, and analyze your short-form videos to go viral on TikTok.',
|
||||
about: {
|
||||
title: 'Dominate Short-Form Video',
|
||||
subTitle: 'Create & Capture',
|
||||
description: 'Streamline your TikTok workflow. Plan your content calendar, upload videos from your desktop, and get comprehensive analytics on your video performance.',
|
||||
bulletPoints: [
|
||||
{ text: 'Desktop Uploads', icon: 'Smartphone' },
|
||||
{ text: 'Trend Alerts', icon: 'Zap' },
|
||||
{ text: 'Engagement Tracking', icon: 'BarChart' },
|
||||
{ text: 'Sound Sync', icon: 'Layout' }
|
||||
],
|
||||
mainImage: '/images/channels/tiktok-about-main.jpg',
|
||||
subImage: '/images/channels/tiktok-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Auto-Publishing', description: 'Schedule your TikToks to go live automatically—no manual posting needed.', icon: 'Zap' },
|
||||
{ title: 'Video Analytics', description: 'See which videos are retaining viewership and driving followers.', icon: 'Eye' },
|
||||
{ title: 'Hashtag Sets', description: 'Save groups of hashtags to quickly add to your captions.', icon: 'Layout' },
|
||||
{ title: 'Team Review', description: 'Send drafts to your manager for approval before scheduling.', icon: 'Inbox' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "Finally, I can schedule TikToks from my computer!", author: "Sarah J.", role: "Content Creator", rating: 5, image: "/images/testimonials/sarahj.jpg" },
|
||||
{ quote: "The analytics are way better than what you get in the app.", author: "Mike T.", role: "Marketer", rating: 5, image: "/images/testimonials/mike.jpg" },
|
||||
{ quote: "Helped us scale our TikTok production to 3 videos a day.", author: "Team Alpha", role: "Creative Agency", rating: 5, image: "/images/testimonials/alpha.jpg" },
|
||||
{ quote: "Auto-publishing works seamlessly.", author: "Bella R.", role: "Influencer", rating: 4, image: "/images/testimonials/bella.jpg" },
|
||||
{ quote: "A must-have for any brand serious about TikTok.", author: "Chris Evans", role: "Media Buyer", rating: 5, image: "/images/testimonials/chris.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "Can I use trending audio?", answer: "Yes, you can verify copyright and trending audio usage within the planner." },
|
||||
{ question: "Does it support TikTok Stories?", answer: "Not yet, functionality is limited to feed videos currently." },
|
||||
{ question: "Is there a file size limit?", answer: "We support files up to 1GB, following TikTok's platform guidelines." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'pinterest',
|
||||
title: 'Pinterest',
|
||||
subtitle: 'Inspire with Pinterest',
|
||||
heroImage: '/images/channels/pinterest-hero.png',
|
||||
description: 'Drive traffic and inspiration with planned Pins and boards.',
|
||||
about: {
|
||||
title: 'Visual Discovery Engine',
|
||||
subTitle: 'Plan & Pin',
|
||||
description: 'Maximize your Pinterest reach. Design pins, schedule to multiple boards, and analyze click-through rates to drive massive traffic to your site.',
|
||||
bulletPoints: [
|
||||
{ text: 'Pin Scheduling', icon: 'Calendar' },
|
||||
{ text: 'Board Management', icon: 'Layout' },
|
||||
{ text: 'Traffic Analytics', icon: 'BarChart' },
|
||||
{ text: 'Visual Search', icon: 'Eye' }
|
||||
],
|
||||
mainImage: '/images/channels/pinterest-about-main.jpg',
|
||||
subImage: '/images/channels/pinterest-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Board Efficiency', description: 'Pin to multiple boards at once to maximize exposure for each content piece.', icon: 'Layout' },
|
||||
{ title: 'Pin Creator', description: 'Built-in editor to create vertical graphics optimized for Pinterest.', icon: 'PenTool' },
|
||||
{ title: 'Evergreen Recycling', description: 'Keep your best pins circulating to drive continuous traffic.', icon: 'Repeat' },
|
||||
{ title: 'Video Pins', description: 'Schedule video pins to stand out in the feed.', icon: 'Smartphone' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "Pinterest is our #1 traffic source thanks to SocialBuddy.", author: "Martha S.", role: "Blogger", rating: 5, image: "/images/testimonials/martha.jpg" },
|
||||
{ quote: "I can schedule a month of pins in an hour. Incredible.", author: "Julia Childs", role: "Chef", rating: 5, image: "/images/testimonials/julia.jpg" },
|
||||
{ quote: "The best tool for Pinterest managment hands down.", author: "DesignCo", role: "Agency", rating: 5, image: "/images/testimonials/designco.jpg" },
|
||||
{ quote: "Love the multiple board pinning feature.", author: "Karen", role: "DIY Expert", rating: 5, image: "/images/testimonials/karen.jpg" },
|
||||
{ quote: "Analytics help me know exactly what my audience wants.", author: "Steve", role: "Woodworker", rating: 4, image: "/images/testimonials/steve.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "How many pins can I schedule?", answer: "Unlimited on the Pro plan!" },
|
||||
{ question: "Can I edit pin titles?", answer: "Yes, full SEO customization for titles and descriptions." },
|
||||
{ question: "Do you support Rich Pins?", answer: "Yes, fully compatible with Rich Pin metadata." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'youtube',
|
||||
title: 'YouTube',
|
||||
subtitle: 'Accelerate Channel Growth with Data-Driven Tools',
|
||||
heroImage: '/images/channels/youtube-hero.png',
|
||||
description: 'Streamline video management, optimize SEO for higher rankings, and foster a loyal subscriber base with advanced YouTube tools.',
|
||||
about: {
|
||||
title: 'Master the Art of Video Marketing',
|
||||
subTitle: 'Upload & Optimize',
|
||||
description: 'Success on YouTube demands consistency and optimization. SocialBuddy simplifies the heavy lifting—helping you research winning keywords, schedule videos for peak times, and manage your community efficiently, so you can focus on creating exceptional content.',
|
||||
bulletPoints: [
|
||||
{ text: 'Video & Shorts Scheduling', icon: 'Calendar' },
|
||||
{ text: 'Advanced Keyword Research', icon: 'Zap' },
|
||||
{ text: 'Bulk Metadata Editor', icon: 'PenTool' },
|
||||
{ text: 'Comment Sentiment Analysis', icon: 'Inbox' }
|
||||
],
|
||||
mainImage: '/images/channels/youtube-about-main.jpg',
|
||||
subImage: '/images/channels/youtube-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'SEO & Tag Management', description: 'Rank higher in search results with built-in keyword research and tag optimization tools.', icon: 'Zap' },
|
||||
{ title: 'Smart Publishing', description: 'Schedule long-form videos and Shorts to go live exactly when your subscribers are watching.', icon: 'Calendar' },
|
||||
{ title: 'Community Engagement', description: 'Build stronger relationships by moderating and replying to comments from a unified, reliable inbox.', icon: 'Inbox' },
|
||||
{ title: 'Performance Pulse', description: 'Track watch time, retention, and subscriber growth with clear, actionable analytics dashboards.', icon: 'BarChart' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "SocialBuddy's SEO tools doubled my views in a month.", author: "TechGuy99", role: "YouTuber", rating: 5, image: "/images/testimonials/techguy.jpg" },
|
||||
{ quote: "Managing comments is finally manageable.", author: "Sarah Vlogs", role: "Vlogger", rating: 5, image: "/images/testimonials/sarah-v.jpg" },
|
||||
{ quote: "Best tool for multi-channel creators.", author: "GamingPro", role: "Streamer", rating: 5, image: "/images/testimonials/gamer.jpg" },
|
||||
{ quote: "I love the bulk update feature for descriptions.", author: "MusicLive", role: "Musician", rating: 4, image: "/images/testimonials/music.jpg" },
|
||||
{ quote: "Analytics are deeper than Studio.", author: "BizInsider", role: "Media Co", rating: 5, image: "/images/testimonials/biz.jpg" }
|
||||
],
|
||||
faqs: [
|
||||
{ question: "Do you support YouTube Shorts?", answer: "Yes! You can schedule and optimize Shorts just like regular videos." },
|
||||
{ question: "Can I manage community posts?", answer: "Yes, Community Tab posts are fully supported." },
|
||||
{ question: "Is it compliant with YouTube API?", answer: "100%. We are a verified YouTube partner." },
|
||||
{ question: "Can I update old videos?", answer: "Yes, you can bulk-update descriptions and tags for older videos to improve their SEO." }
|
||||
],
|
||||
details: []
|
||||
}
|
||||
];
|
||||
273
data/features.ts
Normal file
273
data/features.ts
Normal file
@ -0,0 +1,273 @@
|
||||
export interface FeatureDetail {
|
||||
title: string;
|
||||
text: string;
|
||||
image: string;
|
||||
reverse: boolean;
|
||||
}
|
||||
|
||||
export interface FeatureBenefit {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface FeatureAbout {
|
||||
title: string;
|
||||
description: string;
|
||||
subTitle: string;
|
||||
bulletPoints: { text: string; icon: string }[];
|
||||
mainImage: string;
|
||||
subImage: string;
|
||||
}
|
||||
|
||||
export interface FeatureTestimonial {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
rating: number; // 1-5
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface FeatureFAQ {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface Feature {
|
||||
slug: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
heroImage: string;
|
||||
description: string;
|
||||
about: FeatureAbout;
|
||||
benefits: FeatureBenefit[];
|
||||
testimonials: FeatureTestimonial[];
|
||||
faqs: FeatureFAQ[];
|
||||
// Keeping details for legacy if needed, or repurposed
|
||||
details: FeatureDetail[];
|
||||
}
|
||||
|
||||
export const features: Feature[] = [
|
||||
{
|
||||
slug: 'publish',
|
||||
title: 'Publishing',
|
||||
subtitle: 'Plan, Collaborate, and Publish Compelling Content',
|
||||
heroImage: '/images/features/publish-hero.jpg',
|
||||
description: 'Take control of your social media calendar with our powerful publishing tools. Schedule posts for all your channels in one place.',
|
||||
about: {
|
||||
title: 'Streamline Your Publishing Workflow',
|
||||
subTitle: 'Efficiency at Scale',
|
||||
description: 'Stop wasting time switching between platforms. SocialBuddy\'s publishing tools allow you to craft, schedule, and publish content to Instagram, Facebook, Twitter, LinkedIn, and more from a single dashboard. Collaborate with your team and approve posts with ease.',
|
||||
bulletPoints: [
|
||||
{ text: 'Unified Content Calendar', icon: 'Calendar' },
|
||||
{ text: 'Visual Post Preview', icon: 'Eye' }
|
||||
],
|
||||
mainImage: '/images/features/publish-about-main.jpg',
|
||||
subImage: '/images/features/publish-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Multi-Channel Scheduling', description: 'Post to Instagram, Facebook, Twitter, LinkedIn, and more simultaneously.', icon: '📅' },
|
||||
{ title: 'Visual Calendar', description: 'Drag and drop your posts to organize your month at a glance.', icon: '👀' },
|
||||
{ title: 'Best Time to Post', description: 'Our AI suggests the optimal times to tweet or post for maximum engagement.', icon: '⏰' },
|
||||
{ title: 'Team Collaboration', description: 'Assign roles, leave comments, and approve posts before they go live.', icon: '👥' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'SocialBuddy has completely transformed how we manage our social media. We save at least 10 hours a week on scheduling alone.', author: 'Jessica Miller', role: 'Marketing Director, TechFlow', rating: 5, image: '/images/testimonials/jessica.jpg' },
|
||||
{ quote: 'The visual calendar is a lifesaver. Being able to see our entire month at a glance makes planning so much easier.', author: 'Tom Harrison', role: 'Social Media Manager, BuzzMedia', rating: 5, image: '/images/testimonials/tom.jpg' },
|
||||
{ quote: 'Posting to multiple platforms used to be a nightmare. Now it takes seconds.', author: 'Sarah Jenkins', role: 'Content Creator', rating: 4, image: '/images/testimonials/sarah-j.jpg' },
|
||||
{ quote: 'Our engagement has gone up since we started using the "Best Time to Post" feature. Highly recommend!', author: 'Michael Brown', role: 'Small Business Owner', rating: 5, image: '/images/testimonials/michael.jpg' },
|
||||
{ quote: 'The collaboration tools are fantastic. My team can review and approve posts without endless email chains.', author: 'Emily Davis', role: 'Agency Owner', rating: 5, image: '/images/testimonials/emily-d.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'Which platforms do you support?', answer: 'We support Instagram, Facebook, Twitter (X), LinkedIn, Pinterest, and TikTok.' },
|
||||
{ question: 'Can I schedule stories?', answer: 'Yes, you can schedule Instagram Stories and Facebook Stories directly from the dashboard.' },
|
||||
{ question: 'Is there a limit to posts?', answer: 'The "Pro" plan includes unlimited scheduling. Standard plans have generous monthly limits.' }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'analyze',
|
||||
title: 'Analytics',
|
||||
subtitle: 'Measure Your Performance and Grow Your Reach',
|
||||
heroImage: '/images/features/analyze-hero.jpg',
|
||||
description: 'Get deep insights into your social media performance. Understand what works and what doesn\'t to optimize your strategy.',
|
||||
about: {
|
||||
title: 'Data-Driven Decision Making',
|
||||
subTitle: 'Unlock Your Potential',
|
||||
description: 'Go beyond vanity metrics. Our deep analytics platform provides actionable insights into audience behavior, content performance, and ROI. Visualize your growth with custom reports.',
|
||||
bulletPoints: [
|
||||
{ text: 'Comprehensive Dashboards', icon: 'BarChart' },
|
||||
{ text: 'Competitor Benchmarking', icon: 'Trophy' }
|
||||
],
|
||||
mainImage: '/images/features/analyze-about-main.jpg',
|
||||
subImage: '/images/features/analyze-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'In-depth Reporting', description: 'Create beautiful reports to share with your team or clients.', icon: '📊' },
|
||||
{ title: 'Engagement Metrics', description: 'Track likes, comments, shares, and clicks across all platforms.', icon: '📈' },
|
||||
{ title: 'Audience Demographics', description: 'Know who your followers are and where they come from.', icon: '🌍' },
|
||||
{ title: 'ROI Tracking', description: 'Connect your social efforts to real business results and revenue.', icon: '💰' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'The analytics reports are a game changer. I can finally prove the ROI of our social media campaigns to the stakeholders.', author: 'Mark Rutherford', role: 'Social Media Manager, EcoGoods', rating: 5, image: '/images/testimonials/mark.jpg' },
|
||||
{ quote: 'I love how easy it is to customize the reports. My clients are always impressed.', author: 'Lisa Wong', role: 'Freelance Marketer', rating: 5, image: '/images/testimonials/lisa.jpg' },
|
||||
{ quote: 'The competitor analysis tool helped us identify a gap in the market we didn\'t know existed.', author: 'James Smith', role: 'Growth Hacker', rating: 4, image: '/images/testimonials/james.jpg' },
|
||||
{ quote: 'Being able to track conversions from social posts relies helps us budget better.', author: 'Rachel Green', role: 'E-commerce Manager', rating: 5, image: '/images/testimonials/rachel.jpg' },
|
||||
{ quote: 'The audience insights are incredibly detailed. We refined our persona based on the data.', author: 'Kevin White', role: 'Brand Strategist', rating: 5, image: '/images/testimonials/kevin.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'How far back does data go?', answer: 'We pull up to 12 months of historical data upon connection.' },
|
||||
{ question: 'Can I export reports?', answer: 'Yes, you can export reports as PDF or CSV files.' },
|
||||
{ question: 'Do you track competitors?', answer: 'Yes, you can track key metrics of your top competitors to see how you stack up.' }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'engage',
|
||||
title: 'Engagement',
|
||||
subtitle: 'Build Stronger Relationships with Your Audience',
|
||||
heroImage: '/images/features/engage-hero.jpg',
|
||||
description: 'Never miss a comment or mention. Reply to your community from a single, unified inbox.',
|
||||
about: {
|
||||
title: 'Never Miss a Conversation',
|
||||
subTitle: 'Unified Social Box',
|
||||
description: 'Managing messages across multiple platforms is chaotic. SocialBuddy brings all your DMs, comments, and mentions into one specific stream, so you can respond faster and build better relationships.',
|
||||
bulletPoints: [
|
||||
{ text: 'Centralized Social Inbox', icon: 'Inbox' },
|
||||
{ text: 'Automated Moderation', icon: 'ShieldCheck' }
|
||||
],
|
||||
mainImage: '/images/features/engage-about-main.jpg',
|
||||
subImage: '/images/features/engage-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Unified Inbox', description: 'All your conversations from every platform in one stream.', icon: '📥' },
|
||||
{ title: 'Smart Filtering', description: 'Prioritize important messages and filter out the noise.', icon: '🔍' },
|
||||
{ title: 'Team Assignment', description: 'Assign conversations to specific team members for faster support.', icon: '👥' },
|
||||
{ title: 'Saved Replies', description: 'Respond to common questions instantly with pre-written templates.', icon: '⚡' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'Our response time dropped by 60% since switching to SocialBuddy. The unified inbox is a lifesaver for our support team.', author: 'Sarah Chen', role: 'Customer Success Lead, Omni', rating: 5, image: '/images/testimonials/sarah.jpg' },
|
||||
{ quote: 'I used to miss DMs on Instagram all the time. Now everything is in one place.', author: 'Alex Turner', role: 'Influencer', rating: 4, image: '/images/testimonials/alex.jpg' },
|
||||
{ quote: 'The ability to assign conversations to different team members is perfect for our workflow.', author: 'Maria Rodriguez', role: 'Support Manager', rating: 5, image: '/images/testimonials/maria.jpg' },
|
||||
{ quote: 'Saved replies save me so much typing. Support is faster than ever.', author: 'John Doe', role: 'Customer Service', rating: 5, image: '/images/testimonials/john.jpg' },
|
||||
{ quote: 'It\'s great to see the context of previous conversations when replying to a user.', author: 'Emma Wilson', role: 'Community Manager', rating: 4, image: '/images/testimonials/emma-w.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'Does it support DMs?', answer: 'Yes, we support Direct Messages for Instagram, Facebook, Twitter, and LinkedIn.' },
|
||||
{ question: 'Can multiple people work in the inbox?', answer: 'Absolutely. You can see who is typing and assign conversations to avoid overlap.' },
|
||||
{ question: 'Is it real-time?', answer: 'Yes, messages appear in your inbox instantly.' }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'create',
|
||||
title: 'Create',
|
||||
subtitle: 'Turn Your Ideas into Eye-Catching Content',
|
||||
heroImage: '/images/features/create-hero.jpg',
|
||||
description: 'Design beautiful graphics and write compelling copy without leaving the platform. Your creative studio in the cloud.',
|
||||
about: {
|
||||
title: 'Design Made Simple',
|
||||
subTitle: 'Creative Suite',
|
||||
description: 'You don\'t need to be a professional designer to create stunning social media posts. With our built-in editor and templates, you can create on-brand content in seconds.',
|
||||
bulletPoints: [
|
||||
{ text: 'Drag-and-Drop Editor', icon: 'Palette' },
|
||||
{ text: 'Thousands of Templates', icon: 'Layout' }
|
||||
],
|
||||
mainImage: '/images/features/create-about-main.jpg',
|
||||
subImage: '/images/features/create-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Template Library', description: 'Access thousands of professionally designed templates for every occasion.', icon: '🎨' },
|
||||
{ title: 'Image Editor', description: 'Crop, resize, and filter your images to perfection.', icon: '✏️' },
|
||||
{ title: 'Asset Manager', description: 'Store and organize your brand assets, logos, and images.', icon: '📁' },
|
||||
{ title: 'Canva Integration', description: 'Connect your Canva account to access your designs seamlessly.', icon: '🖌️' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'I used to struggle with designing posts. The templates in SocialBuddy make it look like we hired a professional agency.', author: 'Mike Ross', role: 'Founder, StartupX', rating: 4, image: '/images/testimonials/mike.jpg' },
|
||||
{ quote: 'The image editor is surprisingly powerful. I rarely need to open Photoshop anymore.', author: 'Jenny Lee', role: 'Graphic Designer', rating: 5, image: '/images/testimonials/jenny.jpg' },
|
||||
{ quote: 'Having all our assets in one place makes brand consistency so much easier.', author: 'David Clark', role: 'Brand Manager', rating: 5, image: '/images/testimonials/david-c.jpg' },
|
||||
{ quote: 'The Canva integration is seamless. Best of both worlds.', author: 'Sophie Turner', role: 'Social Media Intern', rating: 5, image: '/images/testimonials/sophie.jpg' },
|
||||
{ quote: 'Great selection of templates for holidays and special events.', author: 'Chris Evans', role: 'Event Coordinator', rating: 4, image: '/images/testimonials/chris.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'Can I upload my own fonts?', answer: 'Yes, Pro plans allow font uploads to keep your designs on-brand.' },
|
||||
{ question: 'Are the stock photos free?', answer: 'We provide access to millions of royalty-free images via Unsplash and Pexels integration.' },
|
||||
{ question: 'Can I save my brand colors?', answer: 'Yes, you can set up a Brand Kit with your colors and logos.' }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'start-page',
|
||||
title: 'Start Page',
|
||||
subtitle: 'Your Link-in-Bio, Reimagined',
|
||||
heroImage: '/images/features/start-page-hero.jpg',
|
||||
description: 'Create a beautiful, mobile-friendly landing page for your social bio. Drive traffic to your most important links.',
|
||||
about: {
|
||||
title: 'One Link to Rule Them All',
|
||||
subTitle: 'Link-in-Bio Solution',
|
||||
description: 'Maximize the potential of your bio link. Create a micro-landing page that directs your followers to your latest content, products, and sign-up forms.',
|
||||
bulletPoints: [
|
||||
{ text: 'Mobile Optimized', icon: 'Smartphone' },
|
||||
{ text: 'No Coding Required', icon: 'Zap' }
|
||||
],
|
||||
mainImage: '/images/features/startpage-about-main.jpg',
|
||||
subImage: '/images/features/startpage-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Customizable Design', description: 'Match your Start Page to your brand with custom colors and layouts.', icon: '✨' },
|
||||
{ title: 'Track Clicks', description: 'See which links are getting the most attention with built-in analytics.', icon: '👆' },
|
||||
{ title: 'Schedule Links', description: 'Schedule links to appear and disappear to match your campaigns.', icon: '⏲️' },
|
||||
{ title: 'Email Capture', description: 'Collect emails directly from your bio link with integrated forms.', icon: '📧' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'Our click-through rate from Instagram doubled after setting up our Start Page. It is so easy to update.', author: 'Emily White', role: 'Blogger & Influencer', rating: 5, image: '/images/testimonials/emily.jpg' },
|
||||
{ quote: 'It looks so much better than the other link-in-bio tools I\'ve tried. Very professional.', author: 'Ryan Reynolds', role: 'Actor & Entrepreneur', rating: 5, image: '/images/testimonials/ryan.jpg' },
|
||||
{ quote: 'I love that I can capture emails directly from my bio link.', author: 'Sarah Connor', role: 'Newsletter Creator', rating: 4, image: '/images/testimonials/sarah-c.jpg' },
|
||||
{ quote: 'The analytics help me understand what my audience is actually interested in.', author: 'Tom Hardy', role: 'Digital Marketer', rating: 5, image: '/images/testimonials/tom-h.jpg' },
|
||||
{ quote: 'Super easy to set up. I was up and running in 5 minutes.', author: 'Anna Kendrick', role: 'Musician', rating: 5, image: '/images/testimonials/anna.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'Can I use a custom domain?', answer: 'Yes, you can connect your own domain name to your Start Page.' },
|
||||
{ question: 'Is it mobile responsive?', answer: '100%. It is designed specifically for mobile users.' },
|
||||
{ question: 'How many links can I add?', answer: 'Unlimited! Add as many links, videos, and buttons as you need.' }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'ai-assistant',
|
||||
title: 'AI Assistant',
|
||||
subtitle: 'Your Personal Social Media Copywriter',
|
||||
heroImage: '/images/features/ai-assistant-hero.jpg',
|
||||
description: 'Generate endless content ideas, write engaging captions, and repurpose content with the power of AI.',
|
||||
about: {
|
||||
title: 'Creativity on Demand',
|
||||
subTitle: 'Powered by AI',
|
||||
description: 'Writer\'s block is a thing of the past. Our AI Assistant helps you brainstorm ideas, write captions, and even repurpose long-form content into social posts in seconds.',
|
||||
bulletPoints: [
|
||||
{ text: 'Smart Caption Writer', icon: 'PenTool' },
|
||||
{ text: 'Content Repurposing', icon: 'Repeat' }
|
||||
],
|
||||
mainImage: '/images/features/ai-about-main.jpg',
|
||||
subImage: '/images/features/ai-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Idea Generator', description: 'Never run out of things to post. Get fresh ideas tailored to your niche.', icon: '💡' },
|
||||
{ title: 'Caption Writer', description: 'Instantly generate catchy captions with emojis and hashtags.', icon: '✍️' },
|
||||
{ title: 'Content Repurposing', description: 'Turn a blog post into a thread or an Instagram caption in seconds.', icon: '🔄' },
|
||||
{ title: 'Tone Adjustment', description: 'Rewrite content to sound professional, funny, or urgent.', icon: '🎭' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: 'The AI Assistant is like having a copywriter on staff 24/7. It saves me so much time coming up with captions.', author: 'David Kim', role: 'Content Creator', rating: 5, image: '/images/testimonials/david.jpg' },
|
||||
{ quote: 'I was skeptical at first, but the quality of the writing is shockingly good.', author: 'Jessica Alba', role: 'Business Owner', rating: 5, image: '/images/testimonials/jessica-a.jpg' },
|
||||
{ quote: 'It helps me repurpose my blog posts into social content in seconds. Huge time saver.', author: 'Tim Cook', role: 'Tech Blogger', rating: 4, image: '/images/testimonials/tim.jpg' },
|
||||
{ quote: 'The idea generator is great for when I\'m feeling stuck.', author: 'Lisa Su', role: 'CEO', rating: 5, image: '/images/testimonials/lisa-s.jpg' },
|
||||
{ quote: 'A must-have tool for any social media manager handling multiple accounts.', author: 'Satya Nadella', role: 'Marketing Lead', rating: 5, image: '/images/testimonials/satya.jpg' }
|
||||
],
|
||||
faqs: [
|
||||
{ question: 'Is the content unique?', answer: 'Yes, the AI generates unique content based on your prompts.' },
|
||||
{ question: 'Which languages are supported?', answer: 'We support over 25 languages including English, Spanish, French, and German.' },
|
||||
{ question: 'Do I need a separate subscription?', answer: 'AI Assistant is included in all Pro and Business plans.' }
|
||||
],
|
||||
details: []
|
||||
}
|
||||
];
|
||||
472
data/resources.ts
Normal file
472
data/resources.ts
Normal file
@ -0,0 +1,472 @@
|
||||
|
||||
export interface ResourcePost {
|
||||
id: string;
|
||||
slug: string;
|
||||
featureSlug: string;
|
||||
title: string;
|
||||
excerpt: string;
|
||||
image: string;
|
||||
date: string;
|
||||
author: string;
|
||||
category: string;
|
||||
content: string; // Added full content field
|
||||
bigImage?: string;
|
||||
bannerImage?: string;
|
||||
}
|
||||
|
||||
export const resources: ResourcePost[] = [
|
||||
// Publish (1-3)
|
||||
{
|
||||
id: '1',
|
||||
slug: 'mastering-social-media-scheduling',
|
||||
featureSlug: 'publish',
|
||||
title: 'Mastering Social Media Scheduling: The 2026 Guide',
|
||||
excerpt: 'Stop guessing. Learn the data-backed strategies to plan your content calendar, save 10+ hours a week, and keep your audience engaged 24/7.',
|
||||
image: '/images/resources/strategy.webp',
|
||||
bigImage: '/images/resources/big-img/strategy.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-1.webp',
|
||||
date: 'Jan 15, 2026',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Strategy',
|
||||
content: `
|
||||
<h2>Why Consistency is the Key to Growth</h2>
|
||||
<p>In the algorithmic era of social media, consistency isn't just a suggestion—it's a requirement. Platforms like Instagram, LinkedIn, and TikTok prioritize accounts that post regularly. By mastering the art of scheduling, you transform your social media presence from a reactive chaos to a proactive machine.</p>
|
||||
|
||||
<h3>1. The "Batch and Blast" Technique</h3>
|
||||
<p>The most efficient social media managers don't wake up and think, "What should I post today?" They dedicate one day a week (or month) to content creation. By batch-creating captions, designing graphics, and editing videos in a single focused session, you reduce cognitive load and ensure a cohesive brand voice across all posts.</p>
|
||||
|
||||
<h3>2. Optimizing for Peak Times</h3>
|
||||
<p>Posting when your audience is asleep is a wasted opportunity. Modern scheduling tools (like SocialBuddy) analyze your audience's activity data to suggest the exact minute you should hit publish. This simple tweak can increase engagement by up to 20% without changing a single word of your copy.</p>
|
||||
|
||||
<h3>3. The 80/20 Content Rule</h3>
|
||||
<p>When planning your calendar, follow the 80/20 rule: 80% of your content should educate, entertain, or inspire, while only 20% should be promotional. Scheduling allows you to visualize this balance perfectly, ensuring you aren't overwhelming your followers with "Buy Now" messages.</p>
|
||||
|
||||
<h2>Conclusion</h2>
|
||||
<p>Scheduling is the secret weapon of high-growth brands. It frees you from the daily grind of posting, allowing you to spend more time engaging with your community and analyzing what actually works.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
slug: 'best-times-to-post-instagram',
|
||||
featureSlug: 'publish',
|
||||
title: 'The Data Science of Posting Times',
|
||||
excerpt: 'Crack the algorithm. Discover the peak engagement windows for your industry and how to use SocialBuddy\'s heatmaps to pinpoint your unique posting time.',
|
||||
image: '/images/resources/guides.webp',
|
||||
bigImage: '/images/resources/big-img/guides.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-2.webp',
|
||||
date: 'Jan 12, 2026',
|
||||
author: 'Mike Chen',
|
||||
category: 'Guides',
|
||||
content: `
|
||||
<h2>Is There a Universal Best Time?</h2>
|
||||
<p>The short answer is no. The long answer is that while there are global averages (often cited as weekdays between 9 AM and 1 PM), your specific "best time" depends entirely on your audience's demographics, location, and daily routine.</p>
|
||||
|
||||
<h3>The Recency Signal</h3>
|
||||
<p>Instagram's algorithm prioritizes specific signals, and "recency" is a major one. When you post exactly when your followers are scrolling, you get an initial burst of engagement. This early velocity signals to the algorithm that your content is valuable, triggering it to be shown to a wider audience.</p>
|
||||
|
||||
<h3>Analyzing Your Heatmap</h3>
|
||||
<p>Stop guessing. Use your analytics dashboard to view activity heatmaps. Look for the darkest blocks of color—these represent the hours when the highest percentage of your followers are online. Test posting 15 minutes <em>before</em> this peak to ensure your post is at the top of their feed when they open the app.</p>
|
||||
|
||||
<h2>Industry-Specific Trends</h2>
|
||||
<p>B2B audiences may engage more during commute times and lunch breaks on weekdays. B2C audiences, especially in fashion or entertainment, often see higher engagement on evenings and weekends. Know your niche.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
slug: 'content-calendar-templates',
|
||||
featureSlug: 'publish',
|
||||
title: '5 Strategic Content Calendar Frameworks',
|
||||
excerpt: 'Free Download: 5 battle-tested content calendar templates used by top agencies to stay organized, consistent, and creative all year round.',
|
||||
image: '/images/resources/resources.webp',
|
||||
bigImage: '/images/resources/big-img/resources.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-3.webp',
|
||||
date: 'Jan 10, 2026',
|
||||
author: 'Emma Davis',
|
||||
category: 'Resources',
|
||||
content: `
|
||||
<h2>From Chaos to Clarity</h2>
|
||||
<p>A content calendar is the backbone of any successful social media strategy. It moves you from reactive posting (scrambling for ideas) to proactive storytelling. Here are five frameworks to organize your creative output.</p>
|
||||
|
||||
<h3>1. The "Pillar" Approach</h3>
|
||||
<p>Organize your month by content pillars (e.g., Education, Entertainment, Social Proof). This ensures you never drift too far from your core brand message while maintaining variety. Color-code your calendar by pillar to visualize the balance.</p>
|
||||
|
||||
<h3>2. The Platform-First Grid</h3>
|
||||
<p>If you manage multiple channels, use a grid that separates copy and assets for Instagram, LinkedIn, and Twitter side-by-side. This helps you adapt a single core idea into platform-native formats effortlessly.</p>
|
||||
|
||||
<h3>3. The Campaign Timeline</h3>
|
||||
<p>For product launches or seasonal events, use a linear timeline view. Work backward from the launch date to schedule teasers, hype posts, the main announcement, and follow-up sustainment content.</p>
|
||||
|
||||
<h2>Implementation Tips</h2>
|
||||
<p>Don't just fill slots. Every post should have a purpose. Include a "Goal" column in your templates (e.g., "Drive Traffic," "Generate Leads," "Brand Awareness") to keep your strategy aligned with business objectives.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Analyze (4-6)
|
||||
{
|
||||
id: '4',
|
||||
slug: 'understanding-social-metrics',
|
||||
featureSlug: 'analyze',
|
||||
title: 'Decoding Social Metrics: Beyond Vanity',
|
||||
excerpt: 'Vanity metrics vs. Reality. Learn which numbers actually drive business growth and how to interpret your dashboard like a pro data analyst.',
|
||||
image: '/images/resources/analytics.webp',
|
||||
bigImage: '/images/resources/big-img/analytics.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-4.webp',
|
||||
date: 'Jan 14, 2026',
|
||||
author: 'David Wilson',
|
||||
category: 'Analytics',
|
||||
content: `
|
||||
<h2>The Danger of Vanity Metrics</h2>
|
||||
<p>It's easy to feel good about 10,000 likes. But if those likes don't translate to brand loyalty or revenue, they are just vanity metrics. To truly grow, you need to look deeper into the data.</p>
|
||||
|
||||
<h3>1. Engagement Rate > Follower Count</h3>
|
||||
<p>Having 1,000 followers with a 10% engagement rate is often more valuable than 10,000 followers with a 0.5% rate. High engagement signals that your content resonates and that you have built a community, not just a list of ghosts.</p>
|
||||
|
||||
<h3>2. Reach vs. Impressions</h3>
|
||||
<p><strong>Reach</strong> tells you how many unique humans saw your post. <strong>Impressions</strong> tells you how many times it was displayed. A high Impression-to-Reach ratio usually means your content is sticky—people are looking at it more than once, or the algorithm is serving it repeatedly to the same people.</p>
|
||||
|
||||
<h3>3. Click-Through Rate (CTR)</h3>
|
||||
<p>If your goal is traffic, CTR is your north star. It measures how persuasive your call-to-action (CTA) is. A low CTR suggests your creative hooked them, but your offer didn't compel them to take the next step.</p>
|
||||
|
||||
<h2>Actionable Insights</h2>
|
||||
<p>Review your metrics weekly. Identify the top 3 performing posts and ask "Why?" Was it the headline? The image? The timing? replicate those elements in your next batch of content.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
slug: 'roi-social-media-marketing',
|
||||
featureSlug: 'analyze',
|
||||
title: 'Calculating the Real ROI of Social Media',
|
||||
excerpt: 'Prove your worth. The definitive guide to calculating Social Media ROI, attributing revenue to posts, and showcasing value to stakeholders.',
|
||||
image: '/images/resources/business.webp',
|
||||
bigImage: '/images/resources/big-img/business.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-5.webp',
|
||||
date: 'Jan 08, 2026',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Business',
|
||||
content: `
|
||||
<h2>The Million Dollar Question</h2>
|
||||
<p>"What's the ROI of this Tweet?" It's the question every social media manager dreads. But with the right attribution models, you can answer it with confidence.</p>
|
||||
|
||||
<h3>Connecting Social to Sales</h3>
|
||||
<p>The days of "brand awareness" being the only metric are over. Use UTM parameters on every single link you share. This allows Google Analytics to track a user from a specific Instagram Story all the way to a checkout page, giving you concrete revenue numbers.</p>
|
||||
|
||||
<h3>The ROI Formula</h3>
|
||||
<p><strong>ROI = (Revenue from Social - Cost of Social) / Cost of Social x 100</strong>. Remember, "Cost" includes ad spend, tools (like SocialBuddy), and <em>your labor hours</em>.</p>
|
||||
|
||||
<h3>Attributing Soft Value</h3>
|
||||
<p>Not every value adds up to immediate cash. Customer Lifetime Value (CLV) is often higher for customers who engage with you on social. They stay longer, buy more, and refer friends. Factor this long-term impact into your reports.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
slug: 'creating-custom-reports',
|
||||
featureSlug: 'analyze',
|
||||
title: 'Client-Ready Reports in Minutes',
|
||||
excerpt: 'Stop boring your clients. Learn to create visual, narrative-driven reports that highlight your wins and justify your budget.',
|
||||
image: '/images/resources/reporting.webp',
|
||||
bigImage: '/images/resources/big-img/reporting.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-6.webp',
|
||||
date: 'Jan 05, 2026',
|
||||
author: 'Mike Chen',
|
||||
category: 'Reporting',
|
||||
content: `
|
||||
<h2>Data Storytelling 101</h2>
|
||||
<p>A spreadsheet of numbers tells you <em>what</em> happened. A report tells you <em>why</em> it matters. Your clients don't want to see "1,000 Impressions." They want to see "We reached 1,000 potential buyers, resulting in 50 leads."</p>
|
||||
|
||||
<h3>Visuals are Non-Negotiable</h3>
|
||||
<p>Human brains process visuals 60,000 times faster than text. Use line graphs to show growth trends and pie charts for audience demographics. If a metric is down, annotate the chart to explain why (e.g., "Holiday lull").</p>
|
||||
|
||||
<h3>The "Insights & Recommendations" Section</h3>
|
||||
<p>This is the most valuable part of any report. Don't just dump data. Provide 3 bullet points of analysis and 3 bullet points of action items for the next month. This positions you as a strategic partner, not just an executioner.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Engage (7-9)
|
||||
{
|
||||
id: '7',
|
||||
slug: 'community-management-best-practices',
|
||||
featureSlug: 'engage',
|
||||
title: 'Building a Tribe: Community Management 2.0',
|
||||
excerpt: 'Build a tribe, not just a following. proven techniques to spark genuine conversations and turn passive followers into brand loyalists.',
|
||||
image: '/images/resources/community.webp',
|
||||
bigImage: '/images/resources/big-img/community.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-7.webp',
|
||||
date: 'Jan 13, 2026',
|
||||
author: 'Emma Davis',
|
||||
category: 'Community',
|
||||
content: `
|
||||
<h2>Audience vs. Community</h2>
|
||||
<p>An audience listens to you. A community talks to each other. Your goal is to facilitate the latter. When your comment section becomes a place where users help and entertain each other, you've unlocked sustainable growth.</p>
|
||||
|
||||
<h3>The 15-Minute Rule</h3>
|
||||
<p>The first 15 minutes after you post are critical. Be present. Reply to every single comment immediately. This boosts the post's engagement signals and trains your audience that you are accessible and listening.</p>
|
||||
|
||||
<h3>Surprise and Delight</h3>
|
||||
<p>Go beyond the "Thanks!" reply. Check out a commenter's profile, find something unique about them, and mention it. Send a random DM with a discount code to a loyal follower. These small, human touches create super-fans who will advocate for your brand for free.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
slug: 'managing-negative-comments',
|
||||
featureSlug: 'engage',
|
||||
title: 'Crisis Averted: Handling Negative Feedback',
|
||||
excerpt: 'Don\'t panic. A step-by-step framework for de-escalating conflicts, addressing complaints, and turning unhappy customers into your biggest fans.',
|
||||
image: '/images/resources/crisis.webp',
|
||||
bigImage: '/images/resources/big-img/crisis.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-8.webp',
|
||||
date: 'Jan 09, 2026',
|
||||
author: 'David Wilson',
|
||||
category: 'Crisis Mgmt',
|
||||
content: `
|
||||
<h2>The Hug Your Haters Philosophy</h2>
|
||||
<p>Negative comments are painful, but they are also an opportunity. A public complaint is a stage where you can demonstrate your customer service excellence to the entire world. Ignoring it is the worst thing you can do.</p>
|
||||
|
||||
<h3>The De-escalation Framework</h3>
|
||||
<p>1. <strong>Empathize:</strong> Start with "I understand why that is frustrating." Validation lowers temperatures immediately.<br>
|
||||
2. <strong>Take it Offline:</strong> "Please DM us your order number so we can fix this immediately." Don't argue in the comments.<br>
|
||||
3. <strong>Close the Loop:</strong> Once resolved, comment back publicly: "Thanks for chatting with us, glad we could sort this out!" This signals to onlookers that you solve problems.</p>
|
||||
|
||||
<h3>When to Delete</h3>
|
||||
<p>Constructive criticism stays. Hate speech, spam, and trolls get deleted and blocked. Protect your community's safety first.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
slug: 'social-listening-guide',
|
||||
featureSlug: 'engage',
|
||||
title: 'Social Listening: The Ear of Your Brand',
|
||||
excerpt: 'Go beyond the notifications. How to monitor brand sentiment, spot industry trends, and spy on competitors before they make their move.',
|
||||
image: '/images/resources/listening.webp',
|
||||
bigImage: '/images/resources/big-img/listening.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-9.webp',
|
||||
date: 'Jan 03, 2026',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Listening',
|
||||
content: `
|
||||
<h2>Monitoring vs. Listening</h2>
|
||||
<p><strong>Monitoring</strong> is reactive: checking your notifications for mentions. <strong>Listening</strong> is proactive: searching for conversations about your industry, competitors, or pain points that <em>don't</em> tag you.</p>
|
||||
|
||||
<h3>Finding Un-tagged Gold</h3>
|
||||
<p>Set up keyword streams for your brand name (and common misspellings!). You'll often find the most honest feedback in these un-tagged posts. Surprise these users by jumping into the conversation—it usually blows their mind that a brand is paying attention.</p>
|
||||
|
||||
<h3>Competitive Intelligence</h3>
|
||||
<p>Listen to your competitor's complaints. If people are tweeting about "Service X's slow support," that's your cue to create content about your "24/7 instant support." heavily.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Create (10-12)
|
||||
{
|
||||
id: '10',
|
||||
slug: 'design-tips-non-designers',
|
||||
featureSlug: 'create',
|
||||
title: 'Design Principles for Social Marketers',
|
||||
excerpt: 'No designer? No problem. Master the 5 core principles of visual design to create thumb-stopping social graphics in minutes.',
|
||||
image: '/images/resources/design.webp',
|
||||
bigImage: '/images/resources/big-img/design.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-10.webp',
|
||||
date: 'Jan 11, 2026',
|
||||
author: 'Mike Chen',
|
||||
category: 'Design',
|
||||
content: `
|
||||
<h2>The "Less is More" Rule</h2>
|
||||
<p>In a crowded feed, the simplest design often wins. Avoid clutter. If you have a great image, let it breathe; don't cover it in text.</p>
|
||||
|
||||
<h3>Hierarchy: Guide the Eye</h3>
|
||||
<p>Decide the ONE thing you want the user to see first. Make it the biggest, boldest element. Use size and color to create a path for the eye to follow: Image -> Headline -> CTA.</p>
|
||||
|
||||
<h3>Consistency Builds Trust</h3>
|
||||
<p>Pick a font pair and a color palette and stick to them religiously. If you removed your logo from your post, would a follower still recognize it as yours? That's the goal. Use templates to ensure this consistency without reinventing the wheel every time.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
slug: 'video-content-trends',
|
||||
featureSlug: 'create',
|
||||
title: 'Vertical Video: The New Standard',
|
||||
excerpt: 'The vertical revolution is here. A deep dive into short-form video strategies for Reels, TikTok, and Shorts that drive massive reach.',
|
||||
image: '/images/resources/video.webp',
|
||||
bigImage: '/images/resources/big-img/video.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-11.webp',
|
||||
date: 'Jan 07, 2026',
|
||||
author: 'Emma Davis',
|
||||
category: 'Video',
|
||||
content: `
|
||||
<h2>The 9:16 Reality</h2>
|
||||
<p>We live in a mobile-first world, and that means we live in a vertical world. TikTok changed the game, and now Reels and Shorts are following suit. If you are still posting 16:9 landscape videos to Instagram, you are fighting a losing battle against screen real estate.</p>
|
||||
|
||||
<h3>Lo-Fi Authenticity</h3>
|
||||
<p>High production value can essentially hurt you on platforms like TikTok. Users have developed "ad blindness" for polished commercials. Handheld, raw footage shot on a phone often feels more native and trustworthy. Don't overthink the lighting; focus on the story.</p>
|
||||
|
||||
<h3>The 3-Second Hook</h3>
|
||||
<p>You have less time than ever to grab attention. Start with movement or a bold statement immediately. No lengthy intros, no logo splashes. Get straight to the point.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
slug: 'writing-engaging-captions',
|
||||
featureSlug: 'create',
|
||||
title: 'Copywriting Secrets for Social Media',
|
||||
excerpt: 'Words sell. Copywriting formulas and psychological triggers that stop the scroll and compel your audience to click "Read More".',
|
||||
image: '/images/resources/content.webp',
|
||||
bigImage: '/images/resources/big-img/content.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-12.webp',
|
||||
date: 'Jan 02, 2026',
|
||||
author: 'David Wilson',
|
||||
category: 'Content',
|
||||
content: `
|
||||
<h2>Writing for the Scroll</h2>
|
||||
<p>On social, people don't read; they scan. Your copy needs to be punchy, spaced out, and incredibly easy to consume. Big blocks of text are the enemy.</p>
|
||||
|
||||
<h3>The First Line is Everything</h3>
|
||||
<p>Instagram truncates captions after two lines. That means if your core message isn't at the very top, nobody sees it. Treat the first sentence like an email subject line—its only job is to get them to read the second sentence.</p>
|
||||
|
||||
<h3>The Power of "You"</h3>
|
||||
<p>Stop talking about "we" and "our company." Start talking about "you" and "your problems." User-centric copy connects emotionally because everyone is ultimately interested in themselves.</p>
|
||||
|
||||
<h3>Micro-CTAs</h3>
|
||||
<p>Don't just ask them to "buy." Ask them to "save this post," "share with a friend," or "drop an emoji." These micro-commitments train the algorithm that your content is engaging.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Start Page (13-15)
|
||||
{
|
||||
id: '13',
|
||||
slug: 'optimizing-link-in-bio',
|
||||
featureSlug: 'start-page',
|
||||
title: 'Mastering the Link-in-Bio',
|
||||
excerpt: 'Your bio is prime real estate. Strategies to optimize your one link to drive traffic, capture leads, and boost sales.',
|
||||
image: '/images/resources/growth.webp',
|
||||
bigImage: '/images/resources/big-img/growth.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-13.webp',
|
||||
date: 'Jan 14, 2026',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Growth',
|
||||
content: `
|
||||
<h2>The Gateway to Conversion</h2>
|
||||
<p>Instagram gives you one clickable link. TikTok gives you one. LinkedIn (often) gives you one. This bottleneck is also your biggest opportunity. A well-optimized "Start Page" creates a micro-website experience that directs traffic exactly where you want it.</p>
|
||||
|
||||
<h3>Choice Paralysis</h3>
|
||||
<p>Psychology tells us that too many choices lead to no action. Don't list 30 links. Stick to your top 3-5 priorities. Do you want them to subscribe? Buy? Read? Prioritize these actions visually.</p>
|
||||
|
||||
<h3>Remove Friction</h3>
|
||||
<p>The goal is to reduce clicks. Use a "Start Page" that allows embedded content. Let them watch your latest YouTube video or sign up for your newsletter <em>without</em> leaving the page. Every extra click loses you 20-30% of your traffic.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
slug: 'landing-page-conversion',
|
||||
featureSlug: 'start-page',
|
||||
title: 'High-Converting Landing Pages',
|
||||
excerpt: 'Speed, clarity, and friction. Simple but powerful tweaks to your landing page that can double your conversion rate overnight.',
|
||||
image: '/images/resources/conversion.webp',
|
||||
bigImage: '/images/resources/big-img/conversion.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-14.webp',
|
||||
date: 'Jan 06, 2026',
|
||||
author: 'Mike Chen',
|
||||
category: 'Conversion',
|
||||
content: `
|
||||
<h2>The 5-Second Test</h2>
|
||||
<p>A user lands on your page. Can they understand <strong>what you offer</strong>, <strong>why it matters</strong>, and <strong>how to get it</strong> in 5 seconds or less? If not, you've lost them. Clarity beats cleverness every time.</p>
|
||||
|
||||
<h3>Mobile Optimization First</h3>
|
||||
<p>80% of social media traffic is mobile. Design your landing pages for a phone screen first. Ensure your buttons are thumb-friendly, your font is legible, and your load time is lightning fast.</p>
|
||||
|
||||
<h3>Social Proof</h3>
|
||||
<p>Nobody wants to be the first guinea pig. Place testimonials, logos, or "number of users" stats near your call-to-action. This reduces risk anxiety and gives users the confidence to click.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
slug: 'personal-branding-tips',
|
||||
featureSlug: 'start-page',
|
||||
title: 'Personal Branding in the Digital Age',
|
||||
excerpt: 'You are your niche. How to curate a Start Page that tells your story, showcases your portfolio, and strengthens your personal brand.',
|
||||
image: '/images/resources/branding.webp',
|
||||
bigImage: '/images/resources/big-img/branding.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-15.webp',
|
||||
date: 'Jan 01, 2026',
|
||||
author: 'Emma Davis',
|
||||
category: 'Branding',
|
||||
content: `
|
||||
<h2>People Follow People</h2>
|
||||
<p>Even for B2B companies, people want to know the faces behind the logo. Your personal brand is your reputation at scale. It's not about being an "influencer"; it's about being an authority.</p>
|
||||
|
||||
<h3>The Bio as a Resume</h3>
|
||||
<p>In 2026, your social profile is often visited before your website or LinkedIn. Treat your "Start Page" as a dynamic resume. Highlight your best work, your newsletter, and your contact info clearly.</p>
|
||||
|
||||
<h3>Aesthetic Consistency</h3>
|
||||
<p>Visual consistency builds memory structures. If your profile photo is bright yellow, use that same yellow on your Start Page. These subtle cues tell the user they are in the right place.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// AI Assistant (16-18)
|
||||
{
|
||||
id: '16',
|
||||
slug: 'ai-for-content-creation',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'Augmenting Creativity with AI',
|
||||
excerpt: 'Work smarter, not harder. How to use AI tools to generate endless content ideas, draft engaging copy, and repurpose your best posts.',
|
||||
image: '/images/resources/ai.webp',
|
||||
bigImage: '/images/resources/big-img/ai.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-16.webp',
|
||||
date: 'Jan 13, 2026',
|
||||
author: 'David Wilson',
|
||||
category: 'AI',
|
||||
content: `
|
||||
<h2>The Blank Page Destroyer</h2>
|
||||
<p>Writer's block is a thing of the past. AI shouldn't write your final copy, but it should write your first draft. Use it to generate 50 headlines, structure a blog outline, or brainstorm campaign angles in seconds.</p>
|
||||
|
||||
<h3>Repurposing Machine</h3>
|
||||
<p>The real power of AI is in repurposing. Take a successful YouTube script, feed it into an AI, and ask for a Twitter thread, a LinkedIn post, and an Instagram canption. You've just created 4 pieces of content from 1 effort.</p>
|
||||
|
||||
<h3>Prompt Engineering</h3>
|
||||
<p>The quality of output depends on the quality of input. Be specific. Instead of "Write a post about coffee," try "Write a witty, 2-sentence Instagram caption about needing coffee on a Monday morning, targeting software developers."</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
slug: 'future-of-marketing-ai',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'Marketing in 2030: The AI Prediction',
|
||||
excerpt: 'Adapt or die. Predictions on hyper-personalization, predictive analytics, and the role of automated optimization in the next decade.',
|
||||
image: '/images/resources/trends.webp',
|
||||
bigImage: '/images/resources/big-img/trends.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-17.webp',
|
||||
date: 'Jan 08, 2026',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Trends',
|
||||
content: `
|
||||
<h2>Hyper-Personalization at Scale</h2>
|
||||
<p>We are moving from "segments of thousands" to "segments of one." AI will soon generate unique images and copy for <em>each individual user</em> based on their past behavior. The era of the one-size-fits-all ad is ending.</p>
|
||||
|
||||
<h3>Predictive vs. Reactive</h3>
|
||||
<p>Today, we analyze what happened yesterday. Tomorrow, AI will tell us what will happen next week. Predictive analytics will forecast trends, viral moments, and customer churn with terrifying accuracy, allowing brands to act before the future happens.</p>
|
||||
|
||||
<h3>The Human Premium</h3>
|
||||
<p>As AI content floods the internet, genuine human connection will become a luxury good. Brands that show face, tell real stories, and build community will command a premium over generic, AI-optimized noise.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
slug: 'humanizing-ai-content',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'Escaping the Uncanny Valley of AI Text',
|
||||
excerpt: 'Avoid the "Uncanny Valley". Essential editing techniques to ensure your AI-assisted content retains your unique voice and emotional resonance.',
|
||||
image: '/images/resources/strategy-2.webp',
|
||||
bigImage: '/images/resources/big-img/strategy-2.webp',
|
||||
bannerImage: '/images/resources/inner-banner/resources-banner-18.webp',
|
||||
date: 'Jan 04, 2026',
|
||||
author: 'Mike Chen',
|
||||
category: 'Strategy',
|
||||
content: `
|
||||
<h2>Why AI Sounds Like AI</h2>
|
||||
<p>Large Language Models (LLMS) are designed to predict the most likely next word. This results in "average" writing—grammatically correct but often soulless. It lacks the jagged edges, slang, and unexpected turns of phrase that make human writing interesting.</p>
|
||||
|
||||
<h3>The Sandwich Method</h3>
|
||||
<p>How do you fix it? Use the sandwich method. Write the intro yourself (Human). Let AI draft the body points (Machine). Write the conclusion and call to action yourself (Human). This wraps the robotic efficiency in a human bun.</p>
|
||||
|
||||
<h3>Fact-Checking is Mandatory</h3>
|
||||
<p>AI hallucinates. It will confidently invent statistics, quotes, and even historical events. Never copy-paste blindly. Your credibility is on the line. Treat AI as a junior intern: talented, but requires supervision.</p>
|
||||
`
|
||||
},
|
||||
];
|
||||
@ -2,6 +2,11 @@ import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: "export", // keep: needed for next export
|
||||
trailingSlash: true,
|
||||
images: {
|
||||
unoptimized: true, // ✅ needed
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
456
package-lock.json
generated
456
package-lock.json
generated
@ -8,15 +8,23 @@
|
||||
"name": "socialbuddy-temp",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.561.0",
|
||||
"next": "16.0.8",
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1"
|
||||
"react-dom": "19.2.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"selenium-webdriver": "^4.27.0",
|
||||
"sitemap": "^8.0.0",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-google-recaptcha": "^2.1.9",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.8",
|
||||
"tailwindcss": "^4",
|
||||
@ -276,6 +284,12 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@bazel/runfiles": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@bazel/runfiles/-/runfiles-6.5.0.tgz",
|
||||
"integrity": "sha512-RzahvqTkfpY2jsDxo8YItPX+/iZ6hbiikw1YhE0bA9EKBR5Og8Pa6FHn9PO9M0zaXRVsr0GFQLKbB/0rzy9SzA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz",
|
||||
@ -1549,7 +1563,6 @@
|
||||
"version": "20.19.26",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.26.tgz",
|
||||
"integrity": "sha512-0l6cjgF0XnihUpndDhk+nyD3exio3iKaYROSgvh/qSevPXax3L8p5DBRFjbvalnwatGgHEQn2R88y2fA3g4irg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
@ -1575,6 +1588,25 @@
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-google-recaptcha": {
|
||||
"version": "2.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz",
|
||||
"integrity": "sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sax": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
|
||||
"integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.49.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.49.0.tgz",
|
||||
@ -2169,6 +2201,12 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
@ -2363,6 +2401,12 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
@ -2389,6 +2433,17 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
@ -2497,7 +2552,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
@ -2597,6 +2651,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -2611,6 +2677,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -2755,6 +2827,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
@ -2782,7 +2863,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
@ -2894,7 +2974,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -2904,7 +2983,6 @@
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -2942,7 +3020,6 @@
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
@ -2955,7 +3032,6 @@
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
@ -3570,6 +3646,26 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
|
||||
@ -3586,11 +3682,53 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
|
||||
"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.23.26",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
|
||||
"integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.23",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@ -3651,7 +3789,6 @@
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
@ -3676,7 +3813,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
@ -3764,7 +3900,6 @@
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -3836,7 +3971,6 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -3849,7 +3983,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
@ -3865,7 +3998,6 @@
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
@ -3891,6 +4023,15 @@
|
||||
"hermes-estree": "0.25.1"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@ -3901,6 +4042,12 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||
@ -3928,6 +4075,12 @@
|
||||
"node": ">=0.8.19"
|
||||
}
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
|
||||
@ -4404,7 +4557,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
@ -4483,6 +4635,18 @@
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jszip": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||
"license": "(MIT OR GPL-3.0-or-later)",
|
||||
"dependencies": {
|
||||
"lie": "~3.3.0",
|
||||
"pako": "~1.0.2",
|
||||
"readable-stream": "~2.3.6",
|
||||
"setimmediate": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||
@ -4527,6 +4691,15 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
|
||||
@ -4815,7 +4988,6 @@
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
@ -4834,6 +5006,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.561.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz",
|
||||
"integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@ -4848,7 +5029,6 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@ -4878,6 +5058,27 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -4901,6 +5102,21 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.23",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
|
||||
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@ -5040,7 +5256,6 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
@ -5227,6 +5442,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@ -5335,11 +5556,16 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
@ -5347,6 +5573,12 @@
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
@ -5387,6 +5619,19 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-async-script": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
|
||||
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"prop-types": "^15.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
||||
@ -5399,11 +5644,44 @@
|
||||
"react": "^19.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-google-recaptcha": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
|
||||
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.0",
|
||||
"react-async-script": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream/node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
@ -5546,6 +5824,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/safe-push-apply": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
|
||||
@ -5581,12 +5865,43 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
|
||||
"integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/selenium-webdriver": {
|
||||
"version": "4.39.0",
|
||||
"resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.39.0.tgz",
|
||||
"integrity": "sha512-NAs9jCU+UeZ/ZmRb8R6zOp7N8eMklefdBYASnaRmCNXdgFE8w3OCxxZmLixkwqnGDHY5VF7hCulfw1Mls43N/A==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/SeleniumHQ"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/selenium"
|
||||
}
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@bazel/runfiles": "^6.5.0",
|
||||
"jszip": "^3.10.1",
|
||||
"tmp": "^0.2.5",
|
||||
"ws": "^8.18.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
@ -5646,6 +5961,12 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
"version": "0.34.5",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
|
||||
@ -5803,6 +6124,31 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/sitemap": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-8.0.2.tgz",
|
||||
"integrity": "sha512-LwktpJcyZDoa0IL6KT++lQ53pbSrx2c9ge41/SeLTyqy2XUNA6uR4+P9u5IVo5lPeL2arAcOKn1aZAxoYbCKlQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "^17.0.5",
|
||||
"@types/sax": "^1.2.1",
|
||||
"arg": "^5.0.0",
|
||||
"sax": "^1.4.1"
|
||||
},
|
||||
"bin": {
|
||||
"sitemap": "dist/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0",
|
||||
"npm": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sitemap/node_modules/@types/node": {
|
||||
"version": "17.0.45",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
|
||||
"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
@ -5833,6 +6179,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.includes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
|
||||
@ -6087,6 +6442,15 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/tmp": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
|
||||
"integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.14"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
@ -6297,7 +6661,6 @@
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unrs-resolver": {
|
||||
@ -6376,6 +6739,12 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
@ -6491,6 +6860,49 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xml2js": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
|
||||
"integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"sax": ">=0.6.0",
|
||||
"xmlbuilder": "~11.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/xmlbuilder": {
|
||||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
|
||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
|
||||
14
package.json
14
package.json
@ -6,18 +6,28 @@
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
"lint": "eslint",
|
||||
"generate-sitemap": "node scripts/generate-sitemap.js",
|
||||
"seo-test": "node scripts/seo-test-selenium.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.561.0",
|
||||
"next": "16.0.8",
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1"
|
||||
"react-dom": "19.2.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"selenium-webdriver": "^4.27.0",
|
||||
"sitemap": "^8.0.0",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-google-recaptcha": "^2.1.9",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.8",
|
||||
"tailwindcss": "^4",
|
||||
|
||||
6
public/.htaccess
Normal file
6
public/.htaccess
Normal file
@ -0,0 +1,6 @@
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . /index.html [L]
|
||||
</IfModule>
|
||||
BIN
public/about-image-2.png
Normal file
BIN
public/about-image-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
BIN
public/about-image.png
Normal file
BIN
public/about-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
BIN
public/cta-dashboard.png
Normal file
BIN
public/cta-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 691 KiB |
BIN
public/device-mockup.png
Normal file
BIN
public/device-mockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
BIN
public/faq-illustration.png
Normal file
BIN
public/faq-illustration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 KiB |
BIN
public/faq-workspace.jpg
Normal file
BIN
public/faq-workspace.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
BIN
public/features/ai.png
Normal file
BIN
public/features/ai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
BIN
public/features/analytics.png
Normal file
BIN
public/features/analytics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
BIN
public/features/platforms.png
Normal file
BIN
public/features/platforms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
BIN
public/features/scheduling.png
Normal file
BIN
public/features/scheduling.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
BIN
public/hero-inner-bg.png
Normal file
BIN
public/hero-inner-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
BIN
public/hero-slide-1.png
Normal file
BIN
public/hero-slide-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
public/hero-slide-2.png
Normal file
BIN
public/hero-slide-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
BIN
public/hero-slide-3.png
Normal file
BIN
public/hero-slide-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
public/images/about/aboutpage-banner.webp
Normal file
BIN
public/images/about/aboutpage-banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/about/app-dashboard.png
Normal file
BIN
public/images/about/app-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 KiB |
BIN
public/images/about/comprehensive.webp
Normal file
BIN
public/images/about/comprehensive.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/images/about/marketers.png
Normal file
BIN
public/images/about/marketers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
BIN
public/images/about/our-story.webp
Normal file
BIN
public/images/about/our-story.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/about/power.png
Normal file
BIN
public/images/about/power.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
BIN
public/images/about/ready-img.webp
Normal file
BIN
public/images/about/ready-img.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/images/about/secure.png
Normal file
BIN
public/images/about/secure.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
BIN
public/images/about/success.png
Normal file
BIN
public/images/about/success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 903 B |
BIN
public/images/about/team-meeting.png
Normal file
BIN
public/images/about/team-meeting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 823 KiB |
BIN
public/images/about/workspace.png
Normal file
BIN
public/images/about/workspace.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 955 KiB |
BIN
public/images/careers/bg.webp
Normal file
BIN
public/images/careers/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
public/images/careers/bottom.webp
Normal file
BIN
public/images/careers/bottom.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/images/careers/careers-banner.webp
Normal file
BIN
public/images/careers/careers-banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
public/images/careers/hiring.webp
Normal file
BIN
public/images/careers/hiring.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/careers/left.webp
Normal file
BIN
public/images/careers/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/images/careers/top.webp
Normal file
BIN
public/images/careers/top.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/images/channels/instagram/channel.webp
Normal file
BIN
public/images/channels/instagram/channel.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user