Skip to content

navbar dropdown ui #43

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

Open
XhesSamarxhiu wants to merge 3 commits into
base: main
Choose a base branch
from
Open

navbar dropdown ui #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
67db5d6
navbar dropdown ui
Jun 19, 2025
11767a2
opengraph fix
Jun 20, 2025
dd37df4
ui changes
Jun 25, 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
99 changes: 98 additions & 1 deletion app/internships/InternshipsPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #28303b;
background-color: #000;
opacity: 0.2;
}

Expand All @@ -48,4 +48,101 @@ section.blog-section {
#testimonials,
#blogs {
scroll-margin-top: 80px;
}

.internship-content-section {
background: #fff;
padding: 64px 0 32px 0;
font-family: "Geologica", "Roboto", system-ui, sans-serif;
color: #000;
text-align: left;
}
/* === Internship Info & Application Section Only === */

.momentum-intern h2,
.momentum-intern h4 {
color: #000;
font-family: "Geologica", "Roboto", system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.5px;
}

.momentum-intern h2 {
font-size: 2rem;
margin-bottom: 18px;
}

.momentum-intern h4 {
font-size: 1.1rem;
margin-top: 32px;
margin-bottom: 12px;
}

.momentum-intern p,
.momentum-intern ul,
.momentum-intern ol {
font-size: 1.08rem;
line-height: 1.7;
margin-bottom: 16px;
color: #000;
}

.momentum-intern ul,
.momentum-intern ol {
padding-left: 1.3em;
}

.momentum-intern ul li,
.momentum-intern ol li {
margin-bottom: 8px;
}

.momentum-intern ul li strong,
.momentum-intern ol li strong {
color: gold;
font-weight: 600;
}

