Skip to content

Commit 2d61a84

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #54 from codeunia-dev/buttonfixes
Feature: Revamp About and Contact pages with enhanced UI elements and improved call-to-action buttons
2 parents ce93748 + af985bc commit 2d61a84

File tree

2 files changed

+146
-214
lines changed

2 files changed

+146
-214
lines changed

‎app/about/page.tsx‎

Lines changed: 105 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@
33
import Footer from "@/components/footer";
44
import Header from "@/components/header";
55
import { AnimatedTestimonials } from "@/components/ui/animated-testimonials";
6-
import { Badge } from "@/components/ui/badge";
76
import { Button } from "@/components/ui/button";
87
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
98
import { CardSpotlight } from "@/components/ui/card-spotlight";
109
import { cn } from "@/lib/utils";
1110
import { motion } from "framer-motion";
1211
import {
13-
ArrowRight,
1412
Code2,
1513
Globe,
1614
Heart,
@@ -22,10 +20,12 @@ import {
2220
Target,
2321
Trophy,
2422
Users,
23+
UserPlus,
2524
} from "lucide-react";
2625

2726
import { SponsorsSection } from "./components/SponsorsSection";
2827
import { TeamSection } from "./components/TeamSection";
28+
import { SparklesCore } from "@/components/ui/sparkles"
2929

3030
export default function AboutPage() {
3131
const features = [
@@ -654,184 +654,109 @@ export default function AboutPage() {
654654

655655
{/* Enhanced CTA Section */}
656656
<section className="py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
657-
<div className="absolute inset-0">
658-
<div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
659-
<div
660-
className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
661-
style={{ animationDelay: "3s" }}
662-
></div>
663-
</div>
664-
665-
<motion.div
666-
initial={{ opacity: 0, y: 30 }}
667-
whileInView={{ opacity: 1, y: 0 }}
668-
transition={{ duration: 0.8 }}
669-
viewport={{ once: true }}
670-
className="container px-4 mx-auto text-center relative z-10"
671-
>
672-
<motion.div
673-
className="max-w-3xl mx-auto space-y-8 p-8 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-2xl relative overflow-hidden group"
674-
whileHover={{
675-
y: -8,
676-
transition: { duration: 0.3 },
677-
}}
678-
>
679-
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
680-
<motion.div
681-
className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary via-purple-500 to-primary"
682-
initial={{ scaleX: 0 }}
683-
whileInView={{ scaleX: 1 }}
684-
transition={{ duration: 1.5, delay: 0.3 }}
685-
viewport={{ once: true }}
686-
style={{ originX: 0 }}
687-
/>
688-
689-
<motion.div
690-
initial={{ scale: 0.8, opacity: 0 }}
691-
whileInView={{ scale: 1, opacity: 1 }}
692-
transition={{ duration: 0.6, delay: 0.2 }}
693-
viewport={{ once: true }}
694-
>
695-
<Badge
696-
variant="secondary"
697-
className="bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary/90 border-primary/20 dark:border-primary/30 px-6 py-3 text-sm font-semibold"
698-
>
699-
<Rocket className="w-4 h-4 mr-2" />
700-
Start Your Journey
701-
</Badge>
702-
</motion.div>
703-
704-
<motion.h2
705-
className="text-4xl md:text-6xl font-bold text-foreground dark:text-foreground/90 leading-tight"
706-
initial={{ opacity: 0, y: 20 }}
707-
whileInView={{ opacity: 1, y: 0 }}
708-
transition={{ duration: 0.8, delay: 0.4 }}
709-
viewport={{ once: true }}
710-
>
711-
Ready to Begin Your{" "}
712-
<motion.span
713-
className="gradient-text inline-block"
714-
animate={{
715-
backgroundPosition: [
716-
"0% 50%",
717-
"100% 50%",
718-
"0% 50%",
719-
],
720-
}}
721-
transition={{
722-
duration: 4,
723-
repeat: Infinity,
724-
ease: "linear",
725-
}}
726-
style={{
727-
background:
728-
"linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
729-
backgroundSize: "300% 100%",
730-
WebkitBackgroundClip: "text",
731-
WebkitTextFillColor: "transparent",
732-
}}
733-
>
734-
Coding Adventure?
735-
</motion.span>
736-
</motion.h2>
737-
738-
<motion.p
739-
className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed"
740-
initial={{ opacity: 0, y: 20 }}
741-
whileInView={{ opacity: 1, y: 0 }}
742-
transition={{ duration: 0.8, delay: 0.6 }}
743-
viewport={{ once: true }}
744-
>
745-
Join thousands of developers who are already
746-
learning and growing with Codeunia. Transform your
747-
career with our comprehensive learning platform.
748-
</motion.p>
749-
750-
<motion.div
751-
className="flex flex-col sm:flex-row gap-4 justify-center"
752-
initial={{ opacity: 0, y: 20 }}
753-
whileInView={{ opacity: 1, y: 0 }}
754-
transition={{ duration: 0.8, delay: 0.8 }}
755-
viewport={{ once: true }}
756-
>
757-
<motion.div
758-
whileHover={{ scale: 1.05 }}
759-
whileTap={{ scale: 0.95 }}
760-
>
761-
<Button
762-
size="lg"
763-
variant="default"
764-
className="px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 relative overflow-hidden group"
765-
>
766-
<motion.div
767-
className="absolute inset-0 bg-white/20"
768-
initial={{ x: "-100%" }}
769-
whileHover={{ x: "100%" }}
770-
transition={{ duration: 0.6 }}
771-
/>
772-
<span className="relative z-10 flex items-center">
773-
Get Started
774-
<ArrowRight className="ml-2 h-5 w-5" />
775-
</span>
776-
</Button>
777-
</motion.div>
778-
779-
<motion.div
780-
whileHover={{ scale: 1.05 }}
781-
whileTap={{ scale: 0.95 }}
782-
>
783-
<Button
784-
size="lg"
785-
variant="outline"
786-
className="px-8 py-6 text-lg font-semibold border-2 hover:bg-primary/5 transition-all duration-300 relative overflow-hidden group"
787-
>
788-
<motion.div
789-
className="absolute inset-0 bg-primary/5"
790-
initial={{ scale: 0 }}
791-
whileHover={{ scale: 1 }}
792-
transition={{ duration: 0.3 }}
793-
/>
794-
<span className="relative z-10 flex items-center">
795-
Contact Us
796-
<Mail className="ml-2 h-5 w-5" />
797-
</span>
798-
</Button>
799-
</motion.div>
800-
</motion.div>
801-
802-
{/* Floating particles */}
803-
<div className="absolute inset-0 pointer-events-none">
804-
<motion.div
805-
className="absolute top-1/4 left-1/4 w-2 h-2 bg-primary/30 rounded-full"
806-
animate={{
807-
y: [0, -20, 0],
808-
x: [0, 10, 0],
809-
opacity: [0, 1, 0],
810-
}}
811-
transition={{
812-
duration: 4,
813-
repeat: Infinity,
814-
ease: "easeInOut",
815-
}}
816-
/>
817-
<motion.div
818-
className="absolute top-3/4 right-1/4 w-3 h-3 bg-purple-500/30 rounded-full"
819-
animate={{
820-
y: [0, 15, 0],
821-
x: [0, -15, 0],
822-
opacity: [0, 1, 0],
823-
}}
824-
transition={{
825-
duration: 5,
826-
repeat: Infinity,
827-
ease: "easeInOut",
828-
delay: 2,
829-
}}
830-
/>
831-
</div>
832-
</motion.div>
833-
</motion.div>
834-
</section>
657+
<div className="absolute inset-0">
658+
<div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
659+
<div
660+
className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
661+
style={{ animationDelay: "3s" }}
662+
></div>
663+
</div>
664+
665+
{/* Sparkles effect */}
666+
<div className="absolute inset-0 h-full w-full">
667+
<SparklesCore
668+
id="tsparticlesfullpage"
669+
background="transparent"
670+
minSize={0.6}
671+
maxSize={1.4}
672+
particleDensity={100}
673+
className="w-full h-full"
674+
particleColor="#6366f1"
675+
/>
676+
</div>
677+
678+
<motion.div
679+
initial={{ opacity: 0, y: 20 }}
680+
whileInView={{ opacity: 1, y: 0 }}
681+
transition={{ duration: 0.5 }}
682+
viewport={{ once: true }}
683+
className="container px-4 mx-auto text-center relative z-10"
684+
>
685+
<div className="max-w-3xl mx-auto space-y-8 p-8 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
686+
<div className="flex flex-col items-center justify-center gap-4">
687+
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
688+
<span className="absolute inset-0 overflow-hidden rounded-full">
689+
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
690+
</span>
691+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-4 ring-1 ring-white/10">
692+
<span>Start Your Journey 🚀</span>
693+
</div>
694+
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
695+
</button>
696+
</div>
697+
<motion.h1
698+
initial={{ opacity: 0, y: 20 }}
699+
animate={{ opacity: 1, y: 0 }}
700+
transition={{ duration: 0.5, delay: 0.2 }}
701+
className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
702+
>
703+
Ready to Begin Your{" "}
704+
<motion.span
705+
className="gradient-text inline-block"
706+
animate={{
707+
backgroundPosition: [
708+
"0% 50%",
709+
"100% 50%",
710+
"0% 50%",
711+
],
712+
}}
713+
transition={{
714+
duration: 4,
715+
repeat: Infinity,
716+
ease: "linear",
717+
}}
718+
style={{
719+
background:
720+
"linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
721+
backgroundSize: "300% 100%",
722+
WebkitBackgroundClip: "text",
723+
WebkitTextFillColor: "transparent",
724+
}}
725+
>
726+
Coding Adventure?
727+
</motion.span>
728+
</motion.h1>
729+
<p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
730+
Join thousands of developers who are already learning and growing with Codeunia. Transform your career with our comprehensive learning platform.
731+
</p>
732+
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
733+
<Button
734+
size="sm"
735+
variant="default"
736+
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-all duration-300"
737+
asChild
738+
>
739+
<a href="/auth/signup" className="h-full flex items-center justify-center gap-2">
740+
<UserPlus className="w-5 h-5" />
741+
Get Started
742+
</a>
743+
</Button>
744+
745+
<Button
746+
size="sm"
747+
variant="outline"
748+
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-transform duration-300"
749+
asChild
750+
>
751+
<a href="/contact" className="h-full flex items-center justify-center gap-2">
752+
<Mail className="w-5 h-5" />
753+
Contact Us
754+
</a>
755+
</Button>
756+
</div>
757+
</div>
758+
</motion.div>
759+
</section>
835760
<Footer />
836761
</div>
837762
);

0 commit comments

Comments
 (0)