Skip to content

Commit 1909959

Browse files
Zeff01claude
Zeff01
and
claude
committed
feat: implement comprehensive landing page animations and improvements
- Add modern Framer Motion animations with 3D tilt effects and floating particles - Enhance Partners section with staggered reveals and hover effects - Update Codebility Interns to Codebility CoDevs with hire button - Remove hover effects from admin cards and Why Choose Us boxes - Fix double scroll issues in WorkWithUs, Calendly, and Footer components - Add horizontal scroll prevention while maintaining proper spacing - Remove problematic Parallax section - Create reset password email template for Supabase - Add new animated components: FloatingParticles and AnimatedAdminsSection 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 0099fac commit 1909959

19 files changed

Lines changed: 2815 additions & 365 deletions

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

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

3-
import React from "react";
3+
import React, { useRef } from "react";
4+
import { motion, useInView } from "framer-motion";
45
import { InlineWidget } from "react-calendly";
56

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

10+
// Animation variants
11+
const containerVariants = {
12+
hidden: { opacity: 0 },
13+
visible: {
14+
opacity: 1,
15+
transition: {
16+
staggerChildren: 0.3,
17+
delayChildren: 0.2,
18+
},
19+
},
20+
};
21+
22+
const titleVariants = {
23+
hidden: { opacity: 0, y: 50, scale: 0.9 },
24+
visible: {
25+
opacity: 1,
26+
y: 0,
27+
scale: 1,
28+
transition: {
29+
duration: 0.8,
30+
ease: [0.25, 0.46, 0.45, 0.94],
31+
},
32+
},
33+
};
34+
35+
const descriptionVariants = {
36+
hidden: { opacity: 0, y: 30 },
37+
visible: {
38+
opacity: 1,
39+
y: 0,
40+
transition: {
41+
duration: 0.6,
42+
delay: 0.2,
43+
ease: [0.25, 0.46, 0.45, 0.94],
44+
},
45+
},
46+
};
47+
48+
const widgetVariants = {
49+
hidden: { opacity: 0, x: 50, scale: 0.9 },
50+
visible: {
51+
opacity: 1,
52+
x: 0,
53+
scale: 1,
54+
transition: {
55+
duration: 0.8,
56+
delay: 0.4,
57+
ease: [0.25, 0.46, 0.45, 0.94],
58+
},
59+
},
60+
};
61+
962
const Calendly = () => {
63+
const ref = useRef(null);
64+
const isInView = useInView(ref, { once: true, amount: 0.3 });
65+
1066
return (
11-
<Section id="book" className="relative w-full pt-10 text-white">
67+
<Section id="book" className="relative w-full pt-10 text-white overflow-hidden">
1268
<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-
<h2 className="text-3xl font-bold md:text-5xl">
69+
<motion.div
70+
ref={ref}
71+
className="flex w-full flex-1 flex-col justify-center gap-2 text-center lg:text-left"
72+
initial="hidden"
73+
animate={isInView ? "visible" : "hidden"}
74+
variants={containerVariants}
75+
>
76+
<motion.h2
77+
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"
78+
variants={titleVariants}
79+
>
1580
Let&apos;s Connect
16-
</h2>
17-
<p className="text-md lg:text-lg">
81+
</motion.h2>
82+
<motion.p
83+
className="text-md lg:text-lg text-gray-300"
84+
variants={descriptionVariants}
85+
>
1886
Schedule a meeting with us to discuss your needs and have solutions.
19-
</p>
20-
</div>
87+
</motion.p>
2188

22-
<div className="calendly-widget-container w-full flex-1 justify-center lg:w-1/2">
23-
<InlineWidget styles={{ borderRadius: '0.5rem' }} url="https://calendly.com/codebility-dev/30min" />
24-
</div>
89+
{/* Enhanced CTA elements */}
90+
<motion.div
91+
className="flex flex-col gap-4 mt-6"
92+
initial={{ opacity: 0, y: 20 }}
93+
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
94+
transition={{ duration: 0.6, delay: 0.6 }}
95+
>
96+
{/* Feature highlights */}
97+
<div className="flex flex-col gap-2 text-sm lg:text-base">
98+
{[
99+
"✨ Free 30-minute consultation",
100+
"🚀 Tailored solutions for your business",
101+
"💡 Expert advice from our team"
102+
].map((item, index) => (
103+
<motion.div
104+
key={index}
105+
className="flex items-center gap-2"
106+
initial={{ opacity: 0, x: -20 }}
107+
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
108+
transition={{ duration: 0.5, delay: 0.8 + (index * 0.1) }}
109+
>
110+
<span className="text-purple-300">{item}</span>
111+
</motion.div>
112+
))}
113+
</div>
114+
</motion.div>
115+
</motion.div>
116+
117+
<motion.div
118+
className="calendly-widget-container w-full flex-1 justify-center lg:w-1/2 relative overflow-hidden"
119+
initial="hidden"
120+
animate={isInView ? "visible" : "hidden"}
121+
variants={widgetVariants}
122+
>
123+
{/* Widget wrapper with enhanced styling */}
124+
<motion.div
125+
className="relative rounded-xl overflow-hidden"
126+
whileHover={{
127+
scale: 1.01,
128+
boxShadow: "0 25px 50px -12px rgba(147, 71, 255, 0.3)",
129+
}}
130+
transition={{ duration: 0.3 }}
131+
>
132+
{/* Glow effect */}
133+
<motion.div
134+
className="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-blue-500/20 to-cyan-500/20 rounded-xl"
135+
animate={{
136+
opacity: [0.5, 0.8, 0.5],
137+
}}
138+
transition={{
139+
duration: 3,
140+
repeat: Infinity,
141+
ease: "easeInOut"
142+
}}
143+
/>
144+
145+
{/* Calendar widget */}
146+
<div className="relative z-10">
147+
<InlineWidget
148+
styles={{
149+
borderRadius: '0.75rem',
150+
border: 'none',
151+
height: '600px',
152+
}}
153+
url="https://calendly.com/codebility-dev/30min"
154+
/>
155+
</div>
156+
</motion.div>
157+
</motion.div>
25158
</Container>
26-
<div
159+
{/* Enhanced background effects */}
160+
<motion.div
27161
aria-hidden="true"
28-
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden blur-3xl"
162+
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform blur-3xl"
163+
animate={{
164+
rotate: [0, 360],
165+
scale: [1, 1.05, 1],
166+
}}
167+
transition={{
168+
rotate: {
169+
duration: 30,
170+
repeat: Infinity,
171+
ease: "linear"
172+
},
173+
scale: {
174+
duration: 8,
175+
repeat: Infinity,
176+
ease: "easeInOut"
177+
}
178+
}}
29179
>
30-
<div
180+
<motion.div
31181
style={{
32182
clipPath:
33183
"polygon(0% 31.5%, 75.3% 19.5%, 100% 50%, 75.5% 80.5%, 0% 67.8%, 0% 50%)",
34184
}}
35-
className="relative aspect-[855/678] w-[40rem] bg-gradient-to-r from-[#00738B] via-[#0C3FDB] to-[#9707DD] opacity-20 sm:w-[72.1875rem]"
185+
className="relative aspect-[855/678] w-[30rem] bg-gradient-to-r from-[#00738B] via-[#0C3FDB] to-[#9707DD] opacity-20 sm:w-[50rem]"
186+
animate={{
187+
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
188+
}}
189+
transition={{
190+
duration: 6,
191+
repeat: Infinity,
192+
ease: "easeInOut"
193+
}}
36194
/>
37-
</div>
195+
</motion.div>
38196
</Section>
39197
);
40198
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Footer = () => {
1313
const { onOpen } = useModal();
1414

1515
return (
16-
<section className="w-full xl:mb-6">
16+
<section className="w-full overflow-hidden">
1717
<Container className="bg-black-600 mx-auto flex flex-col gap-2 text-white xl:rounded-3xl">
1818
<div className="flex flex-col gap-4 md:p-8 lg:flex-row lg:gap-6">
1919
<div className="flex basis-[25%] flex-col gap-2">

‎apps/codebility/app/(marketing)/_components/landing/AnimatedAdminsSection.tsx‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
"use client";
2+
3+
import { motion, useInView } from "framer-motion";
4+
import { useRef } from "react";
5+
import { Codev } from "@/types/home/codev";
6+
import AdminCard from "./LandingAdminCard";
7+
import BlueBg from "./LandingBlueBg";
8+
9+
interface AnimatedAdminsSectionProps {
10+
title: string;
11+
description: string;
12+
members: Codev[];
13+
sectionId: string;
14+
}
15+
16+
// Animation variants
17+
const containerVariants = {
18+
hidden: { opacity: 0 },
19+
visible: {
20+
opacity: 1,
21+
transition: {
22+
staggerChildren: 0.1,
23+
delayChildren: 0.2,
24+
},
25+
},
26+
};
27+
28+
const titleVariants = {
29+
hidden: { opacity: 0, y: 50 },
30+
visible: {
31+
opacity: 1,
32+
y: 0,
33+
transition: {
34+
duration: 0.8,
35+
ease: [0.25, 0.46, 0.45, 0.94],
36+
},
37+
},
38+
};
39+
40+
const descriptionVariants = {
41+
hidden: { opacity: 0, y: 30 },
42+
visible: {
43+
opacity: 1,
44+
y: 0,
45+
transition: {
46+
duration: 0.6,
47+
delay: 0.3,
48+
ease: [0.25, 0.46, 0.45, 0.94],
49+
},
50+
},
51+
};
52+
53+
const cardVariants = {
54+
hidden: {
55+
opacity: 0,
56+
y: 60,
57+
scale: 0.9,
58+
rotateY: -15,
59+
},
60+
visible: {
61+
opacity: 1,
62+
y: 0,
63+
scale: 1,
64+
rotateY: 0,
65+
transition: {
66+
duration: 0.8,
67+
ease: [0.25, 0.46, 0.45, 0.94],
68+
},
69+
},
70+
};
71+
72+
const AnimatedAdminsSection = ({
73+
title,
74+
description,
75+
members,
76+
sectionId
77+
}: AnimatedAdminsSectionProps) => {
78+
const ref = useRef(null);
79+
const isInView = useInView(ref, { once: true, amount: 0.2 });
80+
81+
return (
82+
<motion.div
83+
ref={ref}
84+
className="w-full"
85+
initial="hidden"
86+
animate={isInView ? "visible" : "hidden"}
87+
variants={containerVariants}
88+
>
89+
<motion.h1
90+
className="text-center text-3xl font-bold bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-transparent"
91+
variants={titleVariants}
92+
>
93+
{title}
94+
</motion.h1>
95+
96+
<div className="flex flex-col items-center justify-center">
97+
<div className="max-w-[1100px] px-4">
98+
<motion.p
99+
className="pt-8 text-center md:px-44 text-gray-300"
100+
variants={descriptionVariants}
101+
>
102+
{description}
103+
</motion.p>
104+
105+
{/* Enhanced BlueBg with animation */}
106+
<motion.div
107+
initial={{ opacity: 0, scale: 0.8 }}
108+
animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
109+
transition={{ duration: 1, delay: 0.5 }}
110+
>
111+
<BlueBg className="h-[300px] w-full max-w-[1200px] lg:top-[45%]" />
112+
</motion.div>
113+
114+
<motion.div
115+
className="grid grid-cols-2 gap-2 pb-5 pt-20 md:grid-cols-4"
116+
variants={containerVariants}
117+
>
118+
{members.map((member: Codev, index: number) => (
119+
<motion.div
120+
key={member.id}
121+
variants={cardVariants}
122+
custom={index}
123+
whileHover={{
124+
scale: 1.05,
125+
y: -10,
126+
rotateY: 5,
127+
transition: {
128+
duration: 0.3,
129+
type: "spring",
130+
bounce: 0.4
131+
}
132+
}}
133+
whileTap={{ scale: 0.95 }}
134+
style={{ perspective: "1000px" }}
135+
>
136+
<motion.div
137+
className="h-full relative"
138+
whileHover={{
139+
boxShadow: "0 20px 40px -12px rgba(147, 71, 255, 0.3)",
140+
}}
141+
transition={{ duration: 0.3 }}
142+
>
143+
<AdminCard
144+
color={`bg-gradient-to-br ${
145+
index % 4 === 0 ? 'from-purple-500/80 to-pink-500/80' :
146+
index % 4 === 1 ? 'from-cyan-500/80 to-blue-500/80' :
147+
index % 4 === 2 ? 'from-green-500/80 to-teal-500/80' :
148+
'from-orange-500/80 to-red-500/80'
149+
}`}
150+
admin={member}
151+
/>
152+
153+
{/* Hover overlay effect */}
154+
<motion.div
155+
className="absolute inset-0 bg-gradient-to-t from-purple-900/20 via-transparent to-transparent rounded-lg pointer-events-none"
156+
initial={{ opacity: 0 }}
157+
whileHover={{ opacity: 1 }}
158+
transition={{ duration: 0.3 }}
159+
/>
160+
</motion.div>
161+
</motion.div>
162+
))}
163+
</motion.div>
164+
</div>
165+
</div>
166+
</motion.div>
167+
);
168+
};
169+
170+
export default AnimatedAdminsSection;

0 commit comments

Comments
 (0)