Skip to content

Commit

Permalink
fix: Improvement: Landing page improvement code100x#271 (code100x#278)
Browse files Browse the repository at this point in the history
* removed login and ModeToggle button(for dark/light mode switch) added infinite scroll for companies logo added debouncing and skeleton in place of jobs on load of screen

* removed unwanted images

* fixes
  • Loading branch information
anuragnegi000 authored Aug 29, 2024
1 parent 2c155cb commit 5558796
Show file tree
Hide file tree
Showing 15 changed files with 531 additions and 47 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@uidotdev/usehooks": "^2.4.1",
"bcryptjs": "^2.4.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
Expand Down
10 changes: 10 additions & 0 deletions public/google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/microsoft.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/solana.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
209 changes: 209 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
@tailwind utilities;

@layer base {
.paused {
animation-play-state: paused;
}
:root {
--stroke-primary: 0 0% 90%;
--stroke-secondary: 0 0% 92.44%;
Expand Down Expand Up @@ -88,3 +91,209 @@
stroke-dashoffset: 0;
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

.wrapper {
margin-top: 2rem;
width: 90%;
max-width: 1536px;
margin-inline: auto;
height: 200px;
position: relative;
overflow: hidden;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 5%,
rgba(0, 0, 0, 1) 95%,
rgba(0, 0, 0, 0)
);
}
.itemLeft img {
height: 100%;
width: 100%;
border-radius: 10px;
}
.itemRight img {
height: 100%;
width: 100%;
border-radius: 10px;
}

@keyframes scrollLeft {
to {
left: -200px;
}
}

@keyframes scrollRight {
to {
right: -200px;
}
}

.itemLeft,
.itemRight {
width: 200px;
height: 180px;
/* background-color: #e11d48; */
border-radius: 10px;
position: absolute;
animation-timing-function: linear;
animation-duration: 30s;
animation-iteration-count: infinite;
}

.itemLeft {
left: max(calc(200px * 8), 100%);
animation-name: scrollLeft;
}

.itemRight {
right: max(calc(200px * 8), calc(100% + 200px));
animation-name: scrollRight;
}

.item1 {
animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item6 {
animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item7 {
animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item8 {
animation-delay: calc(30s / 8 * (8 - 8) * -1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.wrapper {
height: 150px;
}

.itemLeft,
.itemRight {
width: 150px;
height: 130px;
}

.itemLeft {
left: max(calc(150px * 8), 100%);
}

.itemRight {
right: max(calc(150px * 8), calc(100% + 150px));
}
}

@media (max-width: 480px) {
.wrapper {
height: 100px;
}

.itemLeft,
.itemRight {
width: 100px;
height: 80px;
}

.itemLeft {
left: max(calc(100px * 8), 100%);
}

.itemRight {
right: max(calc(100px * 8), calc(100% + 100px));
}
}
.scroll-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
position: relative;
}

.scroll-content {
display: flex;
animation: scroll 30s linear infinite;
}

.scroll-content::after {
content: '';
display: flex;
animation: scroll 30s linear infinite;
}

.scroll-content a {
flex: 0 0 auto;
}

@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}

/* For small devices */
@media (max-width: 600px) {
.scroll-content,
.scroll-content::after {
animation: scroll-small 1s linear infinite;
}

@keyframes scroll-small {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
}
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #3498db;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
2 changes: 1 addition & 1 deletion src/components/BackgroundSvg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function BackgroundSvg() {
left: 0,
zIndex: -1,
minHeight: '100vh',
minWidth: '100vw',
maxWidth: '100vw',
objectFit: 'cover',
overflow: 'hidden',
}}
Expand Down
11 changes: 2 additions & 9 deletions src/components/hero-section.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { GITHUB_REPO } from '@/lib/constant/app.constant';
import Link from 'next/link';
import Icon from './ui/icon';
import Image from 'next/image';
import { MarqueeDemo } from './infinitescroll';

const HeroSection = () => {
return (
Expand Down Expand Up @@ -35,14 +35,7 @@ const HeroSection = () => {
</div>
</div>
</div>
<div className="flex items-center justify-center my-10 invert dark:invert-0">
<Image
src={'/companies.png'}
alt="companies"
width={900}
height={100}
/>
</div>
<MarqueeDemo />
</section>
</>
);
Expand Down
Loading

0 comments on commit 5558796

Please sign in to comment.