From 1761f073bf9d0b1229b3bb2ed1ff8281beb5ab9d Mon Sep 17 00:00:00 2001 From: selvi Date: Sat, 10 Jan 2026 18:09:28 +0530 Subject: [PATCH] features page updated --- app/features/features.module.css | 207 ++++++++++++++++++++++++++++++- app/features/page.tsx | 166 ++++++++++++++----------- components/Navbar.tsx | 22 ++-- 3 files changed, 311 insertions(+), 84 deletions(-) diff --git a/app/features/features.module.css b/app/features/features.module.css index 2e76411..f4b0dea 100644 --- a/app/features/features.module.css +++ b/app/features/features.module.css @@ -61,10 +61,211 @@ font-weight: 600; } -.categorySection { - margin-bottom: 5rem; +/* Why Choose Us Section */ +.whySection { + padding-top: 4rem; + padding-bottom: 4rem; + overflow: hidden; } +.whyGrid { + display: grid; + grid-template-columns: 1fr; + gap: 4rem; + align-items: center; +} + +@media (min-width: 992px) { + .whyGrid { + grid-template-columns: 1fr 1fr; + } +} + +.tagline { + color: var(--secondary); + font-weight: 600; + text-transform: uppercase; + font-size: 0.875rem; + letter-spacing: 1px; + display: block; + margin-bottom: 1rem; +} + +.whyTitle { + font-size: clamp(2rem, 4vw, 3rem); + color: var(--foreground); + margin-bottom: 1.5rem; +} + +.whyDescription { + color: var(--foreground-secondary); + font-size: 1.125rem; + margin-bottom: 2.5rem; + line-height: 1.7; +} + +.benefitsRow { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + margin-bottom: 3rem; +} + +@media (min-width: 640px) { + .benefitsRow { + grid-template-columns: 1fr 1fr; + } +} + +.benefitItem { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.benefitIconWrapper { + width: 50px; + height: 50px; + background: rgba(37, 99, 235, 0.1); + /* Blue tint */ + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.benefitIcon { + color: var(--secondary); + width: 24px; + height: 24px; +} + +.benefitText h3 { + font-size: 1.125rem; + margin-bottom: 0.25rem; + color: var(--foreground); +} + +.benefitText p { + font-size: 0.9rem; + color: var(--foreground-secondary); + margin: 0; +} + +.contactRow { + display: flex; + flex-direction: column; + gap: 2rem; + border-top: 1px solid var(--border-color); + padding-top: 2rem; +} + +@media (min-width: 640px) { + .contactRow { + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + +.profileMeta { + display: flex; + align-items: center; + gap: 1rem; +} + +.profileImage, +.avatarPlaceholder { + width: 50px; + height: 50px; + border-radius: 50%; + overflow: hidden; + background: #e2e8f0; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: var(--foreground-secondary); +} + +.profileName { + font-weight: 700; + color: var(--foreground); + font-size: 1rem; +} + +.profileRole { + font-size: 0.875rem; + color: var(--foreground-secondary); +} + +.contactInfo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.phoneIcon { + width: 40px; + height: 40px; + background: var(--secondary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: white; +} + +.contactLabel { + font-size: 0.75rem; + color: var(--foreground-secondary); + text-transform: uppercase; +} + +.contactNumber { + font-weight: 700; + color: var(--foreground); +} + +.whyImageWrapper { + position: relative; + padding: 2rem; +} + +.imageBackgroundShape { + position: absolute; + top: 0; + right: 0; + width: 80%; + height: 90%; + background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); + /* Purple to Blue */ + border-radius: 200px 200px 0 0; + /* Semi-arch shape */ + z-index: 0; + transform: rotate(-5deg); +} + +.mainImageContainer { + position: relative; + z-index: 1; + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-xl); +} + +.mainImage { + width: 100%; + height: auto; + object-fit: cover; + display: block; +} + +/* .categorySection { + margin-bottom: 5rem; +} */ + .categoryHeader { display: flex; align-items: center; @@ -134,7 +335,7 @@ padding: 4rem 0; text-align: center; color: white; - margin-top: 4rem; + /* margin-top: 4rem; */ } .ctaContent { diff --git a/app/features/page.tsx b/app/features/page.tsx index 399de4c..2dcf02c 100644 --- a/app/features/page.tsx +++ b/app/features/page.tsx @@ -1,4 +1,6 @@ import type { Metadata } from 'next'; +import Image from 'next/image'; +import { CheckCircle2, TrendingUp, Shield, Phone } from 'lucide-react'; import styles from './features.module.css'; export const metadata: Metadata = { @@ -9,86 +11,38 @@ export const metadata: Metadata = { export default function FeaturesPage() { const detailedFeatures = [ { - category: 'Content Management', - icon: '📝', + category: 'Core Features', + icon: '⚡', features: [ { - title: 'Visual Content Calendar', - description: 'Plan and organize your content with an intuitive drag-and-drop calendar interface.', - icon: '📅', - }, - { - title: 'Bulk Upload & Scheduling', - description: 'Upload and schedule hundreds of posts at once with CSV import functionality.', - icon: 'âŦ†ī¸', - }, - { - title: 'Content Library', - description: 'Store and organize your media assets in a centralized, searchable library.', - icon: '📚', - }, - ], - }, - { - category: 'Analytics & Insights', - icon: '📊', - features: [ - { - title: 'Real-Time Analytics', - description: 'Monitor your performance with live data updates and comprehensive metrics.', - icon: '📈', - }, - { - title: 'Competitor Analysis', - description: 'Track and compare your performance against competitors in your industry.', - icon: 'đŸŽ¯', - }, - { - title: 'Custom Reports', - description: 'Generate beautiful, white-labeled reports for clients and stakeholders.', - icon: '📄', - }, - ], - }, - { - category: 'Engagement Tools', - icon: 'đŸ’Ŧ', - features: [ - { - title: 'Unified Inbox', - description: 'Manage all your messages, comments, and mentions from one centralized inbox.', - icon: 'đŸ“Ĩ', - }, - { - title: 'Auto-Responses', - description: 'Set up automated responses for common questions and inquiries.', + title: 'Workflow Automation', + description: 'Streamline your social interactions with intelligent automation rules that work 24/7.', icon: '🤖', }, { - title: 'Sentiment Analysis', - description: 'Understand audience sentiment with AI-powered emotion detection.', - icon: '😊', - }, - ], - }, - { - category: 'Team Collaboration', - icon: 'đŸ‘Ĩ', - features: [ - { - title: 'Role-Based Access', - description: 'Control permissions with customizable roles for team members.', + title: 'Secure Account Login', + description: 'Connect and manage multiple social profiles securely with our encrypted login system.', icon: '🔐', }, { - title: 'Approval Workflows', - description: 'Set up multi-level approval processes for content review.', - icon: '✅', + title: 'Comment Management', + description: 'Organize and oversee all user interactions from a single, unified dashboard.', + icon: '📝', }, { - title: 'Team Activity Log', - description: 'Track all team actions with a comprehensive audit trail.', - icon: '📋', + title: 'Quick Engagement', + description: 'Boost your community presence by liking user comments instantly from the dashboard.', + icon: '❤ī¸', + }, + { + title: 'Smart Replies', + description: 'Respond efficiently to your audience using saved templates and quick-reply tools.', + icon: '↩ī¸', + }, + { + title: 'Spam Control', + description: 'Keep your comment sections clean by easily deleting unwanted or inappropriate content.', + icon: '🗑ī¸', }, ], }, @@ -108,6 +62,78 @@ export default function FeaturesPage() { + {/* Why Choose Us Section */} +
+
+
+
+ WHY CHOOSE US +

Why Choose SocialBuddy

+

+ We provide comprehensive social media solutions that help you automate workflows, + secure your accounts, and grow your digital presence authentically. +

+ +
+
+
+ +
+
+

Business Growth

+

Accelerate your reach

+
+
+
+
+ +
+
+

Secure Access

+

Encrypted login system

+
+
+
+ +
+
+
+ +
+
+

Knowledgeable

+

Expert team support

+
+
+
+
+ +
+
+

24/7 Support

+

Always here to help

+
+
+
+
+ +
+
+
+ SocialBuddy Features +
+
+
+
+
+ {/* Features Grid */}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx index b26c9d4..52d3927 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -31,24 +31,24 @@ export default function Navbar() { const navLinks = [ { href: '/', label: 'Home' }, { - href: '#', + href: '/features', label: 'Features', - dropdown: [ - { href: '/features/publish', label: 'Publishing' }, - { href: '/features/analyze', label: 'Analytics' }, - { href: '/features/engage', label: 'Engagement' }, - { href: '/features/create', label: 'Create' }, - { href: '/features/start-page', label: 'Start Page' }, - { href: '/features/ai-assistant', label: 'AI Assistant' }, - ] + // dropdown: [ + // { href: '/features/publish', label: 'Publishing' }, + // { href: '/features/analyze', label: 'Analytics' }, + // { href: '/features/engage', label: 'Engagement' }, + // { href: '/features/create', label: 'Create' }, + // { href: '/features/start-page', label: 'Start Page' }, + // { href: '/features/ai-assistant', label: 'AI Assistant' }, + // ] }, { href: '#', label: 'Channels', dropdown: [ - { href: '/channels/facebook', label: 'Facebook' }, + // { href: '/channels/facebook', label: 'Facebook' }, { href: '/channels/instagram', label: 'Instagram' }, - { href: '/channels/youtube', label: 'YouTube' }, + // { href: '/channels/youtube', label: 'YouTube' }, // { href: '/channels/linkedin', label: 'LinkedIn' }, // { href: '/channels/twitter', label: 'Twitter (X)' }, // { href: '/channels/tiktok', label: 'TikTok' },