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:42:15 +00:00
parent 7e622afc00
commit 1fbed390cd
1 changed files with 105 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/app/page.tsx
View File

@@ -1,6 +1,5 @@
"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';
@@ -11,111 +10,7 @@ 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"
@@ -123,28 +18,44 @@ export default function LandingPage() {
borderRadius="pill"
contentWidth="small"
sizing="medium"
background="circleGradient"
background="fluid"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<MemoNavbar
<NavbarStyleCentered
brandName="Sharanya Sasmal"
navItems={navItems}
button={{ text: "Let's Talk", href: "contact" }}
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"
}}
/>
</div>
<div id="hero" data-section="hero">
<MemoHero
<HeroSplitTestimonial
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: "glowing-orb" }}
testimonials={heroTestimonials}
buttons={heroButtons}
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" }
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
useInvertedBackground={false}
@@ -153,19 +64,31 @@ export default function LandingPage() {
</div>
<div id="about" data-section="about">
<MemoAbout
<AboutMetric
title="Designing Experiences That Matter"
metrics={metrics}
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%" }
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="work" data-section="work">
<MemoFeatureWork
<FeatureCardThree
title="Featured Projects"
description="A curated selection of design work showcasing my approach to creating impactful digital experiences."
features={workFeatures}
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"
}
]}
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
@@ -174,10 +97,23 @@ export default function LandingPage() {
</div>
<div id="skills" data-section="skills">
<MemoFeatureSkills
<FeatureCardThree
title="Design Skills & Tools"
description="A comprehensive toolkit of design software and methodologies used to create compelling visual experiences."
features={skillsFeatures}
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"
}
]}
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
@@ -186,10 +122,29 @@ export default function LandingPage() {
</div>
<div id="tools" data-section="tools">
<MemoProducts
<ProductCardOne
title="Tools & Software"
description="The software suite I use to design, prototype, and deliver exceptional digital experiences."
products={products}
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"
}
]}
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -198,11 +153,11 @@ export default function LandingPage() {
</div>
<div id="resume" data-section="resume">
<MemoContact
<ContactCenter
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: "rotated-rays-animated-grid" }}
background={{ variant: "fluid" }}
useInvertedBackground={false}
buttonText="Download PDF"
inputPlaceholder="your@email.com"
@@ -211,11 +166,11 @@ export default function LandingPage() {
</div>
<div id="contact" data-section="contact">
<MemoContact
<ContactCenter
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: "radial-gradient" }}
background={{ variant: "fluid" }}
useInvertedBackground={false}
buttonText="Send Message"
inputPlaceholder="your@email.com"
@@ -224,11 +179,33 @@ export default function LandingPage() {
</div>
<div id="footer" data-section="footer">
<MemoFooter
columns={footerColumns}
<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: "#" }
]
}
]}
copyrightText="© 2025 Sharanya Sasmal. All rights reserved. Designed with obsession. ✦"
/>
</div>
</ThemeProvider>
);
}
}