Skip to content

Commit 5fcda45

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #82 from iitzIrFan/feature/getstarted
Feature/getstarted
2 parents 117d973 + 4930225 commit 5fcda45

File tree

6 files changed

+3251
-3
lines changed

6 files changed

+3251
-3
lines changed

‎blog/google-deepmind/index.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ tags:
55
- Google Deepmind
66
- Opensource
77
- AI
8-
98
date: 2025-05-30 09:32:00
109
description: DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI.
1110
draft: false
@@ -26,7 +25,7 @@ canonical_url:
2625
# - name: "twitter:card"
2726
# content: "summary_large_image"
2827
# - name: "twitter:title"
29-
# content: "A Comprehensive Guide to Get You Started with MERN Stack"
28+
# content: "What is Google DeepMind AI?"
3029
# - name: "twitter:description"
3130
# content: "DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI called AI"
3231
# - name: "twitter:image"

‎src/components/StatsSection/index.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import styles from './styles.module.css';
4+
5+
interface StatItem {
6+
value: string;
7+
label: string;
8+
icon?: string;
9+
}
10+
11+
const stats: StatItem[] = [
12+
{ value: '10,000+', label: 'Active Learners', icon: '👥' },
13+
{ value: '100+', label: 'Hours of Content', icon: '⏱️' },
14+
{ value: '24/7', label: 'Community Support', icon: '💬' },
15+
{ value: '4.9/5', label: 'Average Rating', icon: '⭐' },
16+
];
17+
18+
const StatCard: React.FC<{ stat: StatItem; index: number }> = ({ stat, index }) => {
19+
return (
20+
<motion.div
21+
className={styles.statCard}
22+
initial={{ opacity: 0, y: 30 }}
23+
whileInView={{
24+
opacity: 1,
25+
y: 0,
26+
transition: {
27+
duration: 0.6,
28+
delay: index * 0.1,
29+
ease: "easeOut"
30+
}
31+
}}
32+
viewport={{ once: true, margin: "-50px" }}
33+
whileHover={{
34+
y: -5,
35+
boxShadow: '0 15px 30px rgba(0, 0, 0, 0.2)'
36+
}}
37+
>
38+
{stat.icon && (
39+
<div className={styles.statIcon}>
40+
{stat.icon}
41+
</div>
42+
)}
43+
<motion.div
44+
className={styles.statValue}
45+
aria-label={stat.value}
46+
initial={{ scale: 0.9 }}
47+
whileInView={{
48+
scale: 1,
49+
transition: {
50+
delay: 0.2 + (index * 0.05),
51+
type: 'spring',
52+
stiffness: 100
53+
}
54+
}}
55+
viewport={{ once: true }}
56+
>
57+
{stat.value}
58+
</motion.div>
59+
<div className={styles.statLabel}>
60+
{stat.label}
61+
</div>
62+
</motion.div>
63+
);
64+
};
65+
66+
const StatsSection: React.FC = () => {
67+
return (
68+
<section className={styles.section}>
69+
<div className={styles.container}>
70+
<motion.div
71+
className={styles.statsGrid}
72+
initial="hidden"
73+
whileInView="visible"
74+
viewport={{ once: true, amount: 0.5 }}
75+
variants={{
76+
hidden: { opacity: 0 },
77+
visible: {
78+
opacity: 1,
79+
transition: {
80+
staggerChildren: 0.1
81+
}
82+
}
83+
}}
84+
>
85+
{stats.map((stat, index) => (
86+
<StatCard key={stat.label} stat={stat} index={index} />
87+
))}
88+
</motion.div>
89+
</div>
90+
</section>
91+
);
92+
};
93+
94+
export default StatsSection;

