Skip to content

Commit 7541551

Browse files
Srish-tySrish-ty
authored
Merge pull request #6 from shriyaaditya/branchshri
added footer hero navbar
2 parents 249fc32 + 5936b0e commit 7541551

9 files changed

Lines changed: 714 additions & 675 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@babel/core": "^7.0.0",
2222
"@emotion/react": "^11.14.0",
2323
"@emotion/styled": "^11.14.0",
24+
"lucide-react": "^0.468.0",
2425
"react": "^19.0.0",
2526
"react-dom": "^19.0.0",
2627
"react-router": "^7.0.2",

‎src/Playground.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1+
import Hero from './components/hero.jsx';
2+
import Navbar from './components/navbar.jsx';
3+
import Footer from './components/footer.jsx';
4+
15
const Playground = () => {
26
return (
3-
<div className="bg-slate-800 min-h-screen flex justify-center items-center text-white text-7xl">
4-
Playground
7+
<div>
8+
<Navbar />
9+
<Hero />
10+
<Footer />
511
</div>
612
);
713
};

‎src/assets/hero.png‎

460 KB
Loading

‎src/components/footer.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Instagram, Linkedin, Github, Twitter } from 'lucide-react';
2+
3+
export default function Footer() {
4+
return (
5+
<footer className="bg-[#070614] text-white py-12 px-6">
6+
<div className="container mx-auto max-w-7xl">
7+
<div className="flex flex-col items-center mb-28">
8+
<div className="text-center relative">
9+
<h2 className="text-3xl font-montserrat font-medium text-[#A546FF] inline-block">
10+
Let&apos;s discuss and make something
11+
<span className="text-[#A546FF] "> cool </span>
12+
together
13+
</h2>
14+
<div className="absolute -bottom-8 right-0">
15+
<a
16+
href="#"
17+
className="inline-flex font-robotoMono text-[#989898] items-center text-lg hover:text-[#bfbfbf] transition-colors relative group"
18+
>
19+
Join us ↗
20+
<span className="absolute left-1/2 bottom-0 w-0 h-0.5 bg-[#A546FF] group-hover:w-full group-hover:left-0 transition-all ease-in duration-300 delay-100"></span>
21+
</a>
22+
</div>
23+
</div>
24+
</div>
25+
<div className="flex flex-col space-y-1">
26+
<div className="flex flex-col md:flex-row justify-between items-start font-montserrat md:items-center mb-5">
27+
<a href="/" className="text-5xl font-bold text-shaaa mb-6 md:mb-0">
28+
OPENCODE
29+
</a>
30+
<nav className="flex flex-wrap gap-4 font-robotoMono text-[#989898] md:gap-8 mb-0">
31+
<a href="#" className="hover:text-[#A546FF] transition-colors">
32+
About
33+
</a>
34+
<a href="#" className="hover:text-[#A546FF] transition-colors">
35+
Events
36+
</a>
37+
<a href="#" className="hover:text-[#A546FF] transition-colors">
38+
Projects
39+
</a>
40+
<a href="#" className="hover:text-[#A546FF] transition-colors">
41+
Team
42+
</a>
43+
</nav>
44+
</div>
45+
<p className="text-sm font-robotoMono text-[#989898] max-w-2xl mb-10 pb-5">
46+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
47+
accusantium doloremquez laudantium, totam rem aperiam, eaque ipsa
48+
quae andSed ut perspiciatis unde omnis iste natus error sit
49+
voluptatem accusantium doloremque laudantium, totam rem aperiam,
50+
eaque ipsa quae and
51+
</p>
52+
</div>
53+
<div className="border-t border-white/20 pt-8 ">
54+
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
55+
<p className="text-sm text-[#989898]">
56+
Architected with ❤️ by OpenCode Team
57+
</p>
58+
<div className="flex gap-4">
59+
<a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
60+
<Instagram className="h-5 w-5" />
61+
</a>
62+
<a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
63+
<Linkedin className="h-5 w-5" />
64+
</a>
65+
<a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
66+
<Github className="h-5 w-5" />
67+
</a>
68+
<a href="#" className="text-[#A546FF] hover:text-[#B388FF]">
69+
<Twitter className="h-5 w-5" />
70+
</a>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</footer>
76+
);
77+
}