.momentum-intern table {
width: 100%;
background: #fafbfc;
border-radius: 10px;
overflow: hidden;
margin-bottom: 18px;
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.momentum-intern table th,
.momentum-intern table td {
border: none;
padding: 12px 18px;
font-size: 1rem;
vertical-align: middle;
color: #000;
}

.momentum-intern table tr:not(:last-child) td {
border-bottom: 1px solid #ececec;
}

.yellow-button {
border-radius: 32px !important;
}

/* Responsive table for mobile */
@media (max-width: 575px) {
.momentum-intern table,
.momentum-intern table tbody,
.momentum-intern table tr,
.momentum-intern table td {
display: block;
width: 100%;
}
.momentum-intern table tr {
margin-bottom: 12px;
}
.momentum-intern table td {
border-bottom: none;
}
}
137 changes: 111 additions & 26 deletions app/internships/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default async function ResearchPage() {
title="Momentum Internship Program"
backgroundClass="internships-hero"
/>

<section className="internship-content-section">
<Container id="mip" className="momentum-intern sections-container">
<Row className="align-items-center flex-row-reverse g-5">
<Col sm={12} md={6} data-aos="fade-up">
Expand All @@ -59,34 +59,119 @@ export default async function ResearchPage() {

<Col sm={12} md={6} data-aos="fade-right" data-aos-delay="500">
<h2>Future-Proof Your Career</h2>
<p className="my-3">
<strong>At PROJXON, we help young professionals realize their full potential </strong>{" "}
while building their personal brand and understanding their value. Are you ready to launch your career in strategic consulting and digital marketing?
</p>

<p>
Welcome to PROJXON, where bold thinkers become high-impact professionals.
</p>
<p>
Our Momentum Internship Program isn't just an internship; it's a career accelerator designed for ambitious students, professionals in transition, and early-career talent ready to thrive in real-world consulting environments.
</p>

<p className="my-3">
<strong>Our 180-day Momentum Internship Program</strong>{" "}
offers passionate and innovative individuals the opportunity to work on real consulting projects and collaborate with participants from across the US in various industries, including{" "}
<strong>Tech, Health + Wellness, E-commerce, Non-Profit, and Professional Services.</strong>{" "}
You'll gain invaluable hands-on experience while making a tangible impact.
</p>
<h4>Why Join the Momentum Internship Program?</h4>
<p>
At PROJXON, we’ve redefined internships from the ground up.
<br />
This Participant-First program centers on your vocational, professional, and career development, not busy work. You’ll collaborate on real projects, work with experienced leaders, and gain unmatched hands-on experience in a high-performance consulting environment.
</p>

<h3>What We Offer:</h3>
<ul>
<li>
<strong>Professional Development:</strong> Work closely with professional coaches to develop skills in Project Management, AI innovation and implementation, and achieve your career goals with personalized 1:1 coaching. Autonomy and Impact: Enjoy the freedom to work on projects that deliver direct results, in a remote and autonomous role.
</li>
<li>
<strong>Collaborative Environment:</strong> Engage with a dynamic team, working individually and collectively on diverse projects, ensuring you gain comprehensive experience.
</li>
</ul>
<h4>Who This Is For</h4>
<ul>
<li>🎓 <strong>Career Kickoff</strong> – For undergrads ready to apply theory to real work.</li>
<li>💼 <strong>Career Development</strong> – For graduate students expanding their portfolio and professional edge.</li>
<li>🔄 <strong>Career Transition</strong> – For post-grads with 3–5+ years of experience looking to pivot or lead.</li>
</ul>
</Col>
</Row>

<p className="my-3">
<strong>Discover</strong> the power of tailored strategies and make your mark with PROJXON. As part of our team, you'll contribute to strategies that drive sustainable growth for our clients. This is your opportunity to forge long-lasting partnerships and be part of a team that values growth, productivity, and commercialization.
</p>
</Col>
</Row>
</Container>
<Row className="mt-5">
<Col md={12}>
<h4>Program Snapshot</h4>
<table className="table table-bordered">
<tbody>
<tr><td><strong>Duration</strong></td><td>24 weeks (Part-Time, 20 hrs/week)</td></tr>
<tr><td><strong>Location</strong></td><td>Fully Remote (U.S.-based participants)</td></tr>
<tr><td><strong>Time Zone</strong></td><td>Operates in Pacific Standard Time</td></tr>
<tr><td><strong>Format</strong></td><td>Semi-Autonomous, Structured, Async-Friendly</td></tr>
<tr><td><strong>Credit Eligibility</strong></td><td>Academic, CPT, OPT, and F-1 supported</td></tr>
</tbody>
</table>
</Col>
</Row>

<Row className="mt-4">
<Col md={6}>
<h4>What You’ll Experience</h4>
<ul>
<li><strong>Project-Based Learning:</strong> Work on internal, team-based, and client-facing projects with real-world impact.</li>
<li><strong>Support and Coaching:</strong> Weekly check-ins, monthly reviews, and career coaching from experienced mentors.</li>
<li><strong>Professional Development:</strong> Get feedback on resumes, portfolios, and LinkedIn. Practice leadership. Attend workshops.</li>
<li><strong>Clear Growth Pathways:</strong> From intern to Coach, Advisor, Consultant, or Partner — if you’re ready, we’ll help you rise.</li>
</ul>
</Col>
<Col md={6}>
<h4>Weekly Rhythm</h4>
<table className="table table-sm">
<tbody>
<tr><td>Monday</td><td>Company Kickoff, Team Stand-Ups</td></tr>
<tr><td>Tuesday</td><td>Project Syncs (AI, WebDev, Consulting, PM, Research)</td></tr>
<tr><td>Wednesday</td><td>Training Workshops, 1:1 Coaching</td></tr>
<tr><td>Thursday</td><td>Deep Work Day (no company-mandated meetings)</td></tr>
<tr><td>Friday</td><td>Retrospectives & Team Project Showcases</td></tr>
<tr><td>Weekends</td><td>No work expectations</td></tr>
</tbody>
</table>
</Col>
</Row>

<Row className="mt-4">
<Col md={6}>
<h4>Your Commitment</h4>
<ul>
<li>🧠 Daily Communication</li>
<li>📅 Attend Meetings</li>
<li>💬 Contribute to Team Discussions</li>
<li>📈 Weekly & Monthly Reviews</li>
<li>🌱 Participate in Coaching & Career Planning</li>
<li>🎯 Stay Accountable and Proactive</li>
</ul>
</Col>
<Col md={6}>
<h4>Your Pathway</h4>
<ol>
<li>Apply + Interview</li>
<li>Onboard – Access, Familiarization, Training</li>
<li>Develop – Vocational Training, Mentorship</li>
<li>Execute – Team + Client Projects</li>
<li>Grow – Leadership, Coaching, Alumni Pathways</li>
</ol>
</Col>
</Row>

<Row className="mt-4">
<Col md={12}>
<h4>Alumni Opportunities</h4>
<p>
<strong>Coach + Advisor + Partner + Consultant</strong><br />
We invest in talent. Many program graduates become long-term collaborators within PROJXON’s network.
</p>
</Col>
</Row>
<Row className="mt-4">
<Col md={12} className="text-center">
<h4>Apply Today. Build Momentum. Excellerate Tomorrow</h4>
<p>
Monthly onboarding cycles mean there’s always an opportunity around the corner.<br />
If you're ready to learn fast, contribute meaningfully, and grow your career, we want to meet you.
</p>
<div className="apply-section">
<a href="mailto:info@projxon.com" className="yellow-button btn btn-primary fs-5 px-4">
Apply Now
</a>
</div>
</Col>
</Row>
</Container>
</section>

<section id="testimonials" className="testimonials-wrapper">
<InternTestimonialsSection />
Expand Down
4 changes: 2 additions & 2 deletions app/layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const metadata = {
siteName: "PROJXON",
images: [
{
url: "/PROJXON.png",
url: "https://www.projxon.com/PROJXON-og.png",
width: 1200,
height: 630,
alt: "PROJXON logo",
Expand All @@ -30,7 +30,7 @@ export const metadata = {
card: "summary_large_image",
title: "PROJXON",
description: "PROJXON empowers businesses with data-driven strategies, operational clarity, and innovative insights. Turning chaos into opportunity with every move.",
images: ["/PROJXON.png"]
images:["https://www.projxon.com/PROJXON-og.png"]
}
};

Expand Down
47 changes: 44 additions & 3 deletions components/NavBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,54 @@ a.nav-link:focus-visible {
.navbar-collapse.collapsing {
transition: height 0.3s ease;
}

@media (max-width: 990px) {
@media (max-width: 991.98px) {
.navbar-container {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
padding-left: 0px;
max-width: 400px !important;
}

.navbar-container .nav {
flex-direction: column !important;
align-items: center !important;
width: 100%;
}
.navbar-container .nav-link,
.navbar-nav a.nav-link {
width: 100%;
text-align: center;
padding-left: 0px !important;
}
}
.mobile-sidebar-menu {
position: fixed;
top: 0;
right: 0;
height: 100vh;
background: #111;
box-shadow: -2px 0 8px rgba(0,0,0,0.2);
z-index: 2000;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2rem 1.5rem;
min-width: 180px;
max-width: 240px;
transition: transform 0.3s ease;
}

.sidebar-link {
color: #FFD700;
font-size: 1.2rem;
margin-bottom: 1.5rem;
text-decoration: none;
text-align: left;
width: 100%;
}

.sidebar-link.active {
font-weight: bold;
color: #fff;
}
Loading