Merge pull request #44 from fossuok/home

global style improvements and optimizations
fossuok · Feb 5, 2025 · 70cd308 · 70cd308
2 parents 2e2ff90 + 2357b7b
commit 70cd308
Show file tree

Hide file tree

Showing 39 changed files with 71 additions and 37 deletions.
diff --git a/public/FOSS.png b/public/FOSS.png
diff --git a/public/FOSS.webp b/public/FOSS.webp
diff --git a/public/bg-blur.webp b/public/bg-blur.webp
diff --git a/src/app/(pages)/about/GetInTouch.tsx b/src/app/(pages)/about/GetInTouch.tsx
@@ -9,7 +9,7 @@ import {
   Textarea,
   TextInput,
 } from "@mantine/core";
-import bg from "@/images/FOSS.png";
+import bg from "@/images/FOSS.webp";
 import classes from "./GetInTouch.module.css";
 
 export function GetInTouch() {

diff --git a/src/app/(pages)/blog/ArticleGroup.tsx b/src/app/(pages)/blog/ArticleGroup.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import React from "react";
-import { Group, Card, Badge, Text } from "@mantine/core";
+import { Group, Card, Badge, Text, Spoiler } from "@mantine/core";
 import { ArticleGroupProps } from "@/data/ArticleGroup";
 import classes from "./ArticleGroup.module.css";
 
@@ -58,6 +58,7 @@ export function ArticleGroup({
   article,
   author,
   type,
+  discription,
   profile,
   published,
   url,
@@ -77,10 +78,11 @@ export function ArticleGroup({
         <Text mih={60} fz="lg" fw={500} mt="md">
           {article}
         </Text>
-        {/* <Text fz="sm" c="dimmed" mt={5}>
-          Form context management, Switch, Grid and Indicator components
-          improvements, new hook and 10+ other changes
-        </Text> */}
+        <Spoiler maxHeight={50} hideLabel="less" showLabel="">
+          <Text fz="sm" c="dimmed" mt={5}>
+            {discription}
+          </Text>
+        </Spoiler>
 
         <Group justify="left" mt="md">
           <Image

diff --git a/src/app/(pages)/blog/page.tsx b/src/app/(pages)/blog/page.tsx
@@ -35,6 +35,7 @@ export default function Home() {
                   article={article.article}
                   author={article.author}
                   type={article.type}
+                  discription={article.discription}
                   profile={article.profile}
                   published={article.published}
                   url={article.url}

diff --git a/src/app/(pages)/home/ArticlesHome.module.css b/src/app/(pages)/home/ArticlesHome.module.css
@@ -70,7 +70,20 @@
     grid-template-columns: repeat(2, 1fr);
   }
 }
+.link {
+  text-decoration: none;
+}
 .btn {
   display: flex;
   justify-content: center;
+  font-size: 16px;
+  height: 44px;
+  padding-left: 44px;
+  padding-right: 44px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    height: 44px;
+    padding-left: 44px;
+    padding-right: 44px;
+  }
 }
diff --git a/src/app/(pages)/home/ArticlesHome.tsx b/src/app/(pages)/home/ArticlesHome.tsx
@@ -36,6 +36,7 @@ export default function ArticlesHome() {
                     id={article.id}
                     article={article.article}
                     type={article.type}
+                    discription={article.discription}
                     author={article.author}
                     profile={article.profile}
                     published={article.published}
@@ -45,13 +46,13 @@ export default function ArticlesHome() {
               ))}
             </div>
           </section>
-          {/* <div className={classes.btn}>
-            <Link href="/blog">
-              <Button radius="xl" component="a" size="lg" variant="default">
+          <div className={classes.btn}>
+            <Link href="/blog" className={classes.link}>
+              <Button radius="xl" variant="default">
                 Read More
               </Button>
             </Link>
-          </div> */}
+          </div>
         </Stack>
       </Container>
     </div>

diff --git a/src/app/(pages)/home/FaqWithImage.tsx b/src/app/(pages)/home/FaqWithImage.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { Accordion, Container, Grid, Image, Title } from "@mantine/core";
-import image from "@/images/home/FOSStext.png";
+import image from "@/images/home/FOSStext.webp";
 import classes from "./FaqWithImage.module.css";
 import GradientBack from "@/components/Gradient/GradientBack";
 import { data } from "@/data/Q&A";

diff --git a/src/app/(pages)/home/section1.module.css b/src/app/(pages)/home/section1.module.css
@@ -62,14 +62,17 @@
 }
 
 .control {
-  height: 54px;
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+  height: 44px;
   padding-left: 38px;
   padding-right: 38px;
+  min-width: calc(97px + 76px);
 
   @media (max-width: $mantine-breakpoint-sm) {
-    height: 54px;
-    padding-left: 18px;
-    padding-right: 18px;
-    flex: 1;
+    height: 44px;
+    padding-left: 38px;
+    padding-right: 38px;
   }
 }
diff --git a/src/app/(pages)/home/section1.tsx b/src/app/(pages)/home/section1.tsx
@@ -42,19 +42,19 @@ export default function Section1() {
           <Group className={classes.controls}>
             <Button
               radius="xl"
-              size="xl"
+              component="a"
+              href="#"
               className={classes.control}
               variant="gradient"
               gradient={{ from: "violet", to: "grape" }}
             >
-              Join
+              Join Now
             </Button>
 
             <Button
               radius="xl"
               component="a"
-              href="https://github.com/mantinedev/mantine"
-              size="xl"
+              href="https://github.com/fossuok/"
               variant="default"
               className={classes.control}
               leftSection={<IconBrandGithubFilled size={18} stroke={1.5} />}

diff --git a/src/app/(pages)/home/section2.tsx b/src/app/(pages)/home/section2.tsx
@@ -9,11 +9,12 @@ import {
   BackgroundImage,
 } from "@mantine/core";
 import classes from "./section2.module.css";
-import img1 from "@/images/home/uok.png";
-import img2 from "@/images/home/fosslk_logo.png";
-import codeImg from "@/images/home/github.jpg";
-import learn from "@/images/home/learn.jpg";
-import share from "@/images/home/share.jpg";
+import img1 from "@/images/home/uok.webp";
+import img2 from "@/images/home/fosslk_logo.webp";
+import codeImg from "@/images/home/github.webp";
+import learn from "@/images/home/learn.webp";
+import share from "@/images/home/share.webp";
+import lead from "@/images/home/lead.webp";
 
 export default function Section2() {
   return (
@@ -96,7 +97,7 @@ export default function Section2() {
           <Grid.Col span={6} style={{ cursor: "pointer" }}>
             <BackgroundImage
               className={classes.background}
-              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-6.png"
+              src={lead.src}
               radius="sm"
             >
               <Text className={classes.word} mih={120} c="white">

diff --git a/src/app/(pages)/leaderboard/page.tsx b/src/app/(pages)/leaderboard/page.tsx
@@ -152,6 +152,7 @@ const LeaderBoard: React.FC = () => {
             onChange={(value) => setSelectedRepo(value || "overall")}
             placeholder="Select a repository"
             mb="lg"
+            radius="lg"
             disabled={loadingRepos}
           />
 

diff --git a/src/app/(pages)/template.tsx b/src/app/(pages)/template.tsx
@@ -9,9 +9,9 @@ interface TemplateProps {
 export default function Template({ children }: TemplateProps) {
   return (
     <motion.div
-      initial={{ y: 20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      transition={{ ease: "easeInOut", duration: 0.75 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ ease: "easeInOut", duration: 1.5 }}
     >
       {children}
     </motion.div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -7,6 +7,11 @@
 html,
 body {
   overflow-x: hidden;
+  background-image: url("/bg-blur.webp");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; /* Keeps the background in place */
 }
 /* For light mode */
 :root[data-mantine-color-scheme="light"] {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ import { PersistGate } from "redux-persist/integration/react";
 
 const theme = createTheme({
   fontFamily:
-    "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+    "Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
 });
 
 export default function RootLayout({

diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -9,9 +9,9 @@ interface TemplateProps {
 export default function Template({ children }: TemplateProps) {
   return (
     <motion.div
-      initial={{ y: 20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      transition={{ ease: "easeInOut", duration: 0.75 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ ease: "easeInOut", duration: 1.5 }}
     >
       {children}
     </motion.div>

diff --git a/src/components/Footer/FooterLinks.module.css b/src/components/Footer/FooterLinks.module.css
@@ -51,7 +51,9 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (max-width: $mantine-breakpoint-sm) {
+  @media (max-width: $mantine-breakpoint-xs) {
+    justify-content: space-around;
+    text-align: center;
   }
 }
 
@@ -81,6 +83,7 @@
 }
 
 .afterFooter {
+  text-align: center;
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/src/components/ThemePicker/Theming.tsx b/src/components/ThemePicker/Theming.tsx
@@ -10,7 +10,7 @@ import cx from "clsx";
 import classes from "./Theming.module.css";
 import Image from "next/image"; // or import { Image } from "@mantine/core";
 import Link from "next/link";
-const logo = "/FOSS.png";
+const logo = "/FOSS.webp";
 
 export function ThemedLogo() {
   return (

diff --git a/src/data/AdvertData.ts b/src/data/AdvertData.ts
@@ -1,5 +1,5 @@
 import { StaticImageData } from "next/image";
-import addImage from "@/images/advert/FOSS.png";
+import addImage from "@/images/advert/FOSS.webp";
 
 export interface AdvertProps {
   data: {

diff --git a/src/data/ArticleGroup.ts b/src/data/ArticleGroup.ts
@@ -5,6 +5,7 @@ export interface ArticleGroupProps {
     id:number
     article: string;
     type:string;
+    discription:string;
     author: string;
     profile: string | StaticImageData;
     published: string;
@@ -23,6 +24,7 @@ export const data: ArticleGroupProps[] = [
         article: "Third Temp Ariticle",
         author: "Imesha Dilshani",
         type:"News",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2025-02-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"
@@ -32,6 +34,7 @@ export const data: ArticleGroupProps[] = [
         article: "Second Temp Ariticle",
         author: "Imesha Dilshani",
         type:"Tutorials",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2025-01-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"
@@ -41,6 +44,7 @@ export const data: ArticleGroupProps[] = [
         article: "Words as Vectors: Sparse Vectors vs Dense Vectors",
         author: "Imesha Dilshani",
         type:"Articles",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2024-10-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"

diff --git a/src/data/FooterData.ts b/src/data/FooterData.ts
@@ -13,9 +13,9 @@ export const data = [
       title: "Helpful Links",
       links: [
         { label: "University of Kelaniya", link: "#" },
-        { label: "FOSS.LK", link: "#" },
         { label: "Open-Source Summit", link: "#" },
         { label: "Code of Conduct", link: "#" },
+        { label: "FOSS.LK", link: "#" },
       ],
     },
 

diff --git a/src/images/FOSS.png b/src/images/FOSS.png
diff --git a/src/images/FOSS.webp b/src/images/FOSS.webp
diff --git a/src/images/advert/FOSS.png b/src/images/advert/FOSS.png
diff --git a/src/images/advert/FOSS.webp b/src/images/advert/FOSS.webp
diff --git a/src/images/home/FOSStext.png b/src/images/home/FOSStext.png
diff --git a/src/images/home/FOSStext.webp b/src/images/home/FOSStext.webp
diff --git a/src/images/home/fosslk_logo.png b/src/images/home/fosslk_logo.png
diff --git a/src/images/home/fosslk_logo.webp b/src/images/home/fosslk_logo.webp
diff --git a/src/images/home/github.jpg b/src/images/home/github.jpg
diff --git a/src/images/home/github.webp b/src/images/home/github.webp
diff --git a/src/images/home/lead.webp b/src/images/home/lead.webp
diff --git a/src/images/home/learn.jpg b/src/images/home/learn.jpg
diff --git a/src/images/home/learn.webp b/src/images/home/learn.webp
diff --git a/src/images/home/share.jpg b/src/images/home/share.jpg
diff --git a/src/images/home/share.webp b/src/images/home/share.webp
diff --git a/src/images/home/uok.png b/src/images/home/uok.png
diff --git a/src/images/home/uok.webp b/src/images/home/uok.webp