home and inner pages structures updated
This commit is contained in:
parent
25f0dc624f
commit
5853fc54fd
@ -1,337 +1,576 @@
|
||||
/* About Page Styles */
|
||||
|
||||
.aboutPage {
|
||||
min-height: 100vh;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* 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: var(--background-secondary);
|
||||
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%);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.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;
|
||||
.breadcrumb {
|
||||
color: var(--text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 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: 4rem 4rem 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: #0f172a;
|
||||
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,193 +10,210 @@ 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>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/team-meeting.png"
|
||||
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}> redefining the way you manage social media.</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.
|
||||
In the heart of the digital age, SocialBuddy began with a simple idea: to bring exceptional social media management tools directly to your fingertips. With a passion for innovation and a commitment to convenience, we embarked on a mission to redefine the way you grow your online presence.
|
||||
</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.
|
||||
From our humble beginnings to becoming a beloved tool for creators worldwide, our journey has been guided by one principle: to deliver results. With a dedication to quality insights and tech innovation, we invite you to join us on this flavorful adventure. Welcome to SocialBuddy, where every click tells a story of passion, growth, and the joy of shared success.
|
||||
</p>
|
||||
<button className={styles.storyBtn}>
|
||||
Learn more about us
|
||||
</button>
|
||||
</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}>
|
||||
<Users size={32} />
|
||||
</div>
|
||||
))}
|
||||
<h3>Experienced Professionals</h3>
|
||||
<p>Our team consists of industry veterans with years of experience in social media strategies.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Orange (Yellow/Peach in Ref) */}
|
||||
<div className={`${styles.card} ${styles.cardOrange}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Award size={32} />
|
||||
</div>
|
||||
<h3>Satisfaction Guarantee</h3>
|
||||
<p>We are committed to your success and offer a satisfaction guarantee on all our services.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Pink (Red/Pink in Ref) */}
|
||||
<div className={`${styles.card} ${styles.cardPink}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<Zap size={32} />
|
||||
</div>
|
||||
<h3>Affordable Rates</h3>
|
||||
<p>Get premium tools and insights at a fraction of the cost of enterprise solutions.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Green */}
|
||||
<div className={`${styles.card} ${styles.cardGreen}`}>
|
||||
<div className={styles.cardIconWrapper}>
|
||||
<ShieldCheck size={32} />
|
||||
</div>
|
||||
<h3>Reliable & Trustworthy</h3>
|
||||
<p>Security and data privacy are our top priorities. Your account is safe with us.</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>Data Sync and Backup</h4>
|
||||
<p>Sync tasks and app settings like system color across multiple devices automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.featureListItem}>
|
||||
<div className={styles.featureListIcon}>
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div className={styles.featureListText}>
|
||||
<h4>Task Attachments</h4>
|
||||
<p>Users can attach files, documents, or links to tasks, providing additional context.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.featureListItem}>
|
||||
<div className={styles.featureListIcon}>
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div className={styles.featureListText}>
|
||||
<h4>Real-time Analytics</h4>
|
||||
<p>Track performance metrics instantly as they happen, giving you the edge to adapt.</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/app-dashboard.png"
|
||||
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
|
||||
</a>
|
||||
<div className={styles.readyCard}>
|
||||
<div className={styles.readyContent}>
|
||||
<h2 className={styles.readyTitle}>
|
||||
Ready? Let's Start with <br /> SocialBuddy
|
||||
and Get <span className={styles.whiteGradientText}>Awesome Experience</span>
|
||||
</h2>
|
||||
<p className={styles.readyText}>
|
||||
Define unique social tactics for your brand. Users can adjust the goals, visuals and audience details to ensure their content workflows are spot on.
|
||||
</p>
|
||||
<button className={styles.readyBtn}>
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.readyImageWrapper}>
|
||||
<div className={styles.phoneFrame}>
|
||||
<Image
|
||||
src="/device-mockup.png"
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
395
app/careers/careers.module.css
Normal file
395
app/careers/careers.module.css
Normal file
@ -0,0 +1,395 @@
|
||||
/* Careers Page Styles */
|
||||
|
||||
.careersPage {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: url('/hero-inner-bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
padding: 8rem 0 8rem;
|
||||
/* 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: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.breadcrumb .active {
|
||||
color: var(--primary);
|
||||
/* Pink or Blue highlighting current page? or just Theme Color */
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
/* 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('/hero-slide-1.png') 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: 170px;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
211
app/careers/page.tsx
Normal file
211
app/careers/page.tsx
Normal file
@ -0,0 +1,211 @@
|
||||
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 = {
|
||||
title: 'Careers - Join SocialBuddy',
|
||||
description: 'Join our team and help shape the future of social media management.',
|
||||
};
|
||||
|
||||
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.active}>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}>
|
||||
<span className={styles.subTitle}>What We Do</span>
|
||||
<h2>We Are Building The Future of Social Media</h2>
|
||||
<p>
|
||||
At SocialBuddy, we don't just build tools; we build connections. Our platform empowers over 10,000 businesses to reach their potential audiences effectively.
|
||||
</p>
|
||||
<p>
|
||||
We work with cutting-edge technologies like AI and Machine Learning to solve complex scale problems. If you love challenges and innovation, this is the place for you.
|
||||
</p>
|
||||
<button className="btn btn-primary">See Open Roles</button>
|
||||
</div>
|
||||
|
||||
{/* Right Image Grid (3 Images) */}
|
||||
<div className={styles.offerImageGrid}>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img1}`}>
|
||||
<Image
|
||||
src="/about-image.png"
|
||||
alt="Team Collaboration"
|
||||
width={400}
|
||||
height={500}
|
||||
className={styles.gridImg}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img2}`}>
|
||||
<Image
|
||||
src="/images/about/workspace.png"
|
||||
alt="Our Workspace"
|
||||
width={300}
|
||||
height={200}
|
||||
className={styles.gridImg}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.gridImgWrapper} ${styles.img3}`}>
|
||||
<Image
|
||||
src="/images/about/team-meeting.png"
|
||||
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}>Happy Team</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}><Smile size={48} /></div>
|
||||
<div className={styles.statNumber}>340</div>
|
||||
<div className={styles.statLabel}>Completed Projects</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statIconWrapper}><MapPin size={48} /></div>
|
||||
<div className={styles.statNumber}>15</div>
|
||||
<div className={styles.statLabel}>Countries</div>
|
||||
</div>
|
||||
<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="/about-image-2.png"
|
||||
alt="Hiring Process"
|
||||
width={500}
|
||||
height={600}
|
||||
className={styles.hiringImg}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right: Process List */}
|
||||
<div className={styles.processList}>
|
||||
<div>
|
||||
<span className={styles.subTitle}>Hiring Process</span>
|
||||
<h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
|
||||
Join in 3 Simple Steps
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>01</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Provide details</h4>
|
||||
<p>Submit your application with your resume and portfolio. Tell us about your journey.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>02</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Schedule Interview</h4>
|
||||
<p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.processItem}>
|
||||
<div className={styles.processNumber}>03</div>
|
||||
<div className={styles.processContent}>
|
||||
<h4>Get Hired</h4>
|
||||
<p>Receive an offer and join our amazing team. Welcome aboard!</p>
|
||||
</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>Ultimate Experience for <br /> Your Career</h2>
|
||||
<p className={styles.benefitsText}>
|
||||
Completely empower your career journey with robust opportunities. We enable front-end and back-end developers to thrive in an environment of innovation.
|
||||
</p>
|
||||
<button className="btn btn-primary btn-large">Learn More +</button>
|
||||
</div>
|
||||
|
||||
{/* Right Connected Cards */}
|
||||
<div className={styles.connectedCards}>
|
||||
<div className={styles.connCard}>
|
||||
<div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
|
||||
<Layout />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<h4>Future Technology</h4>
|
||||
<p>Work with the latest modern stack.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}>
|
||||
<div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}>
|
||||
<MousePointerClick />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<h4 style={{ color: 'white' }}>Drag & Drop Builder</h4>
|
||||
<p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.connCard}>
|
||||
<div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
|
||||
<Gem />
|
||||
</div>
|
||||
<div className={styles.connContent}>
|
||||
<h4>Most Eco Friendly</h4>
|
||||
<p>Sustainable practices at core.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
633
app/channels/[slug]/channel-page.module.css
Normal file
633
app/channels/[slug]/channel-page.module.css
Normal file
@ -0,0 +1,633 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: var(--background);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner from About) --- */
|
||||
.hero {
|
||||
padding: 8rem 0 8rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.benefitsContent {}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
250
app/channels/[slug]/page.tsx
Normal file
250
app/channels/[slug]/page.tsx
Normal file
@ -0,0 +1,250 @@
|
||||
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 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 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> {channel.title}
|
||||
</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.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 className={styles.aboutSubImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.about.subImage}
|
||||
alt={`${channel.title} Sub Feature`}
|
||||
className={styles.img}
|
||||
fallbackSrc={`https://placehold.co/400x400/png?text=${encodeURIComponent(channel.title)}+Sub`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.aboutContent}>
|
||||
<span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
|
||||
<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="#" 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.benefitsContainer}>
|
||||
<div className={styles.benefitsContent}>
|
||||
<span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
|
||||
<h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
|
||||
<p className={styles.aboutDescription}>
|
||||
We've built specific tools to help you succeed on {channel.title}.
|
||||
Stop guessing and start growing with data-driven insights.
|
||||
</p>
|
||||
<a href="#" className="btn btn-primary">See All Features</a>
|
||||
</div>
|
||||
<div className={styles.benefitsGrid}>
|
||||
{channel.benefits.slice(0, 4).map((benefit, index) => (
|
||||
<div key={index} className={styles.benefitCard}>
|
||||
<div className={styles.benefitIcon}>
|
||||
{getIcon(benefit.icon)}
|
||||
</div>
|
||||
<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.testimonialGrid}>
|
||||
<div className={styles.testimonialImages}>
|
||||
<div className={styles.testImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.heroImage}
|
||||
alt="Happy Customer"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.testImgWrapper}>
|
||||
<SafeImage
|
||||
src={channel.about.mainImage}
|
||||
alt="Community"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/400x400/png?text=Customer+2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.testimonialSliderWrapper}>
|
||||
<span className={styles.sectionSubtitle}>Testimonials</span>
|
||||
<h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
|
||||
<TestimonialSlider testimonials={channel.testimonials} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 5. FAQ */}
|
||||
{channel.faqs && channel.faqs.length > 0 && (
|
||||
<section className={styles.faqSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.faqGrid}>
|
||||
<div className={styles.faqContent}>
|
||||
<span className={styles.sectionSubtitle}>FAQ</span>
|
||||
<h2 className={styles.sectionTitle}>Frequently Asked Questions about {channel.title}</h2>
|
||||
<div className={styles.accordion}>
|
||||
{channel.faqs.map((faq, index) => (
|
||||
<details key={index} className={styles.accordionItem}>
|
||||
<summary className={styles.accordionTrigger}>
|
||||
{faq.question}
|
||||
<span className={styles.accordionIcon}>+</span>
|
||||
</summary>
|
||||
<div className={styles.accordionContentOpen}>
|
||||
<p style={{ paddingBottom: '1.5rem', color: 'var(--text-secondary)' }}>{faq.answer}</p>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.faqImageWrapper}>
|
||||
<SafeImage
|
||||
src="/images/faq-illustration.png"
|
||||
alt="FAQ Illustration"
|
||||
className={styles.img}
|
||||
fallbackSrc="https://placehold.co/600x600/png?text=FAQ+Support"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 6. 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 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>
|
||||
);
|
||||
}
|
||||
283
app/channels/channels.module.css
Normal file
283
app/channels/channels.module.css
Normal file
@ -0,0 +1,283 @@
|
||||
/* Channels Page Styles */
|
||||
|
||||
.channelsPage {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* 1. About/Intro Section (Ref Image 1) */
|
||||
.introSection {
|
||||
padding: 4rem 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>
|
||||
);
|
||||
}
|
||||
@ -3,9 +3,12 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
padding: 8rem 0 8rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(59, 130, 246, 0.05));
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -17,7 +20,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,16 +31,33 @@
|
||||
.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: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.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;
|
||||
}
|
||||
|
||||
.contactGrid {
|
||||
|
||||
@ -60,13 +60,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>Contact</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
633
app/features/[slug]/feature-page.module.css
Normal file
633
app/features/[slug]/feature-page.module.css
Normal file
@ -0,0 +1,633 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: var(--background);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner from About) --- */
|
||||
.hero {
|
||||
padding: 8rem 0 8rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.benefitsContent {}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
.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,27 +3,62 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 6rem 0 4rem;
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 8rem 0 8rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.categorySection {
|
||||
|
||||
@ -100,12 +100,10 @@ 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>
|
||||
|
||||
@ -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: 5rem 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 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 plans later?',
|
||||
answer: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges."
|
||||
},
|
||||
{
|
||||
question: 'What payment methods do you accept?',
|
||||
answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.'
|
||||
},
|
||||
{
|
||||
question: 'Is there a free trial?',
|
||||
answer: 'Yes! All paid plans come with a 14-day free trial. No credit card required to start.'
|
||||
},
|
||||
{
|
||||
question: 'Can I cancel anytime?',
|
||||
answer: 'Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.'
|
||||
},
|
||||
{
|
||||
question: 'Do you offer discounts for nonprofits?',
|
||||
answer: 'Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.'
|
||||
},
|
||||
{
|
||||
question: 'What happens to my data if I cancel?',
|
||||
answer: 'Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.'
|
||||
}
|
||||
];
|
||||
|
||||
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>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="/faq-workspace.jpg"
|
||||
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,365 @@
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.faqHeader {
|
||||
.hero {
|
||||
padding: 8rem 0 8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
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: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
85
app/resources/[slug]/page.tsx
Normal file
85
app/resources/[slug]/page.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
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}>
|
||||
<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> {resource.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Image */}
|
||||
<div className={styles.container}>
|
||||
<div className={styles.detailImageWrapper}>
|
||||
<SafeImage
|
||||
src={resource.image}
|
||||
alt={resource.title}
|
||||
className={styles.image}
|
||||
style={{ width: '100%', height: 'auto', display: 'block' }}
|
||||
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> Resources
|
||||
</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>
|
||||
);
|
||||
}
|
||||
275
app/resources/resources.module.css
Normal file
275
app/resources/resources.module.css
Normal file
@ -0,0 +1,275 @@
|
||||
/* Page Wrapper */
|
||||
.page {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
background-color: #F8FAFC;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Hero Section (Ref: Inner Banner) --- */
|
||||
.hero {
|
||||
padding: 8rem 0 8rem;
|
||||
text-align: center;
|
||||
background-image: url('/hero-inner-bg.png');
|
||||
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: 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;
|
||||
}
|
||||
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
/* 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: 3rem auto;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.detailImageWrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detailContent {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem 4rem;
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
104
components/AboutSection.tsx
Normal file
104
components/AboutSection.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Users, Layout, ShieldCheck, 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="/about-image.png"
|
||||
alt="Business Professional"
|
||||
width={500}
|
||||
height={600}
|
||||
className={styles.image}
|
||||
/>
|
||||
</div>
|
||||
{/* Secondary Small Image (Bottom Left) */}
|
||||
<div className={styles.secondaryImageWrapper}>
|
||||
<Image
|
||||
src="/about-image-2.png"
|
||||
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 Company
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className={styles.title}>
|
||||
We Are The Best <span className="gradient-text">Social Media</span> Marketing Agency
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p className={styles.description}>
|
||||
Elevate your brand with our data-driven social media strategies. We combine creativity with analytics to deliver campaigns that resonate with your audience and drive measurable results.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<ul className={styles.featuresList}>
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Users size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Trusted Partner</h4>
|
||||
<p>Over a decade of experience helping brands grow their online presence with verified strategies.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<Layout size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Fastpace Platform</h4>
|
||||
<p>Rapid deployment of campaigns across all major social platforms to catch trends instantly.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className={styles.featureItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<ShieldCheck size={28} />
|
||||
</div>
|
||||
<div className={styles.featureContent}>
|
||||
<h4>Tested Reliability</h4>
|
||||
<p>Consistent results and transparent reporting you can count on, backed by data.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Link href="/about" className="btn btn-primary btn-large">
|
||||
Discover More <ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Counters Section Removed as requested */}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutSection;
|
||||
@ -1,238 +1,193 @@
|
||||
.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: #0f172a;
|
||||
/* 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('/hero-bg-v2.png');
|
||||
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;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.ctaCard {
|
||||
padding: 6rem 4rem;
|
||||
}
|
||||
}
|
||||
@ -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}>
|
||||
Your social media <br /> workspace
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Share consistently without the chaos
|
||||
</p>
|
||||
|
||||
<Link href="https://app.socialbuddy.co/signup" className={styles.standaloneBtn}>
|
||||
Get started for free <span className={styles.arrow}>→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
354
components/CoreServices.module.css
Normal file
354
components/CoreServices.module.css
Normal file
@ -0,0 +1,354 @@
|
||||
.section {
|
||||
padding: 5rem 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 Visual Styles */
|
||||
.columnCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.centralVisual {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circleBg {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.glassCard {
|
||||
width: 240px;
|
||||
height: 340px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
transform: rotateY(-10deg) rotateX(10deg);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.centralVisual:hover .glassCard {
|
||||
transform: rotateY(0) rotateX(0) translateY(-10px);
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dots span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dots span:nth-child(1) {
|
||||
background: #ff5f56;
|
||||
}
|
||||
|
||||
.dots span:nth-child(2) {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
|
||||
.dots span:nth-child(3) {
|
||||
background: #27c93f;
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.graphArea {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 20%;
|
||||
background: linear-gradient(to top, var(--primary), var(--secondary));
|
||||
border-radius: 4px 4px 0 0;
|
||||
animation: growBar 2s ease-out infinite alternate;
|
||||
}
|
||||
|
||||
.bar:nth-child(1) {
|
||||
height: 40%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.bar:nth-child(2) {
|
||||
height: 70%;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.bar:nth-child(3) {
|
||||
height: 50%;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.bar:nth-child(4) {
|
||||
height: 90%;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes growBar {
|
||||
from {
|
||||
transform: scaleY(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.pieChart {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(var(--primary) 0% 70%, rgba(255, 255, 255, 0.1) 70% 100%);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pieChart::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 20px;
|
||||
background: var(--card-bg);
|
||||
/* Match visual background if possible, or transparent */
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.floatingBadge {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
animation: floatBadge 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes floatBadge {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.columnCenter {
|
||||
order: -1;
|
||||
/* Image first on mobile */
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.centralVisual {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
114
components/CoreServices.tsx
Normal file
114
components/CoreServices.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
'use client';
|
||||
|
||||
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 Services</div>
|
||||
<h2 className={styles.title}>All-in-One <span className="gradient-text">Social Management</span></h2>
|
||||
<p className={styles.subtitle}>
|
||||
Everything you need to dominate social media, conveniently organized in one powerful platform.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gridContainer}>
|
||||
{/* Left Column */}
|
||||
<div className={styles.columnLeft}>
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>📊</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Unified Dashboard</h3>
|
||||
<p>Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>⚡</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Smart Scheduling</h3>
|
||||
<p>AI-powered timing suggestions to automatically post when your audience is most active.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>📅</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Visual Calendar</h3>
|
||||
<p>Drag-and-drop content calendar to plan and visualize your strategy months in advance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center Column - Image */}
|
||||
<div className={styles.columnCenter}>
|
||||
<div className={styles.centralVisual}>
|
||||
{/* CSS-based Abstract Dashboard/Manager Illustration */}
|
||||
<div className={styles.circleBg}></div>
|
||||
<div className={styles.glassCard}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className={styles.dots}>
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardBody}>
|
||||
<div className={styles.graphArea}>
|
||||
<div className={styles.bar}></div>
|
||||
<div className={styles.bar}></div>
|
||||
<div className={styles.bar}></div>
|
||||
<div className={styles.bar}></div>
|
||||
</div>
|
||||
<div className={styles.pieChart}></div>
|
||||
</div>
|
||||
<div className={styles.floatingBadge}>
|
||||
<span>🚀</span> +128%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className={styles.columnRight}>
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>📈</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Analytics & Reports</h3>
|
||||
<p>Deep dive into performance metrics with automated, white-labeled reports for clients.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>👥</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Team Collaboration</h3>
|
||||
<p>Built-in approval workflows and role-based access for seamless team coordination.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.serviceItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<span className={styles.icon}>💬</span>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<h3>Social Inbox</h3>
|
||||
<p>Never miss a comment or DM. innovative unified inbox to reply to all interactions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,203 +1,277 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.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,197 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Sparkles, ShieldCheck, 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: React.ReactNode;
|
||||
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: <Calendar size={24} strokeWidth={2.5} />,
|
||||
colorClass: 'orange',
|
||||
faqs: [
|
||||
{
|
||||
question: 'How does the multi-platform scheduling work?',
|
||||
answer: 'Our intuitive calendar allows you to drag and drop content to schedule it across Facebook, Instagram, LinkedIn, and more simultaneously. You can customize the caption and media for each platform individually if needed.'
|
||||
},
|
||||
{
|
||||
question: 'Can I bulk upload posts from a CSV file?',
|
||||
answer: 'Yes! You can upload hundreds of posts at once using our CSV bulk uploader. We also support bulk image uploading to match your spreadsheet content.'
|
||||
},
|
||||
{
|
||||
question: 'Does SocialBuddy suggest the best times to post?',
|
||||
answer: 'Absolutely. Our AI analyzes your audience engagement history to recommend the optimal posting times for each specific platform to maximize reach.'
|
||||
},
|
||||
{
|
||||
question: 'Is there a limit to how many posts I can schedule?',
|
||||
answer: 'Our Pro and Premium plans offer unlimited scheduling. The Starter plan includes up to 50 scheduled posts per month, which is sufficient for most individual creators.'
|
||||
},
|
||||
{
|
||||
question: 'Can I preview how my posts will look?',
|
||||
answer: 'Yes, we provide a realistic preview for each platform so you can see exactly how your image, caption, and hashtags will appear before they go live.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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: <Sparkles size={24} strokeWidth={2.5} />,
|
||||
colorClass: 'red',
|
||||
faqs: [
|
||||
{
|
||||
question: 'How does the AI caption generator work?',
|
||||
answer: 'We utilize advanced natural language processing models. You simply provide a topic or an image, and our AI generates engaging, on-brand captions with relevant emojis and hashtags.'
|
||||
},
|
||||
{
|
||||
question: 'Can I teach the AI my brand voice?',
|
||||
answer: 'Yes! You can set up "Brand Personas" where you define your tone (e.g., professional, witty, casual). The AI will then tailor all generated content to match your specific style.'
|
||||
},
|
||||
{
|
||||
question: 'Does the AI generate images as well?',
|
||||
answer: 'Currently, our AI focuses on text generation (captions, scripts, blog ideas). However, we integrate with stock photo libraries and design tools to help you find the perfect visuals.'
|
||||
},
|
||||
{
|
||||
question: 'Is the AI content unique?',
|
||||
answer: 'Yes, every piece of content is generated from scratch based on your inputs. It is not pre-written templates, ensuring your content remains fresh and original.'
|
||||
},
|
||||
{
|
||||
question: 'Can AI help with hashtag research?',
|
||||
answer: 'Definitely. Our AI analyzes your post content and niche to suggest high-traffic, low-competition hashtags that boost discoverability.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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: <ShieldCheck size={24} strokeWidth={2.5} />,
|
||||
colorClass: 'blue',
|
||||
faqs: [
|
||||
{
|
||||
question: 'What happens if I am not satisfied with the results?',
|
||||
answer: 'We offer a 30-day money-back guarantee. If you don\'t see the value in SocialBuddy within the first month, just let us know and we will refund your subscription.'
|
||||
},
|
||||
{
|
||||
question: 'Is my social media account data secure?',
|
||||
answer: 'Security is paramount. We use bank-level 256-bit encryption and never store your account passwords. We connect via official APIs which are safe and compliant.'
|
||||
},
|
||||
{
|
||||
question: 'Can I cancel my subscription at any time?',
|
||||
answer: 'Yes, there are no long-term contracts. You can cancel your monthly subscription at any time from your dashboard settings without any cancellation fees.'
|
||||
},
|
||||
{
|
||||
question: 'Do you offer team collaboration features?',
|
||||
answer: 'Yes, our higher-tier plans allow you to invite team members, assign roles (Editor, Admin), and set up approval workflows to ensure quality control.'
|
||||
},
|
||||
{
|
||||
question: 'How can I contact support if I have issues?',
|
||||
answer: 'We offer 24/7 priority support via live chat and email for all our customers. Our average response time is under 15 minutes.'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
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}
|
||||
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}>
|
||||
Everything You <span className="gradient-text">Need to Know</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 : ''}`}>
|
||||
{category.icon}
|
||||
</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'}
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className={styles.faqAnswer}>
|
||||
<div className={styles.answerContent}>
|
||||
<p>{faq.answer}</p>
|
||||
<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: 6rem 0 3rem;
|
||||
/* Increase top padding */
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
@ -130,7 +132,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);
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
@ -13,7 +14,7 @@ export default function Footer() {
|
||||
],
|
||||
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,8 +47,8 @@ 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.
|
||||
@ -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>
|
||||
|
||||
@ -1,398 +1,267 @@
|
||||
.hero {
|
||||
.heroSection {
|
||||
position: relative;
|
||||
padding: 8rem 0 4rem;
|
||||
/* Top padding for fixed navbar */
|
||||
/* Stronger Pastel Gradient for differentiation */
|
||||
background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 100%);
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8rem 0 6rem;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.9)),
|
||||
url('/hero-custom.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
/* Custom user-uploaded background */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
/* Background Abstract Circles */
|
||||
.heroBackground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 15% 50%, rgba(236, 72, 153, 0.1), transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.1), transparent 25%);
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
.circleBg1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Floating gradient orbs - refined */
|
||||
.gradientOrb1,
|
||||
.gradientOrb2,
|
||||
.gradientOrb3 {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gradientOrb1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(236, 72, 153, 0.3), transparent 70%);
|
||||
top: -20%;
|
||||
background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
animation: floatOrb 25s ease-in-out infinite alternate;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gradientOrb2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
|
||||
.circleBg2 {
|
||||
position: absolute;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
animation: floatOrb 20s ease-in-out infinite alternate-reverse;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.gradientOrb3 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
animation: floatOrb 22s ease-in-out infinite alternate;
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes floatOrb {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(30px, -30px);
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
.contentWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.heroContent {
|
||||
.contentWrapper {
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 6rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.textContent {
|
||||
/* Left Content */
|
||||
.leftContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
animation: slideInUp 1s ease-out;
|
||||
}
|
||||
|
||||
/* Animated badge - refined */
|
||||
.badge {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
/* Light pink bg */
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 50px;
|
||||
margin-bottom: 1.5rem;
|
||||
align-self: flex-start;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.badge:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-1px);
|
||||
@media (max-width: 1024px) {
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.badgePulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
|
||||
animation: pulseShadow 2s infinite;
|
||||
|
||||
.badgeLabel {
|
||||
background: #6cb655;
|
||||
/* Green like ref "NEW" */
|
||||
color: white;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@keyframes pulseShadow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
|
||||
}
|
||||
.badgeText {
|
||||
font-size: 0.9rem;
|
||||
color: #0f172a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(3rem, 5vw, 4.5rem);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.typingText {
|
||||
background: linear-gradient(to right, #ffffff, #e2e8f0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: #0f172a;
|
||||
/* Dark text */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 1em;
|
||||
background-color: #3b82f6;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
animation: blink 1s step-end infinite;
|
||||
background: #3b82f6;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
font-size: clamp(1.125rem, 2vw, 1.25rem);
|
||||
line-height: 1.6;
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 3rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
/* Premium Buttons */
|
||||
.primaryCta {
|
||||
position: relative;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #ec4899, #8b5cf6);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 10px 30px -10px rgba(236, 72, 153, 0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.primaryCta:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 40px -15px rgba(236, 72, 153, 0.5);
|
||||
}
|
||||
|
||||
.buttonGlow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transform: skewX(-20deg);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.primaryCta:hover .buttonGlow {
|
||||
left: 150%;
|
||||
transition: left 0.7s;
|
||||
}
|
||||
|
||||
.secondaryCta {
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.secondaryCta:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.primaryCta:hover .arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Trust badges - cleaner */
|
||||
.trustBadges {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.trustBadge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trustValue {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.trustLabel {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Image Content / Dashboard Preview */
|
||||
.imageContent {
|
||||
position: relative;
|
||||
perspective: 1200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboardPreview {
|
||||
position: relative;
|
||||
background: rgba(30, 41, 59, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(-8deg) rotateX(4deg);
|
||||
transition: transform 0.5s ease;
|
||||
animation: floatCard 8s ease-in-out infinite;
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* Search Bar CTA */
|
||||
.searchBarCta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
max-width: 500px;
|
||||
margin-bottom: 3rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.inputGroup {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
font-size: 1.2rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
color: #334155;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dashboardPreview:hover {
|
||||
transform: rotateY(-4deg) rotateX(2deg) scale(1.02);
|
||||
.searchBtn {
|
||||
background: #6cb655;
|
||||
/* Green Button like Ref */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes floatCard {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotateY(-8deg) rotateX(4deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateY(-8deg) rotateX(4deg) translateY(-15px);
|
||||
}
|
||||
.searchBtn:hover {
|
||||
background: #6cb655;
|
||||
}
|
||||
|
||||
/* Trusted By */
|
||||
.trustedBy p {
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Floating icons - clearer */
|
||||
.floatingIcon {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 16px;
|
||||
.trustedIcons {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trustIcon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
opacity: 0.8;
|
||||
filter: grayscale(0%);
|
||||
/* Keep colored like ref */
|
||||
}
|
||||
|
||||
/* Right Content */
|
||||
.rightContent {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
/* Adjust as needed */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
animation: floatIcon 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
animation-delay: 0s;
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
top: 30%;
|
||||
right: -30px;
|
||||
animation-delay: 2s;
|
||||
.mainImageCircle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
bottom: -15px;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
.heroImage {
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
/* Clean, no shadow if image has its own transparency */
|
||||
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
|
||||
@keyframes floatIcon {
|
||||
/* Floating Cards */
|
||||
.floatCard {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
z-index: 2;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
@ -400,252 +269,200 @@
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.previewHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.previewDots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.previewDots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.previewTitle {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.previewBody {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.previewCard {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.chartBar {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chartBar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/* Card 1: Congrats (Top Left / Top Center) */
|
||||
.cardCongrats {
|
||||
top: 10%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--progress, 0%);
|
||||
background: linear-gradient(90deg, #ec4899, #8b5cf6);
|
||||
border-radius: 4px;
|
||||
animation: fillBar 1.5s ease-out forwards;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(1) {
|
||||
--progress: 75%;
|
||||
.cardIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #fff1f2;
|
||||
color: #f43f5e;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(2) {
|
||||
--progress: 45%;
|
||||
.cardText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chartBar:nth-child(3) {
|
||||
--progress: 90%;
|
||||
.cardText strong {
|
||||
font-size: 0.9rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.scheduleItem {
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
.cardText span {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@keyframes fillBar {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: var(--progress);
|
||||
}
|
||||
.checkIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #6cb655;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Card 2: Users (Bottom Right) */
|
||||
.cardUsers {
|
||||
bottom: 20%;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
/* Stacked layout like ref */
|
||||
align-items: flex-start;
|
||||
padding: 1.25rem;
|
||||
animation-delay: 1.5s;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Scroll indicator - minimalist */
|
||||
.scrollIndicator {
|
||||
.userCount {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.userLabel {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.userAvatars {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
border: 2px solid white;
|
||||
margin-left: -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.avatar:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
border: 2px solid white;
|
||||
margin-left: -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Card 3: Message (Bottom Left) */
|
||||
.cardMessage {
|
||||
bottom: 10%;
|
||||
left: 10%;
|
||||
padding: 0.75rem 1rem;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
.msgAvatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #bfdbfe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.msgText span {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.msgText p {
|
||||
font-size: 0.85rem;
|
||||
color: #0f172a;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.sliderDots {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
opacity: 0.5;
|
||||
animation: fadeBounce 2s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.scrollIndicator span {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mouse {
|
||||
width: 20px;
|
||||
height: 32px;
|
||||
border: 2px solid white;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mouseWheel {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
@keyframes fadeBounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: translate(-50%, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Morphing shapes - softer, blended */
|
||||
.morphingShape1,
|
||||
.morphingShape2 {
|
||||
position: absolute;
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.15;
|
||||
z-index: 0;
|
||||
background: #cbd5e1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.morphingShape1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
.activeDot {
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
background: #3b82f6;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
animation: morph 20s infinite alternate;
|
||||
/* Blue active dot */
|
||||
}
|
||||
|
||||
.morphingShape2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: #ec4899;
|
||||
bottom: -10%;
|
||||
left: -10%;
|
||||
animation: morph 25s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
/* Slide animations */
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Responsive adjustments */
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
padding-top: 6rem;
|
||||
.contentWrapper {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leftContent {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.searchBarCta {
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.rightContent {
|
||||
display: none;
|
||||
/* Hide complex image on tablet/mobile if needed, or simply scale it */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.imageContent {
|
||||
display: none;
|
||||
/* Hide 3D element on small screens to reduce clutter */
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textContent {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-bottom: 2rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.trustBadges {
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.trustBadge {
|
||||
align-items: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,262 +1,172 @@
|
||||
'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: 'New Feature',
|
||||
badgeText: 'AI-Powered Scheduling is here',
|
||||
title: 'Find your social media success.',
|
||||
subtitle: 'Your dream engagement is waiting for you. Manage all your accounts in one place.',
|
||||
ctaPrimary: 'Get Started',
|
||||
image: '/hero-slide-1.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
badge: 'Analytics',
|
||||
badgeText: 'Deep insights for growth',
|
||||
title: 'Analyze performance & boost reach.',
|
||||
subtitle: 'Track every click, like, and share with our advanced analytics dashboard.',
|
||||
ctaPrimary: 'Explore Analytics',
|
||||
image: '/hero-slide-2.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
badge: 'Community',
|
||||
badgeText: 'Join 10,000+ Creators',
|
||||
title: 'Connect with your audience instantly.',
|
||||
subtitle: 'Real-time engagement tools to keep your community active and growing.',
|
||||
ctaPrimary: 'Join Community',
|
||||
image: '/hero-slide-3.png'
|
||||
},
|
||||
];
|
||||
|
||||
// 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>
|
||||
<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 className={styles.trustedBy}>
|
||||
<p>We are Trusted by:</p>
|
||||
<div className={styles.trustedIcons}>
|
||||
<div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div> {/* Google */}
|
||||
<div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div> {/* Behance */}
|
||||
<div className={styles.trustIcon} style={{ color: '#E4405F' }}>📷</div> {/* Insta */}
|
||||
<div className={styles.trustIcon} style={{ color: '#00A4EF' }}>⊞</div> {/* Microsoft */}
|
||||
</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,274 @@
|
||||
.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: var(--gradient-hero);
|
||||
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;
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.timeline::before {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
.numberWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.ctaBox a:hover .arrow {
|
||||
transform: translateX(5px);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import styles from './HowItWorks.module.css';
|
||||
import { TrendingUp, BarChart3, Users, Heart } from 'lucide-react';
|
||||
|
||||
export default function HowItWorks() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
@ -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,67 @@ 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: 'Trends and Technologies',
|
||||
description: 'Leverage emerging tools to foster innovation and collaboration.',
|
||||
icon: <TrendingUp />,
|
||||
},
|
||||
{
|
||||
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: 'Data Analysis and Analytics',
|
||||
description: 'Deploy insights to improve decision making and drive traffic.',
|
||||
icon: <BarChart3 />,
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Engage Your Audience',
|
||||
description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.',
|
||||
icon: '💬',
|
||||
color: '#14b8a6',
|
||||
title: 'Your Target Audience',
|
||||
description: 'Understand Your Target Audience and their shopping behavior.',
|
||||
icon: <Users />,
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Analyze & Optimize',
|
||||
description: 'Track performance metrics and get actionable insights to improve your social media strategy.',
|
||||
icon: '📈',
|
||||
color: '#f59e0b',
|
||||
title: 'Social Media Engagement',
|
||||
description: 'Create valuable, shareable content for increased engagement.',
|
||||
icon: <Heart />,
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
How We <span className="gradient-text">Drive Results</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}>
|
||||
{step.icon}
|
||||
</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>
|
||||
);
|
||||
|
||||
@ -15,11 +15,7 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navbar.scrolled {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navContent {
|
||||
display: flex;
|
||||
@ -59,7 +55,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 992px) {
|
||||
.navLinks {
|
||||
display: flex;
|
||||
}
|
||||
@ -208,4 +204,51 @@
|
||||
flex-direction: column;
|
||||
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,161 @@ 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);
|
||||
}, []);
|
||||
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' },
|
||||
];
|
||||
const navLinks = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{
|
||||
href: '#',
|
||||
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: '/channels',
|
||||
label: 'Channels',
|
||||
dropdown: [
|
||||
{ href: '/channels/facebook', label: 'Facebook' },
|
||||
{ href: '/channels/instagram', label: 'Instagram' },
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
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>
|
||||
return (
|
||||
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
|
||||
<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>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className={styles.navLinks}>
|
||||
{navLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href} className={styles.navLink}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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 Button */}
|
||||
<button
|
||||
className={styles.mobileMenuBtn}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
|
||||
</button>
|
||||
</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>
|
||||
|
||||
{/* 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 */}
|
||||
{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)' }}>
|
||||
{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: #0f172a;
|
||||
/* 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
|
||||
Simple, <span className="gradient-text">Transparent Pricing</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Choose the perfect plan for your needs. All plans include a 14-day free trial.
|
||||
Choose the perfect plan for your needs. All plans include a 7-day free trial.
|
||||
</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 month</div>
|
||||
</div>
|
||||
|
||||
<a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
|
||||
Sign up <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>Try risk-free. Cancel 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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,334 +1,159 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
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>
|
||||
<div className={styles.subTitle}>Our Services</div>
|
||||
<h2 className={styles.title}>
|
||||
Connect Your <span className={styles.highlight}>Favorite Accounts</span>
|
||||
Always we offer the best services for success!
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Seamlessly integrate all your social media platforms in one place.
|
||||
Manage, schedule, and analyze everything from a single dashboard.
|
||||
<p className={styles.description}>
|
||||
New analytic tools can help manufacturers in labor-intensive sectors boost
|
||||
productivity and earnings by double-digit on It is a secure and simple
|
||||
ondemand. the total percentages.
|
||||
</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}
|
||||
<br />
|
||||
<span className={styles.brandName}>Prysm Quarterly</span> has been defining...
|
||||
</p>
|
||||
</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
|
||||
className={styles.readMoreBtn}
|
||||
style={{ backgroundColor: activePlatform.color }}
|
||||
>
|
||||
Read More
|
||||
</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);
|
||||
}
|
||||
}
|
||||
118
components/StatsCounter.tsx
Normal file
118
components/StatsCounter.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
'use client';
|
||||
|
||||
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>
|
||||
<span className={styles.statIcon}>👥</span>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.users : 0}k+
|
||||
</div>
|
||||
<p className={styles.label}>Active Users</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 2 */}
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.iconBg}></div>
|
||||
<span className={styles.statIcon}>🚀</span>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? '2' : '0'}M+
|
||||
</div>
|
||||
<p className={styles.label}>Posts Scheduled</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat 3 */}
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.iconBg}></div>
|
||||
<span className={styles.statIcon}>⭐</span>
|
||||
</div>
|
||||
<div className={styles.textContent}>
|
||||
<div className={styles.numberWrapper}>
|
||||
{hasAnimated ? counts.satisfaction : 0}%
|
||||
</div>
|
||||
<p className={styles.label}>Client Satisfaction</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,293 @@
|
||||
.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%);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.cardHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.userImage {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f0f4f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.userInfo h4 {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.testimonialCard {
|
||||
padding: 4rem 3rem;
|
||||
}
|
||||
|
||||
.testimonialText {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.userCompany {
|
||||
font-size: 0.8rem;
|
||||
color: #718096;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.testimonialCard {
|
||||
padding: 5rem 6rem;
|
||||
.rating {
|
||||
margin-left: auto;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.leftCard {
|
||||
flex: none;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
padding: 0;
|
||||
mask-image: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sliderTrack {
|
||||
/* On mobile, maybe snap scroll? */
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2rem;
|
||||
transform: none !important;
|
||||
/* Disable JS slide on mobile if preferring native scroll */
|
||||
}
|
||||
|
||||
.sliderCard {
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
}
|
||||
@ -1,137 +1,205 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
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!',
|
||||
text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers.',
|
||||
image: '👩💼'
|
||||
},
|
||||
{
|
||||
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.',
|
||||
text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful.',
|
||||
image: '👨💻'
|
||||
},
|
||||
{
|
||||
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!',
|
||||
text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features have streamlined our process.',
|
||||
image: '👩🎨'
|
||||
},
|
||||
{
|
||||
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.',
|
||||
text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy.',
|
||||
image: '👨💼'
|
||||
},
|
||||
{
|
||||
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!',
|
||||
text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance.',
|
||||
image: '👩🦰'
|
||||
},
|
||||
{
|
||||
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!',
|
||||
},
|
||||
text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing.',
|
||||
image: '👨🏫'
|
||||
}
|
||||
];
|
||||
|
||||
// Clone the first few items to create the infinite illusion
|
||||
// We need enough clones to fill the visible area. 4 is safe.
|
||||
const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)];
|
||||
const totalOriginal = testimonials.length;
|
||||
|
||||
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 we are at the end of the original list (showing the first clone)
|
||||
// We animate TO the clone.
|
||||
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;
|
||||
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}>
|
||||
Discover your <br />
|
||||
entrepreneurial potential
|
||||
</h2>
|
||||
<p className={styles.cardDescription}>
|
||||
Join countless marketers and influencers who have transformed their social media presence with SocialBuddy.
|
||||
Success is just a click away.
|
||||
</p>
|
||||
|
||||
<div className={styles.miniStats}>
|
||||
<div className={styles.statBadge}>
|
||||
<span className={styles.statIcon}>👥</span>
|
||||
<div>
|
||||
<strong>10,000+</strong>
|
||||
<span>Happy Users</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statBadge}>
|
||||
<span className={styles.statIcon}>⭐</span>
|
||||
<div>
|
||||
<strong>4.9/5</strong>
|
||||
<span>Ratings</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className={styles.readMoreBtn}>
|
||||
Read Success 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}>
|
||||
<div
|
||||
className={styles.sliderTrack}
|
||||
style={{
|
||||
transform: `translateX(calc(-${activeIndex * 352}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}>{t.image}</div>
|
||||
<div className={styles.userInfo}>
|
||||
<h4>{t.name}</h4>
|
||||
<span className={styles.userCompany}>{t.company}</span>
|
||||
</div>
|
||||
<div className={styles.rating}>⭐⭐⭐⭐⭐</div>
|
||||
</div>
|
||||
<h5 className={styles.reviewTitle}>Amazing Experience!</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: 5rem 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>
|
||||
);
|
||||
}
|
||||
285
data/channels.ts
Normal file
285
data/channels.ts
Normal file
@ -0,0 +1,285 @@
|
||||
|
||||
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[];
|
||||
faqs: ChannelFAQ[];
|
||||
details: ChannelDetail[];
|
||||
}
|
||||
|
||||
export const channels: Channel[] = [
|
||||
{
|
||||
slug: 'facebook',
|
||||
title: 'Facebook',
|
||||
subtitle: 'Master Your Facebook Presence',
|
||||
heroImage: '/images/channels/facebook-hero.png',
|
||||
description: 'Schedule posts, analyze performance, and engage with your Facebook community from one dashboard.',
|
||||
about: {
|
||||
title: 'Complete Facebook Management',
|
||||
subTitle: 'Connect & Convert',
|
||||
description: 'Maximize your Facebook impact. From scheduling regular posts and Stories to analyzing page performance, SocialBuddy gives you the tools to grow your audience and drive engagement on the world\'s largest social network.',
|
||||
bulletPoints: [
|
||||
{ text: 'Auto-Schedule Posts', icon: 'Calendar' },
|
||||
{ text: 'Audience Insights', icon: 'BarChart' },
|
||||
{ text: 'Community Management', icon: 'Inbox' },
|
||||
{ text: 'Ad Performance', icon: 'Trophy' }
|
||||
],
|
||||
mainImage: '/images/channels/facebook-about-main.jpg',
|
||||
subImage: '/images/channels/facebook-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Reels & Stories', description: 'Schedule more than just posts. Plan your Reels and Stories in advance.', icon: 'Smartphone' },
|
||||
{ title: 'First Comment', description: 'Automatically add the first comment to your posts to boost engagement.', icon: 'Inbox' },
|
||||
{ title: 'Best Time to Post', description: 'AI-driven insights tell you exactly when your audience is most active.', icon: 'Zap' },
|
||||
{ title: 'Bulk Upload', description: 'Upload hundreds of posts at once via CSV to fill your calendar instantly.', icon: 'Layout' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "SocialBuddy helped us double our Facebook reach in just three months. The scheduling tools are a game changer.", author: "Mark Stephens", role: "Social Media Manager", rating: 5, image: "/images/testimonials/mark.jpg" },
|
||||
{ quote: "I love the analytics. It's so much easier to understand than Facebook's native insights.", author: "Lisa Wong", role: "Digital Marketer", rating: 5, image: "/images/testimonials/lisa.jpg" },
|
||||
{ quote: "The ability to schedule Reels from my desktop is huge for our workflow.", author: "David Miller", role: "Content Creator", rating: 4, image: "/images/testimonials/david.jpg" },
|
||||
{ quote: "Great support and solid features. It just works.", author: "Sarah Connor", role: "Small Business Owner", rating: 5, image: "/images/testimonials/sarah.jpg" },
|
||||
{ quote: "Managing 50+ Facebook pages used to be impossible. Now it's easy.", author: "James Chen", role: "Agency Director", rating: 5, image: "/images/testimonials/james.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." }
|
||||
],
|
||||
details: []
|
||||
},
|
||||
{
|
||||
slug: 'instagram',
|
||||
title: 'Instagram',
|
||||
subtitle: 'Visually Plan Your Grid & Stories',
|
||||
heroImage: '/images/channels/instagram-hero.png',
|
||||
description: 'Grow your Instagram following with visual planning, auto-publishing, and detailed analytics.',
|
||||
about: {
|
||||
title: 'Your Instagram Aesthetic, Perfected',
|
||||
subTitle: 'Curate & Create',
|
||||
description: 'Take the guesswork out of Instagram. Visually plan your grid, schedule Carousels and Reels, and track your growth. SocialBuddy provides everything you need to build a stunning Instagram presence.',
|
||||
bulletPoints: [
|
||||
{ text: 'Visual Grid Planner', icon: 'Layout' },
|
||||
{ text: 'Story Scheduling', icon: 'Smartphone' },
|
||||
{ text: 'Hashtag Manager', icon: 'Repeat' },
|
||||
{ text: 'Link in Bio', icon: 'Palette' }
|
||||
],
|
||||
mainImage: '/images/channels/instagram-about-main.jpg',
|
||||
subImage: '/images/channels/instagram-about-sub.jpg'
|
||||
},
|
||||
benefits: [
|
||||
{ title: 'Direct Publishing', description: 'Auto-publish images, carousels, and Reels without phone notifications.', icon: 'Zap' },
|
||||
{ title: 'Grid Preview', description: 'See exactly how your feed will look before you post.', icon: 'Eye' },
|
||||
{ title: 'Hashtag Suggestions', description: 'Get relevant hashtags to increase discoverability based on your image.', icon: 'ShieldCheck' },
|
||||
{ title: 'Product Tagging', description: 'Tag products in your posts to drive e-commerce sales directly.', icon: 'Trophy' }
|
||||
],
|
||||
testimonials: [
|
||||
{ quote: "The visual planner is exactly what I needed. My feed looks so much better now.", author: "Chloe Adams", role: "Influencer", rating: 5, image: "/images/testimonials/chloe.jpg" },
|
||||
{ quote: "Scheduling Stories has saved me so much time on weekends.", author: "Ryan Brooks", role: "Brand Manager", rating: 5, image: "/images/testimonials/ryan.jpg" },
|
||||
{ quote: "The analytics for Stories are incredibly detailed.", author: "Emma Watson", role: "Marketing Lead", rating: 4, image: "/images/testimonials/emma.jpg" },
|
||||
{ quote: "SocialBuddy allows our whole team to collaborate on our Instagram strategy.", author: "Lucas Gray", role: "Creative Director", rating: 5, image: "/images/testimonials/lucas.jpg" },
|
||||
{ quote: "Best tool for managing multiple Instagram clients.", author: "Sophie Lee", role: "Agency Owner", rating: 5, image: "/images/testimonials/sophie.jpg" }
|
||||
],
|
||||
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." }
|
||||
],
|
||||
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: []
|
||||
}
|
||||
];
|
||||
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: []
|
||||
}
|
||||
];
|
||||
399
data/resources.ts
Normal file
399
data/resources.ts
Normal file
@ -0,0 +1,399 @@
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
export const resources: ResourcePost[] = [
|
||||
// Publish (1-3)
|
||||
{
|
||||
id: '1',
|
||||
slug: 'mastering-social-media-scheduling',
|
||||
featureSlug: 'publish',
|
||||
title: 'Mastering Social Media Scheduling for 2025',
|
||||
excerpt: 'Learn the secrets to efficient content planning and how to save hours every week.',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 15, 2025',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Strategy',
|
||||
content: `
|
||||
<h2>Why Scheduling Matters</h2>
|
||||
<p>In the fast-paced world of social media, consistency is key. Scheduling your posts ensures that your audience sees your content regularly, keeping your brand top-of-mind. It allows you to plan your content mix strategically, rather than posting reactively.</p>
|
||||
<h3>1. Plan Ahead</h3>
|
||||
<p>Start by creating a content calendar. Map out your key themes, holidays, and promotional events. This gives you a roadmap to follow and prevents the dreaded "what do I post today?" panic.</p>
|
||||
<h3>2. Batch Your Content Creation</h3>
|
||||
<p>Dedicate specific blocks of time to create content. Write captions, design graphics, and edit videos in batches. This is far more efficient than task-switching every day.</p>
|
||||
<h3>3. Use the Right Tools</h3>
|
||||
<p>Tools like SocialBuddy allow you to schedule posts across multiple platforms from a single dashboard. Utilize features like visual calendars and drag-and-drop scheduling to streamline your workflow.</p>
|
||||
<h2>Conclusion</h2>
|
||||
<p>Mastering scheduling is about working smarter, not harder. By planning ahead and using the right tools, you can maintain a consistent presence while freeing up time to engage with your community.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
slug: 'best-times-to-post-instagram',
|
||||
featureSlug: 'publish',
|
||||
title: 'The Best Times to Post on Instagram',
|
||||
excerpt: 'Data-backed insights on when your audience is most active and likely to engage.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 12, 2025',
|
||||
author: 'Mike Chen',
|
||||
category: 'Guides',
|
||||
content: `
|
||||
<h2>Understanding Instagram's Algorithm</h2>
|
||||
<p>The Instagram algorithm favors recency. Posting when your followers are online increases the chances of your content being seen and engaged with early on, which signals to the algorithm that your post is high-quality.</p>
|
||||
<h3>General Best Times</h3>
|
||||
<ul>
|
||||
<li><strong>Weekdays:</strong> Early morning (6 AM - 9 AM) and evening (5 PM - 8 PM) tend to perform well as people commute or unwind.</li>
|
||||
<li><strong>Weekends:</strong> Engagement can be lower, but late mornings often see a spike.</li>
|
||||
</ul>
|
||||
<h3>Finding Your Unique Best Time</h3>
|
||||
<p>While general benchmarks are helpful, every audience is different. Use SocialBuddy's analytics to see exactly when your specific followers are active. Look for heatmaps in your insights dashboard.</p>
|
||||
<h2>Testing and Iterating</h2>
|
||||
<p>Don't set it and forget it. Consumer behaviors change. regularly review your analytics and adjust your posting schedule accordingly to maximize reach.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
slug: 'content-calendar-templates',
|
||||
featureSlug: 'publish',
|
||||
title: '5 Content Calendar Templates You Need',
|
||||
excerpt: 'Downloadable templates to help you organize your social media strategy effectively.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 10, 2025',
|
||||
author: 'Emma Davis',
|
||||
category: 'Resources',
|
||||
content: `
|
||||
<h2>Organize Your Strategy</h2>
|
||||
<p>A content calendar is more than just a schedule; it's a strategic tool. It helps you ensure a balanced mix of content types (educational, entertaining, promotional) and keeps your team aligned.</p>
|
||||
<h3>Template 1: Monthly Overview</h3>
|
||||
<p>Great for high-level planning. Map out big campaigns, holidays, and key dates.</p>
|
||||
<h3>Template 2: Weekly Detailed Grid</h3>
|
||||
<p>Drill down into specific copy, assets, and hashtags for each post. Perfect for approval workflows.</p>
|
||||
<h3>Template 3: Stories Planner</h3>
|
||||
<p>Don't forget Stories! Plan your daily narratives and engagement stickers to keep your audience hooked.</p>
|
||||
<h2>How to Use These Templates</h2>
|
||||
<p>Customize them to fit your workflow. Add columns for status (Draft, Approved, Scheduled) and platform-specific requirements. Consistent use is the secret to success.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Analyze (4-6)
|
||||
{
|
||||
id: '4',
|
||||
slug: 'understanding-social-metrics',
|
||||
featureSlug: 'analyze',
|
||||
title: 'Understanding Key Social Media Metrics',
|
||||
excerpt: 'Reach, impressions, engagement rate - what do they really mean for your business?',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 14, 2025',
|
||||
author: 'David Wilson',
|
||||
category: 'Analytics',
|
||||
content: `
|
||||
<h2>Metrics That Matter</h2>
|
||||
<p>It's easy to get lost in data. Focusing on the right metrics is crucial for understanding your true performance and ROI.</p>
|
||||
<h3>Reach vs. Impressions</h3>
|
||||
<p><strong>Reach</strong> is the number of unique people who saw your content. <strong>Impressions</strong> is the total number of times your content was displayed. If impressions are much higher than reach, it means your audience is seeing your content multiple times.</p>
|
||||
<h3>Engagement Rate</h3>
|
||||
<p>This is often the most important metric. It measures interaction (likes, comments, shares) relative to your follower count or reach. A high engagement rate indicates highly relevant content.</p>
|
||||
<h2>Actionable Insights</h2>
|
||||
<p>Don't just track numbers; look for trends. Did a specific topic drive higher engagement? Did a certain time of day boost reach? Use these insights to refine your future content strategy.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
slug: 'roi-social-media-marketing',
|
||||
featureSlug: 'analyze',
|
||||
title: 'How to Calculate ROI for Social Media',
|
||||
excerpt: 'Prove the value of your social media efforts with these calculation methods.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 08, 2025',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Business',
|
||||
content: `
|
||||
<h2>Defining Social ROI</h2>
|
||||
<p>Return on Investment (ROI) measures the efficiency of your social media marketing. It answers the question: "What are we getting back for the time and money we put in?"</p>
|
||||
<h3> The Formula</h3>
|
||||
<p>Basic ROI = (Value derived from social media - Cost of social media marketing) / Cost of social media marketing * 100.</p>
|
||||
<h3>Attribution Models</h3>
|
||||
<p>Tracking the "value" can be tricky. Use UTM parameters and conversion tracking pixels to attribute website sales or leads directly to your social posts. SocialBuddy's advanced analytics can help visualize this journey.</p>
|
||||
<h2>Beyond Monetary ROI</h2>
|
||||
<p>Not all value is immediate revenue. Brand awareness, customer loyalty, and sentiment are valuable long-term assets that should also be considered in your overall evaluation.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
slug: 'creating-custom-reports',
|
||||
featureSlug: 'analyze',
|
||||
title: 'Creating Reports Clients Actually Read',
|
||||
excerpt: 'Tips for designing clear, impactful social media reports that showcase your success.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 05, 2025',
|
||||
author: 'Mike Chen',
|
||||
category: 'Reporting',
|
||||
content: `
|
||||
<h2>The Art of Reporting</h2>
|
||||
<p>Data is useless if it's not communicated effectively. Your clients or stakeholders don't have time to wade through spreadsheets. They want the headline news.</p>
|
||||
<h3>1. Focus on Goals</h3>
|
||||
<p>Align your report with the initial business objectives. If the goal was brand awareness, highlight reach and impressions. If it was sales, focus on clicks and conversions.</p>
|
||||
<h3>2. Visualize the Data</h3>
|
||||
<p>Use charts and graphs to make trends instantly understandable. A line graph showing follower growth is far more impactful than a table of numbers.</p>
|
||||
<h3>3. Add Context</h3>
|
||||
<p>Numbers need narrative. Explain <em>why</em> a spike occurred (e.g., "Viral post on Tuesday") and what you're doing to replicate it. This adds expert value to your report.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Engage (7-9)
|
||||
{
|
||||
id: '7',
|
||||
slug: 'community-management-best-practices',
|
||||
featureSlug: 'engage',
|
||||
title: 'Community Management Best Practices',
|
||||
excerpt: 'How to build a loyal community by engaging authentically with your followers.',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 13, 2025',
|
||||
author: 'Emma Davis',
|
||||
category: 'Community',
|
||||
content: `
|
||||
<h2>Building Relationships</h2>
|
||||
<p>Community management is the human face of your brand. It's about two-way conversation, not just broadcasting messages.</p>
|
||||
<h3>Be Responsive</h3>
|
||||
<p>Speed matters. Acknowledge comments and questions quickly. Even a simple "like" shows that you are listening and value their input.</p>
|
||||
<h3>Authenticity Wins</h3>
|
||||
<p>Ditch the corporate robot speak. Use a conversational tone that matches your brand personality. People connect with people, not logos.</p>
|
||||
<h2>Encourage User-Generated Content (UGC)</h2>
|
||||
<p>Celebrate your community by sharing their content. It builds loyalty and provides you with authentic social proof. Always ask for permission and credit the creator!</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
slug: 'managing-negative-comments',
|
||||
featureSlug: 'engage',
|
||||
title: 'Handling Negative Comments Like a Pro',
|
||||
excerpt: 'A guide to crisis management and turning unhappy customers into brand advocates.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 09, 2025',
|
||||
author: 'David Wilson',
|
||||
category: 'Crisis Mgmt',
|
||||
content: `
|
||||
<h2>Keep Calm and Carry On</h2>
|
||||
<p>Negative feedback is inevitable. How you handle it defines your brand's reputation. Never delete negative comments (unless they are hate speech), as this can escalate the situation.</p>
|
||||
<h3>The 3 A's: Acknowledge, Apologize, Act</h3>
|
||||
<ul>
|
||||
<li><strong>Acknowledge:</strong> Let them know they've been heard immediately.</li>
|
||||
<li><strong>Apologize:</strong> If you messed up, own it sincerely.</li>
|
||||
<li><strong>Act:</strong> Move the conversation to a private channel (DM or email) to resolve the issue specific details.</li>
|
||||
</ul>
|
||||
<h2>Turning It Around</h2>
|
||||
<p>A resolved complaint can turn a critic into a fan. Showing that you care enough to fix a problem publicly demonstrates strong customer service to everyone else watching.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
slug: 'social-listening-guide',
|
||||
featureSlug: 'engage',
|
||||
title: 'The Ultimate Guide to Social Listening',
|
||||
excerpt: 'Monitor brand mentions and industry trends to stay ahead of the conversation.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 03, 2025',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Listening',
|
||||
content: `
|
||||
<h2>What is Social Listening?</h2>
|
||||
<p>Social monitoring looks at what people are saying <em>to</em> you. Social listening looks at what people are saying <em>about</em> you, your competitors, and your industry.</p>
|
||||
<h3>Why It's Critical</h3>
|
||||
<p>It helps you find un-tagged mentions of your brand (opportunities to surprise and delight), identify gaps in the market that competitors are missing, and spot potential PR crises before they blow up.</p>
|
||||
<h3>Tools of the Trade</h3>
|
||||
<p>Use SocialBuddy's listening features to track specific keywords and hashtags. Analyze sentiment to gauge how people <em>feel</em> about these topics, not just volume.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Create (10-12)
|
||||
{
|
||||
id: '10',
|
||||
slug: 'design-tips-non-designers',
|
||||
featureSlug: 'create',
|
||||
title: 'Graphic Design Tips for Non-Designers',
|
||||
excerpt: 'Create professional-looking graphics using simple principles and tools.',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 11, 2025',
|
||||
author: 'Mike Chen',
|
||||
category: 'Design',
|
||||
content: `
|
||||
<h2>Keep It Simple</h2>
|
||||
<p>You don't need a degree in art to create stunning visuals. The biggest mistake beginners make is overcrowding their designs.</p>
|
||||
<h3>Hierarchy and Contrast</h3>
|
||||
<p>Make sure the most important element (usually the headline) stands out. Use size and color contrast to guide the viewer's eye. Dark text on a light background (or vice-versa) ensures readability.</p>
|
||||
<h3>Consistency is Key</h3>
|
||||
<p>Stick to a defined color palette and 1-2 font families. This creates visual recognition for your brand over time. Use templates to ensure every post feels like "you".</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
slug: 'video-content-trends',
|
||||
featureSlug: 'create',
|
||||
title: 'Video Content Trends for 2025',
|
||||
excerpt: 'Short-form video is king. Here is how to leverage Reels and TikToks.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 07, 2025',
|
||||
author: 'Emma Davis',
|
||||
category: 'Video',
|
||||
content: `
|
||||
<h2>The Vertical Revolution</h2>
|
||||
<p>9:16 vertical video is now the dominant format across social media. TikTok, Instagram Reels, and YouTube Shorts are prioritizing this content.</p>
|
||||
<h3>Authenticity > Production Value</h3>
|
||||
<p>Audiences are tired of overly polished, TV-style ads. Raw, behind-the-scenes, and "lo-fi" content often performs better because it feels more genuine and relatable.</p>
|
||||
<h3>Short and Snappy</h3>
|
||||
<p>Hook your viewer in the first 3 seconds. Keep edits fast-paced. Use trending audio to piggyback on viral momentum, but always add your unique spin.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
slug: 'writing-engaging-captions',
|
||||
featureSlug: 'create',
|
||||
title: 'Writing Captions That Drive Action',
|
||||
excerpt: 'Copywriting formulas to boost engagement and click-through rates.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 02, 2025',
|
||||
author: 'David Wilson',
|
||||
category: 'Content',
|
||||
content: `
|
||||
<h2>The Hook</h2>
|
||||
<p>Captions are often an afterthought, but they are crucial for stopping the scroll. Your first sentence is your headline—make it intriguing.</p>
|
||||
<h3>The AIDA Formula</h3>
|
||||
<ul>
|
||||
<li><strong>Attention:</strong> Grab them with a question or bold statement.</li>
|
||||
<li><strong>Interest:</strong> Build curiosity or relate to a pain point.</li>
|
||||
<li><strong>Desire:</strong> Offer a solution or benefit.</li>
|
||||
<li><strong>Action:</strong> Tell them exactly what to do next (CTA).</li>
|
||||
</ul>
|
||||
<h3>Format for readability</h3>
|
||||
<p>Break up big blocks of text with line breaks and emojis. This makes your caption easier to scan and less intimidating to read.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// Start Page (13-15)
|
||||
{
|
||||
id: '13',
|
||||
slug: 'optimizing-link-in-bio',
|
||||
featureSlug: 'start-page',
|
||||
title: 'Optimizing Your Link-in-Bio',
|
||||
excerpt: 'Make the most of that single link. Strategies to drive traffic where it matters.',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 14, 2025',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Growth',
|
||||
content: `
|
||||
<h2>One Link to Rule Them All</h2>
|
||||
<p>Platforms like Instagram and TikTok give you limited real estate for links. A "Start Page" or "Link in Bio" tool is essential to bridge the gap between social media and your conversion goals.</p>
|
||||
<h3>Prioritize Your Links</h3>
|
||||
<p>Don't overwhelm visitors with 50 options. Put your most important goal (Buy Now, Sign Up, Latest Blog) at the very top. Use visual cues or animations to highlight priority links.</p>
|
||||
<h3>Branding Matters</h3>
|
||||
<p>Your Link-in-Bio page should look like an extension of your website. Customize colors, fonts, and backgrounds to maintain a seamless brand experience.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
slug: 'landing-page-conversion',
|
||||
featureSlug: 'start-page',
|
||||
title: 'Landing Page Conversion Hacks',
|
||||
excerpt: 'Simple tweaks to your Start Page that can double your click-through rate.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 06, 2025',
|
||||
author: 'Mike Chen',
|
||||
category: 'Conversion',
|
||||
content: `
|
||||
<h2>Speed Kills (Bounce Rates)</h2>
|
||||
<p>If your landing page loads slowly, users will leave. Ensure your Start Page is optimized for mobile speed, as the vast majority of traffic comes from phones.</p>
|
||||
<h3>Clear Value Proposition</h3>
|
||||
<p>Within seconds, a user should know exactly who you are and what you offer. Use a clear, concise bio description and professional profile picture.</p>
|
||||
<h3>Reduce Friction</h3>
|
||||
<p>Minimize the number of clicks required to take action. If you want email signups, embed the form directly on your Start Page rather than linking out to another page.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
slug: 'personal-branding-tips',
|
||||
featureSlug: 'start-page',
|
||||
title: 'Personal Branding on Social Media',
|
||||
excerpt: 'How a curated Start Page strengthens your personal brand identity.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 01, 2025',
|
||||
author: 'Emma Davis',
|
||||
category: 'Branding',
|
||||
content: `
|
||||
<h2>You Are the Brand</h2>
|
||||
<p>In the creator economy, your personal brand is your greatest asset. It's the unique combination of your skills, experience, and personality.</p>
|
||||
<h3>Curating Your Digital Home</h3>
|
||||
<p>Think of your Start Page as your digital business card. It organizes your various "side hustles," content channels, and contact info into one professional hub.</p>
|
||||
<h3>Consistency Across Channels</h3>
|
||||
<p>Ensure your Start Page aligns with the aesthetic of your social profiles. If your Instagram is minimalist and black/white, don't make your Start Page neon rainbow (unless that's the vibe!). Consistency builds trust.</p>
|
||||
`
|
||||
},
|
||||
|
||||
// AI Assistant (16-18)
|
||||
{
|
||||
id: '16',
|
||||
slug: 'ai-for-content-creation',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'AI for Content Creation: A Guide',
|
||||
excerpt: 'How to use AI tools to brainstorm, draft, and refine your social media content.',
|
||||
image: '/images/about/workspace.png',
|
||||
date: 'Dec 13, 2025',
|
||||
author: 'David Wilson',
|
||||
category: 'AI',
|
||||
content: `
|
||||
<h2>The AI Assistant</h2>
|
||||
<p>AI isn't here to replace creativity; it's here to amplify it. It helps overcome the blank page syndrome that plagues every content creator.</p>
|
||||
<h3>Ideation and Brainstorming</h3>
|
||||
<p>Use AI to generate topic ideas, headlines, or campaign angles. Ask it: "Give me 10 tweet ideas about [Topic]" or "What are common pain points for [Audience]?" to jumpstart your process.</p>
|
||||
<h3>Repurposing Content</h3>
|
||||
<p>Feed an old blog post into an AI tool and ask it to summarize it into a Linkedin post, a Twitter thread, and an Instagram caption. This multiplies the value of your existing content effortlessly.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
slug: 'future-of-marketing-ai',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'The Future of Marketing with AI',
|
||||
excerpt: 'Predictions on how artificial intelligence will shape the marketing landscape.',
|
||||
image: '/images/about/team-meeting.png',
|
||||
date: 'Dec 08, 2025',
|
||||
author: 'Sarah Johnson',
|
||||
category: 'Trends',
|
||||
content: `
|
||||
<h2>Hyper-Personalization</h2>
|
||||
<p>AI will enable marketing at a scale of one. Instead of broad segments, brands will be able to deliver unique messages, images, and offers tailored to individual user behavior in real-time.</p>
|
||||
<h3>Predictive Analytics</h3>
|
||||
<p>AI will get better at predicting what customers want <em>before</em> they know it themselves. By analyzing vast datasets, it can forecast trends and consumer shifts with uncanny accuracy.</p>
|
||||
<h3>Automated Optimization</h3>
|
||||
<p>Campaigns will self-correct in real-time. AI will adjust ad spend, creative elements, and targeting parameters 24/7 to maximize ROI, far faster than any human could.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
slug: 'humanizing-ai-content',
|
||||
featureSlug: 'ai-assistant',
|
||||
title: 'Humanizing AI-Generated Content',
|
||||
excerpt: 'Tips to ensure your AI-assisted posts still sound like you.',
|
||||
image: '/images/about/app-dashboard.png',
|
||||
date: 'Dec 04, 2025',
|
||||
author: 'Mike Chen',
|
||||
category: 'Strategy',
|
||||
content: `
|
||||
<h2>The Uncanny Valley</h2>
|
||||
<p>Generic AI copy reads... like AI. It's often flat, repetitive, and lacks nuance. To thrive, you must inject the "human element."</p>
|
||||
<h3>Edit ruthlessly</h3>
|
||||
<p>Treat AI output as a rough draft, never the final product. Add your own anecdotes, idioms, and unique tone of voice. Verify facts, as AI can "hallucinate" information.</p>
|
||||
<h3>Emotional Resonance</h3>
|
||||
<p>AI struggles with genuine emotion and empathy. Focus your editing on connecting with the reader's feelings. That specific, relatable detail is what makes content stick.</p>
|
||||
`
|
||||
}
|
||||
];
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "socialbuddy-temp",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.561.0",
|
||||
"next": "16.0.8",
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1"
|
||||
@ -4834,6 +4835,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",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.561.0",
|
||||
"next": "16.0.8",
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1"
|
||||
|
||||
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/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/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/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/rocket-logo.png
Normal file
BIN
public/rocket-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Loading…
x
Reference in New Issue
Block a user