Skip to content

Commit 16c7da7

Browse files
jacobchristian17jacobchristian17
committed
feat: bigger grid for desktop views, changed emoji to icons on booking a call
1 parent 5132b82 commit 16c7da7

4 files changed

Lines changed: 24 additions & 22 deletions

File tree

‎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/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 id="services-hero" 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: 7 additions & 7 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 id="services-projects" 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 id="services-categories" 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,12 +122,12 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
122122
</div>
123123

124124
{/* Projects Grid */}
125-
<div id="services-grid" className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
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"
130+
className="animate-fade-in-up aspect-square w-full"
131131
style={{
132132
animationDelay: `${index * 80}ms`,
133133
animationFillMode: "both",

‎apps/codebility/app/(marketing)/services/_components/ui/ServicesServiceCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,10 @@ export const ServicesServiceCard = memo(({ service, onSelect }: Props) => {
112112
};
113113

114114
return (
115-
<div className="group cursor-pointer overflow-hidden rounded-xl bg-white/[0.04] ring-1 ring-white/[0.08] transition-all duration-300 hover:bg-white/[0.07] hover:ring-white/[0.16] hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]">
115+
<div className="group flex h-full cursor-pointer flex-col overflow-hidden rounded-xl bg-white/[0.04] ring-1 ring-white/[0.08] transition-all duration-300 hover:bg-white/[0.07] hover:ring-white/[0.16] hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]">
116116
{/* Image — consistent 4:3 aspect ratio */}
117117
<div
118-
className="relative aspect-[4/3] w-full overflow-hidden"
118+
className="relative w-full flex-1 overflow-hidden"
119119
onClick={handleClick}
120120
onMouseEnter={() => setIsHovered(true)}
121121
onMouseLeave={() => setIsHovered(false)}

0 commit comments

Comments
 (0)