Skip to content

Commit 32f62f5

Browse files
sa-fw-ansa-fw-an
committed
Animation in Contact us page
1 parent be3366f commit 32f62f5

File tree

1 file changed

+123
-32
lines changed

1 file changed

+123
-32
lines changed

‎src/pages/About/ContactUs.tsx‎

Lines changed: 123 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
import React from 'react';
2+
import { motion } from 'framer-motion';
23
import { socialLinks } from '@/constants/Footer';
34
import Header from '@/sections/Header';
45
import Footer from '@/sections/Footer';
6+
import {
7+
fadeIn,
8+
slideInLeft,
9+
slideInRight,
10+
slideInBottom,
11+
bounce,
12+
staggerContainer,
13+
subtleRise,
14+
dividerVariants,
15+
} from '@/styles/Animations';
516

617
const ContactUs: React.FC = () => {
718
return (
819
<>
920
<Header />
1021
<div className="min-h-screen bg-gray-50">
1122
{/* Hero Section */}
12-
<section className="relative overflow-hidden py-16 md:py-24 bg-gradient-to-r from-blue-900 to-indigo-900">
23+
<motion.section
24+
variants={fadeIn}
25+
initial="hidden"
26+
animate="visible"
27+
className="relative overflow-hidden py-16 md:py-24 bg-gradient-to-r from-blue-900 to-indigo-900"
28+
>
1329
<div className="absolute inset-0 overflow-hidden">
1430
<svg
1531
className="absolute w-full h-full opacity-5"
@@ -37,31 +53,69 @@ const ContactUs: React.FC = () => {
3753
</div>
3854

3955
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
40-
<div className="max-w-3xl">
41-
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight">
56+
<motion.div
57+
className="max-w-3xl"
58+
variants={slideInBottom}
59+
initial="hidden"
60+
animate="visible"
61+
>
62+
<motion.h1
63+
className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight"
64+
variants={slideInBottom}
65+
initial="hidden"
66+
animate="visible"
67+
>
4268
Contact <span className="text-blue-200">Sugar Labs</span>
43-
</h1>
44-
<div className="w-20 h-1 bg-blue-400 mb-6"></div>
45-
<p className="text-base md:text-lg text-gray-200 max-w-2xl leading-relaxed">
69+
</motion.h1>
70+
<motion.div
71+
className="w-20 h-1 bg-blue-400 mb-6"
72+
variants={dividerVariants}
73+
initial="hidden"
74+
animate="visible"
75+
></motion.div>
76+
<motion.p
77+
className="text-base md:text-lg text-gray-200 max-w-2xl leading-relaxed"
78+
variants={fadeIn}
79+
initial="hidden"
80+
animate="visible"
81+
transition={{ delay: 0.3 }}
82+
>
4683
We'd love to hear from you. Here's how you can reach our team of
4784
educational innovators.
48-
</p>
49-
</div>
85+
</motion.p>
86+
</motion.div>
5087
</div>
51-
</section>
88+
</motion.section>
5289

5390
{/* Main Content */}
5491
<section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
5592
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
5693
{/* Contact Information Card */}
57-
<div className="lg:col-span-7 bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition-shadow duration-300 hover:shadow-lg">
94+
<motion.div
95+
className="lg:col-span-7 bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 transition-shadow duration-300 hover:shadow-lg"
96+
variants={slideInLeft}
97+
initial="hidden"
98+
animate="visible"
99+
whileHover={{ y: -5 }}
100+
transition={{ duration: 0.3 }}
101+
>
58102
<div className="p-6 md:p-8 lg:p-10">
59-
<h2 className="text-2xl font-bold text-gray-800 mb-8 flex items-center">
103+
<motion.h2
104+
className="text-2xl font-bold text-gray-800 mb-8 flex items-center"
105+
variants={fadeIn}
106+
initial="hidden"
107+
animate="visible"
108+
>
60109
<span className="w-1.5 h-6 bg-blue-600 mr-3 rounded-sm"></span>
61110
How to Reach Us
62-
</h2>
111+
</motion.h2>
63112

64-
<div className="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-6 lg:gap-x-8">
113+
<motion.div
114+
className="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-6 lg:gap-x-8"
115+
variants={staggerContainer}
116+
initial="hidden"
117+
animate="visible"
118+
>
65119
{/* Mail Address */}
66120
<ContactMethod
67121
iconSrc="assets/Icons/mail.svg"
@@ -122,33 +176,60 @@ const ContactUs: React.FC = () => {
122176
</a>
123177
}
124178
/>
125-
</div>
179+
</motion.div>
126180
</div>
127-
</div>
181+
</motion.div>
128182

129183
{/* Social Connect Card */}
130-
<div className="lg:col-span-5 rounded-xl overflow-hidden shadow-md">
184+
<motion.div
185+
className="lg:col-span-5 rounded-xl overflow-hidden shadow-md"
186+
variants={slideInRight}
187+
initial="hidden"
188+
animate="visible"
189+
whileHover={{ y: -5 }}
190+
transition={{ duration: 0.3 }}
191+
>
131192
<div className="bg-gradient-to-br from-gray-800 via-gray-850 to-gray-900 p-6 md:p-8 lg:p-10">
132-
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
193+
<motion.h2
194+
className="text-2xl font-bold text-white mb-6 flex items-center"
195+
variants={fadeIn}
196+
initial="hidden"
197+
animate="visible"
198+
>
133199
<span className="w-1.5 h-6 bg-blue-500 mr-3 rounded-sm"></span>
134200
Connect With The Community
135-
</h2>
201+
</motion.h2>
136202

137-
<p className="text-gray-300 text-sm leading-relaxed mb-8">
203+
<motion.p
204+
className="text-gray-300 text-sm leading-relaxed mb-8"
205+
variants={fadeIn}
206+
initial="hidden"
207+
animate="visible"
208+
transition={{ delay: 0.2 }}
209+
>
138210
Join our global community of educators, developers, and
139211
learners who are passionate about bringing educational
140212
software to children around the world.
141-
</p>
213+
</motion.p>
142214

143-
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
144-
{socialLinks.map((social) => (
145-
<a
215+
<motion.div
216+
className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6"
217+
variants={staggerContainer}
218+
initial="hidden"
219+
animate="visible"
220+
>
221+
{socialLinks.map((social, index) => (
222+
<motion.a
146223
key={social.href}
147224
href={social.href}
148225
target="_blank"
149226
rel="noopener noreferrer"
150227
aria-label={`Visit our ${social.name} page`}
151228
className="group flex flex-col items-center"
229+
variants={bounce}
230+
whileHover="hover"
231+
whileTap="tap"
232+
custom={index}
152233
>
153234
<div className="flex items-center justify-center w-12 h-12 bg-white/10 group-hover:bg-white/20 rounded-lg backdrop-blur-sm transition-all duration-300 ease-in-out mb-2 border border-gray-700/50 shadow-sm group-hover:shadow-blue-500/10 group-hover:shadow-md">
154235
<img
@@ -163,21 +244,27 @@ const ContactUs: React.FC = () => {
163244
<span className="text-xs text-gray-300 group-hover:text-gray-200 transition-colors duration-200">
164245
{social.name}
165246
</span>
166-
</a>
247+
</motion.a>
167248
))}
168-
</div>
249+
</motion.div>
169250
</div>
170251

171-
<div className="bg-gray-800 p-5 md:p-6 border-t border-gray-700/50">
252+
<motion.div
253+
className="bg-gray-800 p-5 md:p-6 border-t border-gray-700/50"
254+
variants={fadeIn}
255+
initial="hidden"
256+
animate="visible"
257+
transition={{ delay: 0.4 }}
258+
>
172259
<h3 className="text-xs uppercase font-bold text-gray-300 tracking-wider mb-2">
173260
Follow Our Progress
174261
</h3>
175262
<p className="text-xs text-gray-400 leading-relaxed">
176263
Stay updated with our latest developments and educational
177264
initiatives.
178265
</p>
179-
</div>
180-
</div>
266+
</motion.div>
267+
</motion.div>
181268
</div>
182269
</section>
183270
</div>
@@ -197,17 +284,21 @@ const ContactMethod: React.FC<ContactMethodProps> = ({
197284
title,
198285
description,
199286
}) => (
200-
<div className="flex items-start">
201-
<div className="flex-shrink-0 p-3 bg-blue-50 rounded-lg text-blue-600 border border-blue-100">
287+
<motion.div className="flex items-start" variants={subtleRise}>
288+
<motion.div
289+
className="flex-shrink-0 p-3 bg-blue-50 rounded-lg text-blue-600 border border-blue-100"
290+
whileHover={{ scale: 1.1 }}
291+
transition={{ type: 'spring', stiffness: 400, damping: 10 }}
292+
>
202293
<img src={iconSrc} alt="" className="h-5 w-5" aria-hidden="true" />
203-
</div>
294+
</motion.div>
204295
<div className="ml-4">
205296
<h3 className="text-sm font-bold text-gray-800 uppercase tracking-wider">
206297
{title}
207298
</h3>
208299
{description}
209300
</div>
210-
</div>
301+
</motion.div>
211302
);
212303

213304
export default ContactUs;

0 commit comments

Comments
 (0)