Trying to use getStaticProps in a layout.js
I am working on an application and I would like to use getStaticProps in a layout .js file of my routing. I keep getting an error that this is not supported but in the documentation they say that it only works in pages but I get the same error if I try to use it in page.js. The project is Next v 13. How can a fix this or are there any alernatives?

Nextjs and Framer Motion
Is anyone else having issues using the Framer Motion library with their Nextjs project (pages router) ?
I am trying to add scroll animations using framer motion's scroll-triggered animations e,g
<motion.div...
Pseudo Element clipping over text
I have an H1 tag that is currently outlined. I'm trying to add a Pseudo element which fills the color with white (to get rid of outline). The goal is to make a hover fill effect. Any tips? Thanks!

How to remove the last section in WordPress?
Please see the video, I want to remove the last section using elementor, but there is no option to even chnage or delete anything in it, please help me to solve, thanks
Adding a color over an image
How can I add a color over an image, like in the picture, where this violet color appears over it. I embedded the image in HTML under <picture> tag.

browser not understanding css correctly
hey folks can anyone help me in debugging this weird CSS issue in the attached image as you can see I have applied.
```css
position: fixed;
bottom: 1rem;
right: 1rem;...

Doubt in Array and strings about the references
When we compare 2 different arrays even with the same value its false. and i get it, it is because they have different references
but with strings if i create 2 different variables and add the same value they are equal even with strict comparison ===
so is that means string don't have references?...

ideas on creating this design?
it basically caught my eye and i wanted to challenge myself in doing something like this, i decided the feature of grid along with subgrid would be the easiest and probably the most solid option,
any tips and tricks on how youd create this? i know it's a bit advanced design but i just found it challenging enough and overall fun way of learning the overlapping feature along with bunch of others such as the subgrid that the display: grid offers. ...
any tips and tricks on how youd create this? i know it's a bit advanced design but i just found it challenging enough and overall fun way of learning the overlapping feature along with bunch of others such as the subgrid that the display: grid offers. ...

feedback
just made this i need feedback for improvement on this https://codepen.io/vert-wilson/pen/GRzeVmm
How to place spans at the bottom of its container
Hi community. I would like for the spans which are marked in blue, to sit at the bottom of their container, which is annotated in developer tools. So far, I have only come up with an idea of wrapping the article in a flex, and then giving the paragraph which is above the spans, flex-grow of 1. However, I am exploring if there's another way to approach this. Now, I know I cannot use auto value for the top and bottom margin. Does anyone have an idea of how to do this?

Scrollable horizontal menu
I want the menu to be scrollable horizontally and everything in one row. Right now, each ul item is in two rows if it has two works, I want word next to word and ul next to ul. If anyone is able to help me out, I would appreciate it a lot. Tried multiple solutions, none worked.
Here is my development website: https://alysdev.xyz/returns/...
Can `@supports` be used to detect support for an at rule?
I want detect if the browser supports
@starting-style
.
So i need something like:
```css
@supports (@starting-style) {
/* ... */...Page/container width suddenly increases when content appears, but not due to the content size itself
https://orzcode.github.io/tasker/
This is my Notes app - it works fine on desktop but on mobile, as soon as a note appears on the page, the page/container width seems to overflow by a few rem which causes a horizontal scrollbar to appear. However, this does not seem to be due to the size of the note itself - I've tried testing by making the notes only 2rem in width, and it still happens. It also isn't due to padding on the container as far as I can tell.
But when no notes are present on the page, it stays at a fixed 100vw perfectly!...
I cannot compile my sass code?
I am trying to use the min() method in my scss but I get a compile error? Cannot use the properties...
Does sass support it or do I need to upgrade something?...
Simple but challenging: tag these properly
i mean my friend is a begineer and basically wrapped them all in divs and then used extremely long classnames xd
id use the h1 etc but given how many styles there are, i don't think going to like h5 is worth it in this case,
basically all im asking from you is to name it elegantly if you don't mind.....

Inervert Round Borders
Hi there, Today I came across a design challenge. I'm wondering if it's possible
to create a bottom-right card with CSS. Attached is a reference image.
Any guidance on achieving this would be greatly appreciated...

vertical align
Hey so, I'm probably just being stupid but, I can't get my div to vertically align to the center, even made my body a flex to try and get it to work ๐
Can anyone point out what I'm doing wrong pretty please? thanks โค๏ธ
codepen: https://codepen.io/BrightDN-the-sasster/pen/abXMqXq...
have to click on NavLink element twice for its active style to take effect
clicking on a NavLink element changes url but have to click the link twice for the changes to take effect