Skip to content

About Page Done and Team page #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

About Page Done and Team page #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
13c705b
navbar fixes
ayush24k Jan 17, 2025
36ae862
nav minor issue fix
ayush24k Jan 17, 2025
c7f5789
didnt like the changes reverting back
ayush24k Jan 17, 2025
4da7900
about section done
ayush24k Feb 12, 2025
2d3d3b8
teamPage
ayush24k Feb 12, 2025
f58e201
fix
ayush24k Feb 12, 2025
595d1f6
event page
ayush24k Feb 13, 2025
edd40d5
team
ayush24k Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/(pages)/HeroPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ export default function HeroPage() {
function HeroSection() {
return (
<div>
<div className="md:pt-36 pt-24">
<div className="md:pt-52 pt-[190px]">
<div className="flex items-center justify-center gap-6">
<div className="flex flex-col lg:text-left lg:items-start text-center items-center md:gap-10 gap-10">
<h1 className="sm:text-[55px] text-[41px] font-bold sm:leading-[60px] leading-[50px] bg-[linear-gradient(to_left,#A46FF2,#E49976)] text-transparent bg-clip-text [-webkit-background-clip:text]">Improve your programming skills significantly.</h1>
<h3 className="sm:text-[24px] text-[14px]">With D4 Communities unique learning, practice, and coaching approach, you can master 70 programming languages. Exercising is enjoyable, beneficial, and completely free forever.</h3>
<h3 className="sm:text-[24px] font-light text-[14px]">With D4 Communities unique learning, practice, and coaching approach, you can master 70 programming languages. Exercising is enjoyable, beneficial, and completely free forever.</h3>

<div className="flex gap-5">
<OrangeButton label={"Join Now"} />
Expand Down
96 changes: 70 additions & 26 deletions app/(pages)/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import HeroSection from "@/app/components/HeroSection";
import aboutImg from "@/app/assets/images/abouthero.png"
import { Heading } from "@/app/components/Headings";
import Card from "@/app/components/Card";
import { CardType } from "@/types/cards";
import FounderCard from "@/app/components/FounderCard";
import { FounderType } from "@/types/founder";
import Image from "next/image";

export default function AboutPAge() {
return (
Expand All @@ -16,13 +20,26 @@ export default function AboutPAge() {
<div className="container z-10 relative">
<FounderSection />
</div>
<Footer />
<Background />
</div>
)
}

function AboutHeroSection() {
const AboutCards: CardType[] = [{
title: "Descite",
description: "Develop Skills!! This is the first step in your journey. Learn the basics of programming and get a solid foundation."
}, {
title: "Develop",
description: "Build it!! Time to turn your dreams and ideas into reality by writing the code and creating your tech masterpiece."
}, {
title: "Debug",
description: "Fix it!! When things inevitably go haywire, you identify errors, issues and finally hunt down and fix those bugs."
}, {
title: "Deploy",
description: "Share it!! After your creation is polished and perfected, deploy it to the world, making it accessible to users."
}]

return (
<div>
<HeroSection
Expand All @@ -38,26 +55,14 @@ function AboutHeroSection() {
title={"Our Pillars"}
/>

<div className="flex py-10">
<Card
title={"Descite"}
description={"Develop Skills!! This is the first step in your journey. Learn the basics of programming and get a solid foundation."}
/>

<Card
title={"Develop"}
description={"Build it!! Time to turn your dreams and ideas into reality by writing the code and creating your tech masterpiece."}
/>

<Card
title={"Debug"}
description={"Fix it!! When things inevitably go haywire, you identify errors, issues and finally hunt down and fix those bugs."}
/>

<Card
title={"Deploy"}
description={"Share it!! After your creation is polished and perfected, deploy it to the world, making it accessible to users."}
/>
<div className="flex md:flex-row flex-col py-10">
{
AboutCards.map((props, k) => {
return (
<Card title={props.title} description={props.description} key={k} />
)
})
}
</div>
</div>
</div>
Expand Down Expand Up @@ -87,13 +92,20 @@ function ReachSection() {
<div>
<Heading title={"Our Reach"} />
</div>
<div className="bg-slate-400 w-[1280px] h-[720px] rounded-md shadow-md mx-10"></div>
<div className="flex justify-between pt-4">
<div className="relative bg-slate-400 xl:h-[720px] lg:h-[540px] md:h-[340px] h-[240px] w-[100%] rounded-sm shadow-md overflow-hidden">
<Image
src="/extra/map.png"
fill
objectFit="cover"
alt="reach"
/>
</div>
<div className="flex md:flex-row flex-col md:gap-20 gap-10 justify-center pt-4 flex-wrap">
{reachInfo.map((prop, i) => {
return (
<div key={i}>
<h1 className="text-[#BFBFBF] text-[24px]">{prop.title}</h1>
<p className="font-bold text-[38px]">{prop.reach}+</p>
<h1 className="text-[#BFBFBF] md:text-[24px] text-[16px]">{prop.title}</h1>
<p className="font-semibold md:text-[34px] text-[24px]">{prop.reach}+</p>
</div>
)
})}
Expand All @@ -104,10 +116,42 @@ function ReachSection() {
}


function FounderSection () {
function FounderSection() {
const FounderInfo: FounderType[] = [{
name: "Ayush Kumar Tiwari - Co-Founder D4",
title: "Tomorrow should be better than today.",
description: "We are a team of strategists, designers communicators, researchers. Togeather, we belive that progress only happens when you refuse to play things safe.",
link: "https://www.linkedin.com/in/itsayu",
image: "/founderImg/AyushKumarTiwari.png",
reverse: true // reverse is for css card reversing (optional)
}, {
name: "Sagar Malhotra - Co-Founder D4",
title: "See how we can help you progress",
description: "We add a layer of fearless insights and action that allows change makers to accelerate their progress in areas such as brand, designdigital, comms and social research.",
link: "https://www.linkedin.com/in/sagar0-0malhotra",
image: "/founderImg/Sagar.png",
reverse: false
}]
return (
<div className="py-20">
<Heading title={"From D4 Founders"} />
<div className="lg:py-44 py-32 flex flex-col lg:gap-48 gap-32">
{
FounderInfo.map((props, k) => {
return (
<FounderCard
key={k}
name={props.name}
title={props.title}
description={props.description}
link={props.link}
src={props.image}
reverse={props.reverse}
/>
)
})
}
</div>
</div>
)
}
82 changes: 79 additions & 3 deletions app/(pages)/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import Footer from "@/app/components/Footer";
import HeroSection from "@/app/components/HeroSection";

import eventImg from "@/app/assets/images/eventsHeroImg.png"
import { Heading } from "@/app/components/Headings";
import { RecentEventCard, UpcomingEventCard } from "@/app/components/EventCard";
import { RecentEventCardType } from "@/types/cards";
import Image from "next/image";


export default function EventPage() {
Expand All @@ -11,20 +15,92 @@ export default function EventPage() {
<div className="container z-10 relative">
<EventHeroSection />
</div>
<Footer />
<EventSection />
<div className="container z-10 relative">
<UpcomingEventSection />
</div>
<Background />
</div>
)
}

function EventHeroSection () {
function EventHeroSection() {
return (
<div>
<div className="">
<HeroSection
title={"All Events"}
img={eventImg}
description={"Step into a world where creativity meets technology. Our events brings together designers, developers, and tech enthusiasts to collaborate, learn, and innovate. Don't miss out on this unique opportunity to connect with industry leaders, showcase your skills, and drive the future of design and development!"}
/>
</div>
)
}


function EventSection() {
const RecentEventInfo: RecentEventCardType[] = [{
date: "1-July-2025",
eventName: "Hackathon",
image: "",
link: ""
}, {
date: "1-July-2025",
eventName: "Hackathon",
image: "",
link: ""
}, {
date: "1-July-2025",
eventName: "Hackathon",
image: "",
link: ""
}, {
date: "1-July-2025",
eventName: "Hackathon",
image: "",
link: ""
}]

return (
<div className="bg-[#091B32] md:mt-[140px]">
<div className="container z-10 relative flex flex-col gap-10 py-24">
<div className="">
<Heading title={"Recent Events"} />
</div>
<div className="flex justify-center flex-wrap md:gap-24 gap-16 md:py-24 py-16">
{
RecentEventInfo.map((props, k) => {
return (
<RecentEventCard date={props.date} eventName={props.eventName} image={props.image} link={props.link} key={k} />
)
})
}
</div>

{/* Upcoming Event in recent event section */}
<div className="relative overflow-hidden bg-slate-400 lg:h-[720px] h-[360px] w-[100%] max-w-[90%] self-center rounded-3xl shadow-md">
<Image
src=""
fill
objectFit="cover"
alt="Eventname"
/>
<div className="relative z-20 bg-[linear-gradient(to_left,#A46FF2,#E49976)]">
<p className="text-center p-4">Upcoming Event</p>
</div>
</div>
</div>
</div>
)
}


function UpcomingEventSection() {
return (
<div className="py-28">
<Heading title={"Upcoming Events"} />
<div className="py-12 flex">
<UpcomingEventCard />
</div>
</div>
)
}
9 changes: 6 additions & 3 deletions app/(pages)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import Navbar from "../components/Navbar"
import Footer from "../components/Footer"
import Background from "../components/Background"

export default function PageLayout({children}: {
export default function PageLayout({ children }: {
children: React.ReactNode
}) {
return (
<div className="bg-[#0E0C15]">
<div className="bg-[#0E0C15] text-white">
<Navbar />
{children}
<div className="">
{children}
</div>
<Footer />
</div>
)
}
Loading