4 Commits

Author SHA1 Message Date
c70ffee748 Merge version_2 into main
Merge version_2 into main
2026-06-10 17:18:11 +00:00
1a92713acc Update src/app/styles/variables.css 2026-06-10 17:18:08 +00:00
5068dd32ae Update src/app/styles/base.css 2026-06-10 17:18:08 +00:00
08a63d7853 Update src/app/page.tsx 2026-06-10 17:18:07 +00:00
3 changed files with 101 additions and 326 deletions

View File

@@ -23,7 +23,7 @@ export default function LandingPage() {
borderRadius="pill" borderRadius="pill"
contentWidth="small" contentWidth="small"
sizing="mediumLargeSizeLargeTitles" sizing="mediumLargeSizeLargeTitles"
background="fluid" background="none"
cardStyle="outline" cardStyle="outline"
primaryButtonStyle="radial-glow" primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -34,31 +34,19 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "#home"},
id: "#home",
},
{ {
name: "About", name: "About", id: "#about"},
id: "#about",
},
{ {
name: "Projects", name: "Projects", id: "#projects"},
id: "#projects",
},
{ {
name: "Testimonials", name: "Testimonials", id: "#testimonials"},
id: "#testimonials",
},
{ {
name: "Contact", name: "Contact", id: "#contact"},
id: "#contact",
},
]} ]}
brandName="Ras Mere" brandName="Ras Mere"
button={{ button={{
text: "Resume", text: "Resume", href: "#"}}
href: "#",
}}
animateOnLoad={true} animateOnLoad={true}
/> />
</div> </div>
@@ -67,105 +55,60 @@ export default function LandingPage() {
<HeroBillboardTestimonial <HeroBillboardTestimonial
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "downward-rays-animated", variant: "downward-rays-animated"}}
}}
title="Innovating User Experiences, Crafting Digital Futures." title="Innovating User Experiences, Crafting Digital Futures."
description="I'm Ras Mere, a product designer passionate about creating intuitive and impactful digital products that solve real-world problems. Let's build something amazing together." description="I'm Ras Mere, a product designer passionate about creating intuitive and impactful digital products that solve real-world problems. Let's build something amazing together."
testimonials={[ testimonials={[
{ {
name: "Alex Chen", name: "Alex Chen", handle: "@alexchen", testimonial: "Ras's design intuition is unparalleled. They transformed our complex vision into an incredibly intuitive and beautiful product.", rating: 5,
handle: "@alexchen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg"},
testimonial: "Ras's design intuition is unparalleled. They transformed our complex vision into an incredibly intuitive and beautiful product.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
},
{ {
name: "Sarah Lee", name: "Sarah Lee", handle: "@sarah_lee", testimonial: "Working with Ras was a game-changer. Their user-centric approach and attention to detail elevated our entire platform.", rating: 5,
handle: "@sarah_lee", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg"},
testimonial: "Working with Ras was a game-changer. Their user-centric approach and attention to detail elevated our entire platform.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
},
{ {
name: "Mark Davis", name: "Mark Davis", handle: "@markdavis", testimonial: "The impact of Ras's designs on our user engagement was immediate and significant. Highly recommend!", rating: 5,
handle: "@markdavis", imageSrc: "asset://hero-testimonial-image-3"},
testimonial: "The impact of Ras's designs on our user engagement was immediate and significant. Highly recommend!",
rating: 5,
imageSrc: "asset://hero-testimonial-image-3",
},
{ {
name: "Emily White", name: "Emily White", handle: "@emilyw", testimonial: "Ras has a unique ability to blend creativity with strategic thinking, resulting in designs that are both innovative and effective.", rating: 5,
handle: "@emilyw", imageSrc: "asset://hero-testimonial-image-4"},
testimonial: "Ras has a unique ability to blend creativity with strategic thinking, resulting in designs that are both innovative and effective.",
rating: 5,
imageSrc: "asset://hero-testimonial-image-4",
},
{ {
name: "David Kim", name: "David Kim", handle: "@davidk", testimonial: "Their dedication to understanding our users led to a product that truly resonates with our audience. An exceptional talent.", rating: 5,
handle: "@davidk", imageSrc: "asset://hero-testimonial-image-5"},
testimonial: "Their dedication to understanding our users led to a product that truly resonates with our audience. An exceptional talent.",
rating: 5,
imageSrc: "asset://hero-testimonial-image-5",
},
]} ]}
buttons={[ buttons={[
{ {
text: "View Portfolio", text: "View Portfolio", href: "#projects"},
href: "#projects",
},
{ {
text: "Contact Me", text: "Contact Me", href: "#contact"},
href: "#contact",
},
]} ]}
avatars={[ avatars={[
{ {
src: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg", src: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg", alt: "Customer avatar 1"},
alt: "Customer avatar 1",
},
{ {
src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", alt: "Customer avatar 2"},
alt: "Customer avatar 2",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-outdoors-sunset-crossed-arms_158538-20634.jpg", src: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-outdoors-sunset-crossed-arms_158538-20634.jpg", alt: "Customer avatar 3"},
alt: "Customer avatar 3",
},
{ {
src: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg", src: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg", alt: "Customer avatar 4"},
alt: "Customer avatar 4",
},
{ {
src: "http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg", src: "http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-working-his-living-room_482257-126267.jpg", alt: "Customer avatar 5"},
alt: "Customer avatar 5",
},
]} ]}
avatarText="Join our satisfied clients" avatarText="Join our satisfied clients"
imageSrc="http://img.b2bpic.net/free-photo/female-web-designer-office-with-tablet-device_23-2149749887.jpg" imageSrc="http://img.b2bpic.net/free-photo/female-web-designer-office-with-tablet-device_23-2149749887.jpg"
mediaAnimation="slide-up" mediaAnimation="slide-up"
marqueeItems={[ marqueeItems={[
{ {
type: "text", type: "text", text: "UI/UX Designer"},
text: "UI/UX Designer", {
type: "text-icon", text: "Product Strategy", icon: Lightbulb,
}, },
{ {
type: "text-icon", type: "text", text: "User Research"},
text: "Product Strategy", {
icon: Lightbulb, type: "text-icon", text: "Prototyping", icon: Sparkles,
}, },
{ {
type: "text", type: "text", text: "Design Systems"},
text: "User Research",
},
{
type: "text-icon",
text: "Prototyping",
icon: Sparkles,
},
{
type: "text",
text: "Design Systems",
},
]} ]}
/> />
</div> </div>
@@ -173,27 +116,19 @@ export default function LandingPage() {
<div id="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <SplitAbout
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={false}
imagePosition="right" imagePosition="right"
title="My Design Philosophy & Expertise" title="My Design Philosophy & Expertise"
description="My design philosophy centers on user-centricity, blending aesthetic appeal with robust functionality. I thrive on translating complex problems into elegant solutions, driven by a deep understanding of user needs and business objectives. I am adept at leading design projects from concept to launch, ensuring every detail aligns with both user satisfaction and business growth." description="My design philosophy centers on user-centricity, blending aesthetic appeal with robust functionality. I thrive on translating complex problems into elegant solutions, driven by a deep understanding of user needs and business objectives. I am adept at leading design projects from concept to launch, ensuring every detail aligns with both user satisfaction and business growth."
bulletPoints={[ bulletPoints={[
{ {
title: "User-Centered Research", title: "User-Centered Research", description: "Deep dives into user behavior, needs, and motivations to inform design decisions."},
description: "Deep dives into user behavior, needs, and motivations to inform design decisions.",
},
{ {
title: "Intuitive UI Design", title: "Intuitive UI Design", description: "Crafting clean, accessible, and aesthetically pleasing interfaces that enhance usability."},
description: "Crafting clean, accessible, and aesthetically pleasing interfaces that enhance usability.",
},
{ {
title: "Interactive Prototyping", title: "Interactive Prototyping", description: "Bringing concepts to life with high-fidelity prototypes for early feedback and iteration."},
description: "Bringing concepts to life with high-fidelity prototypes for early feedback and iteration.",
},
{ {
title: "Scalable Design Systems", title: "Scalable Design Systems", description: "Building consistent and efficient design libraries for streamlined development."},
description: "Building consistent and efficient design libraries for streamlined development.",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-working-with-post-its_23-2149930950.jpg" imageSrc="http://img.b2bpic.net/free-photo/side-view-man-working-with-post-its_23-2149930950.jpg"
mediaAnimation="slide-up" mediaAnimation="slide-up"
@@ -208,25 +143,13 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "UX Research & Strategy", title: "UX Research & Strategy", description: "Conducting user interviews, creating personas, journey mapping, and competitive analysis to define product strategy.", imageSrc: "http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370104.jpg"},
description: "Conducting user interviews, creating personas, journey mapping, and competitive analysis to define product strategy.",
imageSrc: "http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370104.jpg",
},
{ {
title: "UI Design & Prototyping", title: "UI Design & Prototyping", description: "Designing high-fidelity mockups, interactive prototypes, and engaging visual interfaces for web and mobile.", imageSrc: "http://img.b2bpic.net/free-photo/drawing-clothes_1098-18038.jpg"},
description: "Designing high-fidelity mockups, interactive prototypes, and engaging visual interfaces for web and mobile.",
imageSrc: "http://img.b2bpic.net/free-photo/drawing-clothes_1098-18038.jpg",
},
{ {
title: "Design Systems & Guidelines", title: "Design Systems & Guidelines", description: "Developing scalable design systems, style guides, and component libraries for consistency and efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-collection-supplies-one-color_23-2149669172.jpg"},
description: "Developing scalable design systems, style guides, and component libraries for consistency and efficiency.",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-collection-supplies-one-color_23-2149669172.jpg",
},
{ {
title: "Usability Testing & Iteration", title: "Usability Testing & Iteration", description: "Facilitating usability tests, gathering feedback, and iterating on designs to ensure optimal user experience.", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749857.jpg"},
description: "Facilitating usability tests, gathering feedback, and iterating on designs to ensure optimal user experience.",
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749857.jpg",
},
]} ]}
title="Skills & Services" title="Skills & Services"
description="Bringing innovative ideas to life with a comprehensive skill set across the product development lifecycle." description="Bringing innovative ideas to life with a comprehensive skill set across the product development lifecycle."
@@ -238,50 +161,20 @@ export default function LandingPage() {
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
useInvertedBackground={true} useInvertedBackground={false}
products={[ products={[
{ {
id: "p1", id: "p1", name: "Mobile Banking App Redesign", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/top-view-social-media-still-life_23-2149019157.jpg", imageAlt: "Mobile Banking App Redesign"},
name: "Mobile Banking App Redesign",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-social-media-still-life_23-2149019157.jpg",
imageAlt: "Mobile Banking App Redesign",
},
{ {
id: "p2", id: "p2", name: "Enterprise SaaS Dashboard", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg", imageAlt: "Enterprise SaaS Dashboard"},
name: "Enterprise SaaS Dashboard",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",
imageAlt: "Enterprise SaaS Dashboard",
},
{ {
id: "p3", id: "p3", name: "E-commerce Experience Revamp", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/man-with-chroma-key-clothing-shop_482257-76713.jpg", imageAlt: "E-commerce Experience Revamp"},
name: "E-commerce Experience Revamp",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/man-with-chroma-key-clothing-shop_482257-76713.jpg",
imageAlt: "E-commerce Experience Revamp",
},
{ {
id: "p4", id: "p4", name: "Fintech Investment Platform", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg", imageAlt: "Fintech Investment Platform"},
name: "Fintech Investment Platform",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg",
imageAlt: "Fintech Investment Platform",
},
{ {
id: "p5", id: "p5", name: "Health & Wellness Companion App", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/medic-expert-uses-thermometer-find-right-diagnostic-symptoms_482257-122834.jpg", imageAlt: "Health & Wellness Companion App"},
name: "Health & Wellness Companion App",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/medic-expert-uses-thermometer-find-right-diagnostic-symptoms_482257-122834.jpg",
imageAlt: "Health & Wellness Companion App",
},
{ {
id: "p6", id: "p6", name: "Responsive Web Application", price: "View Case Study", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169862.jpg", imageAlt: "Responsive Web Application"},
name: "Responsive Web Application",
price: "View Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169862.jpg",
imageAlt: "Responsive Web Application",
},
]} ]}
title="Selected Projects" title="Selected Projects"
description="A showcase of impactful design solutions across various industries, demonstrating my approach to problem-solving and user-centric design." description="A showcase of impactful design solutions across various industries, demonstrating my approach to problem-solving and user-centric design."
@@ -295,40 +188,20 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ {
id: "m1", id: "m1", value: "5+", title: "Years Experience", items: [
value: "5+", "In product design & UX strategy", "Across diverse industries"],
title: "Years Experience",
items: [
"In product design & UX strategy",
"Across diverse industries",
],
}, },
{ {
id: "m2", id: "m2", value: "20+", title: "Projects Completed", items: [
value: "20+", "Delivered end-to-end", "From concept to launch"],
title: "Projects Completed",
items: [
"Delivered end-to-end",
"From concept to launch",
],
}, },
{ {
id: "m3", id: "m3", value: "95%", title: "User Satisfaction", items: [
value: "95%", "Measured through feedback loops", "Focus on user delight"],
title: "User Satisfaction",
items: [
"Measured through feedback loops",
"Focus on user delight",
],
}, },
{ {
id: "m4", id: "m4", value: "3x", title: "Engagement Increase", items: [
value: "3x", "Achieved through UX optimizations", "Driving business growth"],
title: "Engagement Increase",
items: [
"Achieved through UX optimizations",
"Driving business growth",
],
}, },
]} ]}
title="My Impact & Achievements" title="My Impact & Achievements"
@@ -339,16 +212,9 @@ export default function LandingPage() {
<div id="social-proof" data-section="social-proof"> <div id="social-proof" data-section="social-proof">
<SocialProofOne <SocialProofOne
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={false}
names={[ names={[
"Tech Innovations", "Tech Innovations", "Creative Studio", "Global Brands", "Digital Solutions", "Future Forward", "Enterprise X", "Visionary Design"]}
"Creative Studio",
"Global Brands",
"Digital Solutions",
"Future Forward",
"Enterprise X",
"Visionary Design",
]}
title="Trusted by Leading Brands" title="Trusted by Leading Brands"
description="Collaborating with diverse companies to elevate their digital presence and achieve their business objectives through exceptional design." description="Collaborating with diverse companies to elevate their digital presence and achieve their business objectives through exceptional design."
/> />
@@ -360,55 +226,15 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ {
id: "1", id: "1", name: "Sarah Johnson", date: "Jan 2024", title: "Revolutionary Product Design", quote: "Ras has a remarkable talent for understanding complex user needs and translating them into elegant, intuitive designs. Their work significantly improved our product's adoption rate.", tag: "Product Launch", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg", imageSrc: "http://img.b2bpic.net/free-photo/physiotherapy-room-arrangement_23-2149047474.jpg"},
name: "Sarah Johnson",
date: "Jan 2024",
title: "Revolutionary Product Design",
quote: "Ras has a remarkable talent for understanding complex user needs and translating them into elegant, intuitive designs. Their work significantly improved our product's adoption rate.",
tag: "Product Launch",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/physiotherapy-room-arrangement_23-2149047474.jpg",
},
{ {
id: "2", id: "2", name: "Michael Chen", date: "Dec 2023", title: "Exceptional UX Strategy", quote: "The UX strategy Ras developed for us was insightful and incredibly effective. They brought a fresh perspective that truly elevated our platform's usability and aesthetic.", tag: "UX Redesign", avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg", imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"},
name: "Michael Chen",
date: "Dec 2023",
title: "Exceptional UX Strategy",
quote: "The UX strategy Ras developed for us was insightful and incredibly effective. They brought a fresh perspective that truly elevated our platform's usability and aesthetic.",
tag: "UX Redesign",
avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg",
},
{ {
id: "3", id: "3", name: "Emily Rodriguez", date: "Nov 2023", title: "Seamless Collaboration", quote: "Beyond their incredible design skills, Ras is a joy to work with. Their communication and collaboration made the entire project a smooth and enjoyable experience.", tag: "Team Collaboration", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749879.jpg"},
name: "Emily Rodriguez",
date: "Nov 2023",
title: "Seamless Collaboration",
quote: "Beyond their incredible design skills, Ras is a joy to work with. Their communication and collaboration made the entire project a smooth and enjoyable experience.",
tag: "Team Collaboration",
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749879.jpg",
},
{ {
id: "4", id: "4", name: "David Kim", date: "Oct 2023", title: "Impactful Visual Design", quote: "Ras's visual design work is top-notch. They created an interface that not only looks stunning but also drives user engagement and conversion rates effectively.", tag: "Visual Design", avatarSrc: "http://img.b2bpic.net/free-photo/you-are-what-i-need-funny-cheerful-man-with-stubble-points-with-finger-gun-gesture-picks-up-someone-wears-casual-t-shirt-says-bang-you-killed-poses-vibrant-pink-wall_273609-42215.jpg", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038915.jpg"},
name: "David Kim",
date: "Oct 2023",
title: "Impactful Visual Design",
quote: "Ras's visual design work is top-notch. They created an interface that not only looks stunning but also drives user engagement and conversion rates effectively.",
tag: "Visual Design",
avatarSrc: "http://img.b2bpic.net/free-photo/you-are-what-i-need-funny-cheerful-man-with-stubble-points-with-finger-gun-gesture-picks-up-someone-wears-casual-t-shirt-says-bang-you-killed-poses-vibrant-pink-wall_273609-42215.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038915.jpg",
},
{ {
id: "5", id: "5", name: "Jessica Lee", date: "Sep 2023", title: "Innovative Problem Solver", quote: "Whenever we faced a design challenge, Ras always came up with innovative and practical solutions. Their creativity and problem-solving skills are truly impressive.", tag: "Problem Solving", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg", imageSrc: "http://img.b2bpic.net/free-photo/objects-stationery-workplace-workspace-equipment-concept_53876-31581.jpg"},
name: "Jessica Lee",
date: "Sep 2023",
title: "Innovative Problem Solver",
quote: "Whenever we faced a design challenge, Ras always came up with innovative and practical solutions. Their creativity and problem-solving skills are truly impressive.",
tag: "Problem Solving",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/objects-stationery-workplace-workspace-equipment-concept_53876-31581.jpg",
},
]} ]}
title="What Clients Say" title="What Clients Say"
description="Praise for design excellence, collaborative partnership, and impactful results from those I've worked with." description="Praise for design excellence, collaborative partnership, and impactful results from those I've worked with."
@@ -418,38 +244,20 @@ export default function LandingPage() {
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqDouble <FaqDouble
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={false}
faqs={[ faqs={[
{ {
id: "faq1", id: "faq1", title: "What is your typical design process?", content: "My process typically involves Discovery & Research, Ideation & Wireframing, Prototyping & Testing, and final UI Design & Handoff. Each phase is collaborative and tailored to project needs."},
title: "What is your typical design process?",
content: "My process typically involves Discovery & Research, Ideation & Wireframing, Prototyping & Testing, and final UI Design & Handoff. Each phase is collaborative and tailored to project needs.",
},
{ {
id: "faq2", id: "faq2", title: "How do you ensure user-centricity in your designs?", content: "User-centricity is at the core of my philosophy. I conduct thorough user research, create detailed personas and journey maps, and involve real users in testing throughout the design lifecycle."},
title: "How do you ensure user-centricity in your designs?",
content: "User-centricity is at the core of my philosophy. I conduct thorough user research, create detailed personas and journey maps, and involve real users in testing throughout the design lifecycle.",
},
{ {
id: "faq3", id: "faq3", title: "What tools and software do you use?", content: "I am proficient in Figma, Sketch, Adobe XD, Photoshop, Illustrator, and various prototyping tools like ProtoPie and Principle. I also use Miro for collaboration and brainstorming."},
title: "What tools and software do you use?",
content: "I am proficient in Figma, Sketch, Adobe XD, Photoshop, Illustrator, and various prototyping tools like ProtoPie and Principle. I also use Miro for collaboration and brainstorming.",
},
{ {
id: "faq4", id: "faq4", title: "Can I see more of your work or specific case studies?", content: "Absolutely! The 'Selected Projects' section highlights a few key projects. For a more in-depth look or specific case studies relevant to your needs, please contact me directly."},
title: "Can I see more of your work or specific case studies?",
content: "Absolutely! The 'Selected Projects' section highlights a few key projects. For a more in-depth look or specific case studies relevant to your needs, please contact me directly.",
},
{ {
id: "faq5", id: "faq5", title: "How do you handle feedback and revisions?", content: "Feedback is crucial for successful design. I facilitate structured feedback sessions and embrace an iterative approach, ensuring your vision is met while maintaining design integrity."},
title: "How do you handle feedback and revisions?",
content: "Feedback is crucial for successful design. I facilitate structured feedback sessions and embrace an iterative approach, ensuring your vision is met while maintaining design integrity.",
},
{ {
id: "faq6", id: "faq6", title: "What are your typical project timelines?", content: "Timelines vary depending on the scope and complexity of the project. After an initial consultation, I can provide a detailed proposal with estimated timelines and deliverables."},
title: "What are your typical project timelines?",
content: "Timelines vary depending on the scope and complexity of the project. After an initial consultation, I can provide a detailed proposal with estimated timelines and deliverables.",
},
]} ]}
title="Frequently Asked Questions" title="Frequently Asked Questions"
description="Find answers to common questions about my design process, services, and how we can work together on your next project." description="Find answers to common questions about my design process, services, and how we can work together on your next project."
@@ -461,90 +269,57 @@ export default function LandingPage() {
<ContactText <ContactText
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "radial-gradient", variant: "plain"}}
}}
text="Ready to transform your ideas into exceptional digital experiences? Let's connect and discuss how I can help your product succeed. Reach out today for a consultation!" text="Ready to transform your ideas into exceptional digital experiences? Let's connect and discuss how I can help your product succeed. Reach out today for a consultation!"
buttons={[ buttons={[
{ {
text: "Email Me", text: "Email Me", href: "mailto:hello@rasmere.com"},
href: "mailto:hello@rasmere.com",
},
{ {
text: "Schedule a Call", text: "Schedule a Call", href: "#"},
href: "#",
},
]} ]}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBase <FooterBase
className="bg-background"
columns={[ columns={[
{ {
title: "Navigation", title: "Navigation", items: [
items: [
{ {
label: "Home", label: "Home", href: "#home"},
href: "#home",
},
{ {
label: "About", label: "About", href: "#about"},
href: "#about",
},
{ {
label: "Projects", label: "Projects", href: "#projects"},
href: "#projects",
},
{ {
label: "Testimonials", label: "Testimonials", href: "#testimonials"},
href: "#testimonials",
},
{ {
label: "Contact", label: "Contact", href: "#contact"},
href: "#contact",
},
], ],
}, },
{ {
title: "Services", title: "Services", items: [
items: [
{ {
label: "UX Research", label: "UX Research", href: "#features"},
href: "#features",
},
{ {
label: "UI Design", label: "UI Design", href: "#features"},
href: "#features",
},
{ {
label: "Prototyping", label: "Prototyping", href: "#features"},
href: "#features",
},
{ {
label: "Design Systems", label: "Design Systems", href: "#features"},
href: "#features",
},
], ],
}, },
{ {
title: "Connect", title: "Connect", items: [
items: [
{ {
label: "LinkedIn", label: "LinkedIn", href: "https://linkedin.com/in/rasmere"},
href: "https://linkedin.com/in/rasmere",
},
{ {
label: "Dribbble", label: "Dribbble", href: "https://dribbble.com/rasmere"},
href: "https://dribbble.com/rasmere",
},
{ {
label: "Behance", label: "Behance", href: "https://behance.net/rasmere"},
href: "https://behance.net/rasmere",
},
{ {
label: "Email", label: "Email", href: "mailto:hello@rasmere.com"},
href: "mailto:hello@rasmere.com",
},
], ],
}, },
]} ]}

View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-font-family: var(--font-mulish), sans-serif;), sans-serif; font-family: var(--font-inter), sans-serif;), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-font-family: var(--font-mulish), sans-serif;), sans-serif; font-family: var(--font-mulish), sans-serif;), sans-serif;
} }

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #030128; --background: #f5f5f5;
--card: #241f48; --card: #ffffff;
--foreground: #ffffff; --foreground: #1c1c1c;
--primary-cta: #ffffff; --primary-cta: #1c1c1c;
--primary-cta-text: #030128; --primary-cta-text: #f5f5f5;
--secondary-cta: #131136; --secondary-cta: #ffffff;
--secondary-cta-text: #d5d4f6; --secondary-cta-text: #1c1c1c;
--accent: #44358a; --accent: #15479c;
--background-accent: #b597fe; --background-accent: #a8cce8;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);