diff --git a/app/page.tsx b/app/page.tsx index 2efaf93..12c7a56 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,10 +3,12 @@ import Process from '@/components/homePage/Process'; import AboutUs from '@/components/homePage/AboutUs'; import Services from '@/components/homePage/Services'; import Showcase from '@/components/homePage/Showcase'; +import Announcement from '@/components/homePage/Announcement'; export default function Home() { return (
+ diff --git a/components/homePage/Announcement.tsx b/components/homePage/Announcement.tsx new file mode 100644 index 0000000..2fa3f18 --- /dev/null +++ b/components/homePage/Announcement.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import style from '../../styles/Announcement.module.css'; + +const Announcement = () => { + return ( +
+
+
+
+ +
+
+
+ INNOVANCE 2.0 +
+
+ +
+
+
November 18th - 19th
+
Campus 7 & 17
+
+ +
+
+
+ ); +}; + +export default Announcement; diff --git a/components/homePage/Hero.tsx b/components/homePage/Hero.tsx index bf2fed5..b8b6242 100644 --- a/components/homePage/Hero.tsx +++ b/components/homePage/Hero.tsx @@ -1,6 +1,6 @@ const Hero: React.FC = () => { return ( -
+
bg_cloud_photo {
-

+

+ {/* Temporary change: mt-8 md:mt-0 */}
diff --git a/public/images/innovance-icon-dark-small.png b/public/images/innovance-icon-dark-small.png new file mode 100644 index 0000000..c219053 Binary files /dev/null and b/public/images/innovance-icon-dark-small.png differ diff --git a/public/images/innovance-icon-dark.png b/public/images/innovance-icon-dark.png new file mode 100644 index 0000000..c7e0f77 Binary files /dev/null and b/public/images/innovance-icon-dark.png differ diff --git a/public/images/innovance-icon.png b/public/images/innovance-icon.png new file mode 100644 index 0000000..1cff8bb Binary files /dev/null and b/public/images/innovance-icon.png differ diff --git a/public/images/innovance-icon.svg b/public/images/innovance-icon.svg new file mode 100644 index 0000000..0824526 --- /dev/null +++ b/public/images/innovance-icon.svg @@ -0,0 +1,246 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/Announcement.module.css b/styles/Announcement.module.css new file mode 100644 index 0000000..95ff91c --- /dev/null +++ b/styles/Announcement.module.css @@ -0,0 +1,210 @@ +.temp { + z-index: 10; + position: absolute; + left: 10%; + display: flex; + align-items: center; + justify-content: center; +} + +.background { + background: #1f293750; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.18); + width: 90vw; + height: 12.4vh; + margin-top: 1rem; + display: flex; + align-items: center; +} + +.temp4 { + display: flex; + align-items: center; + justify-content: center; +} + +.icon { + width: 110px; + height: 110px; + +} + +.vertical { + border-left: 0.1vw solid rgba(0, 0, 0, 0.699); + height: 9vh; +} + +.title { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + margin-left: 2vw; + font-weight: 700; + font-size: 35px; + color: #17191ae5; +} + +.temp2 { + display: flex; + flex-direction: column; + margin-right: 2.3vw; +} + +.text { + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + margin-right: 2vw; +} + +.lines { + margin-top: auto; + margin-bottom: auto; + font-weight: 500; + font-size: 25px; + text-wrap: nowrap; + font-weight: bold; +} + +.belowLine { + margin-left: 2.5vw; +} + +.temp3 { + display: flex; + justify-content: center; + align-items: center; +} + +.button { + display: flex; + justify-content: center; + align-items: center; + padding: 1vw 7vh; /* Adjust the padding as needed */ + font-size: 19px; /* Adjust the font size as needed */ + height: 6vh; + width: 11vw; + font-weight: bold; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 2px solid #4763b7; /* Border color */ + color: #f7eded; /* Text color */ + background-color: #4763b7; /* Background color */ + border-radius: 5px; /* Adjust border-radius for rounded corners */ + transition: background-color 0.3s, color 0.3s, border 0.3s; /* Add smooth transition effect */ +} + +@media screen and (max-width: 918px) { + .title{ + font-size: 30px; + } +} + +@media screen and (max-width: 936px) { + .title{ + font-size: 23px; + } + + .lines { + font-size: 18px; + } +} + +@media screen and (max-width: 727px) { + .title{ + font-size: 20px; + } + + .lines { + font-size: 15px; + } + + .icon { + width: 90px; + height: 90px; + + } + + +} + +@media screen and (max-width: 565px) { + .title{ + display: none; + } + + .text{ + font-size: 18px; + position: relative; + + + } + + .temp3{ + margin-left: 2rem; + } +} + +@media screen and (max-width: 454px) { + .title{ + display: none; + } + + .button{ + height: 5vh; + width: 0.5vw; + font-size: 16px; +} + +.lines{ + font-size: 13px; + +} + + .temp3{ + margin-left: 0.5rem; + } + + .icon { + width: 85px; + } + +} + +@media screen and (max-width: 400px) { + + + .background{ + height: 13vh; + } + + .title{ + display: none; + } + + .text{ + margin: auto; + flex-direction: column; + + } + + .temp3{ + margin-right: 14vw; + } + + .lines{ + font-size: 16px; + font-weight: 600; + } + + .button{ + height: 4vh; + width: 0.5vw; + font-size: 14px; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0d88342..5ae34df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -62,11 +62,6 @@ "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" -"@emailjs/browser@^3.11.0": - version "3.11.0" - resolved "https://registry.yarnpkg.com/@emailjs/browser/-/browser-3.11.0.tgz#0e78de2f85096d1a9ad5b5977b060bb5d1784cb4" - integrity sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA== - "@emotion/babel-plugin@^11.11.0": version "11.11.0" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"