About us page designed #17
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,254 @@ | ||
| import { motion } from 'framer-motion'; | ||
| import SectionContainer from '@/components/shared/SectionContainer'; | ||
| import SectionTitle from '@/components/shared/SectionTitle'; | ||
| import { | ||
| goals, | ||
| progressItems, | ||
| sectionContent, | ||
| } from '@/constants/aboutUs/goals'; | ||
| import { | ||
| slideInLeft, | ||
| subtleRise, | ||
| statCard, | ||
| staggerContainer, | ||
| container, | ||
| statGrid, | ||
| } from '@/styles/Animations'; | ||
| import { useMemo, FC } from 'react'; | ||
|
|
||
| interface GoalStat { | ||
| total: number; | ||
| completed: number; | ||
| inProgress: number; | ||
| percentComplete: number; | ||
| } | ||
|
|
||
| const GoalsSection: FC = () => { | ||
| const renderProgressBars = (items) => { | ||
| return items.map((item, index) => ( | ||
| <motion.div | ||
| key={index} | ||
| className="mb-6" | ||
| custom={index} | ||
| viewport={{ once: true }} | ||
| > | ||
| <div className="flex justify-between mb-1"> | ||
| <span className="text-sm font-medium text-gray-700"> | ||
| {item.label} | ||
| </span> | ||
| <span className="text-sm font-medium text-gray-700"> | ||
| {item.percent}% | ||
| </span> | ||
| </div> | ||
| <div className="w-full bg-gray-200 rounded-full h-2.5"> | ||
| <motion.div | ||
| className={`h-2.5 rounded-full bg-gradient-to-r ${item.color}`} | ||
| initial={{ width: 0 }} | ||
| whileInView={{ width: `${item.percent}%` }} | ||
| viewport={{ once: true }} | ||
| transition={{ duration: 1, delay: index * 0.2 }} | ||
| ></motion.div> | ||
| </div> | ||
| </motion.div> | ||
| )); | ||
| }; | ||
|
|
||
| // Memoize the goal stats for performance | ||
| const goalStats: GoalStat = useMemo(() => { | ||
| const totalGoals = goals.length; | ||
| const completedGoals = progressItems.filter( | ||
| (item) => item.percent >= 75, | ||
| ).length; | ||
| const inProgressGoals = progressItems.filter( | ||
| (item) => item.percent >= 25 && item.percent < 75, | ||
| ).length; | ||
|
|
||
| return { | ||
| total: totalGoals, | ||
| completed: completedGoals, | ||
| inProgress: inProgressGoals, | ||
| percentComplete: Math.round((completedGoals / totalGoals) * 100), | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <SectionTitle> | ||
| {sectionContent.title.main} | ||
| <span className="text-red-500">{sectionContent.title.highlight}</span> | ||
| </SectionTitle> | ||
| <SectionContainer id="goals"> | ||
| <div className="flex flex-col md:flex-row gap-8 w-full"> | ||
| <div className="md:w-1/2"> | ||
| <div className="space-y-6"> | ||
| <motion.p | ||
| className="text-base md:text-lg text-gray-700 leading-relaxed" | ||
| variants={subtleRise} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| > | ||
| {sectionContent.introduction} | ||
| </motion.p> | ||
|
|
||
| {/* Dynamic goals rendering from goals array */} | ||
| <motion.div | ||
| className="space-y-4" | ||
| variants={staggerContainer} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| > | ||
| {goals.map((goal, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="p-6 border-l-4 border-red-500 bg-white rounded-lg shadow-sm | ||
| hover:shadow-lg transition-all duration-300" | ||
| variants={slideInLeft} | ||
| custom={i} | ||
| whileHover={{ x: 10, backgroundColor: '#fef2f2' }} | ||
| > | ||
| <h4 className="font-bold text-gray-800 text-lg mb-2"> | ||
| {goal.title} | ||
| </h4> | ||
| <p className="text-gray-600 leading-relaxed"> | ||
| {goal.description} | ||
| </p> | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="md:w-1/2"> | ||
| <motion.div | ||
| className="rounded-xl p-6 bg-white border-2 border-gray-100 shadow-lg" | ||
| variants={subtleRise} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| > | ||
| {/* Progress Overview */} | ||
| <div className="mb-8"> | ||
| <h3 className="text-xl font-bold text-gray-800 mb-4"> | ||
| {sectionContent.progressTitle} | ||
| </h3> | ||
|
|
||
| {/* Progress summary stats */} | ||
| <motion.div | ||
| className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6" | ||
| variants={statGrid} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| > | ||
| <motion.div | ||
| className="bg-red-50 p-4 rounded-lg text-center" | ||
| variants={statCard} | ||
| whileHover="hover" | ||
| > | ||
| <p className="text-3xl font-bold text-red-500"> | ||
| {goalStats.total} | ||
| </p> | ||
| <p className="text-sm text-gray-600">Total Goals</p> | ||
| </motion.div> | ||
|
|
||
| <motion.div | ||
| className="bg-green-50 p-4 rounded-lg text-center" | ||
| variants={statCard} | ||
| whileHover="hover" | ||
| > | ||
| <p className="text-3xl font-bold text-green-500"> | ||
| {goalStats.completed} | ||
| </p> | ||
| <p className="text-sm text-gray-600">Completed</p> | ||
| </motion.div> | ||
|
|
||
| <motion.div | ||
| className="bg-yellow-50 p-4 rounded-lg text-center" | ||
| variants={statCard} | ||
| whileHover="hover" | ||
| > | ||
| <p className="text-3xl font-bold text-yellow-500"> | ||
| {goalStats.inProgress} | ||
| </p> | ||
| <p className="text-sm text-gray-600">In Progress</p> | ||
| </motion.div> | ||
|
|
||
| <motion.div | ||
| className="bg-blue-50 p-4 rounded-lg text-center" | ||
| variants={statCard} | ||
| whileHover="hover" | ||
| > | ||
| <p className="text-3xl font-bold text-blue-500"> | ||
| {goalStats.percentComplete}% | ||
| </p> | ||
| <p className="text-sm text-gray-600">Overall Progress</p> | ||
| </motion.div> | ||
| </motion.div> | ||
|
|
||
| {/* Overall progress bar */} | ||
| <div className="mb-8"> | ||
| <div className="flex justify-between mb-1"> | ||
| <span className="text-sm font-medium text-gray-700"> | ||
| Overall Completion | ||
| </span> | ||
| <span className="text-sm font-medium text-gray-700"> | ||
| {goalStats.percentComplete}% | ||
| </span> | ||
| </div> | ||
| <div className="w-full bg-gray-200 rounded-full h-4"> | ||
| <motion.div | ||
| className="h-4 rounded-full bg-gradient-to-r from-red-400 to-red-600" | ||
| initial={{ width: 0 }} | ||
| whileInView={{ width: `${goalStats.percentComplete}%` }} | ||
| viewport={{ once: true }} | ||
| transition={{ duration: 1.5 }} | ||
| ></motion.div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Individual progress bars */} | ||
| <motion.div | ||
| className="mt-6" | ||
| variants={container} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| > | ||
| <h4 className="font-bold text-gray-800 text-lg mb-4"> | ||
| Individual Progress | ||
| </h4> | ||
| {renderProgressBars(progressItems)} | ||
| </motion.div> | ||
|
|
||
| {/* Goal insights */} | ||
| <motion.div | ||
| className="mt-8 p-5 border border-gray-200 rounded-lg bg-gray-50" | ||
| variants={subtleRise} | ||
| initial="hidden" | ||
| whileInView="visible" | ||
| viewport={{ once: true }} | ||
| transition={{ delay: 0.6 }} | ||
| > | ||
| <h5 className="font-bold text-gray-700 mb-2"> | ||
| {sectionContent.insightsTitle || 'Progress Insights'} | ||
| </h5> | ||
| <p className="text-sm text-gray-600"> | ||
| Our goals are on track with {goalStats.percentComplete}% | ||
| overall completion. We've fully achieved {goalStats.completed}{' '} | ||
| goals, with {goalStats.inProgress} more in progress. We | ||
| continue to work towards our mission with steady progress | ||
| across all initiatives. | ||
| </p> | ||
| </motion.div> | ||
| </motion.div> | ||
| </div> | ||
| </div> | ||
| </SectionContainer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default GoalsSection; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { motion } from 'framer-motion'; | ||
| import { heroAnimations } from '@/styles/Animations'; | ||
|
|
||
| const HeroSection = () => { | ||
| const title = 'ABOUT US'.split(''); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className="relative min-h-[60vh] flex flex-col items-center justify-center text-center px-4 overflow-hidden" | ||
| variants={heroAnimations.container} | ||
| initial="hidden" | ||
| animate="visible" | ||
| > | ||
| {/* Decorative background elements */} | ||
| <motion.div | ||
| className="absolute top-20 left-10 w-20 h-20 rounded-full bg-red-100 blur-xl" | ||
| variants={heroAnimations.decoration} | ||
| initial="hidden" | ||
| animate="visible" | ||
| transition={{ delay: 0.2 }} | ||
| /> | ||
| <motion.div | ||
| className="absolute bottom-20 right-10 w-32 h-32 rounded-full bg-orange-100 blur-xl" | ||
| variants={heroAnimations.decoration} | ||
| initial="hidden" | ||
| animate="visible" | ||
| transition={{ delay: 0.4 }} | ||
| /> | ||
|
|
||
| {/* Main title with animated letters */} | ||
| <motion.h1 className="text-6xl md:text-8xl font-bold mb-6 tracking-tight relative inline-block font-Caveat"> | ||
| <div className="flex justify-center items-center relative"> | ||
| {title.map((letter, index) => ( | ||
| <motion.span | ||
| key={index} | ||
| variants={heroAnimations.letterAnimation} | ||
| initial="hidden" | ||
| animate="visible" | ||
| transition={{ | ||
| delay: index * 0.1, | ||
| duration: 0.6, | ||
| ease: 'easeOut', | ||
| }} | ||
| className={index >= title.length - 2 ? 'text-red-500' : ''} | ||
| > | ||
| {letter === ' ' ? '\u00A0' : letter} | ||
| </motion.span> | ||
| ))} | ||
|
|
||
| {/* Animated underline */} | ||
| <motion.div | ||
| className="absolute -z-10 h-5 bottom-2 left-0 transform -skew-x-6" | ||
| variants={heroAnimations.underline} | ||
| initial="hidden" | ||
| animate="visible" | ||
| /> | ||
| </div> | ||
| </motion.h1> | ||
|
|
||
| {/* Subtitle with animated reveal */} | ||
| <motion.h2 | ||
| className="text-3xl md:text-4xl mb-12 max-w-3xl mx-auto leading-relaxed font-Caveat relative" | ||
| variants={heroAnimations.subtitle} | ||
| initial="hidden" | ||
| animate="visible" | ||
| > | ||
| <motion.span | ||
| className="relative inline-block" | ||
| variants={heroAnimations.hoverText} | ||
| whileHover="hover" | ||
| > | ||
| A<span className="text-red-500"> Community</span> | ||
| </motion.span>{' '} | ||
| of{' '} | ||
| <motion.span | ||
| className="relative inline-block" | ||
| variants={heroAnimations.hoverText} | ||
| whileHover="hover" | ||
| > | ||
| <span className="text-red-500">Open Source</span> | ||
| </motion.span>{' '} | ||
| Enthusiasts | ||
| </motion.h2> | ||
|
|
||
| {/* Animated decorative circles */} | ||
| <div className="absolute w-full h-full pointer-events-none"> | ||
| {[...Array(6)].map((_, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="absolute w-4 h-4 rounded-full bg-red-500/10" | ||
| style={{ | ||
| x: Math.random() * window.innerWidth, | ||
| y: Math.random() * window.innerHeight, | ||
| }} | ||
| variants={heroAnimations.floatingCircle} | ||
| animate="visible" | ||
| custom={i} | ||
| /> | ||
| ))} | ||
| </div> | ||
|
|
||
| {/* Interactive mouse-follow effect */} | ||
| <motion.div | ||
| className="absolute w-96 h-96 bg-red-100 rounded-full blur-3xl opacity-20" | ||
| variants={heroAnimations.mouseFollow} | ||
| initial="hidden" | ||
| animate="visible" | ||
| whileHover="hover" | ||
| style={{ | ||
| mixBlendMode: 'multiply', | ||
| }} | ||
| /> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HeroSection; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not used. Please remove it