diff --git a/app/globals.css b/app/globals.css
index 875c01e..7f46709 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,32 +2,16 @@
@tailwind components;
@tailwind utilities;
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
-}
-
body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+ background-color: #141718;
+ font-family: sans-serif;
+ font-weight: 500;
}
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
-}
+.inter-heading {
+ font-family: "Inter", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+ font-variation-settings: "slnt" 0;
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index ab41e43..c80d577 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,35 +1,19 @@
-export default function Home() {
+import Navbar from '@/components/Navbar';
+import Hero from '@/components/Hero';
+import Initiatives from '@/components/Initiatives';
+import Structure from '@/components/Structure';
+import Footer from '@/components/Footer';
+
+const Home: React.FC = () => {
return (
-
-
-
-
- Under Construction.
- FOSSCU-K
-
-
- Free and Open Source Software Community University
-
-
-
-
-
+ <>
+
+
+
+
+
+ >
);
-}
+};
+
+export default Home;
diff --git a/assets/Frame 1000005985.png b/assets/Frame 1000005985.png
new file mode 100644
index 0000000..ec58f45
Binary files /dev/null and b/assets/Frame 1000005985.png differ
diff --git a/assets/Frame 1000005985.svg b/assets/Frame 1000005985.svg
new file mode 100644
index 0000000..dce6861
--- /dev/null
+++ b/assets/Frame 1000005985.svg
@@ -0,0 +1,249 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/Shipyard 1.png b/assets/Shipyard 1.png
new file mode 100644
index 0000000..87ca0a2
Binary files /dev/null and b/assets/Shipyard 1.png differ
diff --git a/assets/conf 1.png b/assets/conf 1.png
new file mode 100644
index 0000000..9a7b86c
Binary files /dev/null and b/assets/conf 1.png differ
diff --git a/assets/creativeIndividual.png b/assets/creativeIndividual.png
new file mode 100644
index 0000000..8a2b277
Binary files /dev/null and b/assets/creativeIndividual.png differ
diff --git a/assets/designer.png b/assets/designer.png
new file mode 100644
index 0000000..b1fb924
Binary files /dev/null and b/assets/designer.png differ
diff --git a/assets/developer.png b/assets/developer.png
new file mode 100644
index 0000000..197e93f
Binary files /dev/null and b/assets/developer.png differ
diff --git a/assets/index.ts b/assets/index.ts
new file mode 100644
index 0000000..6d7f812
--- /dev/null
+++ b/assets/index.ts
@@ -0,0 +1,7 @@
+export { default as designer } from './designer.png';
+export { default as developer } from './developer.png';
+export { default as students } from './student.png';
+export { default as creativeIndividual } from './creativeIndividual.png';
+export { default as conf1} from './conf 1.png';
+export { default as Shipyard} from './Shipyard 1.png';
+export { default as openMic} from './open-mic.png';
\ No newline at end of file
diff --git a/assets/open-mic.png b/assets/open-mic.png
new file mode 100644
index 0000000..dd817f9
Binary files /dev/null and b/assets/open-mic.png differ
diff --git a/assets/student.png b/assets/student.png
new file mode 100644
index 0000000..f859820
Binary files /dev/null and b/assets/student.png differ
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..62b3644
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { FaGithubSquare, FaInstagram, FaTwitterSquare, FaLinkedin } from "react-icons/fa";
+
+export default function Footer() {
+ return (
+
+
+
FOSSCU
+
Made with 💚 and Open Source
+
+
+
+
+ );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
new file mode 100644
index 0000000..796dadf
--- /dev/null
+++ b/components/Hero.tsx
@@ -0,0 +1,36 @@
+import bgImg from "@/assets/Frame 1000005985.png";
+import Image from "next/image";
+
+export default function Hero() {
+ return (
+
+
+
+
+
+
+
Wanna open a local chapter at your uni?
+
+
Welcome to FOSSCU
+
We are a community of students, developers, designers, and other creative individuals who are passionate about promoting the use and development of Free and Open Source Software.
+
+
+
+ Join Us
+ Learn More
+
+
+
+
+
Are you here from FOSSConf?
+
+
+
+ );
+}
diff --git a/components/Initiatives.tsx b/components/Initiatives.tsx
new file mode 100644
index 0000000..f315237
--- /dev/null
+++ b/components/Initiatives.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import Image from "next/image";
+import { developer, designer, students, creativeIndividual, conf1, Shipyard, openMic } from "@/assets";
+import Card from "../components/ui/Card";
+
+export default function Initiatives () {
+ return (
+
+
We Include
+
+
+
+
Developers
+
+
+
+
Designers
+
+
+
+
Students
+
+
+
+
Creative Individuals
+
+
+
+
+
+ We aim to provide a space for students to develop their skills, collaborate with like-minded
+ individuals, and contribute to FOSS projects. The community welcomes anyone who is
+ interested in FOSS, regardless of their background or skill level.
+
+
+
+
What we do?
+
+
+
+
+
+
and much more...
+
+ );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..34704da
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,77 @@
+"use client";
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+export default function Navbar() {
+ const [menu, setMenu] = useState(false);
+
+ const handleMenu = (): void => {
+ setMenu(!menu);
+ }
+
+ return (
+
+
+
+ FOSSCU
+
+
+
Home
+
About
+
Team
+
Contact
+
Shipyard
+
+
+ {" "}
+
+
+
+
+ More
+
+
+
+
+
+ Join Us
+
+
+
+
+
+
+
+
+
+
+ FOSSCU
+
+
+
+
+
+
+ Home
+ About
+ Team
+ Contact
+ Shipyard
+
+
+
+ );
+}
diff --git a/components/Structure.tsx b/components/Structure.tsx
new file mode 100644
index 0000000..c8c49ed
--- /dev/null
+++ b/components/Structure.tsx
@@ -0,0 +1,37 @@
+export default function Structure() {
+ return (
+
+
The Community Structure
+
+
+
“with great power, comes great responsibilities”
+
+
+ Learner
+
+
+ Maintainer
+
+
+ Contributor
+
+
+
+
+
Read our docs for a much detailed information.
+
+
+
Want Latest News of OSS World 🌍 ?
+ Sign up for our newsletter to stay up to date.
+
+
+
+
Notify me
+
We care about the protection of your data. Read our
+ Privacy Policy.
+
+
+
+ );
+ }
+
\ No newline at end of file
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
new file mode 100644
index 0000000..0bc5bfe
--- /dev/null
+++ b/components/ui/Card.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Image from 'next/image'
+
+interface CardProps {
+ title: string;
+ description: string;
+ imageUrl: string;
+}
+
+const Card: React.FC = ({ title, description, imageUrl }) => {
+ return (
+
+
+
+
{title}
+
{description}
+
+
+ Learn More
+
+
+ );
+};
+
+export default Card;
diff --git a/package-lock.json b/package-lock.json
index 5b15a56..c507d2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,13 @@
"name": "website-fossc",
"version": "0.1.0",
"dependencies": {
- "next": "14.1.4",
+ "@fortawesome/fontawesome-svg-core": "^6.5.2",
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/react-fontawesome": "^0.2.2",
+ "next": "^14.1.4",
"react": "^18",
- "react-dom": "^18"
+ "react-dom": "^18",
+ "react-icons": "^5.2.1"
},
"devDependencies": {
"@types/node": "^20",
@@ -113,6 +117,51 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+ "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+ "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/react-fontawesome": {
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+ "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+ "dependencies": {
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+ "react": ">=16.3"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3308,7 +3357,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -3770,7 +3818,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -3829,11 +3876,18 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-icons": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+ "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "dev": true
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/read-cache": {
"version": "1.0.0",
diff --git a/package.json b/package.json
index aad36c2..2546bed 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,23 @@
"lint": "next lint"
},
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.5.2",
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/react-fontawesome": "^0.2.2",
+ "next": "^14.1.4",
"react": "^18",
"react-dom": "^18",
- "next": "14.1.4"
+ "react-icons": "^5.2.1"
},
"devDependencies": {
- "typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
+ "eslint": "^8",
+ "eslint-config-next": "14.1.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
- "eslint": "^8",
- "eslint-config-next": "14.1.4"
+ "typescript": "^5"
}
}
diff --git a/app/favicon.ico b/public/favicon.ico
similarity index 100%
rename from app/favicon.ico
rename to public/favicon.ico
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..b438050 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,10 +8,19 @@ const config: Config = {
],
theme: {
extend: {
+ colors: {
+ "custom-green": "#0DFF1C",
+ "gradient-green": "linear-gradient(180deg, #00FF00 0%, #008500 99.99%, #006900 100%)",
+ "custom-gray": "#6C7275",
+ "custom-gray2": "#AFAFAF",
+ "custom-yellow": "#FAFF00",
+ "bg-black": "#141718",
+ },
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+ "custom-green-gradient": "linear-gradient(180deg, #00FF00 0%, #008500 99.99%, #006900 100%)",
},
},
},