bender/e546328b-e25e-42a8-b6ba-e7d03900c969
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-10 16:14:12 +00:00
parent 0e65681aca
commit 40f8acd29f
1 changed files with 128 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/app/page.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import React from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
@@ -10,7 +11,111 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, Heart, Sparkles, Zap } from 'lucide-react';
// Memoized section components for performance optimization
const MemoHero = React.memo(HeroSplitTestimonial);
const MemoAbout = React.memo(AboutMetric);
const MemoFeatureWork = React.memo(FeatureCardThree);
const MemoFeatureSkills = React.memo(FeatureCardThree);
const MemoProducts = React.memo(ProductCardOne);
const MemoContact = React.memo(ContactCenter);
const MemoFooter = React.memo(FooterBaseReveal);
const MemoNavbar = React.memo(NavbarStyleCentered);
// Performance monitoring utility
const reportWebVitals = (metric) => {
if (typeof window !== 'undefined' && (window as any).gtag) {
(window as any).gtag('event', metric.name, {
event_category: 'web_vitals',
value: Math.round(metric.value),
event_label: metric.id,
});
}
};
export default function LandingPage() {
// Pre-memoized static data to prevent unnecessary re-renders
const navItems = React.useMemo(() => [
{ name: "About", id: "about" },
{ name: "Work", id: "work" },
{ name: "Skills", id: "skills" },
{ name: "Contact", id: "contact" },
{ name: "Resume", id: "resume" }
], []);
const heroButtons = React.useMemo(() => [
{ text: "View My Work", href: "work" },
{ text: "Get In Touch", href: "contact" }
], []);
const heroTestimonials = React.useMemo(() => [{
name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-17787.jpg"
}], []);
const metrics = React.useMemo(() => [
{ icon: Sparkles, label: "Projects Completed", value: "2+" },
{ icon: Zap, label: "Years of Experience", value: "3+" },
{ icon: Award, label: "Design Disciplines", value: "8+" },
{ icon: Heart, label: "Client Satisfaction", value: "100%" }
], []);
const workFeatures = React.useMemo(() => [
{
id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-vector/hotel-landing-page-template-with-photo_23-2148893460.jpg", imageAlt: "responsive website design desktop mobile"
},
{
id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-template_52683-44294.jpg", imageAlt: "mobile app ui prototype design"
}
], []);
const skillsFeatures = React.useMemo(() => [
{
id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-connections_23-2149174342.jpg", imageAlt: "ui design interface dashboard application"
},
{
id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1670.jpg", imageAlt: "ux research user testing workshop"
},
{
id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-brand-manual-presentation_23-2149853441.jpg", imageAlt: "brand identity logo design guideline"
},
{
id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-infographic-template_23-2149195721.jpg", imageAlt: "motion graphics animation design studio"
}
], []);
const products = React.useMemo(() => [
{ id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-discussing-work_52683-101630.jpg", imageAlt: "figma design tool interface screenshot" },
{ id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "adobe xd ui design application" },
{ id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440903.jpg", imageAlt: "adobe photoshop image editing interface" },
{ id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-web-designer-vertical-business-card_23-2150395752.jpg", imageAlt: "adobe illustrator vector design tool" },
{ id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/young-programmer-engineer-writing-binary-code-data-terminal-window_482257-126472.jpg", imageAlt: "adobe after effects motion graphics" },
{ id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040426.jpg", imageAlt: "github version control interface" }
], []);
const footerColumns = React.useMemo(() => [
{
title: "Navigate", items: [
{ label: "About", href: "#about" },
{ label: "Work", href: "#work" },
{ label: "Skills", href: "#skills" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Connect", items: [
{ label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" },
{ label: "GitHub", href: "https://github.com/Soulful-Sharanya116" },
{ label: "Email", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
], []);
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -18,44 +123,28 @@ export default function LandingPage() {
borderRadius="pill"
contentWidth="small"
sizing="medium"
background="fluid"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
<MemoNavbar
brandName="Sharanya Sasmal"
navItems={[
{ name: "About", id: "about" },
{ name: "Work", id: "work" },
{ name: "Skills", id: "skills" },
{ name: "Contact", id: "contact" },
{ name: "Resume", id: "resume" }
]}
button={{
text: "Let's Talk", href: "contact"
}}
navItems={navItems}
button={{ text: "Let's Talk", href: "contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
<MemoHero
tag="UI/UX & Graphic Designer"
title="Sharanya Sasmal"
description="Visual storyteller crafting digital experiences that captivate, inspire, and convert. Specializing in UI design, UX research, and brand identity that elevates digital presence."
background={{ variant: "fluid" }}
testimonials={[
{
name: "Design Excellence", handle: "Creative Direction", testimonial: "Creating compelling visual narratives through thoughtful design", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-cute-woman-sitting-front-camrea-conductiong-workshop_259150-60175.jpg"
}
]}
buttons={[
{ text: "View My Work", href: "work" },
{ text: "Get In Touch", href: "contact" }
]}
background={{ variant: "glowing-orb" }}
testimonials={heroTestimonials}
buttons={heroButtons}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
useInvertedBackground={false}
@@ -64,31 +153,19 @@ export default function LandingPage() {
</div>
<div id="about" data-section="about">
<AboutMetric
<MemoAbout
title="Designing Experiences That Matter"
metrics={[
{ icon: Sparkles, label: "Projects Completed", value: "2+" },
{ icon: Zap, label: "Years of Experience", value: "3+" },
{ icon: Award, label: "Design Disciplines", value: "8+" },
{ icon: Heart, label: "Client Satisfaction", value: "100%" }
]}
metrics={metrics}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="work" data-section="work">
<FeatureCardThree
<MemoFeatureWork
title="Featured Projects"
description="A curated selection of design work showcasing my approach to creating impactful digital experiences."
features={[
{
id: "01", title: "Basic Website", description: "A clean, responsive website built with HTML, CSS, and JavaScript. Demonstrates foundational web design principles and user-centered layout approach.", imageSrc: "http://img.b2bpic.net/free-psd/italian-cuisine-design_23-2148526163.jpg", imageAlt: "responsive website design desktop mobile"
},
{
id: "02", title: "Mobile App Prototype", description: "A comprehensive mobile interface prototype designed in Figma. Showcases UI/UX research, wireframing, and interactive prototyping skills.", imageSrc: "http://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148559140.jpg", imageAlt: "mobile app ui prototype design"
}
]}
features={workFeatures}
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
@@ -97,23 +174,10 @@ export default function LandingPage() {
</div>
<div id="skills" data-section="skills">
<FeatureCardThree
<MemoFeatureSkills
title="Design Skills & Tools"
description="A comprehensive toolkit of design software and methodologies used to create compelling visual experiences."
features={[
{
id: "01", title: "UI Design", description: "Crafting intuitive interfaces with attention to visual hierarchy, accessibility, and user experience principles.", imageSrc: "http://img.b2bpic.net/free-vector/isometric-ui-ux-elements-collection_23-2149047267.jpg", imageAlt: "ui design interface dashboard application"
},
{
id: "02", title: "UX Research", description: "Conducting user research, creating personas, and developing evidence-based design strategies.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-writing-placards_23-2149100792.jpg", imageAlt: "ux research user testing workshop"
},
{
id: "03", title: "Brand Identity", description: "Developing comprehensive brand systems including logos, typography, and visual guidelines.", imageSrc: "http://img.b2bpic.net/free-vector/brand-manual-template-design_23-2149878162.jpg", imageAlt: "brand identity logo design guideline"
},
{
id: "04", title: "Motion Design", description: "Creating smooth animations and interactions that enhance user engagement and product delight.", imageSrc: "http://img.b2bpic.net/free-vector/background-abstract-design_23-2147942506.jpg", imageAlt: "motion graphics animation design studio"
}
]}
features={skillsFeatures}
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
@@ -122,29 +186,10 @@ export default function LandingPage() {
</div>
<div id="tools" data-section="tools">
<ProductCardOne
<MemoProducts
title="Tools & Software"
description="The software suite I use to design, prototype, and deliver exceptional digital experiences."
products={[
{
id: "1", name: "Figma", price: "Design & Prototype", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page-template_23-2149053801.jpg", imageAlt: "figma design tool interface screenshot"
},
{
id: "2", name: "Adobe XD", price: "UI Mockups", imageSrc: "http://img.b2bpic.net/free-photo/man-working-his-laptop_53876-70999.jpg", imageAlt: "adobe xd ui design application"
},
{
id: "3", name: "Photoshop", price: "Image Editing", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg", imageAlt: "adobe photoshop image editing interface"
},
{
id: "4", name: "Illustrator", price: "Vector Design", imageSrc: "http://img.b2bpic.net/free-vector/interface-music-player-app_23-2148519362.jpg", imageAlt: "adobe illustrator vector design tool"
},
{
id: "5", name: "After Effects", price: "Motion Graphics", imageSrc: "http://img.b2bpic.net/free-photo/messy-office-desk-with-old-computer-still-life_23-2150155634.jpg", imageAlt: "adobe after effects motion graphics"
},
{
id: "6", name: "GitHub", price: "Version Control", imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg", imageAlt: "github version control interface"
}
]}
products={products}
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -153,11 +198,11 @@ export default function LandingPage() {
</div>
<div id="resume" data-section="resume">
<ContactCenter
<MemoContact
tag="Professional Profile"
title="Download My Resume"
description="Get a comprehensive overview of my design experience, skills, and accomplishments. Available as PDF for your records."
background={{ variant: "fluid" }}
background={{ variant: "rotated-rays-animated-grid" }}
useInvertedBackground={false}
buttonText="Download PDF"
inputPlaceholder="your@email.com"
@@ -166,11 +211,11 @@ export default function LandingPage() {
</div>
<div id="contact" data-section="contact">
<ContactCenter
<MemoContact
tag="Let's Collaborate"
title="Have a Project in Mind?"
description="I'm always interested in hearing about new design challenges and opportunities to create exceptional digital experiences. Reach out to discuss your project."
background={{ variant: "fluid" }}
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttonText="Send Message"
inputPlaceholder="your@email.com"
@@ -179,33 +224,11 @@ export default function LandingPage() {
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Navigate", items: [
{ label: "About", href: "#about" },
{ label: "Work", href: "#work" },
{ label: "Skills", href: "#skills" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Connect", items: [
{ label: "LinkedIn", href: "https://www.linkedin.com/in/sharanya-sasmal/" },
{ label: "GitHub", href: "https://github.com/Soulful-Sharanya116" },
{ label: "Email", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
<MemoFooter
columns={footerColumns}
copyrightText="© 2025 Sharanya Sasmal. All rights reserved. Designed with obsession. ✦"
/>
</div>
</ThemeProvider>
);
}
}