diff --git a/package-lock.json b/package-lock.json index fc61b82..db16c99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@hookform/resolvers": "^3.3.2", "@reduxjs/toolkit": "^2.0.1", "@types/react-router-dom": "^5.3.3", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.49.3", @@ -20,6 +22,7 @@ "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "swiper": "^11.0.7", + "tailwind-merge": "^2.5.2", "yup": "^1.3.3" }, "devDependencies": { @@ -37,6 +40,10 @@ "tailwindcss": "^3.4.1", "typescript": "^5.0.2", "vite": "^4.4.5" + }, + "engines": { + "node": ">=20.9.0", + "npm": ">=10.2.4" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1410,6 +1417,36 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3168,6 +3205,16 @@ "node": ">= 4.7.0" } }, + "node_modules/tailwind-merge": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", + "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index 99e38a6..4f2aa8b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "@hookform/resolvers": "^3.3.2", "@reduxjs/toolkit": "^2.0.1", "@types/react-router-dom": "^5.3.3", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.49.3", @@ -22,6 +24,7 @@ "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "swiper": "^11.0.7", + "tailwind-merge": "^2.5.2", "yup": "^1.3.3" }, "devDependencies": { diff --git a/public/fonts/Nohemi-Bold.ttf b/public/fonts/Nohemi-Bold.ttf new file mode 100644 index 0000000..7d5a0a9 Binary files /dev/null and b/public/fonts/Nohemi-Bold.ttf differ diff --git a/public/fonts/Nohemi-ExtraBold.ttf b/public/fonts/Nohemi-ExtraBold.ttf new file mode 100644 index 0000000..7949bd6 Binary files /dev/null and b/public/fonts/Nohemi-ExtraBold.ttf differ diff --git a/public/fonts/Nohemi-Light.ttf b/public/fonts/Nohemi-Light.ttf new file mode 100644 index 0000000..34f97ed Binary files /dev/null and b/public/fonts/Nohemi-Light.ttf differ diff --git a/public/fonts/Nohemi-Medium.ttf b/public/fonts/Nohemi-Medium.ttf new file mode 100644 index 0000000..7511146 Binary files /dev/null and b/public/fonts/Nohemi-Medium.ttf differ diff --git a/public/fonts/Nohemi-SemiBold.ttf b/public/fonts/Nohemi-SemiBold.ttf new file mode 100644 index 0000000..d212c52 Binary files /dev/null and b/public/fonts/Nohemi-SemiBold.ttf differ diff --git a/public/images/home/Group 130.svg b/public/images/home/Group 130.svg new file mode 100644 index 0000000..9afdf30 --- /dev/null +++ b/public/images/home/Group 130.svg @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/home/avatars/avatarlist.svg b/public/images/home/avatars/avatarlist.svg new file mode 100644 index 0000000..b50721d --- /dev/null +++ b/public/images/home/avatars/avatarlist.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/home/bluedjango.svg b/public/images/home/bluedjango.svg new file mode 100644 index 0000000..9df39d6 --- /dev/null +++ b/public/images/home/bluedjango.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/home/bluemap.svg b/public/images/home/bluemap.svg new file mode 100644 index 0000000..7b2f43b --- /dev/null +++ b/public/images/home/bluemap.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/home/curlygrid.png b/public/images/home/curlygrid.png new file mode 100644 index 0000000..0489d2e Binary files /dev/null and b/public/images/home/curlygrid.png differ diff --git a/public/images/home/team-goals.svg b/public/images/home/team-goals.svg new file mode 100644 index 0000000..b964736 --- /dev/null +++ b/public/images/home/team-goals.svg @@ -0,0 +1,323 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/avatars/avatars.ts b/src/assets/images/avatars/avatars.ts index 36fdd45..91ced58 100644 --- a/src/assets/images/avatars/avatars.ts +++ b/src/assets/images/avatars/avatars.ts @@ -12,6 +12,7 @@ import avatar11 from '/images/home/avatars/Rectangle 75.svg'; import avatar12 from '/images/home/avatars/Rectangle 76.svg'; import avatar13 from '/images/home/avatars/Rectangle 77.svg'; import avatar14 from '/images/home/avatars/Rectangle 78.svg'; +import avatarList from '/images/home/avatars/avatarlist.svg'; export { @@ -28,6 +29,7 @@ export { avatar11, avatar12, avatar13, - avatar14 + avatar14, + avatarList } diff --git a/src/assets/images/home/home.ts b/src/assets/images/home/home.ts index 0dfc32d..4ca4bda 100644 --- a/src/assets/images/home/home.ts +++ b/src/assets/images/home/home.ts @@ -1,21 +1,26 @@ import arrow from '/images/home/arrow.svg'; import bird from '/images/home/bird.svg'; +import blueDjango from '/images/home/bluedjango.svg'; +import blueMap from '/images/home/bluemap.svg'; import channel from '/images/home/channel.png'; import connect from '/images/home/connect.svg'; import curlArrow from '/images/home/curl-arrow.svg'; +import curlyGrid from '/images/home/curlygrid.png'; import getStarted from '/images/home/get-started.svg'; import greenBackBg from '/images/home/greenbackbg.svg'; import greenBg from '/images/home/greenbg.svg'; import Group from '/images/home/Group 131.svg'; +import HeaderImage from '/images/home/Group 130.svg'; import Logo from '/images/home/logo-girls.svg'; import mankaa from '/images/home/mankaa.svg'; import map from '/images/home/map.svg'; import projectBg from '/images/home/projectbg.svg'; import spaceShip from '/images/home/space-ship.svg'; +import teamGoals from '/images/home/team-goals.svg'; import whyJoin from '/images/home/whyjoin.svg'; import youtubeThumbnail from '/images/home/youtube-thumbnail.svg'; -export { arrow, bird,connect, curlArrow, getStarted, greenBackBg, greenBg, Group, Logo, mankaa, map, projectBg, spaceShip, whyJoin, youtubeThumbnail, channel }; \ No newline at end of file +export { arrow, bird, blueDjango, blueMap, connect, curlArrow, curlyGrid, getStarted, greenBackBg, greenBg, Group, HeaderImage, Logo, mankaa, map, projectBg, spaceShip, teamGoals, whyJoin, youtubeThumbnail, channel }; \ No newline at end of file diff --git a/src/components/AvatarUsers.tsx b/src/components/AvatarUsers.tsx index 1d3e8b0..8cf019e 100644 --- a/src/components/AvatarUsers.tsx +++ b/src/components/AvatarUsers.tsx @@ -1,68 +1,89 @@ import { Avatars } from '../assets'; -const AvatarUsers = () => { +const AvatarUsers = ( + // { amount }: { amount?: number } +) => { return (
-
- avatar - avatar - avatar - avatar - avatar - avatar - avatar - avatar - avatar - avatar - avatar + avatars + {/*
+ {amount ? ( + <> + {Array.from({ length: amount }, (_, index) => ( + avatar + + ))} + + + ) : ( + <> + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + avatar + + ) } +
+10K
-
+
*/}
); }; diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx index c6a241d..8b10796 100644 --- a/src/components/EventCard.tsx +++ b/src/components/EventCard.tsx @@ -1,93 +1,46 @@ import { Badge, Button } from './layout'; -import { HomeImages } from '../assets'; -import { FaArrowRightLong } from 'react-icons/fa6'; -import { FaRegUserCircle } from 'react-icons/fa'; -import { FiTwitter } from 'react-icons/fi'; -import { SlSocialLinkedin } from 'react-icons/sl'; -import { - MdOutlineLocationOn, - MdCalendarMonth, - MdAccessTime, -} from 'react-icons/md'; +import { Link } from 'react-router-dom'; +import { GoArrowUpRight } from 'react-icons/go'; +import { cn } from '../utils/constants'; -const EventCard = () => { +interface EventCardProps { + discoverMore?: boolean; +} +const EventCard = ({ discoverMore=false }: EventCardProps) => { return ( -
-
-
-
- architecture - mvt - web -
-

- Model-View-Template Harmony: Django Workshop for Comprehensive Web - Development -

-

- Explore the synergy of Django's Model-View-Template architecture in - this comprehensive workshop, perfect for developers aiming for - full-stack expertise. -

- -
- -
- -

Hilton hotel, Central post, Yaounde

-
- - -
- -

3:00 pm WAT, (GMT+1)

-
- - -
- -

Sept. 20 2023

-
- -
- - (1 day left) - -
-

Read More

- -
-
-
-
- projectbg +
+ {!discoverMore ? ( + <> +
+

Model-View-Template Harmony: Django Workshop for Comprehensive Web Development

+
+ architecture + mvt + web +
- -
- -
- -
-

MankaaChe

-

@ManeBa_cnm

-
-
- - - - - - - + + View Event + + + + ) : ( + <> +
+

Discover more events from the community

+ + +
-
-
+ + )}
); } diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx index f63a65e..f0913d0 100644 --- a/src/components/LanguageSwitcher.tsx +++ b/src/components/LanguageSwitcher.tsx @@ -1,12 +1,17 @@ - +import { LuChevronDown } from "react-icons/lu"; const LanguageSwitcher = () => { return ( - +
+ + + +
+ ); } diff --git a/src/components/layout/badge/Badge.tsx b/src/components/layout/badge/Badge.tsx index 28a03fd..d60cd89 100644 --- a/src/components/layout/badge/Badge.tsx +++ b/src/components/layout/badge/Badge.tsx @@ -1,19 +1,29 @@ import { ReactNode } from 'react'; +import { cn } from '../../../utils/constants'; interface BadgeProps { backgroundColor?: string; outline?: boolean; children: ReactNode; + className?: string; } -const Badge = ({children, outline}:BadgeProps) => { +const Badge = ({children, outline, backgroundColor="bg-secondary/20", className=''}:BadgeProps) => { return ( diff --git a/src/components/layout/button/Button.tsx b/src/components/layout/button/Button.tsx index de69f8c..468403c 100644 --- a/src/components/layout/button/Button.tsx +++ b/src/components/layout/button/Button.tsx @@ -1,18 +1,30 @@ import { ReactNode } from 'react'; +import { cn } from '../../../utils/constants'; interface ButtonProps { backgroundColor?: string; children: ReactNode; onClick?: () => void; - outline: boolean; + outline?: boolean; + spacing?: boolean; + className?: string; } -const Button = ({ outline, children,backgroundColor }: ButtonProps) => { +const Button = ({ outline=false, children, backgroundColor="bg-primary", spacing=true, className="" }: ButtonProps) => { return ( diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx index 4bc0634..58b3fe3 100644 --- a/src/components/layout/footer/Footer.tsx +++ b/src/components/layout/footer/Footer.tsx @@ -16,23 +16,23 @@ const Footer = () => {
logo image
-
- © 2023β€’ Django Cameroon β€’ All rights reserved - +
+ © 2023β€’ Django Cameroon β€’ All rights reserved + {' '} Terms of use & Privacy Policy
- - FAQ's + + Sitemap β€’ Credits β€’ FAQs
-
- - - - +
+ + + +
diff --git a/src/components/layout/navbar/Navbar.tsx b/src/components/layout/navbar/Navbar.tsx index 962e5e3..3b328af 100644 --- a/src/components/layout/navbar/Navbar.tsx +++ b/src/components/layout/navbar/Navbar.tsx @@ -4,6 +4,9 @@ import { HomeImages } from '../../../assets'; import { ToggleSwitch } from '../../../components'; import { useState, useEffect } from 'react'; import { Link, useLocation } from 'react-router-dom'; +import { navLinks } from '../../../utils/constants'; +import { Button } from '../button'; +import { VscAccount } from "react-icons/vsc"; const Navbar = () => { const [open, setOpen] = useState(false); @@ -27,7 +30,7 @@ const Navbar = () => { return ( <>
-
    -
  • +
      + { + navLinks.map((navLink, id) => ( +
    • + + {navLink.label} + +
      • + )) + } + {/*
    • Home @@ -75,18 +87,18 @@ const Navbar = () => { Chapter -
      • + */}
    - - Login + + -
    + {/*
    -
    +
    */}
    {/* Mobile nav */}
      {
      - - Login + +
      diff --git a/src/components/pages/Home-Page-Components/BecomeMember.tsx b/src/components/pages/Home-Page-Components/BecomeMember.tsx index 6473cc5..f443e82 100644 --- a/src/components/pages/Home-Page-Components/BecomeMember.tsx +++ b/src/components/pages/Home-Page-Components/BecomeMember.tsx @@ -2,46 +2,75 @@ import { HomeImages } from '../../../assets'; import { Button } from '../../layout'; const BecomeMember = () => { + const { blueDjango, blueMap } = HomeImages; return ( -
      -
      -
      -
      - cameroon map -
      -
      -

      - Welcome to Django Cameroon,
      {' '} - Where Collaboration Fuels
      {' '} - Success -

      -

      - Django Cameroon isn't just a community; it's your go-to hub for - collaboration, learning, and mutual growth. We're a passionate - collective of developers in Cameroon, united by our love for - Django. Here, we don't just code; we inspire, help, and elevate - each other. Whether you're a novice or a pro, we're here to share - knowledge, tackle challenges, and build a thriving Django - ecosystem together. Join us in this supportive journey, where we - celebrate the spirit of camaraderie in the world of coding. -

      + //
      + //
      + //
      + //
      + // cameroon map + //
      + //
      + //

      + // Welcome to Django Cameroon,
      {' '} + // Where Collaboration Fuels
      {' '} + // Success + //

      + //

      + // Django Cameroon isn't just a community; it's your go-to hub for + // collaboration, learning, and mutual growth. We're a passionate + // collective of developers in Cameroon, united by our love for + // Django. Here, we don't just code; we inspire, help, and elevate + // each other. Whether you're a novice or a pro, we're here to share + // knowledge, tackle challenges, and build a thriving Django + // ecosystem together. Join us in this supportive journey, where we + // celebrate the spirit of camaraderie in the world of coding. + //

      -
      - - design arrow pointing to the right -
      -
      -
      + //
      + // + // design arrow pointing to the right + //
      + //
      + //
      + //
      + //
      +
      +
      + +
      +
      +

      + Welcome to Django Cameroon,
      + Where Collaboration Fuels Success +

      +

      + Django Cameroon isn't just a community; it's your go-to hub for + collaboration, learning, and mutual growth. We're a passionate + collective of developers in Cameroon, united by our love for + Django. Here, we don't just code; we inspire, help, and elevate + each other. Whether you're a novice or a pro, we're here to share + knowledge, tackle challenges, and build a thriving Django + ecosystem together. Join us in this supportive journey, where we + celebrate the spirit of camaraderie in the world of coding. +

      + +
      + +
      +
      ); diff --git a/src/components/pages/Home-Page-Components/Collaboration.tsx b/src/components/pages/Home-Page-Components/Collaboration.tsx index bc23428..288e6da 100644 --- a/src/components/pages/Home-Page-Components/Collaboration.tsx +++ b/src/components/pages/Home-Page-Components/Collaboration.tsx @@ -1,27 +1,33 @@ +import { GoArrowUpRight } from 'react-icons/go'; import { HomeImages } from '../../../assets'; +import { Button } from '../../layout'; const Collaboration = () => { return ( -
      -
      -

      +
      +
      +

      Start Your Journey of Collaboration and Innovation

      -

      +

      Embark on a dynamic collaborative journey with us, where knowledge blooms, skills soar, and innovation knows no limits. Together, let's shape a brighter future in web development!

      -
      - 🎩🐍 Tired of web development feeling like a medieval quest? Embrace +
      + 🎩🐍{" "}Tired of web development feeling like a medieval quest? Embrace Django, your code-sorcerer sidekick, and let the magic of ORM, admin panels, and security spells turn your web projects into enchanted experiences! ✨πŸͺ„
      +
      - +
      ); diff --git a/src/components/pages/Home-Page-Components/EventsSection.tsx b/src/components/pages/Home-Page-Components/EventsSection.tsx index f5360e3..1d2fd2f 100644 --- a/src/components/pages/Home-Page-Components/EventsSection.tsx +++ b/src/components/pages/Home-Page-Components/EventsSection.tsx @@ -1,40 +1,28 @@ import { EventCard } from '../..'; +import { Link } from 'react-router-dom'; +import { GoArrowUpRight } from 'react-icons/go'; const EventsSection = () => { - const next = 'next'; return (
      -
      -

      +

      +

      {' '} Going through projects might be a bit confusing...

      -

      - You are welcome at our {next} events +

      + You are welcome at our {next} events

      -
      -
      -
      - - - - - -
      + + View all events + +
      -
      - +
      + {Array.from({ length: 8 }, (_, index) => ( + + ))}
      ); diff --git a/src/components/pages/Home-Page-Components/Header.tsx b/src/components/pages/Home-Page-Components/Header.tsx index 06c6e25..5079b9e 100644 --- a/src/components/pages/Home-Page-Components/Header.tsx +++ b/src/components/pages/Home-Page-Components/Header.tsx @@ -1,15 +1,16 @@ import { Button } from '../../layout'; +import { HomeImages } from '../../../assets'; const Header = () => { return ( -
      -
      -
      -

      +
      +
      +
      +

      The Django Ecosystem
      in Cameroon

      -

      +

      Fueling Innovation, Forging Connections. We're a dynamic community of developers in Cameroon, passionate about Django! Empowering dreams and pioneer change through technology @@ -23,6 +24,77 @@ const Header = () => {

      + +
      + +
      + +
      + +
      + +
      +
      +

      567

      +

      567

      +
      + +
      +
      +
      +

      Fact #1

      +

      Small Description

      +
      +
      +
      + +
      +
      +

      78

      +

      78

      +
      + +
      +
      +
      +

      Fact #2

      +

      Small Description

      +
      +
      +
      + +
      +
      +

      1.5k

      +

      1.5k

      +
      + +
      +
      +
      +

      Fact #3

      +

      Small Description

      +
      +
      +
      + +
      +
      +

      20+

      +

      20+

      +
      + +
      +
      +
      +

      Fact #4

      +

      Small Description

      +
      +
      +
      + +
      +
      ); } diff --git a/src/components/pages/Home-Page-Components/Newsletter.tsx b/src/components/pages/Home-Page-Components/Newsletter.tsx index a477d5f..de482fd 100644 --- a/src/components/pages/Home-Page-Components/Newsletter.tsx +++ b/src/components/pages/Home-Page-Components/Newsletter.tsx @@ -16,28 +16,32 @@ const Newsletter = () => {
      -
      -
      -

      +

      +
      +

      And also make sure to join our newsletter to remain updated about the community.

      -
      - Article - Projects - Tutorial +
      + article + projects + tutorial + news
      -
      +
      + - +
      +
      ); diff --git a/src/components/pages/Home-Page-Components/YoutubeSection.tsx b/src/components/pages/Home-Page-Components/YoutubeSection.tsx index 9afe3ca..3513b4c 100644 --- a/src/components/pages/Home-Page-Components/YoutubeSection.tsx +++ b/src/components/pages/Home-Page-Components/YoutubeSection.tsx @@ -2,20 +2,20 @@ import { AvatarUsers } from '../..'; import { HomeImages } from '../../../assets'; import { Badge, Button } from '../../layout'; import { Link } from 'react-router-dom'; -import { BiSolidMoviePlay } from 'react-icons/bi'; +import { GoArrowUpRight } from "react-icons/go"; const YoutubeSection = () => { + const { bird, connect, whyJoin } = HomeImages; return (
      -
      -
      -

      - Empowering Learning
      Through - YouTube
      Tutorials +
      +
      +

      + Empowering Learning Through YouTube
      Tutorials

      -

      +

      Our YouTube channel is your passport to Django expertise. Dive into a world of friendly tutorials that make web development a breeze. Whether you're starting fresh or leveling up, we're here to guide @@ -23,11 +23,9 @@ const YoutubeSection = () => { together!

      - + -
      +
      1.3k subscribers 20+ videos 1M+ views @@ -36,21 +34,21 @@ const YoutubeSection = () => { 7d/24h active support
      -
      -
      +
      + {/*
      channel -
      -
      -
      +
      */} +
      +
      - -

      Why Join?

      + +

      Why Joining?

      -

      +

      Join Django Cameroon to connect, learn, and grow with fellow passionate developers. Together, we empower dreams and make coding an inspiring journey! @@ -58,23 +56,22 @@ const YoutubeSection = () => {

      -
      +
      - -

      Connect & Learn

      + +

      Connect & Learn

      -

      - Join Django Cameroon to connect, learn, and grow with fellow - passionate developers. Together, we empower dreams and make - coding an inspiring journey! +

      + Learn, grow, and code together with fellow passionate developers. + Together, we empower dreams and make coding an inspiring journey!

      - + avatars
      -
      + {/*

      Still doubting on where and how to get started with Django? Doubt no @@ -122,6 +119,34 @@ const YoutubeSection = () => {

      +
      */} +
      +
      +

      + Still doubting on where and how to get
      + started with Django? Doubt no more!

      + + View all Tutorials + + +
      +
      + {Array.from({ length: 6 }, (_, index) => ( +
      + ))} +
      +
      + {/*
      */} +
      + +
      ); diff --git a/src/index.css b/src/index.css index 5b7985a..6206acc 100644 --- a/src/index.css +++ b/src/index.css @@ -1,9 +1,59 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Nova+Script&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; +@font-face { + font-family: "Nohemi"; + src: url("/fonts/Nohemi-ExtraBold.ttf") format("truetype"); + font-weight: 800; /* Black weight is typically 900 */ + font-style: normal; +} + +@font-face { + font-family: "Nohemi"; + src: url("/fonts/Nohemi-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Nohemi"; + src: url("/fonts/Nohemi-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Nohemi"; + src: url("/fonts/Nohemi-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +.nohemi-font { + font-family: "Nohemi", sans-serif; +} + +.urbanist-font { + font-family: "urbanist"; +} + +/* Rectangle 122 + +position: absolute; +width: 1858px; +height: 338px; +left: -65.08px; +top: 2903px; + +/* Plain-White */ +/* background: #FFFFFF; */ +/* filter: blur(75px); */ + + body{ min-height: 100vh; width: 100%; @@ -32,7 +82,7 @@ p,span,h1,h2,h3,h4,h5,h6,ol{ background: linear-gradient(115deg, #C20102 0%, #7B0100 100%); } .header-bg{ - background: url('/images/home/Group\ 131.svg'); + background: url('/images/home/curlygrid.png'); background-position: center; background-size: cover; background-repeat: no-repeat; @@ -57,6 +107,11 @@ body::-webkit-scrollbar-thumb:hover { background: #dddddd; } +.header-number-stats { + -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: white; +} .about-bg{ background: url('/images/home/greenbg.svg'); @@ -68,11 +123,9 @@ body::-webkit-scrollbar-thumb:hover { } .green-backbg{ background: url('/images/home/greenbackbg.svg'); - background-position: center; + background-position: center; background-size: cover; background-repeat: no-repeat; - height: 100%; - width: 100%; } .green-backbg-auth{ background: url('/images/home/greenbackbg.svg'); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e04d6ae..ad24fa2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,6 +1,7 @@ import { BecomeMember, Collaboration, + EventsSection, ProjectsSection, YoutubeSection, Header, @@ -15,8 +16,8 @@ const Home = () => {
      - - {/**/} + {/* */} +
      diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 5efce51..9348402 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,3 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + export const projectCategories = [ 'Quick peek', 'Web', @@ -6,4 +9,32 @@ export const projectCategories = [ 'AI/ML' ] -export const EventCategories = ['Quick peek', 'Workshop', 'Talk', 'Online', 'In-person']; \ No newline at end of file +export const EventCategories = ['Quick peek', 'Workshop', 'Talk', 'Online', 'In-person']; + + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} + +export const navLinks = [ + { + label: "About", + link: "/about" + }, + { + label: "Events", + link: "/events" + }, + { + label: "Projects", + link: "/projects" + }, + { + label: "Product", + link: "/product" + }, + { + label: "Blog", + link: "/blog" + }, +] diff --git a/tailwind.config.js b/tailwind.config.js index d1677bd..e6ff89d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,9 +9,13 @@ export default { extend: { colors: { 'primary': 'rgba(16, 62, 46, 1)', + 'primary-light': 'rgba(16, 62, 46, 0.1)', + 'primary-lighter': 'rgba(154, 176, 166, 1)', 'secondary': 'rgba(66, 133, 244, 1)', + 'secondary-light': 'rgba(66, 133, 244, 0.1)', 'dark-primary': '#C6EADE', 'text-color': 'rgba(18, 18, 18, 1)', + 'grey': 'rgba(95, 99, 104, 1)' }, boxShadow: { 'shadow-outline': '0 0 6px 10px rgba(0,0,0,0.3)',