‎src/components/StatsSection/styles.module.css

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/* Stats Section */
2+
.section {
3+
width: 100%;
4+
padding: 4rem 1rem;
5+
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
6+
position: relative;
7+
overflow: hidden;
8+
}
9+
10+
.container {
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
position: relative;
14+
z-index: 1;
15+
}
16+
17+
.statsGrid {
18+
display: grid;
19+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
20+
gap: 1.5rem;
21+
margin: 0 auto;
22+
}
23+
24+
.statCard {
25+
background: rgba(255, 255, 255, 0.05);
26+
backdrop-filter: blur(10px);
27+
border-radius: 16px;
28+
padding: 2rem 1.5rem;
29+
text-align: center;
30+
position: relative;
31+
overflow: hidden;
32+
border: 1px solid rgba(255, 255, 255, 0.1);
33+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
34+
z-index: 1;
35+
height: 100%;
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
justify-content: center;
40+
}
41+
42+
.statCard::before {
43+
content: '';
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), transparent);
50+
z-index: -1;
51+
opacity: 0;
52+
transition: opacity 0.4s ease;
53+
}
54+
55+
.statCard:hover::before {
56+
opacity: 1;
57+
}
58+
59+
.statIcon {
60+
font-size: 2.5rem;
61+
margin-bottom: 1rem;
62+
opacity: 0.9;
63+
transition: all 0.3s ease;
64+
}
65+
66+
.statCard:hover .statIcon {
67+
transform: scale(1.1);
68+
opacity: 1;
69+
}
70+
71+
.statValue {
72+
font-size: 2.5rem;
73+
font-weight: 800;
74+
background: linear-gradient(135deg, #818cf8, #4f46e5);
75+
-webkit-background-clip: text;
76+
background-clip: text;
77+
color: transparent;
78+
margin-bottom: 0.5rem;
79+
line-height: 1.2;
80+
position: relative;
81+
display: inline-block;
82+
}
83+
84+
.statValue::after {
85+
content: '';
86+
position: absolute;
87+
bottom: -5px;
88+
left: 50%;
89+
transform: translateX(-50%);
90+
width: 40px;
91+
height: 3px;
92+
background: linear-gradient(90deg, #818cf8, #4f46e5);
93+
border-radius: 3px;
94+
opacity: 0.7;
95+
transition: all 0.3s ease;
96+
}
97+
98+
.statCard:hover .statValue::after {
99+
width: 60px;
100+
opacity: 1;
101+
}
102+
103+
.statLabel {
104+
color: #e2e8f0;
105+
font-size: 1rem;
106+
font-weight: 500;
107+
opacity: 0.9;
108+
letter-spacing: 0.5px;
109+
margin-top: 0.75rem;
110+
transition: all 0.3s ease;
111+
}
112+
113+
.statCard:hover .statLabel {
114+
color: white;
115+
opacity: 1;
116+
}
117+
118+
/* Responsive styles */
119+
@media (max-width: 768px) {
120+
.statsGrid {
121+
grid-template-columns: 1fr 1fr;
122+
gap: 1rem;
123+
}
124+
125+
.statCard {
126+
padding: 1.5rem 1rem;
127+
}
128+
129+
.statValue {
130+
font-size: 2rem;
131+
}
132+
}
133+
134+
@media (max-width: 480px) {
135+
.statsGrid {
136+
grid-template-columns: 1fr;
137+
}
138+
139+
.section {
140+
padding: 3rem 1rem;
141+
}
142+
}
143+
144+
/* Animation keyframes */
145+
@keyframes float {
146+
0%, 100% { transform: translateY(0); }
147+
50% { transform: translateY(-10px); }
148+
}
149+
150+
@keyframes pulse {
151+
0%, 100% {
152+
transform: scale(1);
153+
opacity: 1;
154+
}
155+
50% {
156+
transform: scale(1.05);
157+
opacity: 0.8;
158+
}
159+
}
160+
161+
@keyframes glow {
162+
0% {
163+
box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
164+
}
165+
50% {
166+
box-shadow: 0 0 20px rgba(79, 70, 229, 0.8);
167+
}
168+
100% {
169+
box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
170+
}
171+
}

‎src/components/header/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const HeaderContent = () => {
7171
type="button" // Button type
7272
>
7373
{/* Link to documentation page */}
74-
<Link to="/courses/" className="chh__header-content__input--link">
74+
<Link to="/get-started/" className="chh__header-content__input--link">
7575
Get Started
7676
</Link>
7777
</motion.button>

0 commit comments

Comments
 (0)