Skip to content

Commit 2515899

Browse files
siddharthd0siddharthd0
committed
no mo
1 parent 3abc9ad commit 2515899

File tree

3 files changed

+175
-139
lines changed

3 files changed

+175
-139
lines changed

‎src/app/about/page.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,7 @@ export default function About() {
5656
linkedin={"https://www.linkedin.com/in/adityasahas2025/"}
5757
description="Meet Aditya, a dedicated student with a keen interest in coding and helping people. He finds great satisfaction in applying his technical skills to projects that serve underserved communities, demonstrating a deep commitment to social impact. Outside the digital domain, Aditya enjoys staying active with tennis and basketball. "
5858
/>
59-
<ExecutiveCard
60-
src="/PranithPortraitv2.JPG"
61-
name="Pranith Molakalapalli"
62-
role="Chief Technology Officer"
63-
linkedin="https://www.linkedin.com/in/pranith-molakalapalli/"
64-
description={
65-
"Pranith is a senior in high school living life as a programming enthusiast looking forward to competing in hackathons and collaborating on projects that have a societal impact. Apart from his passion for computer science, he plays tennis, video games, and loves to sleep."
66-
}
67-
/>
59+
6860
</Wrap>
6961
</Flex>
7062
</Flex>

‎src/app/podcast/page.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Box,
44
} from "@chakra-ui/react";
55
import PodcastHero from "@/components/talks-landing";
6-
6+
import ShowOff from "@/components/show-off";
77
export default function Podcasts() {
88

99
return (
@@ -12,6 +12,7 @@ export default function Podcasts() {
1212

1313

1414
<PodcastHero />
15+
<ShowOff />
1516

1617
</Box>
1718

‎src/components/show-off.jsx‎

Lines changed: 172 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,181 @@
11
import {
2-
Box,
3-
Button,
4-
VStack,
5-
Text,
6-
extendTheme,
7-
useTheme,
8-
ChakraProvider,
9-
Image,
10-
Flex,
11-
keyframes,
12-
} from "@chakra-ui/react";
13-
import { AnimatePresence, motion } from "framer-motion";
14-
import { useState, useEffect } from "react";
15-
16-
const moveBackground = keyframes`
2+
Box,
3+
Button,
4+
VStack,
5+
Text,
6+
useTheme,
7+
ChakraProvider,
8+
Image,
9+
Flex,
10+
keyframes,
11+
} from "@chakra-ui/react";
12+
import { AnimatePresence, motion } from "framer-motion";
13+
import { useState, useEffect } from "react";
14+
15+
const moveBackground = keyframes`
1716
0% { background-position: 0 0; }
1817
100% { background-position: 100% 0; }
1918
`;
20-
const VerticalSlideFeatures = () => {
21-
const [selected, setSelected] = useState(0);
22-
23-
useEffect(() => {
24-
const intervalId = setInterval(() => {
25-
setSelected((prevSelected) => (prevSelected + 1) % FEATURES.length);
26-
}, 20000);
27-
return () => clearInterval(intervalId);
28-
}, []);
29-
30-
return (
31-
<Flex mx="auto" px={{ base: 4, md: 8 }} py={12} bg="white" gap={6}>
32-
<VStack maxW="40%" align="start" spacing={4}>
33-
<Text fontSize="md" color="blackAlpha.800">
34-
{FEATURES[selected].description}
35-
</Text>
36-
<Tabs selected={selected} setSelected={setSelected} />
37-
</VStack>
38-
<AnimatePresence mode="wait">
39-
{FEATURES.map((tab, index) => {
40-
return selected === index ? (
41-
<motion.div
42-
initial={{ opacity: 0, y: 10 }}
43-
animate={{ opacity: 1, y: 0 }}
44-
exit={{ opacity: 0, y: 10 }}
45-
key={index}
46-
className="w-full"
47-
>
48-
<tab.Feature />
49-
</motion.div>
50-
) : undefined;
51-
})}
52-
</AnimatePresence>
53-
</Flex>
5419

55-
);
56-
};
57-
58-
const Tabs = ({ selected, setSelected }) => {
59-
return (
60-
<VStack align="start" spacing={2}>
20+
const VerticalSlideFeatures = () => {
21+
const [selected, setSelected] = useState(0);
22+
23+
useEffect(() => {
24+
const intervalId = setInterval(() => {
25+
setSelected((prevSelected) => (prevSelected + 1) % FEATURES.length);
26+
}, 20000);
27+
return () => clearInterval(intervalId);
28+
}, []);
29+
30+
return (
31+
<Flex
32+
mx="auto"
33+
px={{ base: 4, md: 8 }}
34+
py={12}
35+
bgGradient="linear(to-r, teal.500,green.500)"
36+
borderRadius="md"
37+
boxShadow="md"
38+
gap={6}
39+
maxW="80%"
40+
>
41+
<VStack maxW="40%" align="start" spacing={4}>
42+
<Text fontSize="2xl" fontWeight="bold" color="white">
43+
{FEATURES[selected].title}
44+
</Text>
45+
<Text fontSize="lg" color="whiteAlpha.900">
46+
{FEATURES[selected].description}
47+
</Text>
48+
<Tabs selected={selected} setSelected={setSelected} />
49+
</VStack>
50+
<AnimatePresence mode="wait">
6151
{FEATURES.map((tab, index) => {
62-
return (
63-
<Tab
52+
return selected === index ? (
53+
<motion.div
54+
initial={{ opacity: 0, y: 10 }}
55+
animate={{ opacity: 1, y: 0 }}
56+
exit={{ opacity: 0, y: 10 }}
6457
key={index}
65-
setSelected={setSelected}
66-
selected={selected === index}
67-
title={tab.title}
68-
tabNum={index}
69-
/>
70-
);
58+
className="w-full"
59+
>
60+
<motion.div
61+
whileHover={{ scale: 1.1 }}
62+
whileTap={{ scale: 0.9 }}
63+
>
64+
<tab.Feature />
65+
</motion.div>
66+
</motion.div>
67+
) : undefined;
7168
})}
72-
</VStack>
73-
);
74-
};
75-
76-
const Tab = ({ selected, title, setSelected, tabNum }) => {
77-
const theme = useTheme();
78-
79-
return (
80-
<Button
81-
onClick={() => setSelected(tabNum)}
82-
p={4}
83-
d="flex"
84-
alignItems="center"
85-
justifyContent="start"
86-
position="relative"
87-
_hover={{ borderColor: theme.colors.blue[500] }}
88-
69+
</AnimatePresence>
70+
</Flex>
71+
);
72+
};
73+
74+
const Tabs = ({ selected, setSelected }) => {
75+
const theme = useTheme();
76+
77+
return (
78+
<VStack align="start" spacing={2}>
79+
{FEATURES.map((tab, index) => {
80+
return (
81+
<Tab
82+
key={index}
83+
setSelected={setSelected}
84+
selected={selected === index}
85+
title={tab.title}
86+
tabNum={index}
87+
/>
88+
);
89+
})}
90+
</VStack>
91+
);
92+
};
93+
94+
const Tab = ({ selected, title, setSelected, tabNum }) => {
95+
const theme = useTheme();
96+
97+
return (
98+
<Button
99+
onClick={() => setSelected(tabNum)}
100+
p={4}
101+
d="flex"
102+
alignItems="center"
103+
justifyContent="start"
104+
position="relative"
105+
_hover={{ borderColor: theme.colors.blue[500] }}
106+
bg={selected ? "whiteAlpha.900" : "transparent"}
107+
color={selected ? "teal.500" : "white"}
108+
borderRadius="md"
109+
transition="all 0.2s ease-in-out"
110+
>
111+
<Box
112+
position="absolute"
113+
top="0"
114+
left="0"
115+
bottom="0"
116+
bg="gray.200"
117+
transition="width 10s linear"
118+
width={selected ? "100%" : "0"}
119+
zIndex="-1"
120+
borderRadius="md"
121+
/>
122+
<Text
123+
fontSize={{ base: "xl", md: "2xl" }}
124+
fontWeight="bold"
125+
_hover={{ color: "teal.500" }}
89126
>
90-
<Box
91-
position="absolute"
92-
top="0"
93-
left="0"
94-
bottom="0"
95-
bg="gray.200"
96-
transition="width 10s linear"
97-
width={selected ? "100%" : "0"}
98-
zIndex="-1"
99-
/>
100-
<Text
101-
fontSize={{ base: "xl", md: "2xl" }}
102-
fontWeight="bold"
103-
color={selected ? theme.colors.blue[500] : "black"}
104-
_hover={{ color: theme.colors.blue[500] }}
105-
>
106-
{title}
107-
</Text>
108-
</Button>
109-
);
110-
};
111-
112-
export default VerticalSlideFeatures;
113-
114-
const FEATURES = [
115-
{
116-
title: "Practical Coding Experience",
117-
description:
118-
"Master the skills you need from our lessons and apply them to real-world projects.",
119-
Feature: () => <Image src="sneakpeak1.svg" />,
120-
},
121-
{
122-
title: "AI Assistant",
123-
description:
124-
"Tech Guru will be there to provide hints and tips within lessons when you need them.",
125-
Feature: () => (
126-
<Image src="sneakpeak2.svg" />
127-
),
128-
},
129-
{
130-
title: "Progress Checks & Quizzes",
131-
description:
132-
"Test your knowledge as you are learning with our quizzes and progress checks.",
133-
Feature: () => (
134-
<Image src="sneakpeak3.svg" />
135-
),
136-
},
137-
];
138-
127+
{title}
128+
</Text>
129+
</Button>
130+
);
131+
};
132+
133+
export default VerticalSlideFeatures;
134+
135+
const FEATURES = [
136+
{
137+
title: "Practical Coding Experience",
138+
description:
139+
"Master the skills you need from our lessons and apply them to real-world projects.",
140+
Feature: () => (
141+
<Image
142+
src="sneakpeak1.svg"
143+
borderRadius="md"
144+
boxShadow="md"
145+
w="100%"
146+
h="auto"
147+
alt="Practical Coding Experience"
148+
/>
149+
),
150+
},
151+
{
152+
title: "AI Assistant",
153+
description:
154+
"Tech Guru will be there to provide hints and tips within lessons when you need them.",
155+
Feature: () => (
156+
<Image
157+
src="sneakpeak2.svg"
158+
borderRadius="md"
159+
boxShadow="md"
160+
w="100%"
161+
h="auto"
162+
alt="AI Assistant"
163+
/>
164+
),
165+
},
166+
{
167+
title: "Progress Checks & Quizzes",
168+
description:
169+
"Test your knowledge as you are learning with our quizzes and progress checks.",
170+
Feature: () => (
171+
<Image
172+
src="sneakpeak3.svg"
173+
borderRadius="md"
174+
boxShadow="md"
175+
w="100%"
176+
h="auto"
177+
alt="Progress Checks & Quizzes"
178+
/>
179+
),
180+
},
181+
];

0 commit comments

Comments
 (0)