Skip to content

Commit 5289dd0

Browse files
Jecomo-Alyssa-LynJecomo-Alyssa-Lyn
authored
Merge pull request #571 from CodebilityDev/services-layout/jacob
feat: CBP-89 Services page layout overhaul with minimal card design and hover animations
2 parents 290fb8a + 16c7da7 commit 5289dd0

10 files changed

Lines changed: 142 additions & 240 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,4 @@ build/**
9090
distapps/bot/.env
9191
.env
9292
apps/codebility/public/assets/onboardingvideos/*.mp4
93+
.planning/

‎apps/codebility/app/(marketing)/_components/MarketingCalendly.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
"use client";
22

33
import React from "react";
4+
import { Clock, Lightbulb, Rocket } from "lucide-react";
45
import { InlineWidget } from "react-calendly";
56

67
import Container from "./MarketingContainer";
78
import Section from "./MarketingSection";
89

910
const Calendly = () => {
1011
return (
11-
<Section id="book" className="relative w-full pt-10 text-white overflow-hidden">
12+
<Section id="book" className="relative w-full pt-10 2xl:pt-24 text-white overflow-hidden">
1213
<Container className="relative z-10 flex flex-col gap-6 text-white lg:flex-row lg:gap-10">
13-
<div className="flex w-full flex-1 flex-col justify-center gap-2 text-center lg:text-left">
14+
<div className="flex w-full flex-1 flex-col justify-start gap-2 text-center lg:text-left">
1415
<h2 className="text-3xl font-bold md:text-5xl bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-transparent">
1516
Let&apos;s Connect
1617
</h2>
@@ -21,14 +22,15 @@ const Calendly = () => {
2122
{/* Enhanced CTA elements */}
2223
<div className="flex flex-col gap-4 mt-6">
2324
{/* Feature highlights */}
24-
<div className="flex flex-col gap-2 text-sm lg:text-base">
25+
<div className="flex flex-col gap-3 text-sm lg:text-base">
2526
{[
26-
"✨ Free 30-minute consultation",
27-
"🚀 Tailored solutions for your business",
28-
"💡 Expert advice from our team"
29-
].map((item, index) => (
30-
<div key={index} className="flex items-center gap-2">
31-
<span className="text-purple-300">{item}</span>
27+
{ icon: Clock, text: "Free 30-minute consultation" },
28+
{ icon: Rocket, text: "Tailored solutions for your business" },
29+
{ icon: Lightbulb, text: "Expert advice from our team" },
30+
].map(({ icon: Icon, text }, index) => (
31+
<div key={index} className="flex items-center gap-3">
32+
<Icon className="size-5 shrink-0 text-purple-400" />
33+
<span className="text-purple-300">{text}</span>
3234
</div>
3335
))}
3436
</div>

‎apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const ServiceDetailModal = ({
110110
return (
111111
<Dialog open={isOpen} onOpenChange={onClose}>
112112
<DialogContent className="max-w-full w-[95vw] sm:w-[90vw] lg:w-[80vw] h-[90vh] max-h-[90vh] p-0 flex flex-col overflow-hidden">
113-
<DialogHeader className="flex-shrink-0 px-4 sm:px-6 pt-4 pb-2">
113+
<DialogHeader id="service-detail-header" className="flex-shrink-0 px-4 sm:px-6 pt-4 pb-2">
114114
<DialogTitle className="text-xl sm:text-2xl font-bold text-center">
115115
{service?.name || "Service Details"}
116116
</DialogTitle>
@@ -160,7 +160,7 @@ export const ServiceDetailModal = ({
160160
</div>
161161

162162
{/* Project Information */}
163-
<section className="space-y-6">
163+
<section id="service-detail-info" className="space-y-6">
164164
<div className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50 sm:p-6">
165165
<h2 className="mb-4 flex items-center gap-3 text-lg font-bold sm:text-xl">
166166
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400 sm:h-8 sm:w-8 sm:text-lg">
@@ -299,7 +299,7 @@ export const ServiceDetailModal = ({
299299

300300
{/* Team Section */}
301301
{(teamLead || members.length > 0 || (service?.members && service.members.length > 0)) && (
302-
<div className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50 sm:p-6">
302+
<div id="service-detail-team" className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50 sm:p-6">
303303
<h2 className="mb-4 flex items-center gap-3 text-lg font-bold sm:text-xl">
304304
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400 sm:h-8 sm:w-8 sm:text-lg">
305305
3

‎apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const ServiceDetailView = ({ service, onBack }) => {
7676
});
7777

7878
return (
79-
<div className="mx-auto w-full max-w-[1200px] px-4 py-8 pb-24 sm:px-6 md:pb-8">
79+
<div id="service-detail" className="mx-auto w-full max-w-[1200px] px-4 py-8 pb-24 sm:px-6 md:pb-8">
8080
{/* Back Button */}
8181
<div className="mb-6 mt-24">
8282
<Button
@@ -117,7 +117,7 @@ export const ServiceDetailView = ({ service, onBack }) => {
117117
</div>
118118

119119
{/* 2. Project Information */}
120-
<section className="mt-12">
120+
<section id="service-detail-info" className="mt-12">
121121
<div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
122122
<h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
123123
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
@@ -319,7 +319,7 @@ export const ServiceDetailView = ({ service, onBack }) => {
319319
</section>
320320

321321
{/* 3. Team Information */}
322-
<section className="mt-12">
322+
<section id="service-detail-team" className="mt-12">
323323
<div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
324324
<h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
325325
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
@@ -402,7 +402,7 @@ export const ServiceDetailView = ({ service, onBack }) => {
402402
</section>
403403

404404
{/* 4. Project Gallery */}
405-
<section className="mt-12">
405+
<section id="service-detail-gallery" className="mt-12">
406406
<div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
407407
<h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
408408
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">

‎apps/codebility/app/(marketing)/services/_components/layout/ServicesGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const ServicesGrid = ({ services }) => {
1515
}
1616

1717
return (
18-
<div>
18+
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
1919
{services.map((service) => (
2020
<ServicesServiceCard
2121
key={service.id}

‎apps/codebility/app/(marketing)/services/_components/layout/ServicesHero.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import SideNavMenu from "../../../_components/MarketingSidenavMenu";
44
export const Hero = () => {
55
return (
66
<div className="relative">
7-
<section className="relative mt-2 flex min-h-[300px] w-full flex-col items-center justify-center overflow-hidden bg-cover bg-no-repeat lg:mt-20">
7+
<section id="services-hero" className="relative mt-2 flex min-h-[180px] w-full flex-col items-center justify-center overflow-hidden bg-cover bg-no-repeat lg:mt-16">
88
<SideNavMenu />
99
<Container className="text-white">
10-
<div className="relative z-10 flex flex-col gap-4 pt-20 text-center lg:pt-0">
11-
<h1 className="flex flex-col gap-1 text-4xl font-semibold md:text-6xl">
10+
<div className="relative z-10 flex flex-col gap-2 pt-14 2xl:p-0 text-center lg:pt-0">
11+
<h1 className="flex flex-col gap-1 text-3xl font-semibold md:text-5xl">
1212
Our Services
1313
</h1>
14-
<h2 className="text-2xl">
14+
<h2 className="text-lg md:text-xl">
1515
Partner with Us to Bring Your Vision to Life
1616
</h2>
1717
</div>

‎apps/codebility/app/(marketing)/services/_components/tabs/ServicesTab.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,14 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
9191
};
9292

9393
return (
94-
<Section className="relative">
95-
<Container className="relative z-0">
94+
<Section id="services-projects" className="relative !pt-0">
95+
<Container className="relative z-0 !max-w-full px-4 sm:px-8 xl:min-w-[1260px] 2xl:min-w-[1560px]">
9696
<div className="flex flex-col gap-4">
9797
{/* Tabs */}
98-
<div className="mx-auto flex flex-wrap justify-center gap-2 rounded-2xl border border-white/20 bg-white/10 p-1 backdrop-blur-sm dark:bg-white/5">
98+
<div id="services-categories" className="mx-auto flex max-w-full flex-wrap justify-center gap-1.5 rounded-2xl border border-white/20 bg-white/10 p-2 backdrop-blur-sm sm:gap-2.5 dark:bg-white/5">
9999
<button
100100
onClick={() => handleTabClick(ALL_CATEGORY_ID)}
101-
className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
101+
className={`rounded-xl px-2.5 py-1 text-xs font-semibold transition-all duration-200 sm:px-5 sm:py-2.5 sm:text-base ${
102102
currentCategory === ALL_CATEGORY_ID
103103
? "bg-white text-gray-900 shadow-lg"
104104
: "text-white hover:bg-white/20 hover:text-white"
@@ -110,7 +110,7 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
110110
<button
111111
key={cat.id}
112112
onClick={() => handleTabClick(cat.id)}
113-
className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
113+
className={`rounded-xl px-2.5 py-1 text-xs font-semibold transition-all duration-200 sm:px-5 sm:py-2.5 sm:text-base ${
114114
currentCategory === cat.id
115115
? "bg-white text-gray-900 shadow-lg"
116116
: "text-white hover:bg-white/20 hover:text-white"
@@ -122,14 +122,14 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
122122
</div>
123123

124124
{/* Projects Grid */}
125-
<div className="mx-[-4px] grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
125+
<div id="services-grid" className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
126126
{paginatedProjects && paginatedProjects.length > 0 ? (
127127
paginatedProjects.map((project, index) => (
128128
<div
129129
key={project.id}
130-
className="animate-fade-in-up px-1"
130+
className="animate-fade-in-up aspect-square w-full"
131131
style={{
132-
animationDelay: `${index * 150}ms`,
132+
animationDelay: `${index * 80}ms`,
133133
animationFillMode: "both",
134134
}}
135135
>
@@ -140,15 +140,15 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
140140
</div>
141141
))
142142
) : (
143-
<div className="col-span-full text-center text-white">
143+
<div className="py-20 text-center text-white">
144144
No projects available for this category
145145
</div>
146146
)}
147147
</div>
148148

149149
{/* Pagination */}
150150
{projects.length > pageSize.services && (
151-
<div className="text-white">
151+
<div id="services-pagination" className="text-white">
152152
<DefaultPagination
153153
currentPage={currentPage}
154154
handleNextPage={handleNextPage}

0 commit comments

Comments
 (0)