Merge pull request #469 from dump-hr/lovretomic/top-companies

Home: Company list

apps/app/src/components/Navigation/Navigation.module.scss

@@ -7,6 +7,8 @@
   display: flex;
   justify-content: space-around;
   align-items: center;
+
+  display: none; //TEMP
 }
 
 .iconWrapper {

apps/app/src/components/RecommendationsButton/RecommendationsButton.module.scss

@@ -0,0 +1,77 @@
+.button {
+  height: 202px;
+  width: 100%;
+  background-color: rgb(17, 17, 17);
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 24px;
+  transition: scale 0.1s ease-in-out;
+
+  user-select: none;
+  -webkit-user-drag: none;
+
+  @media screen and (max-width: 450px) {
+    align-items: flex-start;
+    height: 240px;
+    .duck {
+      top: none;
+    }
+  }
+
+  cursor: pointer;
+
+  &:hover {
+    scale: 1.02;
+  }
+
+  &:active {
+    scale: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
+    background-size: cover;
+    opacity: 0.2;
+    z-index: 0;
+  }
+
+  .text {
+    color: white;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+    max-width: 166px;
+    z-index: 1;
+
+    .arrow {
+      fill: #595551;
+      margin: -5px;
+      position: relative;
+      top: 5px;
+      left: 6px;
+    }
+  }
+
+  .duck {
+    position: absolute;
+    max-width: 248px;
+    max-height: 269px;
+    width: auto;
+    height: auto;
+    flex-shrink: none;
+    right: -12px;
+    bottom: 0;
+  }
+}

apps/app/src/components/RecommendationsButton/RecommendationsButton.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import Arrow from '../../assets/icons/gray-arrow.svg';
+import Duck from '../../assets/images/duck.png';
+import c from './RecommendationsButton.module.scss';
+
+type RecommendationsButtonProps = React.HTMLAttributes<HTMLDivElement>;
+
+const RecommendationsButton: React.FC<RecommendationsButtonProps> = ({
+  className,
+  ...handlers
+}) => {
+  return (
+    <div className={clsx(c.button, className)} {...handlers}>
+      <p className={c.text}>
+        Preporuke samo za tebe
+        <img className={c.arrow} src={Arrow} alt='' />
+      </p>
+      <img className={c.duck} src={Duck} alt='' />
+    </div>
+  );
+};
+
+export default RecommendationsButton;

apps/app/src/components/RecommendationsButton/index.ts

@@ -0,0 +1,3 @@
+import RecommendationsButton from './RecommendationsButton';
+
+export default RecommendationsButton;

apps/app/src/components/TopCompany/TopCompany.module.scss

@@ -0,0 +1,53 @@
+.topCompany {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+
+  @media screen and (max-width: 350px) {
+    gap: 18px;
+  }
+
+  .numberContainer {
+    height: 44px;
+    width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+
+    .badge {
+      height: 100%;
+      width: 100%;
+      -webkit-user-drag: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+    .number {
+      @include tag-14;
+      color: #999;
+    }
+  }
+
+  .infoWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .companyName {
+      @include heading-3;
+      color: $primary-black;
+      text-transform: uppercase;
+    }
+
+    .boothId {
+      color: $black-50;
+      font-family: 'PP Neue Montreal Mono';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px;
+      text-transform: uppercase;
+    }
+  }
+}

apps/app/src/components/TopCompany/TopCompany.tsx

@@ -0,0 +1,62 @@
+import { CompanyDto } from '@ddays-app/types';
+import c from './TopCompany.module.scss';
+
+import BadgeGold from '../../assets/images/badge-gold.png';
+import BadgeSilver from '../../assets/images/badge-silver.png';
+import BadgeBronze from '../../assets/images/badge-bronze.png';
+
+type TopCompanyProps = {
+  company: CompanyDto;
+  number: number;
+};
+
+type NumberProps = {
+  number: number;
+};
+
+function getBoothId(company: CompanyDto) {
+  let categoryMarker = '';
+  switch (company.category) {
+    case 'gold':
+      categoryMarker = 'Z';
+      break;
+    case 'silver':
+      categoryMarker = 'S';
+      break;
+    case 'bronze':
+      categoryMarker = 'B';
+      break;
+  }
+  return `${categoryMarker}${company.boothId}`;
+}
+
+const Number: React.FC<NumberProps> = ({ number: number }) => {
+  let Badge;
+  if (number === 1) {
+    Badge = BadgeGold;
+  } else if (number === 2) {
+    Badge = BadgeSilver;
+  } else if (number === 3) {
+    Badge = BadgeBronze;
+  }
+
+  if (number <= 3) return <img className={c.badge} src={Badge} />;
+
+  return <p className={c.number}>0{number}</p>;
+};
+
+const TopCompany: React.FC<TopCompanyProps> = ({ company, number }) => {
+  return (
+    <div className={c.topCompany}>
+      <div className={c.numberContainer}>
+        <Number number={number} />
+      </div>
+      <div className={c.infoWrapper}>
+        <p className={c.companyName}>{company.name}</p>
+        <p className={c.boothId}>{getBoothId(company)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default TopCompany;

apps/app/src/components/TopCompany/index.ts

@@ -0,0 +1,3 @@
+import TopCompany from './TopCompany';
+
+export default TopCompany;

apps/app/src/pages/Home/Home.tsx

@@ -1,4 +1,5 @@
 import c from './Home.module.scss';
+import TopCompaniesSection from './sections/TopCompaniesSection';
 import EventsSection from './sections/EventsSection';
 
 const Home = () => {
@@ -7,6 +8,7 @@ const Home = () => {
       <header className={c.header}></header>
       <main className={c.main}>
         <EventsSection />
+        <TopCompaniesSection />
       </main>
     </div>
   );

apps/app/src/pages/Home/companies.ts

@@ -0,0 +1,114 @@
+import { CompanyDto } from '@ddays-app/types';
+
+export const companies: CompanyDto[] = [
+  {
+    id: 1,
+    category: 'gold',
+    name: 'Tech Innovators Inc.',
+    username: 'tech_innovators',
+    password: 'securepassword123',
+    description: 'Leading the way in cutting-edge technology solutions.',
+    opportunitiesDescription:
+      'Exciting roles in AI, blockchain, and cloud computing.',
+    website: 'https://techinnovators.com',
+    instagram: 'https://instagram.com/tech_innovators',
+    linkedin: 'https://linkedin.com/company/tech-innovators',
+    boothId: 101,
+    logoImage: 'https://example.com/logo-tech-innovators.png',
+    landingImage: 'https://example.com/landing-tech-innovators.png',
+    video: 'https://example.com/video-tech-innovators.mp4',
+    codeId: 2001,
+    interests: [
+      { id: 1, name: 'Artificial Intelligence', theme: 'tech' },
+      { id: 2, name: 'Cloud Computing', theme: 'dev' },
+    ],
+  },
+  {
+    id: 2,
+    category: 'silver',
+    name: 'Creative Designs Ltd.',
+    username: 'creative_designs',
+    password: 'designpass456',
+    description: 'Innovative design solutions for modern businesses.',
+    opportunitiesDescription:
+      'Openings for UX/UI designers and graphic artists.',
+    website: 'https://creativedesigns.com',
+    instagram: 'https://instagram.com/creative_designs',
+    linkedin: 'https://linkedin.com/company/creative-designs',
+    boothId: 102,
+    logoImage: 'https://example.com/logo-creative-designs.png',
+    landingImage: 'https://example.com/landing-creative-designs.png',
+    video: 'https://example.com/video-creative-designs.mp4',
+    codeId: 2002,
+    interests: [
+      { id: 3, name: 'User Experience', theme: 'design' },
+      { id: 4, name: 'Graphic Design', theme: 'design' },
+    ],
+  },
+  {
+    id: 3,
+    category: 'bronze',
+    name: 'Marketing Gurus Co.',
+    username: 'marketing_gurus',
+    password: 'marketpass789',
+    description: 'Experts in digital marketing and brand strategy.',
+    opportunitiesDescription:
+      'Join us as a digital marketer or SEO specialist.',
+    website: 'https://marketinggurus.com',
+    instagram: 'https://instagram.com/marketing_gurus',
+    linkedin: 'https://linkedin.com/company/marketing-gurus',
+    boothId: 103,
+    logoImage: 'https://example.com/logo-marketing-gurus.png',
+    landingImage: 'https://example.com/landing-marketing-gurus.png',
+    video: 'https://example.com/video-marketing-gurus.mp4',
+    codeId: 2003,
+    interests: [
+      { id: 5, name: 'Digital Marketing', theme: 'marketing' },
+      { id: 6, name: 'SEO Optimization', theme: 'tech' },
+    ],
+  },
+  {
+    id: 4,
+    category: 'media',
+    name: 'Media Masters LLC',
+    username: 'media_masters',
+    password: 'mediapass101',
+    description: 'Pioneers in content creation and media solutions.',
+    opportunitiesDescription:
+      'Positions available for video editors and content writers.',
+    website: 'https://mediamasters.com',
+    instagram: 'https://instagram.com/media_masters',
+    linkedin: 'https://linkedin.com/company/media-masters',
+    boothId: 104,
+    logoImage: 'https://example.com/logo-media-masters.png',
+    landingImage: 'https://example.com/landing-media-masters.png',
+    video: 'https://example.com/video-media-masters.mp4',
+    codeId: 2004,
+    interests: [
+      { id: 7, name: 'Content Creation', theme: 'marketing' },
+      { id: 8, name: 'Video Production', theme: 'design' },
+    ],
+  },
+  {
+    id: 5,
+    category: 'friend',
+    name: 'Community Partners',
+    username: 'community_partners',
+    password: 'community123',
+    description: 'Supporting community-driven projects and events.',
+    opportunitiesDescription:
+      'Looking for volunteers and community organizers.',
+    website: 'https://communitypartners.com',
+    instagram: 'https://instagram.com/community_partners',
+    linkedin: 'https://linkedin.com/company/community-partners',
+    boothId: 105,
+    logoImage: 'https://example.com/logo-community-partners.png',
+    landingImage: 'https://example.com/landing-community-partners.png',
+    video: 'https://example.com/video-community-partners.mp4',
+    codeId: 2005,
+    interests: [
+      { id: 9, name: 'Community Development', theme: 'dev' },
+      { id: 10, name: 'Event Organization', theme: 'marketing' },
+    ],
+  },
+];