‎src/components/hero.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export default function Home() {
2+
return (
3+
<main className="min-h-screen bg-[url('/src/assets/hero.png')] bg-cover bg-center flex items-center justify-center px-4 sm:px-6 md:px-8">
4+
<div className="absolute inset-0 bg-[#070614] bg-opacity-10"></div>
5+
<div className="relative z-10 text-center max-w-4xl mt-20 mx-auto">
6+
<div className="inline-block shadow-inner-white font-robotoMono tracking-wide px-3 sm:px-4 py-1 sm:py-1.5 rounded-full border border-[#3A0070] bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent text-xs sm:text-sm mb-2 sm:mb-4">
7+
Opensource your imagination
8+
</div>
9+
<h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-montserrat font-bold bg-gradient-to-b from-white to-[#222121] bg-clip-text text-transparent mb-6 sm:mb-8">
10+
OPENCODE
11+
</h1>
12+
<p className="text-white/60 font-robotoMono text-sm sm:text-base md:text-lg max-w-2xl mx-auto mb-8 sm:mb-10">
13+
The{' '}
14+
<span className="bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent">
15+
Opensource
16+
</span>{' '}
17+
and{' '}
18+
<span className="bg-gradient-to-b from-[#DADADA] to-[#744E99] bg-clip-text text-transparent">
19+
Cybersecurity
20+
</span>{' '}
21+
community of NIT Rourkela
22+
</p>
23+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
24+
<button className="px-4 py-2 shadow-inner-white rounded-[10px] font-medium duration-200 w-[200px] sm:w-auto bg-transparent border border-purple-500/30 text-[#A546FF] hover:bg-[rgb(165,70,255)] hover:text-[#070614] hover:border-[#C3C3C3] transition-colors backdrop-blur-sm text-sm sm:text-base">
25+
<div className="flex flex-row items-center justify-center space-x-2 sm:space-x-3">
26+
<svg
27+
xmlns="http://www.w3.org/2000/svg"
28+
viewBox="0 0 24 24"
29+
className="w-4 h-4 sm:w-5 sm:h-5 fill-current"
30+
>
31+
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z" />
32+
</svg>
33+
<span>GitHub</span>
34+
</div>
35+
</button>
36+
<button className="px-4 py-2 shadow-inner-white rounded-[10px] font-medium duration-200 w-[200px] sm:w-auto bg-[rgb(165,70,255)] border border-[#C3C3C3] hover:bg-transparent hover:text-[#A546FF] hover:shadow-inner-white text-sm sm:text-base hover:border-purple-500/30 transition-colors">
37+
Resources
38+
</button>
39+
</div>
40+
</div>
41+
</main>
42+
);
43+
}

‎src/components/navbar.jsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
'use client';
2+
import React from 'react';
3+
4+
export default function Navbar() {
5+
const [isOpen, setIsOpen] = React.useState(false);
6+
7+
const navigationItems = [
8+
{ href: '/about', label: 'About' },
9+
{ href: '/events', label: 'Events' },
10+
{ href: '/projects', label: 'Projects' },
11+
{ href: '/team', label: 'Team' },
12+
];
13+
14+
return (
15+
<>
16+
<div
17+
className={`fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 z-40 ${
18+
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
19+
}`}
20+
onClick={() => setIsOpen(false)}
21+
/>
22+
23+
<header className="fixed top-0 w-full flex justify-center p-4 sm:p-6 md:p-8 z-50 ">
24+
<nav className="relative w-full lg:w-6/12 md:w-full sm:w-full max-w-7xl flex items-center justify-between px-4 sm:px-6 md:px-8 py-2 sm:py-3 md:py-4 rounded-full bg-black/30 backdrop-blur-md transition-all duration-300">
25+
<div className="absolute -inset-[3px] rounded-full border-2 border-[#221F49] shadow-[0_0_15px_rgba(139,92,246,0.1)]" />
26+
<div className="absolute inset-[1px] sm:inset-[2px] md:inset-[3px] rounded-full border-2 border-[#3A0070] shadow-inner-white" />
27+
28+
<div className="absolute inset-0 rounded-full shadow-[0_0_15px_rgba(139,92,246,0.1)] pointer-events-none" />
29+
30+
<button
31+
onClick={() => setIsOpen(!isOpen)}
32+
className="lg:hidden relative w-8 h-8 flex flex-col items-center justify-center gap-1.5 z-10"
33+
aria-label="Toggle menu"
34+
>
35+
<span
36+
className={`w-6 h-0.5 bg-white transition-all duration-300 ${
37+
isOpen ? 'absolute rotate-45' : ''
38+
}`}
39+
/>
40+
<span
41+
className={`w-6 h-0.5 bg-white transition-all duration-300 ${
42+
isOpen ? 'opacity-0' : ''
43+
}`}
44+
/>
45+
<span
46+
className={`w-6 h-0.5 bg-white transition-all duration-300 ${
47+
isOpen ? 'absolute -rotate-45' : ''
48+
}`}
49+
/>
50+
</button>
51+
52+
<div className="text-[#989898] text-xl sm:text-2xl font-mono z-10">
53+
{'{'}={'}'}
54+
</div>
55+
<div className="hidden lg:flex font-robotoMono text-[#989898] items-center gap-6 xl:gap-8 absolute left-1/2 -translate-x-1/2">
56+
{navigationItems.map((item) => (
57+
<a
58+
key={item.href}
59+
href={item.href}
60+
className="text-[#989898] hover:text-[rgb(165,70,255)] transition-colors duration-200 text-sm tracking-wide"
61+
>
62+
{item.label}
63+
</a>
64+
))}
65+
</div>
66+
67+
<button className="hidden sm:block bg-transparent border border-purple-500/30 text-purple-400 hover:bg-purple-500/10 transition-colors shadow-inner-white backdrop-blur-sm text-xs sm:text-sm z-10 px-4 py-2 rounded-[10px]">
68+
Join us
69+
</button>
70+
71+
<div
72+
className={`absolute top-full left-0 w-full lg:hidden mt-2 sm:mt-4 py-4 sm:py-6 px-4 rounded-2xl bg-black/40 backdrop-blur-md border border-white/5 transition-all duration-300 ease-in-out ${
73+
isOpen
74+
? 'opacity-100 translate-y-0 visible'
75+
: 'opacity-0 -translate-y-4 invisible'
76+
}`}
77+
>
78+
<div className="flex flex-col gap-3">
79+
{navigationItems.map((item) => (
80+
<a
81+
key={item.href}
82+
href={item.href}
83+
className="block w-full px-4 py-2 text-[#989898] hover:text-[rgb(165,70,255)] hover:bg-white/5 rounded-lg transition-colors duration-200 text-sm sm:text-base"
84+
>
85+
{item.label}
86+
</a>
87+
))}
88+
<button className="mt-4 w-full bg-transparent border shadow-inner-white border-purple-500/30 text-purple-400 hover:bg-purple-500/10 transition-colors backdrop-blur-sm text-sm px-4 py-2 rounded-[10px]">
89+
Join us
90+
</button>
91+
</div>
92+
</div>
93+
</nav>
94+
</header>
95+
</>
96+
);
97+
}

‎src/main.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { StrictMode } from 'react'
2-
import { createRoot } from 'react-dom/client'
3-
import './index.css'
4-
import App from './App.jsx'
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import './index.css';
4+
import App from './App.jsx';
55
import { BrowserRouter, Route, Routes } from 'react-router';
66
import Playground from './Playground.jsx';
77

@@ -14,4 +14,4 @@ createRoot(document.getElementById('root')).render(
1414
</Routes>
1515
</BrowserRouter>
1616
</StrictMode>
17-
);
17+
);

‎tailwind.config.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22
export default {
33
content: ['./index.html', './src/**/*.{js,jsx}'],
44
theme: {
5-
extend: {},
5+
extend: {
6+
boxShadow: {
7+
'inner-white': 'inset 0 2px 4px rgba(255, 255, 255, 0.5)',
8+
},
9+
fontFamily: {
10+
montserrat: ['Montserrat', 'sans-serif'],
11+
robotoMono: ['Roboto Mono', 'monospace'],
12+
},
13+
},
614
},
715
plugins: [],
816
};

0 commit comments

Comments
 (0)