Skip to content

Commit 69ab839

Browse files
abhitrueprogrammerabhitrueprogrammer
committed
feat: refactor and fix homepage responsiveness
make 85vh on 800px of height instead of scaling using width. Other minor refactors
1 parent 2b0d3aa commit 69ab839

File tree

7 files changed

+97
-94
lines changed

7 files changed

+97
-94
lines changed

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Hero from "@/components/screens/Hero";
44

55
const HomePage = () => {
66
return (
7-
<div className="vipna flex min-h-screen w-full flex-col space-y-8">
7+
<div >
88
<Hero />
99
<Info />
1010
<Faq />

‎src/components/Card.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
6464
return (
6565
<div
6666
className={cn(
67-
"overflow-hidden play rounded-sm border-2 dark:border-[#36266D] border-[#734DFF] bg-[#FFFFFF] dark:bg-[#171720] hover:bg-[#EFEAFF] hover:dark:bg-[#262635]",
67+
"play overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
6868
checked && "bg-[#262635]",
6969
)}
7070
>
@@ -74,7 +74,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
7474
alt={paper.subject}
7575
width={320}
7676
height={180}
77-
className=" w-full object-cover p-4 pb-3 md:h-[250px]"
77+
className="w-full object-cover p-4 pb-3 md:h-[250px]"
7878
/>
7979

8080
<div className="justify-center">
@@ -90,7 +90,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
9090
</div>
9191
</div>
9292

93-
<div className="h-[1px] w-full dark:bg-[#36266D] bg-[#734DFF]" />
93+
<div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
9494

9595
<div className="space-y-2 p-4">
9696
<div className="font-sans text-base font-semibold">
@@ -106,7 +106,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
106106
</div>
107107
</Link>
108108

109-
<div className="hidden play items-center justify-between gap-2 px-4 pb-4 md:flex">
109+
<div className="play hidden items-center justify-between gap-2 px-4 pb-4 md:flex">
110110
<div className="flex items-center gap-2">
111111
<input
112112
checked={checked}
@@ -127,4 +127,4 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
127127
);
128128
};
129129

130-
export default Card;
130+
export default Card;

‎src/components/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function Navbar() {
1010

1111
return (
1212
<div className="sticky top-0 z-10 flex max-h-[85px] w-full items-center justify-between gap-x-3 overflow-hidden bg-[#B2B8FF] px-2 py-6 dark:bg-[#130E1F] md:px-12">
13-
<div className="flex w-[20%] items-center gap-x-2 md:w-auto">
13+
<div className="flex items-center gap-x-2 md:w-auto">
1414
<a href="https://www.codechefvit.com/" className="inline-block">
1515
<Image
1616
src={ccLogo as HTMLImageElement}

‎src/components/StoredPapers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function StoredPapers() {
3333
Most Viewed Papers
3434
</p>
3535

36-
<div className="grid grid-cols-2 justify-center gap-6 lg:grid-cols-4">
36+
<div className="grid grid-cols-1 sm:grid-cols-2 justify-center gap-6 lg:grid-cols-4">
3737
{displayPapers.map((paper: IPaper) => (
3838
<Card
3939
key={paper._id}

‎src/components/screens/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Link from "next/link";
55

66
const Hero = () => {
77
return (
8-
<div className="relative" style={{ height: "calc(100vh - 85px)" }}>
8+
<div className="tall:h-[85vh] flex flex-between flex-col">
99
<h1 className="vipnabd mx-auto my-8 text-center text-3xl font-extrabold">
1010
Built by Students for Students
1111
</h1>
1212
<SearchBar />
1313
<StoredPapers />
14-
<div className="absolute bottom-4 left-1/2 right-1/2 flex flex-col items-center whitespace-nowrap text-center">
14+
<div className="mt-2 flex flex-col items-center whitespace-nowrap text-center">
1515
<h1 className="play text-md">Learn More</h1>
1616
<Link
1717
href="#hero"

‎src/components/screens/Info.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ function Info() {
1717
className="flex flex-col items-center justify-between lg:flex-row"
1818
>
1919
<div className="w-full text-center lg:w-[50%] lg:text-left">
20-
<div className="vignabd mb-8 text-3xl font-extrabold text-[#120020] dark:text-white lg:text-5xl">
21-
<span className="block font-extrabold">Prepare to excel in</span>
22-
<span className="block font-extrabold">your CATs and FATs</span>
23-
<span className="font-extabold block">with CodeChef-</span>
24-
<span className="block font-extrabold">VIT’s dedicated</span>
25-
<span className="block font-extrabold">repository of past</span>
26-
<span className="block font-extrabold">exam papers</span>
20+
<div className="vignabd mb-8 block text-3xl font-extrabold text-[#120020] dark:text-white lg:text-5xl">
21+
<span>Prepare to excel in </span>
22+
<span>your CATs and FATs </span>
23+
<span>with CodeChef-</span>
24+
<span>VIT’s dedicated </span>
25+
<span>repository of past</span>
26+
<span>exam papers</span>
2727
</div>
2828
<div className="play grid gap-4 text-[#120020] dark:text-white md:grid-cols-3">
2929
<FeatureCard

‎tailwind.config.ts‎

Lines changed: 80 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,87 @@ import { type Config } from "tailwindcss";
22
import { fontFamily } from "tailwindcss/defaultTheme";
33

44
export default {
5-
darkMode: ["class"],
6-
content: ["./src/**/*.tsx"],
5+
darkMode: ["class"],
6+
content: ["./src/**/*.tsx"],
77
theme: {
8-
extend: {
9-
fontFamily: {
10-
sans: ["var(--font-geist-sans)", ...fontFamily.sans],
11-
yerk: ['"Yerk"', 'sans-serif'],
12-
},
13-
borderRadius: {
14-
lg: 'var(--radius)',
15-
md: 'calc(var(--radius) - 2px)',
16-
sm: 'calc(var(--radius) - 4px)'
17-
},
18-
colors: {
19-
background: 'hsl(var(--background))',
20-
foreground: 'hsl(var(--foreground))',
21-
card: {
22-
DEFAULT: 'hsl(var(--card))',
23-
foreground: 'hsl(var(--card-foreground))'
24-
},
25-
popover: {
26-
DEFAULT: 'hsl(var(--popover))',
27-
foreground: 'hsl(var(--popover-foreground))'
28-
},
29-
primary: {
30-
DEFAULT: 'hsl(var(--primary))',
31-
foreground: 'hsl(var(--primary-foreground))'
32-
},
33-
secondary: {
34-
DEFAULT: 'hsl(var(--secondary))',
35-
foreground: 'hsl(var(--secondary-foreground))'
36-
},
37-
muted: {
38-
DEFAULT: 'hsl(var(--muted))',
39-
foreground: 'hsl(var(--muted-foreground))'
40-
},
41-
accent: {
42-
DEFAULT: 'hsl(var(--accent))',
43-
foreground: 'hsl(var(--accent-foreground))'
44-
},
45-
destructive: {
46-
DEFAULT: 'hsl(var(--destructive))',
47-
foreground: 'hsl(var(--destructive-foreground))'
48-
},
49-
border: 'hsl(var(--border))',
50-
input: 'hsl(var(--input))',
51-
ring: 'hsl(var(--ring))',
52-
chart: {
53-
'1': 'hsl(var(--chart-1))',
54-
'2': 'hsl(var(--chart-2))',
55-
'3': 'hsl(var(--chart-3))',
56-
'4': 'hsl(var(--chart-4))',
57-
'5': 'hsl(var(--chart-5))'
58-
}
59-
},
60-
keyframes: {
61-
'accordion-down': {
62-
from: {
63-
height: '0'
64-
},
65-
to: {
66-
height: 'var(--radix-accordion-content-height)'
67-
}
68-
},
69-
'accordion-up': {
70-
from: {
71-
height: 'var(--radix-accordion-content-height)'
72-
},
73-
to: {
74-
height: '0'
75-
}
76-
}
77-
},
78-
animation: {
79-
'accordion-down': 'accordion-down 0.2s ease-out',
80-
'accordion-up': 'accordion-up 0.2s ease-out'
81-
}
82-
}
8+
extend: {
9+
screens: {
10+
tall: { raw: "(min-height: 800px)" }, // You can adjust 800px as needed
11+
},
12+
fontFamily: {
13+
sans: ["var(--font-geist-sans)", ...fontFamily.sans],
14+
yerk: ['"Yerk"', "sans-serif"],
15+
},
16+
borderRadius: {
17+
lg: "var(--radius)",
18+
md: "calc(var(--radius) - 2px)",
19+
sm: "calc(var(--radius) - 4px)",
20+
},
21+
colors: {
22+
background: "hsl(var(--background))",
23+
foreground: "hsl(var(--foreground))",
24+
card: {
25+
DEFAULT: "hsl(var(--card))",
26+
foreground: "hsl(var(--card-foreground))",
27+
},
28+
popover: {
29+
DEFAULT: "hsl(var(--popover))",
30+
foreground: "hsl(var(--popover-foreground))",
31+
},
32+
primary: {
33+
DEFAULT: "hsl(var(--primary))",
34+
foreground: "hsl(var(--primary-foreground))",
35+
},
36+
secondary: {
37+
DEFAULT: "hsl(var(--secondary))",
38+
foreground: "hsl(var(--secondary-foreground))",
39+
},
40+
muted: {
41+
DEFAULT: "hsl(var(--muted))",
42+
foreground: "hsl(var(--muted-foreground))",
43+
},
44+
accent: {
45+
DEFAULT: "hsl(var(--accent))",
46+
foreground: "hsl(var(--accent-foreground))",
47+
},
48+
destructive: {
49+
DEFAULT: "hsl(var(--destructive))",
50+
foreground: "hsl(var(--destructive-foreground))",
51+
},
52+
border: "hsl(var(--border))",
53+
input: "hsl(var(--input))",
54+
ring: "hsl(var(--ring))",
55+
chart: {
56+
"1": "hsl(var(--chart-1))",
57+
"2": "hsl(var(--chart-2))",
58+
"3": "hsl(var(--chart-3))",
59+
"4": "hsl(var(--chart-4))",
60+
"5": "hsl(var(--chart-5))",
61+
},
62+
},
63+
keyframes: {
64+
"accordion-down": {
65+
from: {
66+
height: "0",
67+
},
68+
to: {
69+
height: "var(--radix-accordion-content-height)",
70+
},
71+
},
72+
"accordion-up": {
73+
from: {
74+
height: "var(--radix-accordion-content-height)",
75+
},
76+
to: {
77+
height: "0",
78+
},
79+
},
80+
},
81+
animation: {
82+
"accordion-down": "accordion-down 0.2s ease-out",
83+
"accordion-up": "accordion-up 0.2s ease-out",
84+
},
85+
},
8386
},
8487
plugins: [require("tailwindcss-animate")],
8588
} satisfies Config;

0 commit comments

Comments
 (0)