Skip to content

feat: add dark mode to landing page #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iamanishx merged 2 commits into from
Jul 7, 2025
Merged

feat: add dark mode to landing page #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56dd15a
feat: add dark mode to landing page
burgerphilic18 Jul 7, 2025
c46efaa
fix: add global transition when changing themes
burgerphilic18 Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 32 additions & 76 deletions apps/web/src/components/LandingPage/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { Instagram, Linkedin, Mail, Twitter } from "lucide-react";

const Footer = () => {
return (
<footer className="bg-background border-t-4 border-primary py-12">
<footer className="bg-background border-t-4 border-primary py-12 transition-colors duration-500">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div className="col-span-1 md:col-span-2">
<div className="flex items-center space-x-2 mb-4">
<div className="w-8 h-8 bg-secondary border-2 border-primary pixel-pulse"></div>
<h3 className="pixel-font text-xl text-primary">IIITBuzz</h3>
</div>
<p className="text-sm text-footer mb-4">
<p className="text-sm text-muted mb-4">
The ultimate community platform for IIIT students. Connect, learn,
and grow together in our vibrant digital campus ecosystem.
</p>
Expand All @@ -19,14 +19,14 @@ const Footer = () => {
href="https://www.linkedin.com/company/p-soc"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-primary hover:text-primary-foreground transition-all"
>
<Linkedin className="text-foreground w-4 h-4" />
</a>

<a
href="mailto:tech-society@eiiit-bh.ac.in"
className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-primary hover:text-primary-foreground transition-all"
>
<Mail className="text-foreground w-4 h-4" />
</a>
Expand All @@ -35,18 +35,18 @@ const Footer = () => {
href="https://twitter.com/psociiit"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 neo-brutal-card bg-secondary/20 border-secondary flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-secondary hover:text-secondary-foreground transition-all"
>
<Twitter className="text-secondary w-4 h-4" />
<Twitter className="text-foreground w-4 h-4" />
</a>

<a
href="https://www.instagram.com/psoc_iiitbh"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 neo-brutal-card bg-accent/20 border-accent flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-accent hover:text-accent-foreground transition-all"
>
<Instagram className="text-accent w-4 h-4" />
<Instagram className="text-foreground w-4 h-4" />
</a>
</div>
</div>
Expand All @@ -56,87 +56,43 @@ const Footer = () => {
QUICK LINKS
</h4>
<ul className="space-y-2 text-sm">
<li>
<a
href="#about"
className="text-footer hover:text-primary transition-colors"
>
About Us
</a>
</li>
<li>
<a
href="#features"
className="text-footer hover:text-primary transition-colors"
>
Features
</a>
</li>
<li>
<a
href="#contact"
className="text-footer hover:text-primary transition-colors"
>
Contact
</a>
</li>
<li>
<a
href="#help"
className="text-footer hover:text-primary transition-colors"
>
Help & Support
</a>
</li>
{["About Us", "Features", "Contact", "Help & Support"].map((link) => (
<li key={link}>
<a
href={`#${link.toLowerCase().replace(/ & | /g, "-")}`}
className="text-muted hover:text-primary transition-colors"
>
{link}
</a>
</li>
))}
</ul>
</div>

<div>
<h4 className="pixel-font text-sm text-primary mb-4">POLICIES</h4>
<ul className="space-y-2 text-sm">
<li>
<a
href="#privacy"
className="text-footer hover:text-primary transition-colors"
>
Privacy Policy
</a>
</li>
<li>
<a
href="#terms"
className="text-footer hover:text-primary transition-colors"
>
Terms of Service
</a>
</li>
<li>
<a
href="#community"
className="text-footer hover:text-primary transition-colors"
>
Community Guidelines
</a>
</li>
<li>
<a
href="#cookies"
className="text-footer hover:text-primary transition-colors"
>
Cookie Policy
</a>
</li>
{["Privacy Policy", "Terms of Service", "Community Guidelines", "Cookie Policy"].map((policy) => (
<li key={policy}>
<a
href={`#${policy.toLowerCase().replace(/ /g, "-")}`}
className="text-muted hover:text-primary transition-colors"
>
{policy}
</a>
</li>
))}
</ul>
</div>
</div>

<div className="border-t-2 border-primary/30 pt-8 text-center">
<p className="pixel-font text-xs text-footer m-4">© 2025 IIITBuzz</p>
<p className="text-xs text-footer mt-2">by- P-Soc IIIT-bh</p>
<div className="border-t-2 border-muted pt-8 text-center">
<p className="pixel-font text-xs text-muted m-4">© 2025 IIITBuzz</p>
<p className="text-xs text-muted mt-2">by- P-Soc IIIT-bh</p>
</div>
</div>
</footer>
);
};

export default Footer;
export default Footer;
102 changes: 46 additions & 56 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,79 +8,33 @@
@tailwind utilities;

:root {
--primary: #040403;
--secondary: #00ff04;
--accent: #f87171;
--background: #ffffff;
--foreground: #e6be30;
--border: #000000;
--card: #000;
--button-bg: #000000;
--card-foreground: #030303;
--button-text: #ffffff;
--button-green: #22c55e;
--button-yellow: #facc15;
--button-red: #ef4444;
--muted: #dde1e8;
--muted-foreground: #c1cbde;
--stat-bg: #000;
--stat-border: #22c55e;
--stat-yellow: #facc15;
--stat-red: #ef4444;
--footer: #000000b7;
--ring: #c084fc;
}

.dark {
--background: #d5d640;
--foreground: #1a1a1a;
--card: #d5d640;
--card-foreground: #1a1a1a;
--popover: #f9fafb;
--popover-foreground: #1a1a1a;
--primary: #9b44f2;
--primary-foreground: #000000;
--secondary: #5a2ca5;
--secondary-foreground: #000000;
--accent: #5a2ca5;
--accent-foreground: #000000;
--destructive: #ef4444;
--muted: #f3f4f6;
--muted-foreground: #2a2e34;
--border: #e5e7eb;
--input: #e5e7eb;
--ring: #9333ea;
--sidebar: #ffffff;
--sidebar-foreground: #1a1a1a;
--sidebar-primary: #9333ea;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #e5e7eb;
--sidebar-accent-foreground: #1a1a1a;
--sidebar-border: #9333ea;
--sidebar-ring: #9333ea;
--title-shadow: #1b150f;
--footer: #000000b7;
}

.light {
--background: #ffffff;
--foreground: #e7b52a;
--bg: #ffffff;
--surface: #f5f5f5;
--primary: #040403;
--accent: #f87171;
--secondary: #22c55e;
--badge: #facc15;
--border: #374151;
--text-primary: #1a1a1a;
--text-secondary: #374151;
--card: #000;
--card-foreground: #030302;
--popover: #262626;
--popover-foreground: #f5f5f5;
--primary: #040403;
--primary-foreground: #1a1a1a;
--secondary: #22c55e;
--secondary-foreground: #1a1a1a;
--muted: #374151;
--muted-foreground: #c1cbde;
--accent: #f87171;
--accent-foreground: #1a1a1a;
--destructive: #ef4444;
--border: #374151;
--input: #374151;
--ring: #c084fc;
--sidebar: #262626;
--sidebar-foreground: #f5f5f5;
--sidebar-primary: #c084fc;
Expand All @@ -89,5 +43,41 @@
--sidebar-accent-foreground: #f5f5f5;
--sidebar-border: #c084fc;
--sidebar-ring: #c084fc;
--footer: #000000b7;
--background-image: url('/backgrounds/bg-light.png');
}

.dark {
--background: #141420;
--foreground: #f5f5f5;
--bg: #141420;
--surface: #1c1c2a;
--primary: #62d8e2;
--accent: #e870a7;
--secondary: #f18e5d;
--badge: #bca4e2;
--border: #3c3c4a;
--text-primary: #f5f5f5;
--text-secondary: #aaaaaa;
--card: #1c1c2a;
--card-foreground: #f5f5f5;
--popover: #262626;
--popover-foreground: #f5f5f5;
--muted: #3c3c4a;
--muted-foreground: #aaaaaa;
--destructive: #ef4444;
--input: #3c3c4a;
--sidebar: #1c1c2a;
--sidebar-foreground: #f5f5f5;
--sidebar-primary: #62d8e2;
--sidebar-primary-foreground: #f5f5f5;
--sidebar-accent: #e870a7;
--sidebar-accent-foreground: #f5f5f5;
--sidebar-border: #3c3c4a;
--sidebar-ring: #bca4e2;
--background-image: url('/backgrounds/bg-dark.png');
}

body {
@apply transition-colors duration-500;
}